{"library":"react-leaflet-cluster","title":"React Leaflet Marker Cluster","description":"react-leaflet-cluster is a plugin that integrates Leaflet.markercluster functionality into React-Leaflet applications. It provides a `MarkerClusterGroup` component for easily creating animated marker clusters on maps. The current stable version is 4.1.3, with recent updates (v4.1.0) focusing on performance improvements for layer additions. The library maintains an active release cadence, frequently updating to support the latest versions of its core peer dependencies, including React 19, React-Leaflet 5, and Leaflet 1.9.x. Key differentiators include robust TypeScript support, explicit compatibility with Next.js by requiring manual CSS imports, and a strong focus on keeping up with its ecosystem's major version bumps, making it a reliable choice for modern React mapping projects requiring marker clustering capabilities.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-leaflet-cluster"],"cli":null},"imports":["import MarkerClusterGroup from 'react-leaflet-cluster'","import 'react-leaflet-cluster/dist/assets/MarkerCluster.css'\nimport 'react-leaflet-cluster/dist/assets/MarkerCluster.Default.css'","import L from 'leaflet'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { MapContainer, TileLayer, Marker } from 'react-leaflet';\nimport MarkerClusterGroup from 'react-leaflet-cluster';\nimport L from 'leaflet';\n\nimport 'leaflet/dist/leaflet.css';\nimport 'react-leaflet-cluster/dist/assets/MarkerCluster.css';\nimport 'react-leaflet-cluster/dist/assets/MarkerCluster.Default.css';\n\n// Configure default marker icons (required since v3.1.0)\ndelete (L.Icon.Default as any).prototype._getIconUrl;\nL.Icon.Default.mergeOptions({\n  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',\n  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',\n  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png'\n});\n\nconst position = [51.505, -0.09]; // London coordinates\n\nfunction App() {\n  // Generate a large number of random markers for clustering demonstration\n  const markers = Array.from({ length: 500 }, (_, i) => ({\n    position: [\n      position[0] + (Math.random() - 0.5) * 0.1,\n      position[1] + (Math.random() - 0.5) * 0.2\n    ],\n    key: `marker-${i}`\n  }));\n\n  return (\n    <MapContainer center={position} zoom={10} style={{ height: '100vh', width: '100%' }}>\n      <TileLayer\n        attribution='&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'\n        url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n      />\n      <MarkerClusterGroup chunkedLoading>\n        {markers.map((marker) => (\n          <Marker key={marker.key} position={marker.position} />\n        ))}\n      </MarkerClusterGroup>\n    </MapContainer>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates how to set up a basic Leaflet map with `react-leaflet-cluster`, including required CSS imports and manual default marker icon configuration. It generates 500 random markers to showcase the clustering functionality.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}