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

Question

Вот инициализация карты

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
        center: [59.823543, 30.078758],
        zoom: 13
    }, {
        searchControlProvider: 'yandex#search'
    });

    myPlacemark1 = new ymaps.Placemark([59.819481, 30.084848], {
        hintContent: ''
    }, {
        iconLayout: 'default#imageWithContent',
        iconImageHref: 'img/map_marker.png',
        iconImageSize: [27, 33],
        iconImageOffset: [27, -28]
    });

    myPlacemark2 = new ymaps.Placemark([59.827130, 30.082396], {
        hintContent: ''
    }, {
        iconLayout: 'default#imageWithContent',
        iconImageHref: 'img/map_marker.png',
        iconImageSize: [27, 33],
         iconImageOffset: [27, -28]
    });

    myPlacemark3 = new ymaps.Placemark([59.826092, 30.076345], {
        hintContent: ''
    }, {
        iconLayout: 'default#imageWithContent',
        iconImageHref: 'img/map_marker.png',
        iconImageSize: [27, 33],
         iconImageOffset: [27, -28]
    });

    myMap.geoObjects
    .add(myPlacemark1)
    .add(myPlacemark2)
    .add(myPlacemark3);
});

Пытаю сделать через css

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

Так не получается. Как еще можно попробовать сделать карту серой?

Answer 1

У меня работает через css, применил фильтр к canvas

.map-container canvas {
    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%);
}

<div class=map-container>
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A7a0eef166e4567051dc5889a57bdfdacd94ec156f0b92f6cba2cd9c4b2e3fd9b&amp;width=500&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
</div>

Answer 2

Вот так карта получилась серая

  .ymaps-layers-pane {
        filter: grayscale(1);
        -ms-filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
    }

Answer 3

В 2024 работает вот так:

[class*=ymaps][class*=-ground-pane] {
    filter: grayscale(1);
    -ms-filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
  }

БЛОГ НА HUSL

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

Ответы (3 шт):