TypeError: Invalid attempt to destructure non-iterable instance > when adding markers

[jabusir]

Hi, I'm attempting to add markers to my map, but I keep getting this error when using the Marker component from react-simple-maps.

I have a functional component with a hook that is an array of objects, each with the property of "name", and "coordinates". In the return of my functional component, I map over the hook called markers, and return a Marker component for each with a key, and coordinates is set to marker.coordinates which has already been double checked to be an array of two numbers.

I've attached my code. Could really use some help thanks.

[zimrick]

Hi @jabusir,

The issue I see with the code above is that the coordinates you have are formatted in a way that will not work with react-simple-maps. They need to be [longitude, latitude]. In the case of San Jose that would be [-121.8863, 37.3382], since San Jose is 121.8° West of the Prime Meridian. Currently, your marker is rendered outside the defined area for the Albers USA projection. With that specific projection this will lead to errors.

So you have to reverse the order of your coordinates and make sure that the longitude is negative, otherwise [121.8, 37.3] will give you a marker somewhere in Shandong province in China, which will also result in an error, since it's outside the bounds of Albers USA.

Hope this helps!

[jabusir]

Thanks @zimrick,

I eventually figured out how to get it working, but couldn't figure out what the logic behind it was. Thank you for explaining.

[XHIIHIIHX]

How can you tell if the coordinates are valid before it throws the error?

[PoojaSSW]

hi @jabusir : I'm facing similar issue. Do you mind sharing your final solution that is working for you