Color transition effect in Leaflet.js?

Question

See this example:

https://www.mapbox.com/ten-years-openstreetmap/

Does anyone have any ideas about this? Is it done by CSS transition or Leaflet API?

Answer 1

By using Chrome Web inspector, you can watch how this effect is managed with TileLayers stacked on top of each other, and the CSS opacity attribute changing as time passes on.So it sounds like there would be some custom JS timing setup you would need to duplicate this, probably with Leaflet's setOpacity method on TileLayer - documentation at http://leafletjs.com/reference.html#tilelayer-setopacity.