Module «map-simple». yandex map api, серая карта, кастомная метка

Демо:

https://codepen.io/ildar-meyker/pen/xxJyWRg

Плагины:

Подключение:

//
<script
    src="https://api-maps.yandex.ru/2.1/?apikey=4ee83d51-9c82-4832-ae32-283ef606144b
&lang=ru_RU"
    type="text/javascript"
></script>

Разметка:

<div class="map">
    <div class="map__container">
        <div id="map" style="width: 100%; height: 100%"></div>
    </div>
</div>

Стили:

//
.map {


    &__container {
        height: 49rem;
        background: #f3f3f3;

        [class*="ymaps-2"][class*="-ground-pane"] {
            filter: #{"grayscale()"};
        }
    }
}

Инициализация:

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [59.779398, 30.459721],
                zoom: 15,
            },
            {
                searchControlProvider:
                    "yandex#search",
            }
        ),
        myPlacemark = new ymaps.Placemark(
            [59.779398, 30.459721],
            {
                hintContent:
                    "г. Санкт-Петербург, Московское ш., д. 177, к. 2 лит. Ж",
                balloonContent:
                    "г. Санкт-Петербург, Московское ш., д. 177, к. 2 лит. Ж",
                iconContent: "",
            },
            {
                // Опции.
                // Необходимо указать данный тип макета.
                iconLayout: "default#image",
                // Своё изображение иконки метки.
                iconImageHref: "https://ildar-meyker.ru/html/carville/img/map/marker.png",
                // Размеры метки.
                iconImageSize: [36, 48],
                // Смещение левого верхнего угла иконки относительно
                // её "ножки" (точки привязки).
                iconImageOffset: [-18, -48],
            }
        );

    myMap.geoObjects.add(myPlacemark);
    myMap.behaviors.disable("scrollZoom");
}

Keywords: gray map with colorfull marker, серая карта с цветым placemark, серая карта yandex map