---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/icon_customImage.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/icon_customImage.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Добавление метки с собственным изображением
Open in CodeSandbox
API предоставляет возможность задавать меткам собственные изображения.
Чтобы установить нужное изображение, задайте для метки следующие опции:
- iconLayout: "default#image";
- iconImageHref: {URL графического файла}.
Чтобы установить изображение с контентом, задайте для метки следующие опции:
- iconLayout: "default#imageWithContent";
- iconImageHref: {URL графического файла}.
И задайте содержимое иконки геообъекта:
- iconContent: 'содержимое';
Также могут быть установлены опции iconImageSize (ширина и высота изображения в пикселях), iconImageOffset (сдвиг левого верхнего угла иконки относительно
точки привязки), iconImageClipRect (координаты отображаемой области исходного изображения в пикселях), iconContentOffset (смещение слоя с содержимым относительно слоя с картинкой) и iconContentLayout (макет содержимого).
{% list tabs %}
- index.html
```html
Добавление метки с собственным изображением
```
- icon_customImage.js
```js
ymaps.ready(function () {
var myMap = new ymaps.Map(
"map",
{
center: [55.751574, 37.573856],
zoom: 9,
},
{
searchControlProvider: "yandex#search",
}
),
// Создаём макет содержимого.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'$[properties.iconContent]
'
),
myPlacemark = new ymaps.Placemark(
myMap.getCenter(),
{
hintContent: "Собственный значок метки",
balloonContent: "Это красивая метка",
},
{
// Опции.
// Необходимо указать данный тип макета.
iconLayout: "default#image",
// Своё изображение иконки метки.
iconImageHref: "icons/pin.svg",
// Размеры метки.
iconImageSize: [48, 48],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-5, -44],
}
),
myPlacemarkWithContent = new ymaps.Placemark(
[55.661574, 37.573856],
{
hintContent: "Собственный значок метки с контентом",
balloonContent: "А эта — новогодняя",
iconContent: "12",
},
{
// Опции.
// Необходимо указать данный тип макета.
iconLayout: "default#imageWithContent",
// Своё изображение иконки метки.
iconImageHref: "icons/christmass-head.svg",
// Размеры метки.
iconImageSize: [48, 48],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-24, -24],
// Смещение слоя с содержимым относительно слоя с картинкой.
iconContentOffset: [15, 15],
// Макет содержимого.
iconContentLayout: MyIconContentLayout,
}
);
myMap.geoObjects.add(myPlacemark).add(myPlacemarkWithContent);
});
```
{% endlist %}