В экосистеме HERE Technologies визуальная часть карты строится не только на геометрии и данных тайлов, но и на DOM-слое, который активно использует CSS для оформления пользовательских элементов. Карта сама по себе рендерится в WebGL или Canvas, однако любые пользовательские маркеры, инфо-блоки, кастомные слои и интерактивные оверлеи чаще всего существуют как HTML-элементы, стилизация которых полностью контролируется через CSS.
Ключевая особенность подхода заключается в разделении двух уровней:
CSS работает исключительно со вторым уровнем, что открывает гибкость, недоступную в чистом canvas-рендеринге.
Корневой контейнер карты обычно представляет собой обычный
<div>, в который библиотека инициализирует рендеринг.
Его стили критичны для корректной работы всей системы.
Основные параметры:
Типовая конфигурация:
#map {
width: 100%;
height: 600px;
position: relative;
overflow: hidden;
}position: relative обеспечивает корректное
позиционирование DOM-оверлеевoverflow: hidden предотвращает выход элементов за
пределы картыМеханизм H.map.DomIcon позволяет использовать
HTML-элементы в качестве маркеров. Это основной инструмент
CSS-стилизации в API.
Пример структуры DOM-иконки:
const markerElement = document.createElement('div');
markerElement.className = 'custom-marker';
const icon = new H.map.DomIcon(markerElement);
const marker = new H.map.DomMarker({ lat: 52.5, lng: 13.4 }, { icon });
map.addObject(marker);.custom-marker {
width: 24px;
height: 24px;
background: #2b6cff;
border-radius: 50%;
border: 2px solid #ffffff;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
cursor: pointer;
transform: translate(-50%, -50%);
}transform: translate(-50%, -50%) центрирует маркер
относительно координатыbox-shadow используется для отделения от картыВся DOM-надстройка карты подчиняется строгой системе слоёв. Ошибки в
z-index — одна из самых частых причин визуальных
конфликтов.
Типовая структура:
Пример CSS:
.custom-marker {
z-index: 10;
}
.custom-infobox {
z-index: 100;
}
.map-overlay-ui {
z-index: 1000;
}Элементы внутри карты могут находиться в отдельных stacking contexts,
поэтому глобальный z-index иногда не работает без
корректного позиционирования (position: absolute или
relative).
Инфо-окна формируются как HTML-блоки и полностью управляются CSS. Это делает их аналогом модальных компонентов внутри карты.
Пример структуры:
<div class="infobox">
<div class="infobox-header">Объект</div>
<div class="infobox-body">Описание точки</div>
</div>CSS:
.infobox {
background: #ffffff;
border-radius: 8px;
padding: 12px;
min-width: 200px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
font-family: Arial, sans-serif;
}
.infobox-header {
font-weight: 600;
margin-bottom: 6px;
color: #1a1a1a;
}
.infobox-body {
font-size: 13px;
color: #555;
line-height: 1.4;
}Инфо-окна часто анимируются через CSS, а не через API карты:
.infobox {
opacity: 0;
transform: translateY(10px);
transition: all 0.2s ease;
}
.infobox.visible {
opacity: 1;
transform: translateY(0);
}CSS позволяет обрабатывать состояния маркеров без участия логики карты:
.custom-marker:hover {
transform: translate(-50%, -50%) scale(1.1);
background: #ff4d4d;
}Также часто используются классы состояния:
.active.selected.disabled.custom-marker.active {
background: #00c853;
box-shadow: 0 0 0 4px rgba(0,200,83,0.2);
}Карты должны корректно работать в разных разрешениях, поэтому CSS играет ключевую роль в адаптивной подстройке интерфейса.
@media (max-width: 768px) {
#map {
height: 400px;
}
.custom-marker {
width: 18px;
height: 18px;
}
}Хотя API карты управляет масштабом геометрии, CSS может адаптировать визуальные элементы:
.custom-marker {
transition: transform 0.15s ease;
}Или динамическое изменение классов через JS при изменении zoom уровня.
Часто вместо чистого HTML используется SVG, который лучше масштабируется.
<svg class="svg-marker" width="24" height="24">
<circle cx="12" cy="12" r="8"></circle>
</svg>CSS:
.svg-marker circle {
fill: #2979ff;
stroke: #ffffff;
stroke-width: 2;
}
.svg-marker:hover circle {
fill: #1565c0;
}Хотя события обрабатываются JavaScript, CSS часто используется для визуального отражения состояния событий.
Пример:
.marker-loading {
animation: pulse 1.2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}Это используется для отображения загрузки данных точек на карте.
Карты активно используют события мыши, поэтому CSS должен учитывать взаимодействие.
.custom-marker {
pointer-events: auto;
}
.map-overlay-block {
pointer-events: none;
}При большом количестве маркеров CSS-оптимизация становится критической.
Рекомендуемые практики:
box-shadow) на тысячах
элементовtransform вместо изменения
top/leftwill-change.custom-marker {
will-change: transform;
}CSS редко используется изолированно — он тесно связан с API карты.
Пример сценария:
selectedmarkerElement.classList.add('selected');.custom-marker.selected {
background: #ffd600;
transform: translate(-50%, -50%) scale(1.2);
}Такой подход снижает нагрузку на API карты и переносит визуальную логику в слой стилей.
При работе с кластеризацией CSS становится инструментом визуального выражения плотности данных.
.cluster-marker {
width: 40px;
height: 40px;
background: #673ab7;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}При увеличении количества объектов часто применяется градиентная визуализация:
.cluster-marker.high-density {
background: #d32f2f;
}
.cluster-marker.low-density {
background: #388e3c;
}Помимо самой карты, часто используется UI-надстройка:
CSS для таких элементов должен учитывать карту как фон:
.map-ui {
position: absolute;
top: 10px;
left: 10px;
z-index: 2000;
background: rgba(255,255,255,0.95);
padding: 10px;
border-radius: 6px;
}CSS в архитектуре HERE Maps API выполняет роль связующего слоя между географическими данными и пользовательским интерфейсом. Он управляет:
При этом геометрическая логика остаётся за API карты, а визуальная и интерактивная выразительность концентрируется в стилях.