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.
Top comments (4)
This is great, thanks!
Great! Thanks for this snippet! :-)
Thanks for sharing, this is so cool!
Thank you ;-) quickly solution