Подключение через CDN

Leaflet распространяется как лёгкая клиентская библиотека, не требующая сборки для базового использования. Подключение через CDN (Content Delivery Network) является наиболее быстрым способом интеграции в веб-страницу, особенно на этапе прототипирования или в проектах без системы сборки.

CDN предоставляет готовые файлы библиотеки, размещённые на распределённых серверах. Браузер загружает их напрямую по URL, что исключает необходимость локальной установки пакетов и настройки сборщиков.

Подключение CSS и JavaScript

Для корректной работы карты требуется подключение двух основных ресурсов:

  • CSS-файл, отвечающий за стили интерфейса карты
  • JavaScript-файл, содержащий логику библиотеки

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

<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>

<script
  src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js">
</script>

Важно соблюдать порядок подключения: CSS должен быть загружен до инициализации карты, иначе элементы интерфейса будут отображаться некорректно.

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

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

Пример закреплённой версии:

https://unpkg.com/leaflet@1.9.4/dist/leaflet.js

Рекомендуется избегать конструкций без версии:

https://unpkg.com/leaflet/dist/leaflet.js

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

Альтернативные CDN

Leaflet доступен через несколько популярных CDN-сервисов.

cdnjs

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"
/>

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js">
</script>

jsDelivr

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css"
/>

<script
  src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js">
</script>

Разные CDN могут отличаться политикой кеширования и скоростью доставки в зависимости от региона пользователя.

Базовая инициализация после подключения CDN

После загрузки файлов становится доступен глобальный объект L, через который осуществляется управление картой.

Простейшая инициализация:

<div id="map" style="height: 400px;"></div>

<script>
  const map = L.map('map').setView([51.505, -0.09], 13);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  }).addTo(map);
</script>

Ключевые элементы:

  • L.map() — создание экземпляра карты
  • setView([lat, lng], zoom) — установка центра и масштаба
  • L.tileLayer() — подключение тайлового слоя

Подключение тайлового слоя

Leaflet не поставляет собственные карты. CDN-подключение библиотеки всегда дополняется внешним источником тайлов.

Наиболее распространённый вариант — OpenStreetMap:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap'
}).addTo(map);

Шаблон URL использует параметры:

  • {s} — поддомен сервера
  • {z} — уровень масштабирования
  • {x}, {y} — координаты тайла

Подключение с integrity и crossorigin

Для повышения безопасности используется Subresource Integrity (SRI). Это позволяет браузеру проверять целостность загруженного файла.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css"
  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
  crossorigin=""
/>

<script
  src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"
  integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
  crossorigin="">
</script>

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

  • защита от подмены CDN-файлов
  • контроль целостности при кешировании
  • соответствие требованиям безопасности современных браузеров

Особенности загрузки через CDN

CDN-подключение влияет на поведение приложения в нескольких аспектах:

Асинхронная загрузка

Если скрипт подключается без defer, выполнение HTML может блокироваться до завершения загрузки:

<script defer src="...leaflet.js"></script>

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

Кеширование

CDN активно использует кеш браузера. При повторных посещениях:

  • файлы загружаются локально
  • уменьшается время инициализации
  • снижается нагрузка на сеть

Зависимость от сети

Отсутствие подключения к интернету приводит к невозможности загрузки библиотеки. Это критично для офлайн-приложений, где CDN не применим.

Порядок подключения и типичные ошибки

Правильная последовательность:

  1. Подключение CSS
  2. Подключение JavaScript библиотеки
  3. Создание контейнера карты
  4. Инициализация L.map()

Частые ошибки:

  • отсутствие CSS → карта отображается без стилей
  • вызов L.map() до загрузки скрипта → L is not defined
  • отсутствие высоты у контейнера → пустой блок без отображения карты
  • неправильный порядок подключения слоёв → визуальные артефакты

Минимальный шаблон HTML с CDN

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Leaflet CDN</title>

  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css"
  />
</head>
<body>

<div id="map" style="height: 500px;"></div>

<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
  const map = L.map('map').setView([55.751244, 37.618423], 10);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
</script>

</body>
</html>
Оглавление