---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/editor_icon_layout.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/editor_icon_layout.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Задание изображений для редактора ломаной
Open in CodeSandbox
Для ломаных доступен визуальный редактор.
Ссылка на редактор содержится в поле editor объекта-ломаной.
Опции vertexInteractiveOptions и edgeInteractiveOptions позволяют использовать для меток вершин и промежуточных точек опции с постфиксами, привязанными к текущему состоянию вершины.
Если вам не требуется менять опции вершин и промежуточных меток в зависимости от их состояния, то нужно отключить соответствующую опцию.
Доступны следующие постфиксы для меток вершин:
- Hover - опции с данным постфиксом применяются при наведении на вершину указателя мыши;
- Drag - опции с данным постфиксом применяются при перетаскивании вершины;
- Active - опции с данным постфиксом применяются, когда для вершины открыто контекстное меню.
Примеры таких опций: vertexLayoutHover, vertexIconImageSizeActive, vertexIconImageShapeHover и т.д.
Доступны следующие постфиксы для промежуточных точек:
- Hover - опции с данным постфиксом применяются при наведении на метку указателя мыши;
- Drag - опции с данным постфиксом применяются при перетаскивании метки.
Примеры таких опций: edgeLayoutHover, edgeIconImageShapeHover и т.д.
{% list tabs %}
- index.html
```html
Задание изображений для редактора ломаной
```
- editor_icon_layout.js
```js
ymaps.ready(init);
function init() {
// Создаем карту.
var myMap = new ymaps.Map(
"map",
{
center: [90, 15],
zoom: 3,
controls: [],
},
{
searchControlProvider: "yandex#search",
}
);
// Создаем ломаную.
var myPolyline = new ymaps.Polyline(
[
// Указываем координаты вершин.
[70, 20],
[70, 40],
[90, 15],
[70, -10],
],
{},
{
// Задаем опции геообъекта.
// Цвет с прозрачностью.
strokeColor: "#FF008888",
}
);
myPolyline.editor.options.set({
// Задаём для меток вершин опции с постфиксами, привязанными к текущему состоянию вершины.
// Класс макета для меток на вершинах ломаной линии.
vertexLayout: "default#image",
// URL графического файла.
vertexIconImageHref: "icons/button1.svg",
// Размеры слоя с картинкой.
vertexIconImageSize: [16, 16],
// Смещение картинки относительно точки привязки.
vertexIconImageOffset: [-8, -8],
// Опции с данным постфиксом применяются при наведении на вершину указателя мыши.
vertexLayoutHover: "default#image",
vertexIconImageSizeHover: [28, 28],
vertexIconImageOffsetHover: [-14, -14],
// Опции с данным постфиксом применяются, когда для вершины открыто контекстное меню.
vertexLayoutActive: "default#image",
vertexIconImageHrefActive: "icons/button1-active.svg",
vertexIconImageSizeActive: [16, 16],
vertexIconImageOffsetActive: [-8, -8],
// Опции с данным постфиксом применяются при перетаскивании вершины.
vertexLayoutDrag: "default#image",
vertexIconImageHrefDrag: "icons/button1-active.svg",
vertexIconImageSizeDrag: [16, 16],
vertexIconImageOffsetDrag: [-8, -8],
// Задаём для промежуточных меток опции с постфиксами, привязанными к текущему состоянию промежуточных меток.
edgeLayout: "default#image",
edgeIconImageHref: "icons/button2.svg",
edgeIconImageSize: [16, 16],
edgeIconImageOffset: [-8, -8],
// Опции с данным постфиксом применяются при наведении на промежуточную метку указателя мыши.
edgeLayoutHover: "default#image",
edgeIconImageSizeHover: [28, 28],
edgeIconImageOffsetHover: [-14, -14],
// Опции с данным постфиксом применяются при перетаскивании промежуточной метки.
edgeLayoutDrag: "default#image",
edgeIconImageHrefDrag: "icons/button2-active.svg",
edgeIconImageSizeDrag: [16, 16],
edgeIconImageOffsetDrag: [-8, -8],
});
// Добавляем линию на карту.
myMap.geoObjects.add(myPolyline);
// Включаем режим редактирования.
myPolyline.editor.startEditing();
}
```
{% endlist %}