---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/placemark_shape.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/placemark_shape.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Задание фигуры активной области HTML макету метки
Open in CodeSandbox
В данном примере создаются три метки со своими HTML макетами.
Создание своих макетов происходит при помощи фабрики макетов.
Всем меткам задаются разные фигуры активных областей: прямоугольник, круг и полигон.
Метка, чтобы ловить события мышки, использует активную область.
По умолчанию при задании своего HTML макета фигура активной области не задается, и её нужно задать самостоятельно.
Это можно сделать при помощи опции метки iconShape в виде JSON описания геометрии.
{% list tabs %}
- index.html
```html
Задание фигуры активной области HTML макету метки
```
- placemark_shape.js
```js
ymaps.ready(function () {
var map = new ymaps.Map("map", {
center: [55.7, 37.6],
zoom: 10,
controls: [],
});
// Создание метки с квадратной активной областью.
var squareLayout = ymaps.templateLayoutFactory.createClass(
''
);
var squarePlacemark = new ymaps.Placemark(
[55.725118, 37.682145],
{
hintContent: "Метка с прямоугольным HTML макетом",
},
{
iconLayout: squareLayout,
// Описываем фигуру активной области "Прямоугольник".
iconShape: {
type: "Rectangle",
// Прямоугольник описывается в виде двух точек - верхней левой и нижней правой.
coordinates: [
[-25, -25],
[25, 25],
],
},
}
);
map.geoObjects.add(squarePlacemark);
// Создание метки с круглой активной областью.
var circleLayout = ymaps.templateLayoutFactory.createClass(
''
);
var circlePlacemark = new ymaps.Placemark(
[55.783202, 37.605584],
{
hintContent: "Метка с круглым HTML макетом",
},
{
iconLayout: circleLayout,
// Описываем фигуру активной области "Круг".
iconShape: {
type: "Circle",
// Круг описывается в виде центра и радиуса
coordinates: [0, 0],
radius: 25,
},
}
);
map.geoObjects.add(circlePlacemark);
// Создание метки со сложной фигурой активной области.
var polygonLayout = ymaps.templateLayoutFactory.createClass(
''
);
var polygonPlacemark = new ymaps.Placemark(
[55.662693, 37.558416],
{
hintContent: "HTML метка сложной формы",
},
{
iconLayout: polygonLayout,
// Описываем фигуру активной области "Полигон".
iconShape: {
type: "Polygon",
// Полигон описывается в виде трехмерного массива. Массив верхнего уровня содержит контуры полигона.
// Первый элемента массива - это внешний контур, а остальные - внутренние.
coordinates: [
// Описание внешнего контура полигона в виде массива координат.
[
[-28, -76],
[28, -76],
[28, -20],
[12, -20],
[0, -4],
[-12, -20],
[-28, -20],
],
// , ... Описание внутренних контуров - пустых областей внутри внешнего.
],
},
}
);
map.geoObjects.add(polygonPlacemark);
});
```
{% endlist %}