2

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"}

0 Answers0