Робота з картою OpenStreetMap

OpenStreetMap набирає величезної популярності серед веб-картографічних проектів. Причинами цього є його некомерційний стиль, докладна вільна та безкоштовна географічна карта світу, а також те, що сервіс Google Maps, який досі використовував значну кількість сайтів, став платним! Також слід зазначити, що OpenStreetMap з'явився задовго до Google Maps.


На сайті Openstreetmap.org розміщена карта, онлайн-інструменти з її редагування, щоденники учасників, форум, довідкова вікі та розділ допомоги. В Openstreetmap, як і в Wikipedia, основну частину даних додають приватні особи, зацікавлені у розвитку проекту. По кожній ділянці карти видно історію правок, що у свою чергу знижує можливість вандалізму і, в деяких випадках, дозволяє оптимізувати роботу кількох людей, зайнятих однією і тією ж ділянкою картки.

Ця стаття буде доповнюватися під час реалізації функціоналу різних проектів, пов'язаних із OpenStreetMap.

Для повноцінної роботи карти OpenStreetMap ми будемо використовувати бібліотеку JavaScript Leaflet, яка є невеликою, простою і має відмінну документацію.

У статті розглянемо приклад, який показує, як:

- Налаштувати просту карту за допомогою бібліотеки Leaflet;

- завантажити розташування маркера;

- відображати координати при натисканні на карті або створювати візуально маркери.

Нам обов'язково потрібно завантажити бібліотеки jQuery та Leaflet:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Leaflet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>

Ці рядки включають бібліотеки CSS та JavaScript, які нам потрібні для відображення та роботи картки. У цьому прикладі ми посилаємося на файли, які зберігаються на віддаленому сервері за допомогою CDNJS. Інший варіант – розмістити ці файли самостійно, але переваги використання CDNJS:

1. Полегшує навантаження на сервер.

2. CDN розповсюджують контент, щоб він був ближчим до користувача, що прискорює завантаження.

3. Браузери обмежують кількість запитів HTTP для кожного хоста, тому доступ до кількох різних хостів дозволяє вилучати дані паралельно, що призводить до швидшого відображення сторінки.

4. Якщо користувач відвідав інший сайт, використовуючи той самий сценарій, він автоматично буде збережений у кеші, що дозволить на вашому сайті не завантажувати його знову і значно прискорить відображення сторінки.

Після завантаження скриптів та стилів необхідно включити у файл ідентифікатор картки:

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

Ми створюємо Div під назвою map з висотою та шириною, який буде заповнений нашою картою, коли ми створимо її у нашому JavaScript. Якщо ми не вкажемо ширину, карта динамічно регулюватиме ширину для сторінки.

Остання частина файлу є ключем. Тут ми завантажуємо JavaScript, який виконує налаштування та відображення нашої карти.

<script>
var map = L.map('map').setView([-16.50629, -68.12703], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    subdomains: ['a','b','c']
}).addTo(map);
    L.marker([-16.50629, -68.12703]).addTo(map).bindPopup("My Marker");
</script>

Рядок:

var map = L.map('map').setView([-16.50629, -68.12703], 12);

створить нову карту, призначить її ідентифікатор – map та встановить деякі параметри. І тут ми центруємо початковий вид, заданим координатами широти і довготи. Також ми встановлюємо рівень масштабування 12. Існують багато інших опцій, які ви можете налаштувати.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    subdomains: ['a','b','c']
}).addTo(map);

Цей код додає шар на карту, повідомляючи їй, який набір шарів відображати та де їх отримати. Існує кілька різних серверів, які ви можете використовувати - або ви можете розмістити свій власний.

Знову ж таки, у Leaflet є має багато опцій, які можна використовувати при створенні tileLayer. У прикладі першим аргументом є шаблон URL, тому Leaflet знає, як правильно отримувати шари з серверів. Далі йде атрибуція – це те, що відображається у правому нижньому куті карти. Важливо, щоб додали правильну інформацію для правильної атрибуції набору шарів.

Нарешті, у нас є список піддоменів. Цей масив рядків входить до складу {s} шаблону URL. Зверніть увагу, що цей список залежить від серверів шарів, які ви використовуєте. Ця опція дозволяє браузеру завантажувати файли з декількох серверів одночасно, що призводить до швидшого завантаження сторінки та швидших оновлень, коли користувач перетягує картку.

Тепер ми маємо інтерактивну карту, яку ми можемо перетягувати, збільшувати та зменшувати. Наступне, що потрібно зробити, це додати маркери.

L.marker([-16.50629, -68.12703]).addTo(map).bindPopup("My Marker");

У цьому варіанті координати розміщені у коді скрипта. Але рекомендується зберігати в окремому файлі, щоб їх можна було легко замінити або оновити без зміни основного файлу.

Маркери Leaflet пропонують багато варіантів налаштування. У нашому прикладі ми створюємо маркер у певному місці, прив'язуємо до нього просте спливаюче вікно і додаємо його на карту. У цьому рядку вказується широта та довгота, а також дані, що відображаються у спливаючому вікні.

Основне завдання картки виконано, ми показали маркери та виведи необхідну інформацію. Але як додавати координати для маркеру? Ось робочий приклад:

<script>
// Завантажуємо картку
addMapPicker(-16.50629, -68.12703, 12);
function addMapPicker(cordX, cordY, zoom) {
    var mapCenter = [cordX, cordY];
    var map = L.map('map').setView([cordX, cordY], zoom);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    var marker = L.marker(mapCenter).addTo(map);
    map.on('click', function(e) {
        // Оновлюємо маркер
        marker.setLatLng([e.latlng.lat, e.latlng.lng])
        // Надсилаємо дані AJAX
        // ...
        alert(e.latlng.lat + ' ' + e.latlng.lng);
    });
}
</script>

І html код:

<input type="hidden" id="coordinates" />
<div id="map" style="height: 300px; width: 400px;">

Тепер, при натисканні на карті, буде виводиться ширина та довгота. Дещо допрацювавши скрипт, можна відправляти дані за допомогою бібліотеки jQuery.