Index

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.

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)