Deepak Devanand
Posted on May 21, 2023
Leaflet.js is arguably the best client-side map-rendering library. While there's a plethora of OpenStreet Map tile providers, none of the free basemap layer have a dark-themed map (tiles).
By applying css filter property on specific leaflet classes, we can have a "hacky" dark map.
.leaflet-layer,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-attribution {
filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
-
invert(100%)
completely inverts the color, essentially adding dark background to the map. -
hue-rotate(180deg)
is optional, but converts the predominant blue color (large roads) on the map to red.
💖 💪 🙅 🚩
Deepak Devanand
Posted on May 21, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.