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

[Oleg Kainov]

That's amazing, thanks!

[Samuel Andrés]

Awesome, thanks!

[NinjaX Cyber]

thanks bro.

[Ivan Karbashevskyi]

Thank you.

codepen.io/Gre-Van/pen/JoPwjoX

[Özgür]

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).

.leaflet-container {
    background: #000
}

[MrK1]

bro it dosent work for me

[James Vanderpump]

Thanks for sharing, this is so cool!

[YURII DE.]

Thank you ;-) quickly solution

[Michele Mirandola]

Great! Thanks for this snippet! :-)

[Anthony Luzquiños]

This is great, thanks!