Leaflet.markercluster
Leaflet.markercluster copied to clipboard
When displaying two or more MarkerClusters, adding/updating a marker that is already in cluster with new latlng causes error
- [x] I'm reporting a bug, not asking for help
- [ ] I'm sure this is a Leaflet.MarkerCluster code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
- [x] I've searched through the issues to make sure it's not yet reported
First off, amazing how flexible MarkerCluster is and hard/clever work put in, this works totally fine when just displaying one MarkerCluster group, however, with multiple MarkerCluster groups an error occurs.
How to reproduce
When using two or more MarkerCluster groups which have markers/layers already added and then adding in a marker that is already added e.g. Marker[1234] with same latlng following section in MarkerClusterGroup.js gets an error due to parent not being defined.
//First create any new intermediate parent clusters that don't exist
var lastParent = newCluster;
for (z = zoom - 1; z > parent._zoom; z--) {
In the image above it's clear the code gets to this point and fails to assign parent so then the if statement fails. You can see the parent value on the right side of the image. I see previous discussions about this, but I don't believe any discussions that the code should not end up with this error code because you are re-adding a marker with same or updated values. For example, a Marker with same latlng or with a different latlng will cause this error when multiple markerClusters but not with one. In this situation I could remove then add, but I believe that it would be better to allow updating the MarkerCluster and it should work the same as when only using one MarkerCluster. The common use case is real-time updates to various MarkerCluster groups. I wonder if a check needs to be put in place to skip this if parent is not defined.
MarkerClusterGroup.js:1022 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_zoom')
Related issues are https://github.com/Leaflet/Leaflet.markercluster/issues/860 https://github.com/Leaflet/Leaflet.markercluster/issues/635
- Leaflet version I'm using: 1.7.1
- Leaflet.MarkerCluster version I'm using: 1.5.3
- Browser (with version) I'm using: Chrome 98.0.4758.102 (Official Build) (64-bit)
- OS/Platform (with version) I'm using: Windows 10
- also using this with Svelte (Javascript)
What behaviour I'm expecting and which behaviour I'm seeing
Adding a marker that is already in a layer should not cause error. This issue does not occur with one MarkerCluster group, but with two MarkerCluster groups. I would expect the parent
to be defined. If having multiple MarkerClusters and then update one of them actually works elsewhere please point out the example.
Minimal example reproducing the issue
If what I am writing makes sense that it should be possible to handle adding a marker that is already in a MarkerCluster or updating a MarkerCluster that it is already in, I'll create an example but might not be simple.
- [ ] this example is as simple as possible
- [ ] this example does not rely on any third party code
Using http://leafletjs.com/edit.html or any other jsfiddle-like site.
I have implemented a solution to clearLayers() for each cluster and then add each set of Markers back to each cluster. This isn't ideal for real-time data as any update will close the popup since the marker is briefly removed and then added back in. I tried the following settings for a new popup to see if it just stays around even when removed, but does not work. L.popup({"autoClose": false, "closeOnClick": null})
I have same problem.
When i destroy map, clear everything this what i can.
On second instance i getting error
Cannot read properties of undefined (reading '_zoom')
![image](https://user-images.githubusercontent.com/6137589/181802497-3b5db5dd-9dad-42b9-9a0e-7dff05ed9b23.png)
When i adding marker One by one by addLayer method, when i use addLayers, i don't have any error, but still no markers on map.
I used this package https://www.npmjs.com/package/use-supercluster and it works fine