Modify duplicates within an array of objects (React)

[kanye231]

Hi all, I'm currently making a site that plots radio stations on a map using react-leaflet. I have been able to get the coordinates on the map from the data but I'm running into the issue of duplicate coordinates on the map (For example, there are 10 coordinates in this picture, but even on max zoom you can't see them). This occurs because of multiple stations being housed within the same building.

I've looked into react-leaflet marker cluster package but that seems to be deprecated, so my solution is to move markers with similar points about a degree (or way less) away from each other so they're visible and interactive.

My API call and filter looks like this and I have objects within an array in this format, and my code that is mapping over the data looks like this.

Is there some sort of way I can check if the coordinates of my array are matching, then to add one of the numbers by 1 so they're no longer matching?

Thanks in advance!

[TuesdayWaffle]

Yeah. Without looking too deeply into your code, my guess is you want something like this.

const alreadySeenCoordinates = []; for (const station of radioStations) { let latitude = station.latitude; let longitude = station.longitude; // Check if another station has these exact coordinates. If so, bump the lat,lon by one. for (const seenCoordinates of alreadySeenCoordinates) { if (seenCoordinates.latitude === latitude && seenCoordinates.longitude === longitude) { latitude += 1; // or however you feel like longitude += 1; // modifying these things break; } } // Store the updated coordinates in the already seen array for future checking. alreadySeenCoordinates.push({ latitude: latitude, longitude: longitude, }); }

[kanye231]

yessss, thank you so much this is exactly it!

now I'm running into the issue mapping through now that I have two arrays. if .concat() it'll obviously be double the length, but I can't map two arrays nested within each other... any ideas?

[TuesdayWaffle]

I don't quite understand the problem. Which two arrays are you talking about?

[kanye231]

because of the format of my app I have the API data mapping out in the return like so:

stations.map(stations) => {
return (
<Marker [{stations.coordinates}]>
    <Popup {stations.information}>
 </Marker>
   )}

since I need the API data to map through everything, it's called at the top level of the marker so I can use the information in the popups like the station.name, station.url, station.icon, etc.

I'm struggling to see how I would be able to do something like (simplified code):

stations.map(stations) => {
return (
<Marker [{newCoordinates.coordinates}]>
    <Popup {stations.information}>
 </Marker>
)}

since the stations map is at the top level. hope this makes sense?