reactjs - How to add multiple markers using react-leaflet upon api call?

Question

In context to my previous question, MapContainer, TileLayer, Marker, Popup .. React Leaflet

How can I add multiple markers of places

Use case is that, when cycle is travelling from one place to other place, I need to show markets along the distance that bicycler has travelled.

question from:https://stackoverflow.com/questions/65625746/how-to-add-multiple-markers-using-react-leaflet-upon-api-call

Answer 1

Here is the example. On MapsComp:

• Declare a state variable to keep track of the markers

• Fetch the markers when the comp mounts and save them to the variable

• Loop over the markers under TileLayer to visualize them when markers variable has data

   class MapsComp extends React.Component {
     state = { markers: [] };
  
     componentDidMount() {
       fetch("https://api-adresse.data.gouv.fr/search/?q=paris&type=street")
         .then((response) => response.json())
         .then((response) => {
           console.log(response);
           this.setState({ markers: response.features });
         });
     }
   ...
   here loop overs markers data to visualzie them
   {this.state.markers.length > 0 &&
           this.state.markers.map((marker) => (
             <Marker
               position={[
                 marker.geometry.coordinates[1],
                 marker.geometry.coordinates[0]
               ]}
               icon={icon}
             >
               <Popup>{marker.properties.label}</Popup>
             </Marker>
           ))}
  }
  

Note that this is a free api used just for demonstrating the example.

Edit

I managed to reproduce your code. you don't need a service to fetch the json because you have it locally. Just import it.

import json from "../data/data.json";

and then assign it to the state variable (or even you could avoid that and use it directly, even better)

this.state = {
   geoData: json.Sheet1,
};

Inside renderMarkers method you have a dictionary so you need its values so use Object.values to extract the coordinates

renderMarkers = () => {
    let latLong: Array<Array<any>> = [];
    Object.values(this.state.geoData).map((val, index) => {
      let dt1: Array<any> = [];
      dt1.push(Number(val.lat), Number(val.lng));
      latLong.push(dt1);
    });
    return latLong;
  };

last but not least visualize the points as Circles and not as Markers use preferCanvas flag on map container because you have 26000 markers. Leaflet cannot handle such an amount of markers so render them as circle markers. You will still see that the performance is not the best but for sure better than using markers and not canvas.

I am not going to get into the reasons of this behavior as it is out of this questions' scope, as you have not mentioned that you have such a big amount of points in the first place.

 <MapContainer
          ...
          preferCanvas
  >
...
     {this.renderMarkers().length > 0 &&
                this.renderMarkers().map((value, index) => {
                  return (
                    <CircleMarker center={[value[1], value[0]]} key={index}>
                      <Popup>{index} Sydney, Hi!!!</Popup>
                    </CircleMarker>
                  );
     })}
  

This is the result of the rendering: