{"id":9497,"date":"2024-02-06T04:57:51","date_gmt":"2024-02-06T04:57:51","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9497"},"modified":"2024-02-06T05:10:06","modified_gmt":"2024-02-06T05:10:06","slug":"react-leaflet-markercluster-is-not-working","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/react-leaflet-markercluster-is-not-working","title":{"rendered":"react-leaflet-markercluster Is Not Working"},"content":{"rendered":"

The react-leaflet-markercluster package is no longer supported, having been deprecated. Instead of using the deprecated react-leaflet-markercluster package, we recommend utilizing the react-leaflet-cluster<\/a> package, which provides support for marker grouping similar to the now-deprecated package.<\/p>\n

Installation:<\/h3>\n
Using yarn:\r\nyarn add leaflet react-leaflet react-leaflet-cluster\r\n\r\nUsing npm:\r\nnpm i leaflet react-leaflet react-leaflet-cluster\r\n<\/pre>\n
Dependencies:<\/h3>\n
\r\n{ \r\n \"react\": \"^18.2.0\",\r\n \"leaflet\": \"^1.9.4\",\r\n \"react-leaflet\": \"^4.2.1\"\r\n}\r\n<\/pre>\n
Before writing any code, make sure to include the Leaflet CSS file in the head section of your document:<\/p>\n
\r\n\r\n<\/pre>\n
Usage:<\/h3>\n
\r\nimport { MapContainer, TileLayer, Marker } from 'react-leaflet';\r\nimport MarkerClusterGroup from 'react-leaflet-cluster';\r\nimport L from \"leaflet\";\r\n\r\nconst position = [-41.975762, 172.934298];\r\nconst addressPoints= [\r\n     [-37.8839, 175.3745188667, \"571\"],\r\n     [-37.8869090667, 175.3657417333, \"486\"],\r\n     [-37.8894207167, 175.4015351167, \"807\"],\r\n     [-37.8927369333, 175.4087452333, \"899\"],\r\n     [-37.90585105, 175.4453463833, \"1273\"],\r\n     [-37.9064188833, 175.4441556833, \"1258\"],\r\n     [-37.90584715, 175.4463564333, \"1279\"],\r\n     [-37.9033391333, 175.4244005667, \"1078\"],\r\n     [-37.9061991333, 175.4492620333, \"1309\"],\r\n     [-37.9058955167, 175.4445613167, \"1261\"],\r\n  ];\r\n\r\nconst customIcon = new L.Icon({\r\n iconUrl: require(\"..\/assets\/images\/location.svg\").default,\r\n iconSize: new L.Point(40, 47),\r\n});\r\n\r\nfunction ReactLeaflet() {\r\n   return (\r\n     \r\n       \r\n       \r\n          {addressPoints.map((address, index) => (\r\n            \r\n         ))}\r\n      <\/MarkerClusterGroup>\r\n   <\/MapContainer>\r\n );\r\n}\r\nexport default ReactLeaflet;\r\n<\/pre>\n
Call ReactLeaflet<\/strong> component to wherever you want to see the below output:
\n\"ReactLeaflet\"<\/p>\n
For a comprehensive guide and API details, please refer to this link<\/a>. Ensure that you have installed react-leaflet and leaflet packages correctly.<\/p>\n","protected":false},"excerpt":{"rendered":"
The react-leaflet-markercluster package is no longer supported, having been deprecated. Instead of using the deprecated react-leaflet-markercluster package, we recommend utilizing the react-leaflet-cluster package, which provides support for marker grouping similar to the now-deprecated package. Installation: Using yarn: yarn add leaflet react-leaflet react-leaflet-cluster Using npm: npm i leaflet react-leaflet react-leaflet-cluster Dependencies: { “react”: “^18.2.0”, “leaflet”: “^1.9.4”, […]<\/p>\n","protected":false},"author":1,"featured_media":9498,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9497","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9497"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9497"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9497\/revisions"}],"predecessor-version":[{"id":9501,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9497\/revisions\/9501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9498"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}