Leaflet

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

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

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

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

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

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

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

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

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

Нижче наведено приклад вбудови мапи в 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. Release 1.7.1 — 2020.
  2. License - Leaflet. Leaflet. Процитовано 12.02.2015.
  3. Lovelace, Robin. Testing web map APIs - Google vs OpenLayers vs Leaflet. Архів оригіналу за 10 серпня 2014.
  4. Macwright, Tom (6 серпня 2014). Leaflet Creator Vladimir Agafonkin Joins MapBox. Mapbox.
  5. Приклад вбудови мапи в html сторінку
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.