Leafletjs: Dynamically changing map feature colors

Question

It's been a few days now that I have been looking for a way to be able to dynamically change the colors of different map features such as Roads, Water, Buildings, Background etc using leaflet.js. I know we had this option in Mapbox using the Mapbox GL. But I am wondering if this can be achieved using the leaflet.js library.

Any help/workaround would be highly appreciated. Thanks

Answer 1

By default Leaflet can render only raster tiles (i.e. plain images, which you cannot easily modify) and vector shapes (typically from GeoJSON data).

If you want to modify the tiles rendering, you have mainly 3 options:

• Download OSM data and re-render the tiles (i.e. create your own tile server) using your own styling. OSM wiki should have some pages that explain how to do so.
• Use an online service that offers tiles rendering with custom style (e.g. Mapbox).
• Use Leaflet.VectorGrid plugin with downloaded vector data from OSM and providing your own styling.

If you want to be able to modify the rendering at runtime, then only the 3rd option would be appropriate.