{"library":"react-leaflet-markercluster","title":"React Leaflet Markercluster","description":"react-leaflet-markercluster is a dedicated React component that provides an intuitive wrapper for the popular Leaflet.markercluster plugin, designed specifically for use within react-leaflet applications. It addresses the common challenge of visualizing a large number of markers on a map by dynamically grouping them into clusters at various zoom levels, preventing clutter and improving map performance and user experience. The current stable release is v4.2.1, with v5.0.0-rc.0 currently in a release candidate phase to support React 19 and react-leaflet v5. The package aims for stability and compatibility with major react-leaflet versions, often releasing new major versions to align with its peer dependencies. Its primary differentiator is its seamless integration into the react-leaflet ecosystem, allowing developers to simply wrap existing Leaflet Marker components within a `<MarkerClusterGroup />` to enable clustering functionality without complex imperative Leaflet API calls, while also exposing full control over Leaflet.markercluster options via component props.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-leaflet-markercluster"],"cli":null},"imports":["import MarkerClusterGroup from 'react-leaflet-markercluster';","import 'react-leaflet-markercluster/styles';","import type { MarkerClusterGroupProps } from 'react-leaflet-markercluster';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';\nimport MarkerClusterGroup from 'react-leaflet-markercluster';\n\n// Ensure Leaflet and MarkerClusterGroup styles are loaded\nimport 'leaflet/dist/leaflet.css';\nimport 'react-leaflet-markercluster/styles';\n\nfunction MyMapComponent() {\n  const markers = [\n    { position: [49.8397, 24.0297], id: 1, name: 'Lviv' },\n    { position: [52.2297, 21.0122], id: 2, name: 'Warsaw' },\n    { position: [51.5074, -0.0901], id: 3, name: 'London' },\n    { position: [50.0880, 14.4208], id: 4, name: 'Prague' },\n    { position: [48.8566, 2.3522], id: 5, name: 'Paris' },\n    { position: [40.7128, -74.0060], id: 6, name: 'New York' },\n    { position: [34.0522, -118.2437], id: 7, name: 'Los Angeles' },\n    { position: [35.6895, 139.6917], id: 8, name: 'Tokyo' }\n  ];\n\n  return (\n    <MapContainer\n      className=\"markercluster-map\"\n      center={[51.0, 19.0]}\n      zoom={4}\n      maxZoom={18}\n      style={{ height: '90vh', width: '100%' }} // Inline style for quick demo\n    >\n      <TileLayer\n        url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n        attribution='&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors'\n      />\n\n      <MarkerClusterGroup chunkedLoading>\n        {markers.map((marker) => (\n          <Marker key={marker.id} position={marker.position}>\n            <Popup>{marker.name}</Popup>\n          </Marker>\n        ))}\n      </MarkerClusterGroup>\n    </MapContainer>\n  );\n}\n\nexport default MyMapComponent;","lang":"typescript","description":"This quickstart demonstrates how to set up a basic Leaflet map with `react-leaflet` and enable marker clustering using `react-leaflet-markercluster`, showing multiple markers that group dynamically on zoom.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}