Leaflet Map - Dark Theme

deepakdevanand

Deepak Devanand

Posted on May 21, 2023

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%);
}
Enter fullscreen mode Exit fullscreen mode
  • 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.

💖 💪 🙅 🚩
deepakdevanand
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.

Related

Leaflet Map - Dark Theme
leaflet Leaflet Map - Dark Theme

May 21, 2023