Konfiguracja mapy

Leaflet (Aplikacje webowe, mobilne (WebView) i mobilne hybrydowe - Cordova, PhoneGap):

Leaflet jest jedną z najpopularniejszych bibliotek open-source napisanych w JavaScript do wyświetlania interaktywnej mapy w aplikacjach webowych i mobilnych (poprzez WebView). Jest bardzo lekki (38 KB) a przy tym posiada wszelkie funkcjonalności potrzebne dla większości deweloperów.

Bibliotekę Leaflet najlepiej pobrać z oficjalnej strony – https://leafletjs.com/download.html

Oficjalna dokumentacja i poradnik jak szybko skonfigurować leafleta znajduję się pod adresem – https://leafletjs.com/examples/quick-start/

Przygotowanie aplikacji do korzystania z Mapla:

Zanim zaczniemy korzystać z Mapla.io, należy przygotować swoją aplikację. W tym celu zaloguj się do panelu klienta na https://mapla.io. Po zalogowaniu przejdź do sekcji Moje pakiety i skopiuj swój klucz API oraz nazwę przypisanego API. Następnie wyedytuj plik .html lub .js w swojej aplikacji i przejdź do miejsca gdzie skonfigurowano i zainicjalizowano bibliotekę Leaflet. Znajdź obiekt L.tileLayer i wyedytuj go w następujący sposób:

L.tileLayer('https://api.mapla.io/NAZWA_API/{z}/{x}/{y}.png?apikey=KLUCZ_API', {
    attribution: '<span style="font-size: smaller;">Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery &copy; <a href="https://mapla.io">Mapla.io</a></span>'
}).addTo(ObiektTwojejMapy);

gdzie:

NAZWA_API – to Twoja nazwa api np. pl_v1.

KLUCZ_API – to Twój klucz API skopiowany z panelu klienta mapla.io.

ObiektTwojejMapy to nazwa obiektu javascript zawierającego Twoją mapę (standardowo nazywa się “map” lub “mymap”.

 

przykład:

L.tileLayer('https://api.mapla.io/pl_v10/{z}/{x}/{y}.png?apikey=FYosU7r7wa2GO7X4aUGE696YjiiaL4xT',
    { attribution: '<span style="font-size: smaller;">Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery &copy; <a href="https://mapla.io">Mapla.io</a></span>'
}).addTo(map);

Domyślnie Leaflet wspiera poziom przybliżenia (maxZoom) do poziomu 18. Mapla dostarcza bardziej szczegółowe mapy – maksymalne przybliżenie do poziomu 20. W celu wyświetlania wyższych poziomów przybliżenia należy dodać dwa parametry w definicji L.tileLayer: maxNativeZoom: 20 i maxZoom: 20.

Przykładowa konfiguracja:

L.tileLayer('https://api.mapla.io//pl_v10/{z}/{x}/{y}.png?apikey=FYosU7r7wa2GO7X4aUGE696YjiiaL4xT', {
     attribution: ‘<span style="font-size: smaller;">Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery &copy; <a href="https://mapla.io">Mapla.io</a></span>',
     maxNativeZoom: 20,
     maxZoom: 20
}).addTo(map);

OpenLayers (Aplikacje webowe, mobilne (WebView) i mobilne hybrydowe - Cordova, PhoneGap):

OpenLayers jest drugą najpopularniejszą open-sourceową biblioteką JavaScript do wyświetlania interaktywnych map w aplikacjach webowych i mobilnych (poprzez WebView). OpenLayers wspiera dane kartograficzne z wielu źródeł skupiając się na jak największej wydajności.

Bibliotekę OpenLayers najlepiej pobrać z oficjalnej strony – https://openlayers.org/download/ 

Oficjalna dokumentacja i poradnik jak szybko skonfigurować OpenLayers znajduję się pod adresem – https://openlayers.org/en/latest/doc/

Przygotowanie aplikacji do korzystania z Mapla:

Zanim zaczniemy korzystać z Mapla.io należy przygotować swoją aplikacje. W tym celu zaloguj się do panelu klienta na https://mapla.io. Po zalogowaniu przejdź do sekcji Moje pakiety i skopiuj swój klucz API oraz nazwę przypisanego API. Następnie wyedytuj plik .html lub .jsw swojej aplikacji, gdzie skonfigurowano i zainicjalizowano bibliotekę OpenLayers. Znajdź deklarację obiektu mapy (standardowo nazywa się “mapa” lub “map”), a w niej deklarację warstwy (layers) i wyedytuj ją w następujący sposób:

var map= new ol.Map({
     target: 'map',
     layers: [
          new ol.layer.Tile({
               source: new ol.source.XYZ({
               url: ‘https://api.mapla.io/NAZWA_API/{z}/{x}/{y}.png?apikey=KLUCZ_API’,
               attributions: [
                    '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Imagery &copy; <a href="https://mapla.io">Mapla.io</a> '
               ],
               view: new ol.View({
               center: [0, 0],
               zoom: 1
         });
     ]
});

 

gdzie:

map to nazwa obiektu JavaScript zawierającego Twoja mapę (standardowo nazywa się “mapa” lub “map”.

XYZ – dosłownie XYZ pisane wielkimi literami

NAZWA_API – to Twoja nazwa api np. pl_v1

KLUCZ_API –  to Twój klucz API skopiowany z panelu klienta Mapla.io

0, 0 – koordynaty środka mapy do wyświetlenia domyślnie.

Wordpress:

Wkrótce.

Call Now Button