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.