Maplab API


Maplab API jest biblioteką JavaScript pozwalającą tworzyć aplikacje www z interaktywnymi mapami. Posiada wszystkie funkcje niezbędne deweloperom do tworzenia mapowej funkcjonalności. Bazuje na bibliotece Leaflet (w wersji 0.7). Użytkownicy Maplab API mogą korzystać ze wszystkich dobrodzejstw biblioteki Leaflet w tym z rozbudowanej biblioteki pluginów.


Pierwsze użycie i wstawienie mapy na stronę

W celu wstawienia mapy na stronę należy :

  • dołączyć do strony html skrypt MapLab API :

    <script src="https://www.maplab.pl/script/?v=v3&key=KLUCZ_API" />


    gdzie KLUCZ_API to klucz otrzymany na etapie rejestracji usługi.

  • utworzyć element DIV z określonym ID (używanym potem do inicjacji mapy) :

    <div id="mapid"></div>

  • upewnić się, że jest ustalona wysokość DIV z mapą ustawiając to w css :

    #mapid { height: 180px; }

  • inicjujemy mapę kodem ustalając centrum mapy i skalę :

    var mymap = L.map('mapid').setView([52.1969336, 21.1235211], 13);

  • następnie okreslamy warstwę z podkładem mapy :

    L.tileLayer.provider('MaplabPL').addTo(mymap);

Zobacz przykład w nowym oknie : LINK

Pełna dokumentacja operacji na mapie znajduje się tutaj.

Przykłady wykorzystania Maplab API


Wstawianie ikon markerów na mapę

W celu wstawienia ikony markera używamy kodu :

var marker = L.marker([52.1969336, 21.1235211]).addTo(mymap);

Jeśli chcemy dodać tooltip do markera (pojawi się po kliknięciu na marker) używamy kodu :

marker.bindPopup("Hello world !");

Zobacz przykład w nowym oknie : LINK


Dodawanie obszarów i łamanych

Maplab API umożliwia dodawanie na mapę bardziej złożonych elementów, na które składa się wiele współrzędnych.

Dodanie obszaru na mapę :

var polygon = L.polygon([
[54.421777, 18.590535],
[54.410989, 18.604139],
[54.407518, 18.614310],
[54.413262, 18.623966],
[54.421253, 18.605641],
[54.423875, 18.595385]
]).addTo(mymap);

Równie łatwe jest dodanie łamanej :

var polyline = L.polyline([
[54.416459, 18.588947],
[54.418531, 18.597316],
[54.421777, 18.601865]
],{color: 'red'}).addTo(mymap);

Zobacz przykład w nowym oknie : LINK


Wyszukiwanie adresów (geocoding)

W celu wyszukania adresu najpierw tworzymy obiekt geokodera :

var geocoder=L.Control.Geocoder.createGeocoder();

następnie wywołyjemy funkcję geocode :

geocoder.geocode('Warszawa Oczki 8',function(result){

});

Argumentami funkcji geocode są adres oraz funkcja callback przekazująca w argumencie result obiekt z wynikiem geokodowania. Przykładowy wynik geokodowania :

			
[
	{
		"address":{
			"house_number":"8"
			"road":"Wojciecha Oczki",
			"neighbourhood":"Kolonia Staszica",
			"suburb":"Ochota",
			"city":"Warszawa",
			"county":"Warszawa",
			"state":"województwo mazowieckie",
			"postcode":"02-007",
			"country":"Polska",
			"country_code":"pl"},
			"name":"Wojciecha Oczki, Kolonia Staszica, Ochota, Warszawa, województwo mazowieckie, 02-007, Polska",
			"bbox":{
				"_southWest":{
					"lat":52.2236206,
					"lng":20.9976598
				},
				"_northEast":{
					"lat":52.2249293,
					"lng":21.0034707
				}
			},
			"center":{
				"lat":52.2243572,
				"lng":21.0009486
			}
	}
]
			
			

W zmiennej center znajdują się współrzędne geograficzne znalezionego adresu.

Jeśli odnelaziono dokładny adres zgodny z podanym numerem budynku, w zmiennej address znajduje się zmienna house_number określająca numer. Jeśli nie udało się znaleźć dokładnego adresu (nieprawidłowy numer), w zmiennej center znajdują się współrzędne środka ulicy a w zmiennej address nie ma informacji o znalezionym numerze (brak zmiennej house_number).

Zobacz przykład w nowym oknie : LINK


Antygeokodowanie

Antygeokodowanie (lub reverse geocoding) po proces pozyskiwania danych adresowych na podstawie współrzędnych geograficznych. W celu znalezienia adresu dla współrzędnej tworzymy obiekt geokodera :

var geocoder=L.Control.Geocoder.createGeocoder();

następnie wywołyjemy funkcję geocode :

geocoder.reverse({"lat":52.22401415,"lng":20.998441},function(result){

});

