CODEWITHSUNDEEP
javascriptreactjsleafletreact-leafletleaflet.markercluster
Gregory
Gregory

Reputation: 25

How To Use Leaflet.markercluster in a Layer Group

So I'm trying to group my markers on my Leaflet Map using Leaflet.markercluster. Currently, I add my markers using a child in my MapContainer in my App() function:

return (
    <MapContainer
      ...
      <AddMarkers />
    </MapContainer>
);

For context, my AddMarkers function looks something like this:

function AddMarkers() {
  ...
  return (
    <LayerGroup>
      {users.map((user) => (
          <Marker
            ...
          </Marker>
        ))}
    </LayerGroup>
  );
}

In the Leaflet.markercluster documentation, they explain that you can add a marker cluster using the following idea:

var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
... Add more layers ...
map.addLayer(markers);

How would I go about using the L.markerClusterGroup() method in my code? Would I have to rewrite how I add markers to my MapContainer?

Upvotes: 1

Views: 772

Answers (1)

Gregory
Gregory

Reputation: 25

This was solved by wrapping the Markers within a MarkerClusterGroup tag.

For example:

<MarkerClusterGroup>
      <Marker />
</MarkerClusterGroup>

Upvotes: 0

Related Questions