Update react-leaflet-markercluster.js

[l4b4r4b4b4]

trafficstars

As documented here (https://github.com/PaulLeCam/react-leaflet/issues/897#issuecomment-1121179538) several people me included had difficulties making react-leaflet-markercluster work with newer versions of the ecosystem. I finally got it to work with above code and following system settings.

docker-compose on Debian
"next": "^12.1.5",
"react-dom": "^18.1.0",
"react": "^18.1.0",
"leaflet": "^1.8.0",
"leaflet-defaulticon-compatibility": "^0.1.1",
"leaflet.markercluster": "^1.5.3",
"@react-leaflet/core": "^2.0.0",
"@types/leaflet": "^1.7.9",
"react-leaflet": "^4.0.0",

[Berenas54]

@l4b4r4b4b4 It turns out that it was necessary to wait for the update to work? Is there any way I can tweak the changes to make it work? i installed it via npm

[l4b4r4b4b4]

@Berenas54 I don't understand your post. Which update? The problem seem to have been newer versions of leaflet dependencies not being compatibale with react.leaflet.markercluster. there should not be a general difference between npm and yarn...

[AlexF090]

Works great! You really saved us! Thanks a lot!

Our package.json:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "leaflet": "^1.8.0",
    "leaflet.markercluster": "^1.5.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-icons": "^4.3.1",
    "react-leaflet": "^4.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },

[amauryfischer]

this really need to me merged soon

[l4b4r4b4b4]

Generally agreed! Though I want to mention, that so far the code I posted works fine with importing only marker clusters css ;)

[frafra]

This repository is dead. We should create a new one, merge the existing PRs that work and move forward.

[l4b4r4b4b4]

I actually thought to do that and publish it as react marker cluster 4.0! @frafra got experience publishing as yarn / npm?

[frafra]

@l4b4r4b4b4 no, I don't have it, I am sorry, but I would be glad to help if needed.

[l4b4r4b4b4]

@frafra No need to be sorry. One can not know everything :wink:

It would be great if you could do some small research on the steps to take to publish a package. Any requirements for project.json, files and filder structure. Do we need to write unit and integration tests? Is yarn and npm the same "repository" or would we have to submit your package to both?

questions over questions.

[frafra]

@l4b4r4b4b4 I think that there is only one main registry, which is the NPM registry. This repository already has the proper structure to be republished. We could add integration tests in the future. I would be happy to help with GitLab actions and similar.

[zmey3301]

Is yarn and npm the same "repository" or would we have to submit your package to both?

Usually it's enough to publish to NPM and bots will do the rest. Yarn will publish into both NPM and yarn registries.

It would be great if you could do some small research on the steps to take to publish a package. Any requirements for project.json, files and filder structure.

You typically want to provide .npmignore which doesn't ignore dist, while .gitignore does. This repo could use some cleanup, tests, and automation, but technically you already can publish it via yarn publish so users have a reliable source of the up to date package. Maybe it'll be a good idea to mention what's going on in README.md though.

@l4b4r4b4b4.

[l4b4r4b4b4]

@zmey3301 thanks for the clarification. I totally agree with your point on tests and automation. They are the reason I was hesitant to directly publish. Unfortunately I don't have the time to do them atm.

[Berenas54]

@l4b4r4b4b4 This method really works, but there is a problem. I created a component with this code, it draws markers and popups in them. everything works except popups, when clicking on the marker I get "Map.js:1381 Uncaught TypeError: Cannot read property '_leaflet_disable_click' of null". If you remove the clusterization wrapper, then everything works.

[l4b4r4b4b4]

@Berenas54 I am using it with Popups and Tooltips with the approach I posted and everything works fine. Maybe try double checking whether you actually took the same steps. Double check for package versions too. My documentation on the steps I took is quite extensive I think. with the info provided I cannot tell what could be the problem with your approach. maybe consider sharing your code so others can actually help you.

[Berenas54]

@l4b4r4b4b4 "dependencies": { "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", "@react-leaflet/core": "^2.0.0", "@stomp/stompjs": "^6.1.0", "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "leaflet": "^1.8.0", "leaflet.markercluster": "^1.5.3", "react": "^17.0.2", "react-beautiful-dnd": "^13.1.0", "react-dom": "^17.0.2", "react-i18next": "^11.14.3", "react-leaflet": "^4.0.0", "react-leaflet-markercluster": "^3.0.0-rc1", "react-map-interaction": "^2.1.0", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "^5.0.1", "react-sortable-list": "^1.1.1", "react-stomp-client": "^1.2.0", "react-svg-piechart": "^2.4.2", "redux": "^4.1.0", "web-vitals": "^1.1.2", },

[l4b4r4b4b4]

hmmm first of all, I use React 18+ with NextJS 12. Try updating react to latest version. You also need to install the following packages:

    "@react-leaflet/core": "^2.0.0",
    "@types/leaflet": "^1.7.9",
    "leaflet-defaulticon-compatibility": "^0.1.1",
    "leaflet": "^1.8.0",

I wonder what you are trying to do. Could you elaborate and put your code it in a codebox? Are your trying to make an array of MarkerClusterGroups and put Markers with custom icon for different camera objects in it?

In any way the custom icon object need to be set on the Marker Layer not the MarkerClusterGroup.

import { divIcon } from 'leaflet'
import MarkerClusterGroup from './MarkerCluster/MarkerCluster'
....
 <MarkerClusterGroup>
        {salesRepMarkers.map(
          (
            {
              sn,
              givenName,
              geo
            },
            idx
          ) => (
            <Marker
              key={idx}
              position={[
                parseFloat(geo.geometry.coordinates[1]),
                parseFloat(geo.geometry.coordinates[0]),
              ]}
              onClick={(event) => centerLeafletMapOnMarker(map, event.target)}
              icon={divIcon({
                html: `<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🧑‍💼</text></svg>`,
                className: '',
                iconSize: [24, 40],
                iconAnchor: [12, 40],
              })}
            >
              <Tooltip sticky={true} popupAnchor={[0, +30]}>
                <h4>
                  {givenName} {sn} <span>({title})</span>
                </h4>
              </Tooltip>
              <Popup sticky={true} popupAnchor={[0, +30]}>
                <h4>
                  {givenName} {sn} <span>({title})</span>
                </h4>
              </Popup>
            </Marker>
          )
        )}
</MarkerClusterGroup>

[changey]

Thanks to @l4b4r4b4b4's work! maybe one can try https://www.npmjs.com/package/@changey/react-leaflet-markercluster for react 18 and leaflet v4 compatibility for now

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[frafra]

Is there a repo we can resume the development? I still have my PR #162 to be merged :-)

[l4b4r4b4b4]

@frafra I have a fork of react-marker-cluster. I finally got some time to spare and I am willing to put some work into bringing over working pull requests as well as include my fix for compatibility issues with leaflet v4. Maybe you want to make a start by making a pull request on the other repo. Then we can hopefully release a cleaned up version by the end of the month.

Is there a way to fork pull request to the other repo as well?