Argumentami funkcji reverse jest obiekt ze współrzędnymi punktu na mapie oraz funkcja callback przekazująca w argumencie result obiekt z wynikiem antygeokodowania. Przykładowy wynik antygeokodera :

                        
[
	{
		"address":{
			"house_number":"8",
			"road":"Wojciecha Oczki",
			"neighbourhood":"Kolonia Staszica",
			"suburb":"Ochota",
			"city":"Warszawa",
			"county":"Warszawa",
			"state":"województwo mazowieckie",
			"postcode":"02-007",
			"country":"Polska",
			"country_code":"pl"
		},
		"name":"8,Wojciecha Oczki, Kolonia Staszica, Ochota, Warszawa, województwo mazowieckie, 02-007, Polska",
		"center":{
			"lat":52.22401415,
			"lng":20.9984406461874
		},
		"bounds":{
			"_southWest":{
				"lat":52.22401415,
				"lng":20.9984406461874
			},
			"_northEast":{
				"lat":52.22401415,
				"lng":20.9984406461874
			}
		}
	}
]
			
			

Zobacz przykład w nowym oknie : LINK


Wyszukiwanie optymalnych tras przejazdu (routing)

Maplab API daje dostęp do wydajengo komponentu wyszukiwania tras. W ułamku sekundy odszukasz optymalną trasę przejazdu. Do wyszukania trasy musimy podać współrzędne przynajmniej dwóch punktów na mapie. W celu wyszukania trasy tworzymy obiekt optymalizatora :

var router=new L.Routing.Maplab();

Następnie określamy punkty trasy :

var start=new L.Routing.Waypoint(L.latLng(54.509613,18.534649), 'Start route');
var end=new L.Routing.Waypoint(L.latLng(52.225510,21.006077), 'End route');

Do wyszukania trasy używamy funkcji route:

router.route([start,end],function(err,routes){
//kod przetwarzający odpowiedź
},null,{geometryOnly: true});

podając jako argumenty listę punktów trasy (może być też punkty pośrednie), funkcję callback oraz parametr geometryOnly określający czy chcemy otrzymać pełną informację o trasie wraz z tekstową marszrutą czy tylko geometrię trasy.

W odpowiedzi na wyszukanie trasy otrzymujemy obiekt trasy zawierający zmienne :

  • coordinates - lista punktów tworzących łamaną trasy
  • inputWaypoints - lista punktów startu,końca trasy oraz punktów pośrednich
  • instructions - obiekt zawierający marszrutę trasy (opisany niżej)
  • summary - podsumowanie trasy - długość i czas trasy.

W przypadku gdy opcja geometryOnly=FALSE w odpowiedz otrzymamy w zmiennej instructions otrzymamy listę obiektów z marszrutątrasy. Każdy element z listy zawiera zmienne :

  • direction - kierunek drogi, dopuszczalne wartości : "N","S","E","W","NW","NE","SW","SE"
  • distance - długość odcinka trasy w metrach
  • time - czas w sekundach potrzebny do przejechania danego odcinka trasy
  • road - nazwa ulicy lub nr drogi jaką prowadzi odcinek trasy
  • type - typ manewru, dopuszczalne wartości :

    "uturn" zawróć
    "sharp right" ostry skręt w prawo
    "right" skręt w prawo
    "slight right" łagodny skręt w prawo
    "straight" jedź prosto
    "slight left" łagodny skręt w lewo
    "left" skręt w lewo
    "sharp left" ostry skręt w lewo

Zobacz przykład w nowym oknie : LINK


POI - punkty zainteresowania publicznego

Używając Maplab API masz dostęp do bazy ponad 300 tyś punktów POI na terenie Polski. Poniżej znajduje się lista kategorii POI dostępnych w api :

Id kategoriiNazwa kategorii
2Pole namiotowe
3Camping
4Schronisko
9Straż pożarna
11Biblioteka
12Plac zabaw
13Policja
14Poczta
15Więzienie
16Urząd
17Ratusz
19Szkoła wyższa
20Przedszkola i żłobki
21Szkoła
22Uniwersytet
23Bar
24Ogródek piwny
25Kawiarnia
26Fast food
27Lody
28Pub
29Restauracja
30Stomatolog
31Lekarz
33Szpital
34Apteka
35Weterynarz
46Bank
47Kantor
50Kościół
73Monopolowy
74Piekarnia
75Rowerowy
76Księgarnia
77Mięsny
78Części samochodowe
79Sprzedaż samochodów
80Ubrania
81Komputery
82Konfekcja
Id kategoriiNazwa kategorii
83Urządzanie mieszkania
85Dom towarowy
86Majsterkowanie
87Wędkarstwo
88Kwiaciarnia
89Centrum ogrodu
90Upominiki
91Warzywniak
92Fryzjer
93Aparaty słuchowe
94Elektronika
95Biżuteria
96Kiosk
97Pralnia
98Bazar
99Telefony
100Motocyklowy
101Muzyczny
102Gazety
103Zoologiczny
104Buty
105Supermarket
106Tytoń
107Zabawki
110Łucznictwo
112Koszykówka
113Kręgle
114Spływ kajakowy
116Nurkowanie
117Piłka nożna
118Golf
119Siłownia
120Sala gimnastyczna
121Ścianka wspinaczkowa
122Jazda konna
123Lodowisko
124Centrum rozrywki
127Strzelnica
128Łyżwiarstwo
129Narciarstwo
Id kategoriiNazwa kategorii
131Piłka nożna
132Stadion
133Basen
134Tenis
136Surfing
137Odkrycie archeologiczne
138Sztuka
139Atrakcja turystyczna
140Pole bitwy
141Plaża
142Zamek
144Kino
145Fontanna
146Informacja
147Monument
148Pomnik
149Muzeum
150Klub nocny
151Ruiny
152Teatr
153Park rozrywki
156Wiatrak
158Zoo
159Terminal
160Lotnisko
161Przystanek
162Stacja paliw
163Latarnia
164Marina
165Wypożyczalnia samochodów
167Stacja kolejowa
168Przystanek tramwajowy
169Parkingi
170Bankomaty
171Parking rowerowy
172Salon GSM
173Automat z żywnością
174Toaleta
175Myjnia samochodowa
176Taxi

