Как оформить OpenStreetMap как коронавирус.приложение

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

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

Сетевой осмотр темной карты



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


javascript openstreetmap gis openmaptiles
person Alexander lindkjaer    schedule 28.03.2020    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Если вы проверите .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);
}
person yuriy636    schedule 28.03.2020
comment
Масштабирование png с помощью css. Я был так сосредоточен на провайдере тайлов :D Спасибо! - person Alexander lindkjaer; 28.03.2020