Черно-белая карта Yandex

27 Апреля 2018
css

Иногда требуется сделать карту черно белой.

Нам поможет знание архитектуры css классов яндекс карт, а именно ymaps-2 и *-ground-pane - мы просто перекрасим с помощью фильтра эти блоки:

[class*="ymaps-2"][class*="-ground-pane"]{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter:grayscale(100%);
}

Пример