CODEWITHSUNDEEP
javascriptgisopenstreetmapopenmaptiles
Alexander lindkjaer
Alexander lindkjaer

Reputation: 23

How do i style OpenStreetMap like coronavirus.app

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 !

Upvotes: 2

Views: 1578

Answers (1)

yuriy636
yuriy636

Reputation: 11681

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);
}

Upvotes: 4

Related Questions