Setting a hotspot shape of the HTML layout of the placemark

Open in CodeSandbox

This example creates three placemarks with their own HTML layouts.
Custom layouts are created using the layout factory.
All the placemarks have different hotspot shapes set: rectangle, circle, or polygon.

In order to catch mouse events, the layout uses a hotspot.
By default, the hotspot shape isn't set when creating your own HTML layout, and you need to set it yourself.
You can do this using the 'iconShape' layout option as a JSON description of a geometry. 
<!DOCTYPE html>
<html>
    <head>
        <title>
            Example of setting custom HTML layouts for placemarks with your
            own hotspot shapes
        </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_shape.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            .placemark_layout_container {
                position: relative;
                font-family: Georgia;
                font-size: 40px;
                text-align: center;
                font-weight: bold;
            }

            /* Square placemark layout */
            .square_layout {
                position: absolute;
                left: -23px;
                top: -23px;
                width: 46px;
                height: 46px;
                line-height: 46px;
                border: 2px solid #218703;
                background-color: #f8fdf7;
                color: #218703;
            }

            /* Round placemark layout */
            .circle_layout {
                background-color: white;
                position: absolute;
                left: -23px;
                top: -23px;
                width: 46px;
                height: 46px;
                border: 2px solid #225d9c;
                color: #225d9c;
                line-height: 46px;
                /* This CSS property won't work in Internet Explorer 8 */
                border-radius: 50px;
            }

            /* Placemark layout with a "tail" */
            .polygon_layout {
                position: relative;
                background: #ffffff;
                border: 4px solid #943a43;
                width: 50px;
                height: 50px;
                position: absolute;
                left: -28px;
                top: -76px;
                color: #943a43;
            }

            .polygon_layout:after,
            .polygon_layout:before {
                top: 100%;
                left: 50%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
            }

            .polygon_layout:after {
                border-top-color: #943a43;
                border-width: 10px;
                margin-left: -10px;
            }

            .polygon_layout:before {
                border-top-color: #943a43;
                border-width: 16px;
                margin-left: -16px;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(function () {
    var map = new ymaps.Map("map", {
        center: [55.7, 37.6],
        zoom: 10,
        controls: [],
    });

    // Creating a placemark with a square hotspot.
    var squareLayout = ymaps.templateLayoutFactory.createClass(
        '<div class="placemark_layout_container"><div class="square_layout">$</div></div>'
    );

    var squarePlacemark = new ymaps.Placemark(
        [55.725118, 37.682145],
        {
            hintContent: "Placemark with a rectangular HTML layout",
        },
        {
            iconLayout: squareLayout,
            // Describing the shape of a "Rectangle" hotspot.
            iconShape: {
                type: "Rectangle",
                // The rectangle is defined as two points: the upper left and lower right.
                coordinates: [
                    [-25, -25],
                    [25, 25],
                ],
            },
        }
    );
    map.geoObjects.add(squarePlacemark);

    // Creating a placemark with a round hotspot.
    var circleLayout = ymaps.templateLayoutFactory.createClass(
        '<div class="placemark_layout_container"><div class="circle_layout">#</div></div>'
    );

    var circlePlacemark = new ymaps.Placemark(
        [55.783202, 37.605584],
        {
            hintContent: "Placemark with a circular HTML layout",
        },
        {
            iconLayout: circleLayout,
            // Describing the shape of a "Circle" hotspot.
            iconShape: {
                type: "Circle",
                // The circle is defined as the center and radius
                coordinates: [0, 0],
                radius: 25,
            },
        }
    );
    map.geoObjects.add(circlePlacemark);

    // Creating a placemark with a complex hotspot shape.
    var polygonLayout = ymaps.templateLayoutFactory.createClass(
        '<div class="placemark_layout_container"><div class="polygon_layout">!</div></div>'
    );

    var polygonPlacemark = new ymaps.Placemark(
        [55.662693, 37.558416],
        {
            hintContent: "HTML placemark with a complex shape",
        },
        {
            iconLayout: polygonLayout,
            // Describing the shape of a "Polygon" hotspot.
            iconShape: {
                type: "Polygon",
                /**
                 * A polygon is defined as a three-dimensional array. The top-level array contains the contours of the polygon.
                 * The first element of the array is the external contour, and the others are internal contours.
                 */
                coordinates: [
                    // Describing the external polygon contour as an array of coordinates.
                    [
                        [-28, -76],
                        [28, -76],
                        [28, -20],
                        [12, -20],
                        [0, -4],
                        [-12, -20],
                        [-28, -20],
                    ],
                    // ,... Describing the internal contours - empty areas inside the external contour.
                ],
            },
        }
    );
    map.geoObjects.add(polygonPlacemark);
});