Leaflet JavaScript бібліотека з відкритим сирцевим кодом для відображення мап на html сторінках Самодостатня сучасна HTM

Leaflet — JavaScript бібліотека з відкритим сирцевим кодом для відображення мап на html-сторінках. Самодостатня, сучасна (HTML5, CSS3), не велика за обсягом, з широким колом ліцензійної угоди, проста у використані.

Leaflet


Тип	Бібліотека JavaScript
Автор	Агафонкін Володимир
Перший випуск	13 травня 2011
Стабільний випуск	1.3.3 (18 липня 2018; 5 років тому (2018-07-18))
Платформа	Див Browser support
Операційна система	кросплатформова програма
Мова програмування	JavaScript
Стан розробки	Діючий
Ліцензія	BSD-2-Clause
Репозиторій	github.com/Leaflet/Leaflet
Вебсайт	leafletjs.com
Медіафайли у Вікісховищі

Бібліотека реалізує підтримку шарів мап, які побудовані за технологією: WMS, GeoJSON, Тайли або векторного відображення поверхні. Інші типи проєкцій мап підтримуються за допомогою додатків. Головне, щоб кожний формат мав однозначну функцію перетворення локальних координат в географічні координати відповідно до картографічної проєкції, в якої ці локальні координати задані.

Започаткована в 2011 році. Працює на більшості мобільних та десктопних платформ, які підтримують стандарти HTML5 та CSS3.

Як та (Google Maps API) є найбільш популярною JavaScript картографічною бібліотекою й використовується багатьма сайтами, такими як, Вікіпедія, , Flickr тощо.

Leaflet не потребує від програміста досвіду роботи з картографічними сервісами, значно спрощуючи задачу вбудови мапи на html-сторінки або вебдодатки. Бібліотека дозволяє працювати з різними шарами, в якості джерел мапи використовувати будь-якій публічний вебсервіс тайлів (порізані зображення мапи). Є можливість завантажувати дані та накладати дані з GeoJSON файлів, змінювати стилі, додавати інтерактивні маркери.

Спроектував та розробив бібліотеку киянин Агафонкін Володимир, якій на час виходу першої версії (2011 рік) був співробітником компанії , а з 2013 року працює в .

Використання

На html-сторінці через тег div визначається область, де має відображатись мапа. Для цієї області визначаються параметри поведінки мапи: джерело мапи, точка та масштаб, з якої починати відображати мапу, маркери тощо.

Нижче наведено приклад вбудови мапи в html-сторінку.

 <div id="mapid" style="width: 40%; height: 300px; position: absolute; top:200px; left:58%"> </div> <script>  // створюємо об'єкт mymap, розміщуємо його в div-області mapid  // й визначаємо яку точку відображати та на якому масштабі  var mymap = L.map('mapid').setView([50.43962, 30.50234], 16);  // визначаємо атрибути мапи: джерело, межі масштабування, авторські права  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { maxZoom: 16, minZoom: 5,  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' , id: 'myosm' }).addTo(mymap);  // вказуємо межі відображення мапи  mymap.setMaxBounds([ [51.4407, 25.1930], [49.5696, 33.9732] ]);    // встановлюємо маркер на мапу  L.marker([50.43962, 30.50234], {clickable: false,  icon: new L.Icon({ iconUrl: 'icon/MarkerL.png',  iconSize: [30, 40],   iconAnchor: [15, 40] })  }).addTo(mymap);  </script>

Об'єкти бібліотеки доступні через глобальну зміну L.

Примітки

. Leaflet. Архів оригіналу за 6 січня 2021. Процитовано 12.02.2015.
Lovelace, Robin. . Архів оригіналу за 10 серпня 2014.
Macwright, Tom (6 серпня 2014). . Mapbox. Архів оригіналу за 12 вересня 2015.
. Архів оригіналу за 21 серпня 2018. Процитовано 21 серпня 2018.

[1] . Leaflet. Архів оригіналу за 6 січня 2021. Процитовано 12.02.2015.

[2] Lovelace, Robin. . Архів оригіналу за 10 серпня 2014.

[3] Macwright, Tom (6 серпня 2014). . Mapbox. Архів оригіналу за 12 вересня 2015.

[4] . Архів оригіналу за 21 серпня 2018. Процитовано 21 серпня 2018.