Как мне оформить OpenStreetMap как coronavirus.app

Question

Я копаюсь в мире OpenStreetMap, листовок и листов карт!
Первое, что я хочу, - это красивая карта для визуализации данных. До опыта работы с Google Maps я мог стилизовать сторону клиента карты, но когда я искал стилизацию OpenStreetMap, это просто не представляется возможным, и это должно быть сделано на стороне сервера.

Как такая сторона, как coranavirus. приложение сделать это тогда? Когда я проверяю их сайт, я вижу, что они тянут обычные OSM плитки PNG. Как это превратится в светлую / темную карту?

Любые советы будут высоко ценится!

Answer 1

Если вы посмотрите .leaflet-tile-container, вы увидите, что они используют фильтр CSS:

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

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

.map-layer, .leaflet-tile-container {
    filter: var(--mapfilter);
    -webkit-filter: var(--mapfilter);
}