Интеграция карты Leaflet

Leaflet - это библиотека JavaScript с открытым исходным кодом, которая используется для создания интерактивных мобильных карт. Она разработана таким образом, чтобы быть легковесной, простой и удобной в использовании. Для интеграции карты Leaflet на веб-сайт необходимо включить JavaScript- и CSS-файлы Leaflet и создать контейнер для хранения карты.

Подключение Leaflet

Для подключения библиотеки Leaflet на веб-сайт можно использовать следующий код:

<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>

Эти две строки кода включают необходимые JavaScript- и CSS-файлы Leaflet.

Создание контейнера для карты

Для создания контейнера для карты можно использовать тег <div> с уникальным идентификатором. Например:

<div id="os-map"></div>

Добавление карты

Для добавления карты на веб-сайт можно использовать следующий JavaScript-код:

// указание координат
let geo_lon = 'lon';
let geo_lat = 'lat';

// Где вывести карту.
var element = document.getElementById('os-map');

// Высота обязательно должна быть установлена. Это можно сделать в CSS.
element.style = 'height:400px;';

// Создание карты Leaflet.
var map = L.map(element);

// Добавление копирайта на карту с помощью L.tileLayer.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="<http://osm.org/copyright>">OpenStreetMap</a> contributors'
}).addTo(map);

// Координаты GPS для метки.
var target = L.latLng(geo_lon,geo_lat);

// Установка центра карты с масштабом 18.
map.setView(target, 18);

// Установка маркера в том же месте.
L.marker(target).addTo(map);

Этот код создает карту Leaflet и добавляет ее в контейнер с идентификатором «osm-map». Он также устанавливает центр карты и добавляет маркер на координаты, указанные в переменных geo_lon и geo_lat.

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

<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

<script type="text/javascript">
    // указание координат
    let geo_lon = 'lon';
    let geo_lat = 'lat';

    // Где вывести карту.
    var element = document.getElementById('os-map');

    // Высота обязательно должна быть установлена. Это можно сделать в CSS.
    element.style = 'height:400px;';

    // Создание карты Leaflet.
    var map = L.map(element);

    // Добавление копирайта на карту с помощью L.tileLayer.
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="<http://osm.org/copyright>">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Координаты GPS для метки.
    var target = L.latLng(geo_lon,geo_lat);

    // Установка центра карты с масштабом 18.
    map.setView(target, 18);

    // Устанвока маркера в том же месте.
    L.marker(target).addTo(map);
</script>
<div id="os-map"></div>

Заключение

Leaflet - это мощный и гибкий инструмент для создания интерактивных карт в вебе. Благодаря своему легковесному и простому в использовании API, он идеально подходит для создания мобильных карт, которые работают хорошо на различных устройствах.