The layout of the placemark hint

Open in CodeSandbox

Object layouts can be created using the templateLayoutFactory factory and text templates.

This example creates a custom hint layout for the geo object. The layout is set for the geo object via the options.

In order for the hint to automatically shift its position if it goes outside of the map container, redefine the getShape() method in its layout. This method should return the current size of the hint layout.

<!DOCTYPE html>

<html>
    <head>
        <title>Examples. Custom hint layout</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="placemark_hint_layout.js"
            type="text/javascript"
        ></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
            .my-hint {
                display: inline-block;
                padding: 5px;
                height: 35px;
                position: relative;
                left: -10px;
                width: 195px;
                font-size: 11px;
                line-height: 17px;
                color: #333333;
                text-align: center;
                vertical-align: middle;
                background-color: #faefb6;
                border: 1px solid #cdb7b5;
                border-radius: 20px;
                font-family: Arial;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [55.76, 37.64],
                zoom: 10,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        /**
         * Creating a layout for hint content.
         * The layout is created through the layout factory using a text template.
         */
        HintLayout = ymaps.templateLayoutFactory.createClass(
            "<div class='my-hint'>" +
                "<b>{{ properties.object }}</b><br />" +
                "{{ properties.address }}" +
                "</div>",
            {
                /**
                 * Defining the getShape method,
                 * which will return the size of the hint layout.
                 * This is necessary in order for the hint to automatically
                 * move its position when going off the map.
                 */
                getShape: function () {
                    var el = this.getElement(),
                        result = null;
                    if (el) {
                        var firstChild = el.firstChild;
                        result = new ymaps.shape.Rectangle(
                            new ymaps.geometry.pixel.Rectangle([
                                [0, 0],
                                [
                                    firstChild.offsetWidth,
                                    firstChild.offsetHeight,
                                ],
                            ])
                        );
                    }
                    return result;
                },
            }
        );

    var myPlacemark = new ymaps.Placemark(
        [55.764286, 37.581408],
        {
            address: "Moscow, Zoologicheskaya Street, 13u2",
            object: "Contemporary Art Center",
        },
        {
            hintLayout: HintLayout,
        }
    );

    myMap.geoObjects.add(myPlacemark);
}