W celu wyszukania POI używamy funkcji searchMBR podając jako argumenty identyfikator kategorii oraz współrzędne lewego górnego oraz prawego dolnego kwadratu mapy w jakim chcemy pokazać punkty POI (najczęsciej są to współrzędne bieżącego okna mapy) :

var poi=L.Control.Poi.createPoi();
poi.searchMbr('14',20.94938278,52.20329349066142,21.05237960815,52.245355436,function(result){
});

W wyniku, w zmiennej result otrzymujemy obiekt z listą punktów POI. Przykładowy wynik (dla wyszukiwania poczty):

			
[{"lon":20.9663932,"lat":52.2338232,"name":"Warszawa 42","type":14},{"lon":21.0076626,"lat":52.217898,"name":"FUP Warszawa 10","type":14},{"lon":20.9927213,"lat":52.2412462,"name":"Warszawa 41","type":14},{"lon":21.0152855,"lat":52.2211849,"name":"UP Warszawa 10","type":14},{"lon":21.0212531,"lat":52.2291835,"name":"UP Warszawa 15","type":14},{"lon":21.024515,"lat":52.242351,"name":"Warszawa 46","type":14},{"lon":20.9659742,"lat":52.2390195,"name":"Warszawa 100","type":14},{"lon":21.0064312,"lat":52.2159297,"name":"FUP Warszawa 10","type":14},{"lon":21.0056629,"lat":52.2197234,"name":"FUP Warszawa 10","type":14},{"lon":21.0231999,"lat":52.2052013,"name":"Urząd Pocztowy Warszawa 25","type":14},{"lon":20.9861507,"lat":52.2265025,"name":"Urząd Pocztowy Warszawa 22","type":14},{"lon":21.0227519,"lat":52.2310387,"name":"Poczta","type":14}]
			
			

Zobacz przykład w nowym oknie : LINK


Własne warstwy na mapie

Maplab API umożliwia użycie własnych warstw do pokazania nad mapą podkładową. Mogą to być na przykład obszary. W poniższym przykładzie prezentujemy warstwę kodów pocztowych. Aby dodać własną warstwę używamy kodu :

L.tileLayer('http://www.trackmap.pl/kody_tiles/{z}/{x}/{y}.png', {minZoom: 7,maxZoom:14,opacity:0.5}).addTo(mymap);

minZoom,maxZoom - określa minimalną i maksymalną skalę mapy w zakresie których warstwa jest widoczna
opacity - określa przezroczystość skali

Zobacz przykład w nowym oknie : LINK


Użycie pluginów

Dzięki zgodności Maplab API z biblioteką Leaflet możemy korzystać z bogatej biblioteki pluginów. Są to rozszerzenia funkcji mapowych oferujące często bardzo przydatne funkcjonalności. Pełna lista pluginów jest tutaj.

W naszym przykładzie wykorzystamy plugin grupowania markerów na mapie (Leaflet.markercluster). Projekt pluginu znajduje się tutaj.

Plugin działa w ten sposób, że reprezentuje wiele markerów w jednym miejscu przez odpowiedni symbol z liczbą obiektów w danym miejscu.

W celu użycia pluginu musimy włączyć w stronę pliki css oraz skrypt :

<link rel="stylesheet" href="../css/MarkerCluster.css" />
<link rel="stylesheet" href="../css/MarkerCluster.Default.css" />
<script src="../js/leaflet.markercluster.js"></script>

Następnie tworzymy obiekt warstwy grupowanych obiektów :

var markers = L.markerClusterGroup();

W miejscu gdzie tworzymy obiekty markerów, dodajemy każdy marker do grupowanej warstwy :

var marker=L.marker([result[i].lat,result[i].lon]);
marker.bindPopup(result[i].name);
markers.addLayer(marker);

Po dodaniu wszystkich markerów dodajemy warstwę grupującą do mapy :

mymap.addLayer(markers);

Zobacz przykład w nowym oknie : LINK