Добавление метки с собственным изображением

Open in CodeSandbox

API предоставляет возможность задавать меткам собственные изображения.

Чтобы установить нужное изображение, задайте для метки следующие опции:

  • iconLayout: "default#image";
  • iconImageHref: {URL графического файла}.

Чтобы установить изображение с контентом, задайте для метки следующие опции:

  • iconLayout: "default#imageWithContent";
  • iconImageHref: {URL графического файла}.
И задайте содержимое иконки геообъекта:
  • iconContent: 'содержимое';

Также могут быть установлены опции iconImageSize (ширина и высота изображения в пикселях), iconImageOffset (сдвиг левого верхнего угла иконки относительно точки привязки), iconImageClipRect (координаты отображаемой области исходного изображения в пикселях), iconContentOffset (смещение слоя с содержимым относительно слоя с картинкой) и iconContentLayout (макет содержимого). 

<!DOCTYPE html>
<html>
    <head>
        <title>Добавление метки с собственным изображением</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script src="icon_customImage.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(function () {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [55.751574, 37.573856],
                zoom: 9,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        // Создаём макет содержимого.
        MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
        ),
        myPlacemark = new ymaps.Placemark(
            myMap.getCenter(),
            {
                hintContent: "Собственный значок метки",
                balloonContent: "Это красивая метка",
            },
            {
                // Опции.
                // Необходимо указать данный тип макета.
                iconLayout: "default#image",
                // Своё изображение иконки метки.
                iconImageHref: "icons/pin.svg",
                // Размеры метки.
                iconImageSize: [48, 48],
                // Смещение левого верхнего угла иконки относительно
                // её "ножки" (точки привязки).
                iconImageOffset: [-5, -44],
            }
        ),
        myPlacemarkWithContent = new ymaps.Placemark(
            [55.661574, 37.573856],
            {
                hintContent: "Собственный значок метки с контентом",
                balloonContent: "А эта — новогодняя",
                iconContent: "12",
            },
            {
                // Опции.
                // Необходимо указать данный тип макета.
                iconLayout: "default#imageWithContent",
                // Своё изображение иконки метки.
                iconImageHref: "icons/christmass-head.svg",
                // Размеры метки.
                iconImageSize: [48, 48],
                // Смещение левого верхнего угла иконки относительно
                // её "ножки" (точки привязки).
                iconImageOffset: [-24, -24],
                // Смещение слоя с содержимым относительно слоя с картинкой.
                iconContentOffset: [15, 15],
                // Макет содержимого.
                iconContentLayout: MyIconContentLayout,
            }
        );

    myMap.geoObjects.add(myPlacemark).add(myPlacemarkWithContent);
});