Przewodnik integratora iMapCloudAPI
Zestaw funkcji rozszerzających iMapLite wraz z przykładami
Wprowadzenie do iMapLiteApi
iMapLiteApi jest to biblioteka javascript umożliwiającą osadzenie mapy na stronie html oraz wywołanie funkcji pozwalającej na wyszukanie lokalizacji punktu adresowego na podstawie danych adresowych lub bezpośrednio wskazanie lokalizacji punktu o zadanych współrzędnych i wyróżnienie go na mapie w postaci markera/pinezki wraz z wyświetleniem informacji tekstowej w dymku.
Przykładową aplikacją korzystającą z API jest:
https://integracja.gugik.gov.pl/geoportal_api/?adr=Warszawa,Wspólna+2&title=Główny Urząd geodezji i Kartografii
Aplikacja posiada dwa parametry wywołania:
Użycie iMapLiteApi
Aby móc korzystać z API na własnej stronie html, należy zaimportować skrypt, poprzez odpowiedni wpis na stronie. Poniżej przykład załadowania skryptu. Lokalizacja źródłowa skryptu jest przykładowa.
<script src="http://mapy.geoportal.gov.pl/iMapLite/js/imapLiteApi-core.js" type="text/javascript" charset="utf-8"></script>Na stronie html musi obowiązkowy znajdować się element div z nadanym mu identyfikatorem. id. Będzie on stanowił kontener, w którym zostanie umieszczona aplikacja imapLite.
<div id="iapi"> </div>Aby załadować aplikację do utworzonego elementu div, należy dołączyć skrypt na stronie, w którym dokonujemy inicjalizacji API. Odbywa to się za pomocą metody ILITEAPI.init. Przykładowa strona html z inicjalizacją API pokazana jest poniżej iMapLiteAPI_init1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ImapLiteApi - example</title>
<script src="http://mapy.geoportal.gov.pl/iMapLite/js/imapLiteApi-core.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function initMap() {
ILITEAPI.init({
"divId" : "iapi",
"width" : 300,
"height" : 250
});
}
</script>
</head>
<body onLoad="initMap()">
<div id="iapi"></div>
</body>
</html>W powyższym przykładzie inicjalizacja API, została dokonana w funkcji javascript initMap(), która z kolei zostaje wykonana w zdarzeniu onLoad elementu body na stronie. Gwarantuje to załadowanie API po utworzeniu zawartości strony. W przykładzie widać, że metoda ILITEAPI.init zawiera obiekt json, stanowiący wymagana parametry inicjalizacyjne. Opis metody znajduje się w punkcie 3. W przykładzie wymienione są obowiązkowe parametry wejściowe metody ILITEAPI.init. Szerokość i wysokość elementu div o raz jego identyfikator. Poniżej przykład inicjalizacji API z większą ilością opcji iMapLiteAPI_init2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ImapLiteApi - example</title>
<script src="http://mapy.geoportal.gov.pl/iMapLite/js/imapLiteApi-core.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function initMap() {
ILITEAPI.init({
"divId" : "iapi",
"width" : 800,
"height" : 600,
"activeGpMapId" : "gp0",
"activeGpMaps" : ["gp0","gp1"],
"activeGpActions" : ["pan","fullExtent"],
"scale" : 2000,
"marker" : {
"x" : 591920,
"y" : 259048,
"scale":2000,
"opts" : {
"title" : "tytuł dymka",
"content" : "dowolna treść"
}
}
});
}
</script>
</head>
<body onLoad="initMap()">
<div id="iapi"></div>
</body>
</html>Poniżej podany jest przykład wywołania mapy z kilkoma markerami iMapLiteAPI_init3:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ImapLiteApi - example</title>
<script src="http://mapy.geoportal.gov.pl/iMapLite/js/imapLiteApi-core.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function initMap() {
ILITEAPI.init({
"divId" : "iapi",
"width" : 800,
"height" : 600,
"activeGpMapId" : "gp0",
"activeGpMaps" : ["gp0","gp1"],
"activeGpActions" : ["pan","fullExtent"],
"scale" : 2000,
"marker" : [{
"x" : 362269,
"y" : 362264,
"scale":2000,
"opts" : {
"title" : "dymek nr 1",
"content" : "dymek"
}
},{
"x" : 361968,
"y" : 362234,
"scale":2000,
"opts" : {
"title" : "dymek nr 2",
"content" : "dymek"
}
}]
});
}
</script>
</head>
<body onLoad="initMap()">
<div id="iapi"></div>
</body>
</html>Użycie iMapCloudAPI
Należy załączyć do strony bibliotekę imapLiteApi-coreEx.js, która dodaje nowe funkcje do iMapLite oraz dokonać inicjalizacji obiektu mapy (funkcja init) z dodaniem pluginu clusterLayer.
Przykładowe wywoływanie nowych funkcji znajdują się w części "przykłady" tej dokumentacji.
Przydatne linki
strona główna edytora iMapCloudApi (wymaga logowania)
Administrator kompozycji (wymaga logowania)