Setting a custom placemark image

Open in CodeSandbox

The API provides the ability to set custom images for placemarks.

To set a desired image, specify the following options for the placemark:

  • iconLayout: "default#image";
  • iconImageHref: {URL of the graphic file}.

To set the image with the content specify the following placemark options:

  • iconLayout: "default#imageWithContent";
  • iconImageHref: {URL of the graphic file}.
And also specify the content of the geo object icon:
  • iconContent: 'content';

You can also set the options iconImageSize (width and height of the image in pixels), iconImageOffset (the offset of the icon's upper-left corner relative to the anchor point), iconImageClipRect (coordinates of the displayed area of the source image, in pixels), iconContentOffset (the offset of the text relative to the placemark's anchor point) and iconContentLayout (content layout). 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Setting a custom placemark image</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
            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",
            }
        ),
        // Creating a content layout.
        MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
        ),
        myPlacemark = new ymaps.Placemark(
            myMap.getCenter(),
            {
                hintContent: "A custom placemark icon",
                balloonContent: "This is a pretty placemark",
            },
            {
                /**
                 * Options.
                 * You must specify this type of layout.
                 */
                iconLayout: "default#image",
                // Custom image for the placemark icon.
                iconImageHref: "icons/pin.svg",
                // The size of the placemark.
                iconImageSize: [48, 48],
                /**
                 * The offset of the upper left corner of the icon relative
                 * to its "tail" (the anchor point).
                 */
                iconImageOffset: [-5, -44],
            }
        ),
        myPlacemarkWithContent = new ymaps.Placemark(
            [55.661574, 37.573856],
            {
                hintContent: "A custom placemark icon with contents",
                balloonContent: "This one — for Christmas",
                iconContent: "12",
            },
            {
                /**
                 * Options.
                 * You must specify this type of layout.
                 */
                iconLayout: "default#imageWithContent",
                // Custom image for the placemark icon.
                iconImageHref: "icons/christmass-head.svg",
                // The size of the placemark.
                iconImageSize: [48, 48],
                /**
                 * The offset of the upper left corner of the icon relative
                 * to its "tail" (the anchor point).
                 */
                iconImageOffset: [-24, -24],
                // Offset of the layer with content relative to the layer with the image.
                iconContentOffset: [15, 15],
                // Content layout.
                iconContentLayout: MyIconContentLayout,
            }
        );

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