I'm making travel-log-app in React using react-map-gl. I have added markers and Popups from mapbox and I want popup to show when i click on marker. But its not working and in console i m getting this error: "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT https://events.mapbox.com/events/v2?access_token=myToken" (note: in place of myToken i'm seeing my access token given by mapbox).
Sometimes it shows " POST https://events.mapbox.com/events/v2?access_token= net::ERR_BLOCKED_BY_CLIENT ". Following is my code :
import * as React from 'react';
import Map, {Marker,Popup} from 'react-map-gl';
import pin from "./pin.png";
function App() {
const [viewport,setViewport] = React.useState({
longitude: -100,
latitude: 40,
zoom: 3.5,
});
const [showPopup, setShowPopup] = React.useState(false);
return <Map
mapboxAccessToken = {process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
{...viewport}
onMove={evt => setViewport(evt.viewport)}
style={{width: '100vw',height: '100vh'}}
mapStyle="mapbox://styles/mapbox/streets-v9"
>
<Marker longitude={-100} latitude={40} anchor="bottom" >
<img src={pin} onClick={() => setShowPopup(true)} style={{width:'24px',height:'24px'}} alt="marker" />
{showPopup && (
<Popup longitude={-100} latitude={40}
anchor="top"
onClose={() => setShowPopup(false)}
>
You are here
</Popup>)}
</Marker>
</Map>;
}
export default App;
On visting the link "https://events.mapbox.com/events/v2?access_token=myToken" i m getting {"message": "Not found"}