-
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.
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.
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 :
|
|
|
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