Streets, Outdoors, Light, Dark

Архитектура стилевой системы Mapbox GL JS

В Mapbox GL JS визуальное представление карты определяется стилем, описанным в формате Mapbox Style Specification. Стиль — это JSON-конфигурация, которая задаёт источники данных (sources), слои (layers), слои символов, типы рендеринга, шрифты, и визуальные свойства геометрии.

Каждый стиль загружается по URL вида:

mapbox://styles/mapbox/streets-v11

или через прямой JSON:

{
  "version": 8,
  "sources": {...},
  "layers": [...]
}

При смене стиля карта полностью пересобирает граф сцены WebGL, повторно загружает тайлы и применяет новую систему слоёв.

Streets — универсальная картографическая основа

Стиль Streets ориентирован на универсальное использование и является наиболее детализированным из базовых наборов.

URL:

mapbox://styles/mapbox/streets-v11

Особенности визуального представления

  • высокая плотность объектов: дороги, здания, POI
  • читаемая типографика на разных уровнях масштаба
  • чёткая дифференциация классов дорог (motorway, primary, secondary)
  • визуальная приоритизация городских объектов

Структура слоёв

В Streets используется большое количество слоёв:

  • road-* — дорожная сеть
  • building — 3D и 2D здания
  • water — водные объекты
  • poi-* — точки интереса
  • admin — административные границы
  • landuse — землепользование

Каждый слой имеет зависимости от zoom level:

"minzoom": 5,
"maxzoom": 18

Применение

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

  • навигационных систем
  • городских сервисов
  • логистических приложений
  • интерфейсов с высокой плотностью данных

Пример инициализации

mapboxgl.accessToken = 'TOKEN';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [37.6173, 55.7558],
  zoom: 10
});

Outdoors — карта природного рельефа и ландшафта

Outdoors оптимизирован для отображения природных и географических объектов.

URL:

mapbox://styles/mapbox/outdoors-v11

Визуальная специфика

  • усиленная визуализация рельефа (hillshade, terrain)
  • акцент на природных объектах
  • упрощённая городская детализация
  • усиленные контуры высот

Ключевые компоненты стиля

  • landcover — леса, растительность
  • contour — линии высот
  • hillshade — затенение рельефа
  • water — водные поверхности с повышенной контрастностью
  • park — природные зоны

Отличия от Streets

Outdoors снижает визуальный шум городской среды:

  • меньше POI
  • упрощённые здания
  • приглушённая типографика
  • усиленная топографическая информация

Применение

Подходит для:

  • туристических приложений
  • трекинга и навигации на природе
  • спортивных сервисов (бег, велоспорт)
  • отображения маршрутов вне города

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

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/outdoors-v11',
  center: [10.0, 46.5],
  zoom: 6
});

Light — минималистичный светлый стиль

Light предназначен для визуализаций, где карта должна оставаться фоном.

URL:

mapbox://styles/mapbox/light-v10

Основные характеристики

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

Поведение слоёв

  • дороги и здания отображаются в серых оттенках
  • вода — светло-голубая или почти белая
  • POI минимизированы или скрыты
  • административные границы слабо выражены

Использование как базового слоя данных

Light часто применяется как подложка для:

  • аналитических карт
  • тепловых карт (heatmaps)
  • визуализации статистики
  • дашбордов

Пример наложения данных:

map.addLayer({
  id: 'population-heat',
  type: 'heatmap',
  source: 'population',
  paint: {
    'heatmap-intensity': 1,
    'heatmap-color': [
      'interpolate',
      ['linear'],
      ['heatmap-density'],
      0, 'rgba(33,102,172,0)',
      1, 'rgb(103,169,207)'
    ]
  }
});

Dark — тёмная карта для контрастных визуализаций

Dark — противоположность Light, оптимизированный для ночных интерфейсов и ярких данных.

URL:

mapbox://styles/mapbox/dark-v10

Визуальные принципы

  • тёмный фон (почти чёрный)
  • приглушённые базовые слои
  • высокая контрастность для данных поверх карты
  • уменьшенная детализация фона

Поведение слоёв

  • вода отображается тёмно-синим
  • дороги серо-оранжевые с низкой яркостью
  • здания почти сливаются с фоном
  • POI минимальны

Основное назначение

Dark применяется там, где важны:

  • визуализация больших объёмов данных
  • карты в тёмных интерфейсах (dashboards)
  • ночной режим приложений
  • отображение ярких слоёв поверх карты

Пример конфигурации

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/dark-v10',
  center: [2.3522, 48.8566],
  zoom: 11
});

Сравнение стилевых подходов

Уровень визуальной нагрузки

  • Streets — максимальная детализация
  • Outdoors — акцент на природной структуре
  • Light — минимализм
  • Dark — контрастная база для данных

Тип оптимальных задач

  • Streets: навигация, городские сервисы
  • Outdoors: маршруты, активный отдых
  • Light: аналитика, инфографика
  • Dark: визуализация данных, дашборды

Динамическая смена стилей

Mapbox GL JS позволяет менять стиль в рантайме:

map.setStyle('mapbox://styles/mapbox/dark-v10');

При смене стиля:

  • удаляются текущие слои и источники
  • перезагружаются тайлы
  • пересоздаётся WebGL pipeline
  • срабатывает событие style.load

Обработка события загрузки стиля

map.on('style.load', () => {
  map.addSource('custom-data', {
    type: 'geojson',
    data: '/data.geojson'
  });

  map.addLayer({
    id: 'custom-layer',
    type: 'circle',
    source: 'custom-data',
    paint: {
      'circle-radius': 6,
      'circle-color': '#ff0000'
    }
  });
});

Особенности работы со слоями поверх базовых стилей

Базовые стили Mapbox являются «живыми»: они содержат десятки предопределённых слоёв, которые можно модифицировать через:

map.setPaintProperty('road-primary', 'line-color', '#ff0000');

Однако структура слоёв зависит от выбранного стиля:

  • в Streets существует полный набор road layers
  • в Light и Dark слои упрощены
  • в Outdoors добавлены terrain layers

Поэтому идентификаторы слоёв необходимо проверять для каждого стиля отдельно.

Производительность и загрузка тайлов

Различия в стилях влияют на:

  • количество запрашиваемых тайлов
  • плотность рендеринга объектов
  • сложность символизации
  • использование fill-extrusion (3D)

Streets генерирует наибольшую нагрузку на GPU из-за количества слоёв и объектов. Light и Dark — наиболее лёгкие для рендеринга.

Типографика и визуальная иерархия

Mapbox использует динамическую типографику:

  • названия городов масштабируются по zoom
  • подписи дорог имеют приоритет
  • POI отображаются по уровню значимости

В Streets типографика многослойная, в Light и Dark — сокращённая, в Outdoors — акцентирована на природных объектах.

Использование кастомизации поверх базовых стилей

Базовые стили часто применяются как стартовая точка:

map.setStyle('mapbox://styles/mapbox/streets-v11');

map.on('style.load', () => {
  map.setPaintProperty('water', 'fill-color', '#a0c8f0');
});

Это позволяет:

  • сохранять структуру базового стиля
  • модифицировать визуальную часть
  • избегать полной сборки собственного стиля

Практика выбора стиля в зависимости от сценария

  • Streets — если требуется полноценная карта с максимальной информацией
  • Outdoors — если ключевым является рельеф и природная среда
  • Light — если карта должна быть подложкой под данные
  • Dark — если требуется визуальный контраст для аналитики и UI в тёмной теме
Оглавление