Кастомизация внешнего вида маркеров

В JavaScript SDK HERE Maps маркеры представлены объектами слоя карты, которые привязываются к географическим координатам и отрисовываются поверх тайловой подложки. Основная сущность — H.map.Marker, которая использует иконку (H.map.Icon) для визуального представления точки.

Механизм рендеринга маркеров опирается на два ключевых подхода:

  • растровые или векторные иконки через H.map.Icon
  • DOM-элементы через H.map.DomIcon

Выбор подхода напрямую влияет на производительность, гибкость и возможности стилизации.

Стандартные маркеры с H.map.Icon

Классический способ создания маркера основан на передаче изображения в качестве иконки.

const icon = new H.map.Icon('marker.png');

const marker = new H.map.Marker(
  { lat: 52.5200, lng: 13.4050 },
  { icon }
);

map.addObject(marker);

Ключевые параметры H.map.Icon

При создании иконки доступна настройка внешнего вида:

const icon = new H.map.Icon('marker.png', {
  size: { w: 32, h: 32 }
});

Дополнительно часто используется:

  • size — физический размер изображения
  • anchor — точка привязки маркера к координате
  • hitArea — область кликабельности

Привязка anchor

Anchor определяет, какая точка изображения совпадает с координатой:

const icon = new H.map.Icon('marker.png', {
  size: { w: 40, h: 40 },
  anchor: { x: 20, y: 40 }
});

В данном случае нижний центр изображения будет «стоять» на координате.

Масштабирование и адаптивные иконки

Одна из распространённых задач — динамическое изменение размера маркеров в зависимости от масштаба карты.

map.addEventListener('mapviewchange', () => {
  const zoom = map.getZoom();

  const scale = zoom > 10 ? 1.5 : 1.0;

  marker.setIcon(
    new H.map.Icon('marker.png', {
      size: {
        w: 32 * scale,
        h: 32 * scale
      }
    })
  );
});

Такой подход позволяет визуально выделять объекты при приближении карты.

Векторные иконки через SVG

SVG-иконки обеспечивают гибкость без потери качества при масштабировании.

const svgMarkup =
  '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">' +
  '<circle cx="12" cy="12" r="10" fill="red"/>' +
  '</svg>';

const icon = new H.map.Icon(svgMarkup);

const marker = new H.map.Marker(
  { lat: 48.8566, lng: 2.3522 },
  { icon }
);

map.addObject(marker);

Преимущества SVG:

  • отсутствие пикселизации при зуме
  • возможность динамически менять цвета
  • лёгкая генерация на основе данных

DOM-маркеры для сложной кастомизации

Для максимальной гибкости применяется H.map.DomIcon, который позволяет использовать HTML-разметку.

Создание DOM-иконки

const domElement = document.createElement('div');
domElement.className = 'custom-marker';
domElement.innerHTML = '<span>42</span>';

const domIcon = new H.map.DomIcon(domElement);

const marker = new H.map.DomMarker(
  { lat: 40.7128, lng: -74.0060 },
  { icon: domIcon }
);

map.addObject(marker);

CSS-стилизация

.custom-marker {
  width: 30px;
  height: 30px;
  background: #2b6cff;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

DOM-маркеры позволяют использовать:

  • анимации CSS
  • псевдоэлементы
  • сложные структуры HTML
  • динамические обновления без пересоздания иконки

Сравнение H.map.Icon и H.map.DomIcon

Разные подходы подходят под разные сценарии:

H.map.Icon

  • высокая производительность
  • подходит для большого количества маркеров
  • ограниченная кастомизация
  • рендеринг как изображение

H.map.DomIcon

  • максимальная гибкость оформления
  • поддержка HTML/CSS/JS
  • более высокая нагрузка на браузер
  • подходит для малого и среднего числа объектов

Управление смещением и якорями

При кастомизации важно правильно задавать смещение точки привязки, особенно для нестандартных форм маркеров.

const icon = new H.map.Icon('pin.png', {
  anchor: { x: 10, y: 30 }
});

Ошибки в anchor приводят к:

  • визуальному «прыжку» маркеров
  • неправильному позиционированию относительно координаты
  • проблемам при масштабировании

Динамическая смена иконок

Маркер может изменять внешний вид в зависимости от состояния данных.

function updateMarker(marker, status) {
  let color = 'green';

  if (status === 'warning') color = 'yellow';
  if (status === 'error') color = 'red';

  const svg =
    `<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="10" fill="${color}"/>
    </svg>`;

  marker.setIcon(new H.map.Icon(svg));
}

Такой подход применяется в системах мониторинга, логистике и трекинге.

Использование спрайтов

Для оптимизации загрузки изображений можно использовать sprite sheets.

const icon = new H.map.Icon('sprites.png', {
  size: { w: 32, h: 32 },
  anchor: { x: 16, y: 32 }
});

Хотя HERE Maps напрямую не управляет разрезанием спрайтов, логика переключения координат изображения реализуется вручную.

Анимация маркеров

DOM-маркеры позволяют создавать плавные анимации:

.custom-marker {
  transition: transform 0.2s ease;
}

.custom-marker:hover {
  transform: scale(1.2);
}

Для растровых маркеров применяется пересоздание иконки или использование canvas-генерации.

Поворот и ориентация маркеров

Маркер может быть ориентирован по направлению движения.

marker.setRotation(45);

Используется в:

  • транспортных трекинг-системах
  • отображении направления движения
  • навигационных сервисах

Важно учитывать, что не все типы иконок одинаково корректно поддерживают поворот.

Индивидуальная стилизация групп маркеров

При работе с множеством объектов часто применяется логика тематической дифференциации:

  • цвет по категории
  • форма по типу объекта
  • размер по значению метрики

Пример генерации иконки:

function createIcon(type) {
  const colors = {
    shop: 'blue',
    warehouse: 'gray',
    client: 'green'
  };

  const color = colors[type] || 'black';

  const svg = `
    <svg width="26" height="26">
      <rect width="26" height="26" fill="${color}" rx="6"/>
    </svg>
  `;

  return new H.map.Icon(svg);
}

Оптимизация при большом количестве маркеров

При десятках тысяч объектов кастомизация должна учитывать производительность.

Основные принципы:

  • переиспользование иконок вместо пересоздания
  • минимизация DOM-маркеров
  • использование кластеризации
  • упрощённые SVG вместо сложных HTML-структур

Пример переиспользования:

const sharedIcon = new H.map.Icon('marker.png');

const marker1 = new H.map.Marker(coord1, { icon: sharedIcon });
const marker2 = new H.map.Marker(coord2, { icon: sharedIcon });

Работа с прозрачностью и наложением

Визуальная иерархия маркеров регулируется через свойства слоя:

  • прозрачность изображения
  • порядок добавления объектов
  • z-index слоя
marker.setZIndex(10);

Это особенно важно при перекрытии объектов на плотных участках карты.

Интерактивная кастомизация

DOM-маркеры позволяют реагировать на события без дополнительного API-обвеса.

domElement.addEventListener('click', () => {
  domElement.classList.toggle('active');
});

В результате маркер может менять состояние:

  • выделение
  • раскрытие информации
  • отображение дополнительных элементов

Использование canvas для генерации иконок

Canvas позволяет создавать полностью динамические изображения:

const canvas = document.createElement('canvas');
canvas.width = 40;
canvas.height = 40;

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(20, 20, 15, 0, Math.PI * 2);
ctx.fill();

const icon = new H.map.Icon(canvas.toDataURL());

Подход используется для:

  • визуализации метрик
  • прогресс-индикаторов
  • пользовательских графиков на карте
Оглавление