Leaflet.markercluster icon indicating copy to clipboard operation
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

Open half-metal opened this issue 2 years ago • 3 comments

  • [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--) {

image

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.

half-metal avatar Mar 04 '22 21:03 half-metal

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})

half-metal avatar Mar 15 '22 19:03 half-metal

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

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.

krypton9208 avatar Jul 29 '22 16:07 krypton9208

I used this package https://www.npmjs.com/package/use-supercluster and it works fine

AE0011 avatar Oct 28 '23 11:10 AE0011