search

hugobarragon / leaflet-drift-marker

A marker that can drift its way to a new position
MIT License
28 stars 9 forks source link

Marker does not move out of the cluster #3

Closed mateeyow closed 4 years ago

mateeyow commented 4 years ago

Hi, I'm currently using this package along with react markercluster package. It seems that whenever a marker combines in a cluster and moves out the marker does not appear anymore. Any clue on this? Thank you.

https://codesandbox.io/s/react-leafletdriftmarker-x5mug

hugobarragon commented 4 years ago

Hi, looks like a problem with marker cluster, because that plugin is not updating and is the one that hides the markers, one workaround that you can make on react is set key prop to force updates, here you go a working example, you should probably open a issue react-leaflet-markercluster or try something like this: https://github.com/YUzhva/react-leaflet-markercluster/issues/100#issuecomment-578213443 with this workarount, markercluster is remounted to force update so you lose the slide effect , because DrifMarker is a child of cluster, you can try to get the ref of MarkerCluster and do the forceUpdate() Edit react-leaflet_DriftMarker_markerCluster

hugobarragon commented 4 years ago

related to https://github.com/Leaflet/Leaflet.markercluster/issues/649

mateeyow commented 4 years ago

Hmmm, your codesandbox doesn't seem to work. I've tried adding key to the prop but no dice. I've read around some issue on markercluster they said that it should be fix by just calling setLatLng. It seems that doesn't work.

mateeyow commented 4 years ago

The refreshClusters also doesn't work.

hugobarragon commented 4 years ago

Hmmm, your codesandbox doesn't seem to work. I've tried adding key to the prop but no dice. I've read around some issue on markercluster they said that it should be fix by just calling setLatLng. It seems that doesn't work.

what? can you sent me a print or something? my codesandbox is a fork from yours but with key={Date.now()} on markercluster its owrking just fine, will upload a gif here

hugobarragon commented 4 years ago

ezgif com-video-to-gif

hugobarragon commented 4 years ago

The refreshClusters also doesn't work.

hi, the refresh should work, if not open an issue on react leaflet marker cluster beacuse its documented here: "If you need to update the clusters icon (e.g. they are based on markers real-time data), use the method refreshClusters()." https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers https://github.com/Leaflet/Leaflet.markercluster#refreshing-the-clusters-icon

mateeyow commented 4 years ago

It's working now. Previously there was no Date.now() key. But that does remove the animation which is why I use this library in the first place. Funny thing is, the movement will still work for normal markers but not for DriftMarker that's why I decided to post the issue here.

mateeyow commented 4 years ago

I'll try to investigate further and check with markercluster and maybe add an issue there as well.

nguyenanhtrai commented 3 years ago

@mateeyow I'm having the same problem. Have you figured out how to solve this problem yet?

mateeyow commented 3 years ago

@nguyenanhtrai Nope wasn't able to resolve it. Decided to not use the library.

nguyenanhtrai commented 3 years ago

@mateeyow I think its problem lies in the Leaflet.Marker.SlideTo library. I will learn more about this. Thanks for the feedback.

hugobarragon commented 3 years ago

@mateeyow I think its problem lies in the Leaflet.Marker.SlideTo library. I will learn more about this. Thanks for the feedback.

Hi, as I explained previously, leaflet-marker-cluster is not refreshing, and it will not refresh they have that written in the docs "If you need to update the clusters icon (e. g. they are based on markers real-time data), use the method refreshClusters()."
Read more here: Clustered Markers
It works, if you place key={Date.now()} on marker cluster component , because changing the key prop forces a component rerender on react, Leaflet.markercluster is not react, and will not update unless you call refreshClusters(), but react-leaflet-markercluster as the name says, it's react, and it should detect changes on markers or offer some way to refresh as Leaflet.markercluster offers, the key prop, forces a rerender and shows you that the leaflet-drift-marker its in the correct position when the new render arrives.

If you test the same scenario, but with react-leaflet Marker, it will do the same, if the positions change marker cluster will not detect update, correct me if i am wrong.

Leaflet.Marker.SlideTo its not a dependency on this library.

I am more than free to correct any bug, here, when I have some free time i will try to fix markercluster lib itself, or make and deep analysis