2

Im digging into the world of OpenStreetMap, leaflet and map tiles !
First thing i want is a pretty map for data visualization. Prior experiense with google maps i could style the map client side, but when i search for OpenStreetMap styling it just dont seem possible, and it must be done server side.

How does a side like coranavirus.app do it then ? When i inspect their site i can see they pull the normal OSM png tiles. How does that turn into the light/dark map ?

Network inspect of dark map



Any hints would be much appreciated !

yuriy636
  • 11,171
  • 5
  • 37
  • 42
Alexander lindkjaer
  • 23
  • 3

1 Answers1

4

If you inspect .leaflet-tile-container you can see that they are using a CSS filter:

:root{
  /* ... */
  --mapfilter: grayscale(1);
  /* ... */
}

/* ... */
html body.dark{
  /* ... */
  --mapfilter: invert(1) grayscale(1);
  /* ... */
}

.map-layer, .leaflet-tile-container {
    filter: var(--mapfilter);
    -webkit-filter: var(--mapfilter);
}
yuriy636
  • 11,171
  • 5
  • 37
  • 42