Configuration parameters

Limitations

Limitations

Parent element size:
The widget contains a built-in script that detects the height of the parent element. If the parent element has no defined height and depends on content, or if it has a height less than 400 pixels, the widget will automatically expand to 80% of the screen height.

However, if the parent element has a fixed height greater than 400 pixels, the widget will adapt to this height.

The widget configuration is inserted as an attribute of the element's id in the body:

e.g., the configuration of the map center

<div id="ppl-parcelshop-map" data-lat="50" data-lng="15" data- mode="static"></div>

Accepted configuration parameters:

lat – text defining the latitude of the map center

lng – text defining the longitude of the map center

language – text setting the language variant, accepted values are "cs" or "en"

mode – defining the map display mode.

The attribute can take 3 values:

static - displays a static map with a single displayed point, which according to API data is closest to the defined map center. Defining the attributes data-lat and data-lng that specify the map center is highly recommended in combination with this mode.

catalog - displays a map with all functionalities, except the "Select a pickup point" button. This usage is suitable for users whom we primarily want to direct to the details of pickup points deployed on the PPL portal.

default - displays a map with all functionalities, including the "Select a pickup point" button, which passes the selected pickup point data to the parent application in the form of an event.

initialfilters – definition of the default predefined filters when the application is opened or reloaded. It is a string of keys separated by commas.
Example usage: data-initialfilters="ParcelShop, CardPayment" for the default filter of the ParcelShop with the card payment option

The keys are as follows:

Parcelshop	Morning	Saturday	CardPayment
Parcelbox	Afternoon	Sunday

code – displays the map with a preloaded specific pickup point:

format: data-code=”KM…”

address – displays the map with a preloaded address:

the address is validated against api.mapy.cz

format: data-address=”Václavské náměstí 1”

country – selects the default country to be displayed:

by default, cz is selected

other options: sk, pl, de

format: data-country=”sk”

countries – allows selecting a set of supported countries:

available countries: cz, sk, pl, de

by default, the first in order is selected and it is possible to combine with
the data-country parameter

format: data-countries=”sk, pl”

hiddenpoints – allows excluding specific types of pickup points from the list:

format: data-hiddenpoints=”ParcelBox”

The visual aspect of the widget can be changed using custom CSS by overriding the existing set of styles. With CSS, it is possible, for example, to hide individual sections of the widget, change colors, etc.

For example, hiding the country selection section:

#ppl-parcelshop-map.accordion-map--select {display: none !important;}

Change color to DHL style

Pickup point pins are red instead of the classic PPL blue

<script type="text/javascript" src="https://www.ppl.cz/sources/map/main.js" async>
</script>
<link rel="stylesheet" href="https://www.ppl.cz/sources/map/main.css">
<div id="ppl-parcelshop-map" class="ppl-parcelshop-map--dhl"></div>

Example of setting parameters

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="initial-scale=1.0, width=device-width" name="viewport" />
    <title>PPL Maps test</title>
    <script
      type="text/javascript"
      src="https://ppl.cz/sources/map/main.js"
      async
    ></script>
    <link rel="stylesheet" href="https://ppl.cz/sources/map/main.css" />
  </head>
  <body>
    <!-- Add data attributes to <div id="ppl-parcelshop-map"></div> -->
    <!-- Add:
      data-country="sk"
      data-country="pl"
      data-country="de"
        for default selected country
    Add:
      data-countries="sk, pl"
      data-country="pl, de"
      etc.
        for default selected countries list (first country as default or combine with data-country)
    Add:
      data-address="Čajkovského 1424"
        or something else for default selected address
    Add:
      data-code="KM17312000"
        or some other pickup point code started with KM... for default selected pickup point
    Add:
      data-hiddenpoints="ParcelBox"
      data-hiddenpoints="ParcelBox, AlzaBox"
        for default hidden pickup point types -->
    <div id="ppl-parcelshop-map"></div>
  </body>
</html>

Download HTML here

Configuration parameters

Limitations

Widget Configuration

Changing the widget appearance

Configuration parameters

Limitations#

Widget Configuration#

Changing the widget appearance#

Limitations

Widget Configuration

Changing the widget appearance