I'm using Popups on my Marker elements. Inside of the popup there's a button the user can click which results in a state change (locations can be marked / unmarked). The popup should remain open when the button is clicked. This is working fine without the MarkerClusterGroup element. As soon as I put the MarkerClusterGroup around, the popup closes when the button is clicked.

Any ideas? Here's my (simplified) setup:

import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import MarkerClusterGroup from 'react-leaflet-cluster';
import { v4 as uuidv4 } from 'uuid';
import ListCard from '../ListCard';

export default function MapView({ spots, onClick, icon }) {

  return (
    <div>
      <MapContainer
        style={{ height: '500px', width: '1000px' }}
        minZoom={14}
        zoom={14}
        maxZoom={18}
        scrollWheelZoom={true}
        attributionControl={true}>
        <MarkerClusterGroup maxClusterRadius={40} key={uuidv4()} removeOutsideVisibleBounds={false}>
          {spots &&
            spots.map((spot, index) => {
              const content = (
                <>
                  <div className="font-bold">{spot?.title}</div>
                </>
              );
              return spot?.geoLocation ? (
                <Marker position={spot.geoLocation} icon={icon} key={index}>
                  <Popup minWidth={200}>
                    <ListCard
                      data={spot}
                      key={spot.id}
                      onClick={onClick}
                      content={content}
                      isSelected={spot.isSelected}
                    />
                  </Popup>
                </Marker>
              ) : (
                ''
              );
            })}
        </MarkerClusterGroup>
      </MapContainer>
    </div>
  );
}

error - /home/sinnrrr/Work/loonify/node_modules/leaflet.markercluster/dist/MarkerCluster.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: ../../node_modules/react-leaflet-cluster/lib/index.js
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json

the more you can read at the link, provided in the upper code part (https://err.sh/next.js/css-npm)

There is an update to React Leaflet with support for Leaflet v1.8 and React v18. Is it possible to use React Leaflet Cluster with it? The peer dependency to React v17, prevents installation with NPM.

Leaflet v1.8 solves some problems with current iOS versions.

getting this error at runtime. any ideas?

Hello,

Unlike your demo, on my side the "iconCreateFunction" method is called for each "Marker" child. This is not efficient at all. More exactly it is when the component re-renders.
In your demo there is only one cluster and "iconCreateFunction" is only called once, then called again when zooming.
In my code I only have one cluster but "iconCreateFunction" is called 6 times (Marker count).
Can you try on your side by causing a new render and see if it does the same?

Thanks in advance

I am not sure if the problem is with React or the algorithm but the app crashes (or becomes very slow) with 50K+ objects. Can you explain if the problem is with React. Or can you develop a stupid version of clustering if the problem is with the algorithm

When I load up the 10000 markers example it says

Maximum call stack size exceeded

Hello, I saw here https://codesandbox.io/s/beautiful-pike-j2l0w that you created the custom cluster UI using the iconCreateFunction prop and createClusterCustomIcon function that returns L.divIcon function.

<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon}>

...

const createClusterCustomIcon = function (cluster: MarkerCluster) {
  return L.divIcon({
    html: `<span>${cluster.getChildCount()}</span>`,
    className: 'custom-marker-cluster',
    iconSize: L.point(33, 33, true),
  })
}

It's the same with the code from another library here https://github.com/YUzhva/react-leaflet-markercluster.

const createClusterCustomIcon = function (cluster) {
  return L.divIcon({
    html: `<span>${cluster.getChildCount()}</span>`,
    className: 'marker-cluster-custom',
    iconSize: L.point(40, 40, true),
  });
}

...

<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} />

My question is does your library support using custom dynamic component for example pie chart component for the cluster icon?

I had a problem implementing it here https://stackoverflow.com/questions/71522257/useeffect-hook-isnt-triggered-inside-reactdomserver-rendertostring

react-leaflet-markercluster already has widespread adoption and an active repository that includes a 3.0.0-rc1 release for react-leaflet v3 support.

Why not modify the existing library to include TypeScript support and create a pull request?

Hello,

At line 8 in src/index.tsx I saw comment //webpack failing when loading leaflet marker icon
What if load marker icon to assets folder in src and make import from there?
For example:
iconRetinaUrl: require('./assets/marker-icon-2x.png').default,
iconUrl: require('./assets/marker-icon.png').default,
shadowUrl: require('./assets/marker-shadow.png').default,

I made something like this at my PR

Hello,

Thank you for this library, I am trying to use it with NextJS but I have troubles making it work.
NextJS doesn't let me use the library because CSS cannot be imported within your lib. See error below

./node_modules/react-leaflet-cluster/lib/assets/MarkerCluster.Default.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-leaflet-cluster/lib/index.js

It looks like this wrapper, although very nice, doesn't work well with Popups, which do not get opened.

• Open the Custom marker cluster example from the home page.
• Go to the Sandbox Info tab and update react-leaflet to the latest, 4.0.2.
• Change one of the markers so it re-renders, e.g. change the string "a title".
• A hooks order error appears:

Warning: React has detected a change in the order of Hooks called by ForwardRef(ContainerComponent). This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useRef                     useRef
3. useEffect                  useRef
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at ContainerComponent (https://j2l0w.csb.app/node_modules/@react-leaflet/core/lib/component.js:15:52)
    at div
    at MapContainerComponent (https://j2l0w.csb.app/node_modules/react-leaflet/lib/MapContainer.js:49:21)
    at div
    at App 
    in ContainerComponent (created by App)
    in App

(I've also seen this locally with the latest version of create-react-app and its dependencies, React 1.8, and Leaflet 1.8.0.)

Hi,

Is it possible to cluster polygons?

No compile error but getting this runtime error I wrote in the title.

My packages:
"dependencies": { "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mui/material": "^5.11.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "leaflet": "^1.8.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-leaflet": "^4.0.1", "react-leaflet-cluster": "^2.1.0", "react-leaflet-marker": "^2.1.0", "react-router-dom": "^6.5.0", "react-scripts": "5.0.1", "sass": "^1.56.2", "typescript": "^4.9.4" },

This is how my cluster group looks like:
<MarkerClusterGroup> <Marker position={{ lat: 48, lng: 20.7 }} icon={iconPerson}></Marker> <Marker position={{ lat: 48.4, lng: 20.5 }} draggable icon={iconPerson}></Marker> </MarkerClusterGroup>

Appreciate any feedback, I might miss something trivial, but I suspect that there is some incompability with the versions. I have tried the react-leaflet-markercluster lib too, but I hit walls there too. I just would need some clustering solution instead implementing the wheel again...

Hey,
Thank you for your work in this library!
Currently migrating from react-leaflet-markercluster and really enjoying the prospect of this new lib.

However, I came across a feature that would be awesome to have.
More details below.

Objective:
Like the Marker's customIcon function, find a way to easily change the properties of the clusterCustomIcon
(maybe with an implementation of refreshing clusters)

Current solution (find example below):

• save each clusters reference
• trigger the change on useEffect, by accessing the cluster ref

Problems with this solution:

• not feasible if we have a lot of clusters and just want to highlight one cluster, based on its children
• example: click a button to change the cluster that has "Marker X"

Example:

• click the highlight button to change the border of the icons
• works well with customIcon for the Marker (runs on re-render)
• does not work for iconCreateFunction in MarkerClusterGroup (its only called once)

https://codesandbox.io/s/elegant-bohr-zzi05?file=/src/App.tsx

Hi!
I kept getting this error message when I tried to use the latest version of react-leaflet-cluster.
Is there anyone know how to fix this issue?

I import the library:

import MarkerClusterGroup from 'react-leaflet-cluster'

then use it:

<MapContainer>

      <MarkerClusterGroup chunkedLoading>
        {markerIds.map((markerId) => (
            <Marker key={markerId} markerId={markerId} />
        ))}
      </MarkerClusterGroup>
      
</MapContainer>

and it works locally with vite

but if I do vite build I get the error after running the app: Uncaught TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')

"vite": "^4.2.1",
"react-leaflet": "^4.2.1",
"react-leaflet-cluster": "^2.1.0",
"leaflet": "^1.9.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",

Hi there,

Is there a way to use this package within a NextJS app ?
I cannot use it without receiving this error :

Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules/react-leaflet-cluster/lib/index.js

thx

When running the server using vite the error below is dispatched.

To solve this:

index.tsx

require("./assets/MarkerCluster.css?inline");
require("./assets/MarkerCluster.Default.css?inline");

Make sense to add this ?inline suffix?

In the readme, there is a link with name 10000 marker, which leads to here: https://codesandbox.io/s/hidden-breeze-nrd3e?fontsize=14&hidenavigation=1&theme=dark
But it doesnt have 10000 markers.

I have a problem when component is re-render because of the assignment of cords to url. By that, my popups flash on the map as many times as re-render occurs. Before using this component, everything was perfectly fine

I'm struggling to squeeze performance out of the marker cluster in a situation where it shouldn't even be rerendering.

     <MarkerClusterGroup chunkedLoading={true}>
        {filteredMarkers?.map((c) => (
          <Marker key={c.index} position={[c.lat, c.lng]} title={c.skoolName}>
          </Marker>
        ))}
      </MarkerClusterGroup>

filteredMarkers is an array which gets modified by an external slider, so I can justify that there's some jerking when the array changes in length. But why am i witnessing slowdowns even when filteredMarkers stays exactly the same ? (agreeably, the object reference changes but the values tay exactly the same and the key prop should take care of this).
The array size is a few thousand elements.
Yet the browser is doing an unreasonable amount of calls to addLayer in MarketClousterGroup.js. (trace attached)
Trace-20240424T141121.zip

My code:

import React from "react"

import MarkerClusterGroup from 'react-leaflet-cluster'
import { MapContainer, Marker, TileLayer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'


export default function SiteMap (props) {

  const zoom = 5
  const position = {
    lat: 46.71109,
    lng: 1.7191036,
  }

  const addressPoints= [
    [46.71109, 1.7191036, "571"],
    [46.73211, 1.7191038, "572"],
    [46.76413, 1.8191040, "573"],
    [46.82615, 1.8191042, "574"],
    [46.88820, 1.9191044, "575"],
    [46.93925, 1.9191046, "576"],
    [46.96130, 2.1191048, "577"],
    [47.12340, 2.2191050, "578"],
    [47.43145, 2.4191052, "579"],
  ]

  return (
    <>
      <MapContainer className="content-tab" center={position} zoom={zoom} scrollWheelZoom={false}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>

        <MarkerClusterGroup>
          {addressPoints.map((address) => (
            <Marker key={address[2]} position={[address[0], address[1]]} />
          ))}
        </MarkerClusterGroup>

      </MapContainer>
    </>
  )
}

My package.json:

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "build": "node build.js",
    "watch": "node build.dev.js",
    "serve": "http-server -p 9000 -P http://localhost:9000?"
  },
  "author": "",
  "license": "MIT",
  "type": "module",
  "dependencies": {
    "react": "^18.2.0",
    "leaflet": "^1.9.4",
    "react-leaflet": "^4.2.1",
    "react-leaflet-cluster": "^2.1.0",
    "react-router-dom": "^6.12.1",
  },
  "devDependencies": {
    "http-server": "^14.1.1",
    "esbuild": "^0.18.2",
    "esbuild-plugin-sass": "^1.0.1"
  }
}

The error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

I don't understand why..

Thanks for the help

Hey, does it work with React 17?

Hello,

Seems like it can't work with nextjs:

Dunno is it actually your issue, but declaration for leaftlet.markercluster is not "merged" and I don't see types.

Mistake

• I have an issue that can't show pop-up inside the cluster, how can I resolve it?

As @tirli mentioned in this comment, this project uses the GPLv3 license. This is notable in it stipulates that any software which uses this library cannot be closed source, and thus this library cannot be used in closed-source projects.

This is compared to the react-leaflet-markercluster, which utilizes the MIT License.

Is this distinction intentional?

When interrupting a map.flyTo call. (through clicking and zooming) the markers don't get clustered.

When I build project catch error

window is not defined

package.json
"dependencies": {
"leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3",
"next": "14.1.0",
"react": "^18",
"react-dom": "^18",
"react-google-recaptcha": "^3.1.0",
"react-hook-form": "^7.50.1",
"react-leaflet": "^4.2.1",
"react-leaflet-cluster": "^2.1.0",
"react-slider": "^2.0.6",
"swiper": "^11.0.5"
},

component

`
'use client';
import 'leaflet/dist/leaflet.css';
import MarkerClusterGroup from "react-leaflet-cluster";
import {MapContainer, Marker, Popup, TileLayer} from "react-leaflet";

import logo from '@/assets/images/images/small-logo.png'
import cart from "@/assets/images/vectors/cart.svg";
import SecondaryButton from "@/components/Buttons/SecondaryButton/SecondaryButton";

import Image from "next/image";

export default function MyMap() {

const position = [50.27, 30.31]
const addressPoints = [
    {
        title: 'Аптека №1',
        position: [50.27, 30.31],
        id: 0,
    },
    {
        title: 'Аптека №2',
        position: [50.27, 30.31],
        id: 1,
    }
    ,
    {
        title: 'Аптека №3',
        position: [50.27, 30.31],
        id: 2
    }, {
        title: 'Аптека №5',
        position: [50.270797093446326, 30.3174383238337],
        id: 3
    }
    ,
    {
        title: 'Аптека №6',
        position: [50.270797093446326, 30.3174383238337],
        id: 4
    },
    {
        title: 'Аптека №6',
        position: [50.274179540369104, 30.312794202742495],
        id: 4
    }


]

const createClusterCustomIcon = function (MarkerCluster) {
    return L.divIcon({
        iconSize: [52, 52],
        iconAnchor: [52 / 2, 52 + 9],
        className: "",
        html: `<div class="w-[52px] h-[52px] flex items-center justify-center text-[22px] bg-white rounded-full border border-[#0EB71F] leading-none">${MarkerCluster.getChildCount()}</div>`,
    })
}

return (


    <MapContainer center={position} zoom={15}
                  scrollWheelZoom={false}
                  whenCreated={map => setInterval(() => {
                      map.invalidateSize()
                  }, 100)}
                  style={{width: '100%', height: '100%'}}>
        <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
        />
        <MarkerClusterGroup

        >
            {addressPoints.map((address) => (
                <Marker key={address.id} position={address.position} icon={L.divIcon({
                    iconSize: [24, 24],
                    iconAnchor: [24 / 2, 24 + 9],
                    className: "",
                    html: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

                    <Popup className={'border border-[#0EB71F] bg-white rounded-xl  '}>
                        <div className={'flex gap-3 w-[292px] p-3'}>
                            <div className={'w-[34px] h-[34px] rounded-full flex-shrink-0'}>
                                <Image src={logo}/>
                            </div>
                            <div className={'w-[163px]'}>
                                <div className={'!space-y-2  mb-3'}>
                                    <p className={'text-sm font-semibold !m-0'}>
                                        {address.title}
                                    </p>
                                    <p className={'text-sm underline text-[#262339] decoration-[#262339] !m-0'}>Київ,
                                        вул
                                        Драйзера,
                                        8</p>
                                    <p className={'text-sm !m-0'}><b className={'font-semibold'}>В
                                        наявності:</b> 9шт</p>
                                    <p className={'text-sm !m-0'}>Пн-Нд 7.00-22.00</p>
                                </div>
                                <SecondaryButton name={'Замовити тут'} icon={cart} extraClassName={''}/>
                            </div>
                        </div>


                    </Popup>
                </Marker>
            ))}
        </MarkerClusterGroup>


    </MapContainer>
)

}
`

const Map = useMemo(() => dynamic( () => import('@/components/Map/Map'), { loading: () => <p>A map is loading</p>, ssr: true } ), [])

Hello, thank you for the great work over this package.

The bug is, the very first time I click on a popup, the handlePopupClose function is fired two times before actually opening the popup. It is then properly fired when closing the popup.
The problem stops after the first popup.

import MarkerClusterGroup from 'react-leaflet-cluster'

<MarkerClusterGroup>
  <Marker>
    <Popup eventHandlers={{ remove: handlePopupClose }}>
      // ...
    </Popup>
  </Marker>
</MarkerClusterGroup>

leaflet 1.9.3
leaflet.markercluster 1.5.3
react 18.2.0
react-leaflet 4.2.1
react-leaflet-cluster 2.1.0

The bug disappear when I delete <MarkerClusterGroup>

Do you know any workaround to this problem ?
Any idea how you can patch this ?

Again thanks for the great work with this package

Hi,

the area covered by a cluster is shown on hover - it would be possible to add an always-visible coverage? That would be very useful! Thanks

Standard installation in Next.js app results in import error

https://nextjs.org/docs/messages/css-npm

▼ 32 stack frames were expanded.
NewClass._createIcon
https://nrd3e.csb.app/node_modules/leaflet/dist/leaflet-src.js:7084:13
NewClass.createIcon
https://nrd3e.csb.app/node_modules/leaflet/dist/leaflet-src.js:7070:17
NewClass._initIcon
https://nrd3e.csb.app/node_modules/leaflet/dist/leaflet-src.js:7548:29
NewClass.onAdd
https://nrd3e.csb.app/node_modules/leaflet/dist/leaflet-src.js:7455:10