Иконки

Добавление иконок

Вы можете добавлять на карту иконки через стилевой слой в Редакторе стилей или через метод addIcon():

map.addIcon('newIconName', { url: '//path_to_icon/icon.svg' });

В качестве аргументов метод принимает имя иконки и объект опций StyleIconConfig или StyleStretchableIconConfig, содержащий путь до иконки.

Ограничения по работе с методом:

• В качестве URL до иконки вы можете использовать только абсолютный путь, шаблонный путь или data URL, например //absolute_path_to_icon/icon.svg, //{appHost}/path_to_icon/icon.svg или data:image/svg+xml;base64,....
• В качестве иконки вы можете использовать только SVG-изображение.

Текст внутри SVG-файла рекомендуется конвертировать в кривые. Иначе, если на клиентском устройстве отсутствует используемый в SVG-файле шрифт, могут возникнуть визуальные отличия текста от исходной иконки.

Растягиваемая иконка

Чтобы иконка растягивалась под текст, укажите исходные width и height SVG-изображения и задайте растягиваемые области с помощью stretchX и stretchY. Фиксированные области сохраняют углы без изменений, а заданные области растягиваются. Текст внутри иконки задается через iconTextField, а iconTextPadding управляет отступами вокруг него:

В примере используется SVG-подложка размером 40 × 30 пикселей:

Параметры stretchX и stretchY задаются в пикселях исходного изображения:

map.addIcon('bubble', {
    url: bubbleUrl,

    // Ширина исходного изображения
    width: 40,

    // Высота исходного изображения
    height: 30,

    // Область изображения, которая будет растягиваться горизонтально — синяя полоса на схеме
    stretchX: [
        [10, 30], // пиксели между X=10 и X=30 (10 ≤ X ≤ 30)
    ],

    // Область изображения, которая будет растягиваться вертикально — розовая полоса на схеме
    stretchY: [
        [10, 20], // пиксели между Y=10 и Y=20 (10 ≤ Y ≤ 20)
    ],
});

В стиле слоя параметр iconTextPadding: [6, 10, 6, 10] задает отступы вокруг текста в порядке [top, right, bottom, left].

Изменение ранее добавленной иконки

Чтобы обновить ранее добавленную иконку, удалите её, а затем добавьте новую:

map.removeIcon('newIconName');
map.addIcon('newIconName', { url: '//path_to_icon/new-icon.svg' });

Изменение иконки из стиля

Чтобы изменить иконку из существующего стиля, удалите её, а затем добавьте новую:

map.removeIcon('metro_line10_33');
map.addIcon('metro_line10_33', { url: '//path_to_icon/new-metro_line10_33.svg' });

Передайте текущее имя иконки, которое используется в стиле. Посмотреть имя иконки вы можете в Редакторе стилей.