Marker.setLatLng sets x and y based on pre-zoom projection during zoom animation. #5181

Open
mohsen1 opened this Issue Dec 9, 2016 · 7 comments

Projects

None yet

2 participants

@mohsen1
mohsen1 commented Dec 9, 2016
  • I'm reporting a bug, not asking for help
  • I've looked at the documentation to make sure the behaviour is documented and expected
  • I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
  • I've searched through the issues to make sure it's not yet reported
    • I tried but there might be duplicates. Maybe I'm not using the right keywords.

When putting animated overlays or markers on map, during the zoom transition those animations will look off because the underlying tiles pane translate and make the marker or overlay look off location.

For example Leaflet Ant Path looks bad during zoom transition:

lag

Leaflet Animated Marker is suffering from similar issue:

bike

I think Leaflet should provide an API that allows markers and overlays attach themselves to the element that zoom CSS transition is applied to so they are scaled with the tiles layer.

@ghybs
Contributor
ghybs commented Dec 10, 2016

Hi,

As for Leaflet Ant Path demo, it seems to me that this is due to mismatch between Leaflet CSS and JS versions: the demo page uses CSS from Leaflet 0.7.7 but JS from Leaflet 1.0.0-rc.3. See #4774.
You might want to report it on that specific plugin issue tracker, or even better, open a PR to fix it.

Regarding Leaflet Animated Marker, I think it is because this plugin makes use of CSS transition property, which overrides Leaflet default property on markers.
Hence it overrides the smooth translation that Leaflet applies by default on markers during animated zoom.

Therefore it seems to me that these 2 issues are not related to each other.

Hope this helps.

@mohsen1
mohsen1 commented Dec 10, 2016

Thanks! That's helpful.

What's your recommendation for animating markers between two latLngs on the map? We don't want to get this jumpy behavior when user zooms the map.

@ghybs
Contributor
ghybs commented Dec 10, 2016

Not sure.

Even forcing using chunked intervals instead of CSS3 transition in AnimatedMarker plugin exhibits a jumpy behaviour:
http://playground-leaflet.rhcloud.com/bipu/1/edit?html,output

@mohsen1
mohsen1 commented Dec 10, 2016

Leaflet should add CSS transform animation value for markers during the zoom animation. The CSS transform origin will be the zoom origin and the transform should be a translate 2d that is equal to translate of point that marker is pointing at on the tiles layer.

That way the marker "zooms" with the tiles during the animation and the jumpy animation will go away. The math is kind of hard to figure out exact translate values though

@mohsen1
mohsen1 commented Dec 10, 2016 edited

Actually, Leaflet does all of that math and works perfectly when Marker is static.

When we animate the marker, during the zoom, setLatLng is using pre-zoom projection and that's causing the marker to jump to inaccurate places.

There are two options to solve this:

  • Marker code is not calling setLatLng during the zoom. Using zoomstart and zoomend events
  • Update setLatLng to be aware of zoom state and in takes into account current (mid-zoom) projection.

Option 2 is better because it makes markers not depend on map state.

@ghybs
Contributor
ghybs commented Dec 11, 2016

It seems to be that this should probably be handled by that plugin, rather than Leaflet core.

See for instance openplans/Leaflet.AnimatedMarker#12, openplans/Leaflet.AnimatedMarker#35 and openplans/Leaflet.AnimatedMarker#42

@mohsen1
mohsen1 commented Dec 11, 2016

Just published a module based on those suggestion: https://github.com/mohsen1/leaflet-moving-marker

But still, while zoom animation is going on, the setLatLng function should not behave like that.

@mohsen1 mohsen1 changed the title from API for attaching overlays and markers to pane layer so they are CSS translated while zooming to Marker.setLatLng set x and y based on pre-zoom projection during zoom animation. Dec 11, 2016
@mohsen1 mohsen1 changed the title from Marker.setLatLng set x and y based on pre-zoom projection during zoom animation. to Marker.setLatLng sets x and y based on pre-zoom projection during zoom animation. Dec 11, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment