Skip to content
Advertisement

Add a Mapbox marker on double click event using React

I’m having some difficulties making my code work. I’m working on an interactive map and I want to add a function that when users “double click” it allows them to add a marker, the function is supposed to pull the long and lat from the map itself.

I have this for the part where the function is used:

   <Map
    initialViewState={{
      center: [0,0],
      zoom: 0.7,
    }}
    style={{width: "100vw", height: "100vh"}}
    mapStyle="mapbox://styles/mapbox/streets-v11"
    mapboxAccessToken={process.env.REACT_APP_TOKEN}
    onDblClick = {handleAddClick}
>

And this is where my function is written:

  const handleAddClick = (e) =>{
    const [longitude, latitude] = e.lngLat;
    setNewIdea({
      lat: latitude,
      long: longitude,
    });
  };

This is where I call the function:

{newIdea && (
     <Popup 
    longitude={newIdea.long} 
    latitude={newIdea.lat}
    anchor="left"
    closeButton ={true}
    closeOnClick={false}
    onClose={() => setNewIdea(null)}>
      Hey
    </Popup> 
    )}
    </Map>

The app runs well but nothing happens when I double click. If I open the console in the browser I get this error every time I double click:

Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
    at handleAddClick (App.js:33:1)

Not sure what I’m doing wrong, any help would be much appreciated!

Advertisement

Answer

If the error is coming from this line:

const [longitude, latitude] = e.lngLat;

Then there is a good chance that e.lngLat is not an array as you’re expecting. Where is that field getting set? It’s likely not getting set in the way you’re expecting.

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement