Відображення карти і геолокації за адресою або іншими критеріями на Вашій ВЕБ-сторінці з використанням бібліотеки Leaflet.js і плагіна Leaflet.GeoSearch
Для відображення карти і геолокації за адресою або іншими критеріями на Вашій ВЕБ-сторінці, необхідно завантажити JavaScript Leaflet і плагін Leaflet.GeoSearch.
Завантажити останню версію Leaflet можна на сайті http://leafletjs.com/ за посиланням http://leafletjs.com/download.html
Завантажити оригінальну версію Leaflet.GeoSearch можна за посиланням https://github.com/smeijer/L.GeoSearch або https://github.com/smeijer/L.GeoSearch/archive/master.zip
У стандартному архіві Leaflet.GeoSearch міститься пошук на серверах Google, OpenStreetMap, Nokia та ін. Використовуючи приклади можна цей список легко розширити.
Набір серверів геолокації для Leaflet.GeoSearch мають вигляд:
- L.GeoSearch.Provider.Esri
- L.GeoSearch.Provider.Google
- L.GeoSearch.Provider.OpenStreetMap
Використання
Приклад використання OpenStreetMap
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.OpenStreetMap()
}).addTo(map);
Приклад використання Google
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.Google()
}).addTo(map);
Приклад використання GISFile для шару
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'Ім'я шару'})
}).addTo(map);
Приклад використання GISFile для проекту (карти)
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.GISFile( {type:'map', name:'Ім'я проекту'})
}).addTo(map);
Ви можете заповнити й інші параметри, що настроюються, такі як: установка позиції панелі пошуку і відображення маркера.
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.OpenStreetMap(),
position: 'topcenter',
showMarker: true
}).addTo(map);
Вибір сервера геокодування
Розглянутий вище варіант передбачає використання тільки одного постачальника для пошуку, ми це трохи підправили.
Для надання користувачу вибору сервера скачайте і замініть Java скрипт http://gisfile.com/js/l.control.geosearch.js та CSS файл http://gisfile.com/css/l.geosearch.css
У новій версії доданий параметр providers - список постачальників геокодування та selected - активний сервер за замовчуванням у списку.
new L.Control.GeoSearch({
selected: 0,
providers: [{name:'GISFile', provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'world'})},
{name:'Google', provider: new L.GeoSearch.Provider.Google()},
{name:'OpenStreetMap', provider: new L.GeoSearch.Provider.OpenStreetMap()}]
}).addTo(map);
Оновлений скрипт можна використовувати і як оригінальний (приклади вище).
Приклад використання
Приклад відображення карти
<html>
<head>
<link rel="stylesheet" href="leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="leaflet.ie.css" type="text/css" >
<![endif]-->
<script src="leaflet.js"></script>
<script src="l.control.geosearch.js"></script>
<link rel="stylesheet" href="l.geosearch.css" />
<script src="l.geosearch.provider.openstreetmap.js"></script>
<script src="l.geosearch.provider.google.js"></script>
<script src="l.geosearch.provider.gisfile.js"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 500px"></div>
<script type="text/javascript">
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
new L.Control.GeoSearch({
searchLabel: 'Рядок пошуку',
notFoundMessage: 'Не знайдено',
position: 'topcenter',
showMarker: true,
selected: 0,
providers: [{name:'GISFile', provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'world'})},
{name:'Google', provider: new L.GeoSearch.Provider.Google()},
{name:'OpenStreetMap', provider: new L.GeoSearch.Provider.OpenStreetMap()}]
}).addTo(map);
</body>
</html>