Создание первой карты

Для работы с Mapbox GL JS требуется HTML-страница, содержащая контейнер для рендеринга карты и подключение необходимых ресурсов библиотеки.

Минимальная разметка включает фиксированный блок, который будет служить областью отображения карты:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title>Первая карта Mapbox GL JS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css" rel="stylesheet" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js"></script>

  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>

<body>
  <div id="map"></div>
</body>
</html>

Ключевым элементом является контейнер #map, который занимает всю доступную область экрана и используется библиотекой для отрисовки карты WebGL.

Получение токена доступа

Для работы с сервисами Mapbox требуется публичный access token. Он используется для авторизации всех запросов к API и загрузки картографических тайлов.

В коде токен задаётся через глобальную переменную:

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

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

Инициализация первой карты

Создание карты выполняется через конструктор mapboxgl.Map, которому передаётся объект конфигурации.

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

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

Основные параметры конфигурации

container

  • Указывает DOM-элемент или его идентификатор
  • Определяет область рендеринга карты

style

  • URL стиля карты
  • Например: mapbox://styles/mapbox/streets-v12
  • Определяет визуальное оформление: дороги, здания, водоёмы

center

  • Координаты центра карты в формате [longitude, latitude]
  • Определяет начальную позицию камеры

zoom

  • Уровень масштабирования
  • Чем больше значение, тем ближе изображение

Система координат и масштабирование

В Mapbox GL JS используется стандарт WGS84, где координаты задаются как:

[долгота, широта]

Пример:

center: [69.2401, 41.2995]

Значение zoom регулирует детализацию:

  • 0–3 — глобальный обзор
  • 4–6 — континентальный уровень
  • 7–10 — города и регионы
  • 11–15 — улицы и кварталы
  • 16+ — здания и объекты

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

Инициализация карты асинхронна, поэтому используется событие load, гарантирующее завершение загрузки стиля и слоёв.

map.on('load', () => {
  console.log('Карта загружена');
});

На этом этапе становится доступным добавление слоёв, источников данных и дополнительных визуальных компонентов.

Изменение базового стиля

Стиль карты можно менять динамически без пересоздания объекта:

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

Распространённые стили:

  • streets — уличная карта
  • satellite — спутниковые снимки
  • satellite-streets — гибридный режим
  • light / dark — минималистичные стили

Управление камерой

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

Плавное перемещение

map.flyTo({
  center: [69.2401, 41.2995],
  zoom: 12,
  speed: 1.2
});

Мгновенное изменение

map.jumpTo({
  center: [69.2401, 41.2995],
  zoom: 8
});

Анимация с переходом

map.easeTo({
  center: [69.2401, 41.2995],
  zoom: 14,
  duration: 2000
});

Полный минимальный пример

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title>Mapbox GL JS карта</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css" rel="stylesheet" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js"></script>

  <style>
    body { margin: 0; }
    #map { height: 100vh; width: 100vw; }
  </style>
</head>

<body>
  <div id="map"></div>

  <script>
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v12',
      center: [69.2401, 41.2995],
      zoom: 9
    });

    map.on('load', () => {
      map.addControl(new mapboxgl.NavigationControl());
    });
  </script>
</body>
</html>
Оглавление