Leaflet Map - Dark Theme

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.

Comments

[Anthony Luzquiños]

This is great, thanks!

[Michele Mirandola]

Great! Thanks for this snippet! :-)

[James Vanderpump]

Thanks for sharing, this is so cool!

[YURIIDE]

Thank you ;-) quickly solution