search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.04k stars 2.21k forks source link

Polyline Animation #10009

Open abdulk1 opened 3 years ago

abdulk1 commented 3 years ago

It would be awesome if there was a plugin or functionality to animate/draw out polyline.

A lot of applications use Mapbox to show travel routes or delivery routes and it's useful to show the route drawn from start to end like these Leaflet plugins do:

leaflet.motion https://igor-vladyka.github.io/leaflet.motion/ Leaflet.Polyline.SnakeAnim https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim

mourner commented 3 years ago

We should add an example in the docs for that — I think I recall this being possible with the line-gradient property (changing stops dynamically with setPaintProperty), need to find that example...

abdulk1 commented 3 years ago

Awesome. Adding something in the docs for that would be great.

Was this the example you were referring to? https://blog.mapbox.com/map-pride-2018-with-our-new-design-tools-32b886f7db1b

domlet commented 3 years ago

This Animate a line example might also help: https://docs.mapbox.com/mapbox-gl-js/example/animate-a-line/

We're removing the docs label but leaving the feature label on this issue because an example addressing this use case would be elaborate enough to justify building a product solution.