CODEWITHSUNDEEP
reactjsleafletmapsgoogle-maps-markersreact-leaflet
Firas SCMP
Firas SCMP

Reputation: 541

Is it possible to display react leafletjs markers on specific zoom levels?

I'm using react Leaflet js map, and I'm displaying markers of fetched data from my database on the map, but the issue is that I have kind of 5000 markers and it's a lot to display on zoom level 9, so is there some way to display the markers on specific zoom levels?

Upvotes: 0

Views: 1257

Answers (1)

Muhammad Habibpour
Muhammad Habibpour

Reputation: 337

yes why not?

you can store zoom of map like this and set a condition to show Marker

const [Zoom, setZoom] = useState(9);

console.log(Zoom);

const MapEvents = () => {
  useMapEvents({
    zoomend() { // zoom event (when zoom animation ended)
      const zoom = map.getZoom(); // get current Zoom of map
      setZoom(zoom);
    },
  });
  return false;
};

return (
  <MapContainer center={[33.8735578, 35.86379]} zoom={9} scrollWheelZoom={true}>
    <TileLayer
      attribution='&copy; <a 
         href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />

    {/* your events on map */}
    <MapEvents /> 

    { Zoom >= 13 ? <Marker> your marker options and params </Marker> : null }

  </MapContainer>
);

Upvotes: 3

Related Questions