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 (5)
Thank you. Additionally, setting the background color of the container makes its background dark as well, which is noticeable when panning (the light background color is visible while panning).
This is great, thanks!
Great! Thanks for this snippet! :-)
Thanks for sharing, this is so cool!
Thank you ;-) quickly solution