Leaflet

JavaScript бібліотека для веб-інтерактивної картографії

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

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

CMNS: Leaflet у Вікісховищі

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

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

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

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

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

Використання ред.

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

Нижче наведено приклад вбудови мапи в 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.

Примітки ред.

  1. License - Leaflet. Leaflet. Архів оригіналу за 6 січня 2021. Процитовано 12.02.2015. 
  2. Lovelace, Robin. Testing web map APIs - Google vs OpenLayers vs Leaflet. Архів оригіналу за 10 серпня 2014. 
  3. Macwright, Tom (6 серпня 2014). Leaflet Creator Vladimir Agafonkin Joins MapBox. Mapbox. Архів оригіналу за 12 вересня 2015. 
  4. Приклад вбудови мапи в html сторінку. Архів оригіналу за 21 серпня 2018. Процитовано 21 серпня 2018.