PwRGeoPicker wybór punktu RUCH w usłudze PwR

Biblioteka do implementacji możliwości wyboru punktu dostawy "Paczka w Ruchu"


Wersja: 0.3

Spis treści:

Wymagania

Instalacja

Wykorzystanie

Wtyczka działa w formacie "inline" oraz jako wyskakujące okno popup

Wersja popup

Zaawansowana konfiguracja w wersji popup

Opcje

Formatowanie okna popup ( mapa )

Zdarzenie wtyczki ( events )

onselect

locale

form

map

Przykłady wykorzystania


Wymagania

Wtyczka do poprawnego działania wymaga:


Instalacja

Do działania wtyczka wymaga dodania do kodu źródłowego bibliotek JS oraz CSS:

<link type="text/css" rel="stylesheet" media="all" ref="https://mapka.paczkawruchu.pl/paczkawruchu.css">
<script type="text/javascript" src="https://mapka.paczkawruchu.pl/jquery.pwrgeopicker.min.js"></script>

Oraz biblioteki Google Maps wraz z kluczem:

Przykład:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&language=pl&libraries=places&key=API_KEY"></script>

API_KEY - Klucz api do pobrania zgodnie z instrukcją :

https://developers.google.com/maps/documentation/javascript/get-api-key


Wykorzystanie

Wtyczka działa w formacie "inline" oraz jako wyskakujące okno popup

<div id="inline_map"></div>
<script type="text/javascript">
   $
(function(){
       $
('#inline_map').pwrgeopicker('inline');
   
});
</script>

Wersja popup

<button id="popup">CLICK ME</button>
<script type="text/javascript">
   $
(function(){
       $
('#popup').pwrgeopicker();
   
});
</script>


Zaawansowana konfiguracja w wersji popup

<button id="popup">CLICK ME</button>
<script type="text/javascript">
   $
(function(){
       $
('#popup').pwrgeopicker('popup',{
           
'popup': true,
           
'form': {
               
'city': 'Warszawa',
               
'street': 'ul.Bliska 10'
           
},
           
'onselect': function(data){
               alert
(data['Location']);
           
}
       
});
   
});
</script>


Opcje

Nazwa

Wartości

Opis

Wartość domyslna

pwr_api_url

url

Adres do API

''

inline

'popup', 'inline'

Określa wersje mapy: inline lub popup

'popup'

filter_by_city

true/false

Ustawia dodatkowe filtrowanie po stronie serwera

true

popup_template

html_code

szablon okna popup na mapie

(opis poniżej)

popup

true / false

Określa czy kliknięcie w pinezkę ma generować okno popup

false

max_points

integer

Maksymalna ilość punków umieszczanych na mapie. Wartość 0 oznacza bez ograniczeń

100

onselect

function

Funkcja wywoływana w momencie wybrania punktu

(opis poniżej)

CashOnDelivery

true/false/none

Filtr punktów wg. możliwość płatności za pobraniem

none

auto_start

true/false

Ustawione na 'true' wyszukuje punkty zaraz po zainicjalizowaniu mapy

false

locale

object

Komunikaty np. przycisk szukaj etc.

(opis poniżej)

form

object

Domyślne ustawienia miasta oraz ulicy

(opis poniżej)

map

object

Ustawienia mapy google https://developers.google.com/maps/documentation/javascript/

(opis poniżej)


Formatowanie okna popup ( mapa )

Domyślny szablon okna popup na mapie. #{element} - format oznaczania elementów punktu.

<div>#{Location}<br><b>DestinationCode: #{DestinationCode}</b><br><b>StreetName: #{StreetName}</b><b>CashOnDelivery: #{CashOnDelivery}</b><br><br><b>PSD: #{PSD}</b><br><button>Select</button>



Zdarzenie wtyczki ( events )

onselect

Parametry przekazane w pierwszym argumencie. Klucze parametrów mogą być użyte przy konstrukcji szablonu okna popup na mapie np. #{BuildingNumber}

{
   
DestinationCode: "0101-0049-11-04",
   
StreetName: "PANNY WODNEJ",
   
BuildingNumber: "50",
   
City: "Warszawa",
   
Longitude: "21.1885",
   
Latitude: "52.1838",
   
CashOnDelivery: "false",
   
Location: "0",
   PSD
: "414987",
   
Available: "T" 
}

locale

Domyślne teksty

{
   city
: 'Miasto...',
   street
: 'Ulica...',
   searchbtn
: 'szukaj &gt;',
   no_points
: 'Nie znaleziono punktów',
   bad_form
-data: 'Wpisz poprawną nazwę miasta i/lub ulicy'
}

form

Domyślne ustawienia miasta i/lub ulicy

{
   city
: 'Warszawa',
   street
: 'Ul. Bliska'
}

map

Domyślne ustawienia obiektu google maps.

{
   center
: [51.9077298, 19.9526048],
   zoom
: 7,
   scrollwheel
: true,
   navigationControl
: false,
   mapTypeControl
: false,
   scaleControl
: false
}



Przykłady wykorzystania

Płatność online - wszystkie punkty RUCH:

 https://mapka.paczkawruchu.pl/demo/online.html

Płatność  za pobraniem - wybrane punkty RUCH

 https://mapka.paczkawruchu.pl/demo/cod.html

 

License


RUCH S.A. ALL RIGHT RESERVED