search

perliedman / leaflet-routing-machine

Control for routing in Leaflet
https://www.liedman.net/leaflet-routing-machine/
Other
1.08k stars 349 forks source link

Animate found route #101

Open perliedman opened 9 years ago

perliedman commented 9 years ago

Add an option to animate the display of a new route, such that it grows from the start waypoint towards the destination.

Look for example at this example, which looks pretty nice when a new result is found: https://www.mapbox.com/blog/dc-bikeshare-revisited/

oliverheilig commented 9 years ago

An option is to use D3 http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/. I'm using it in a sample that visualizes different driving times for our routing http://ptv-logistics.github.io/fl-labs/

perliedman commented 8 years ago

A Leaflet plugin that does more or less exactly this: https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim

AlanBell commented 8 years ago

that nearly works, however it requires #191 and if you snakeIn the L.Routing.line by changing line 582 to read: this._line.addTo(this._map).snakeIn();

there is a bit of a problem as L.Routing.line is a layergroup that contains some stuff around the markers plus a polyline for each style assigned to the routeline, so they all get animated. It kind of needs to draw the first stuff fast, then the last style layer gets animated but I can't figure out how to do that.

ahmaag951 commented 5 years ago

Add an option to animate the display of a new route, such that it grows from the start waypoint towards the destination.

I want to do that using leaflet routing machine How can I do that?

aldalaimi commented 4 years ago

I want to do that using leaflet routing machine How can I do that?

I achieved this animation using only CSS. See: https://gis.stackexchange.com/a/349912/157737