---
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/en/llms.txt
# 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.
{% list tabs %}
- index.html
```html
Example of setting custom HTML layouts for placemarks with your
own hotspot shapes
```
- placemark_shape.js
```js
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(
''
);
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(
''
);
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(
''
);
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);
});
```
{% endlist %}