Integracja
Zalecane jest używanie plików importowanych bezpośrednio z serwera. Zapewnia to nam ciągłość i zgodność wersji pluginu.
Skopiuj linki do sekcji <head>:
<script src="https://mapa.szybkapaczka.pl/js/v3.1/maps_sdk.js"></script> <link rel="stylesheet" href="https://mapa.szybkapaczka.pl/css/v3.1/maps_sdk.css"/>
Utwórz div, w którym wyświetli się mapa. Mapa nie posiada domyślnych wymiarów. Aby ułatwić proces integracji ze stroną należy nadać wartości właściwości odpowiadających za wysokość i szerokość. W przeciwnym wypadku mapa nie będzie widoczna!
<div id="gls_map" class="szybkapaczka_map" style="width:300px;height300px"></div>
Następnie zainincjalizuj mapy GLS:
SzybkaPaczkaMap.init({ // Język używany w aplikacji - aktualnie aktualnie dostępne języki to polski i angielski ('EN','PL' - format ISO-2) lang: 'PL', // Parcelshopy wyświetlane na mapie, aktualnie dostępne: 'DE', 'PL','AT','DK','BE', 'IE' (format ISO-2) country_parcelshops: 'PL', // ID elementu, gdzie ma zostać zainicjalizowana mapa aplikacji GLS el: 'gls_map', // Waga paczki, wymagana aby określić punkty, które mogą przyjąć przesyłkę. parcel_weight:'5' // Dane adresowe, na które ma zostać wycentrowana mapa z punktami w pobliżu. Może to być kod pocztowy lub miejscowość wraz z ulicą i/lub numerem domu center_point:'Przykładowe_miasto, przykładowa_ulica' // Pobieranie klatek graficznych mapy do aplikacji, domyślnie fałsz -> klatki mapy pobierane z Open Street Map // Podczas zmiany wartości należy upewnić się czy jesteśmy w posiadaniu klucza z strony https://www.mapbox.com/ lub klucza Google Maps API w zależności, które źródło ma zostać użyte. map_type: true, // Jeśli wartość map_type jest równa prawda i źródło mapy ma pochodzić z mapbox.com, należy umieścić klucz w polu mapbox_key mapbox_key: 'exmaple_api_key', // Jeśli wartość map_type jest równa prawda i źródło mapy ma pochodzić z maps.google.com, należy umieścić klucz w polu google_maps_key (należy również spełnić warunek podany poniżej bloku) google_maps_key: 'exmaple_api_key', // Włącz/wyłącz geolokalizację - wartość boolean, domyślnie fałsz geolocation: true });
Właściwości parametrów
Nazwa parametru | Wymagany | Wartość domyślna |
---|---|---|
lang | tak | brak |
country_parcelshops | tak | brak |
el | tak | brak |
parcel_weight | tak | brak |
center_point | nie | punkt w przybliżeniu określający środek kraju |
map_type | nie | fałsz |
mapbox_key | nie | puste |
google_maps_key | nie | puste |
geolocation | nie | fałśz |
Aktywacja Google Maps
Aby aktywować w pełni możliwość korzystania z Google Maps wraz z Szybkapaczka należy w sekcji <head> przed pluginem SzybkaPaczka dodać link do Google Maps wraz z kluczem!
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=<YOUR_API_KEY>"></script>
Obsługa
Pobieranie danych z mapy może odbywać się na dwa sposoby,
Sposób pierwszy → aplikacja po inicjalizacji stworzy zdarzenie get_parcel_shop do którego będzie można stworzyć obsługę wybranego Punktu SzybkaPaczka, co pokazuje przykład poniżej, zwraca pełny obiekt ParcelShop.
Przykład 1window.addEventListener('get_parcel_shop',function(e){ console.log(e.target.ParcelShop) })
Sposób drugi → obsługa wybranego ParcelShopu po utworzeniu obiektu Parcel i wywołaniu metody getParcelObject():
var m = new SzybkaPaczkaParcel(); setInterval(function () { if (typeof result != 'undefined') { document.getElementById('result').innerHTML = JSON.stringify(m.getParcelObject()); } }, 100);
Struktura zwracanego obiektu
id → ID punktu, przekazywane do systemu ADE PLUS to jedyna wartość, która może zostać przekazana do systemu,
name → nazwa punktu,
open_hours → tablica zawierająca godziny otwarcia punktu, przypisana do kolejnych dni tygodnia, zaczynając od poniedziałku określanego jako dzień "0". Dzień tygodnia może zawierać więcej niż 2 elementy, dlatego obejmuje określone przedziały godzin obsługi punktu,
country → kraj do którego jest przydzielony punkt,
city → miasto w którym znajduje się punkt,
postal_code → kod pocztowy punktu,
phone → numer kontaktowy punktu,
email → adres e-mail punktu.
Wszystkie dane są danymi pomocniczymi, za wyjątkiem ID, które jest jedynym obowiązującym kluczem do komunikacji z systemem ADE PLUS.
{ "selected":{ "id":"00000000", "name":"Przykładowa nazwa punktu", "open_hours":[ [ "10:00:00", "17:00:00" ], [ "10:00:00", "17:00:00" ], [ "10:00:00", "17:00:00" ], [ "10:00:00", "17:00:00" ], [ "10:00:00", "17:00:00" ], [ "09:00:00", "13:00:00" ] ], "country":"PL", "city":"Testowe Miasto", "postal_code":"64-500", "street":"Polska 35", "phone":"+48 000 000 000", "email":"przykladowy@mail.pl" } }
Opis komunikatów
Pierwszy komunikat o punkcie przedstawiony na mapie, to informacja o planowanej przerwie. Komunikat ten wyświetla się przez 5 dni od planowanego zamknięcia. Dlatego funkcjonalność punktu nie jest w żaden sposób ograniczona. Po 5 dniach, gdy następuje planowane zamknięcie, punkt zostaje oznaczony jako "czasowo wyłączony". Wówczas pojawa się komunikat z informacją, do kiedy jest on zamknięty. W tym czasie nie można na danym punkcie wykonać żadnej akcji, za wyjątkiem uzyskania podstawowych informacji. Przykłady komunikatów są przedstawione poniżej.
Przykłady podstawowego użycia
Przykładowa mapa DK z wykorzystaniem Google Maps API
Przykładowa mapa BE z wykorzystaniem Mapbox API