Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 13 Next »


There are following SDK4JS (Geowidget) environments:

  1. Production environment available at:
  2. Staging environment available at:
  3. Test environment available at:
Page contents


Quick Start

SDK for JavaScript can be easily loaded into your HTML asynchronously, which means that it will not block loading of other components of your web site. You may put following code wherever you want, but if you want the map to load as soon as possible, put it at the top of the HTML <head> section - before the other scripts and stylesheets:

<script async src=""></script>
<link rel="stylesheet" type="text/css" href="">

And after that initialize widget by specifying DOM element ID (HTML) plus configuration;

 <script type="text/javascript">
 	window.easyPackAsyncInit = function () {
			filters: true,
			points: {
				types: ['pok', 'parcel_locker']
		var map = easyPack.mapWidget('easypack-map', function(point) {
			alert(, point.location_description);

Last step is to add easypack-map placeholder and set it's height in part of your website/checkout where you want to display it:


Whole mapWidget (search, type select and map) should be visible on mobile devices. Therefore placeholder should never be taller than mobile device screen height.

<div style="width: 80%; height: 100%; margin: 20px auto;">
  <div id="easypack-map"></div>



You may change default SDK for Javascript behaviour by passing configuration settings to easyPack.init() function:

<script type="text/javascript">
  window.easyPackAsyncInit = function () {
		defaultLocale: 'pl'

Full configuration options:

  apiEndpoint adapts automatically based on 'defaultLocale' property. You can also
  manually configure it by overwriting URL in your local configuration.
apiEndpoint: 'https://api-{locale}',
locales: ['pl'],
defaultLocale: 'pl',
  Server which serves javascripts, stylesheets and images.
assetsServer: '',
infoboxLibraryUrl: '/js/lib/infobox.min.js',
markersUrl: '/images/desktop/markers/',
iconsUrl: '/images/desktop/icons/',
loadingIcon: '/images/desktop/icons/ajax-loader.gif',
closeTooltip: true, // close tooltip when details window is closed
mobileSize: 768,
points: {
   types: ['parcel_locker', 'laundry_locker', 'avizo_locker', 'pok', 'nfk', 'avizo', 'office']
   typy: Paczkomat, Pralniomat, Awizomat, POK, oddział NFK, InPost Awizo, Lokalizacje biur
  types: ['pok', 'avizo', 'parcel_locker'],
  fields: ['name', 'type', 'location', 'address'] // which point fields should be preloaded
map: {
  clusterer: {
    zoomOnClick: true,
    gridSize: 70,
    maxZoom: 12,
    minimumClusterSize: 3,
    styles: [
        url: '/images/desktop/map-elements/cluster1.png',
        height: 61,
        width: 61
        url: '/images/desktop/map-elements/cluster2.png',
        height: 74,
        width: 74
        url: '/images/desktop/map-elements/cluster3.png',
        height: 90,
        width: 90
  useGeolocation: true,
  initialZoom: 13,
  detailsMinZoom: 15, // minimum zoom after marker click
  defaultLocation: [52.229807, 21.011595],
    Each time map center changes, MapWidget asks Points API for new points that are closest to map center.
    To improve loading speed and user experience, number of points returned by API is limited by two factors:
      1) Distance to relative point
         MapWidget calculates distance between map center and north east map bound.
         This is the distance that limits results to points that could be seen by user on map. But if the map
         is to be used with low density of points (for example only with parcel lockers) - you may want to load
         more points than only those that will be visible. You can use distanceMultiplier to do that.
      2) Number of returned points
         If users zooms out the map, more and more points could be put on it. To keep the performance, there is
         closestLimit setting which specifies how many points should be fetched at one request at max.
  distanceMultiplier: 10,
  closestLimit: 200, // how many closest points should be loaded
  defaultDistance: 15, // distance for first request which may be called before map render
  initialTypes: ['pok', 'avizo', 'parcel_locker'], // which type should be selected by default
  reloadDelay: 250, // after how many milliseconds after bounds change should points be reloaded
  country: 'pl', // limits places library searches to particular country, set null to turn off
  typeSelectedIcon: '/images/desktop/icons/selected.png',
  typeSelectedRadio: '/images/mobile/radio.png',
  closeIcon: '/images/desktop/icons/close.png',
  pointIcon: '/images/desktop/icons/point.png',
  pointIconDark: '/images/desktop/icons/point-dark.png',
  detailsIcon: '/images/desktop/icons/info.png',
  pointerIcon: '/images/desktop/icons/pointer.png',
  tooltipPointerIcon: '/images/desktop/icons/half-pointer.png',
  photosUrl: '/uploads/{locale}/images/', // photos source based on current locale setting
  mapIcon: '/images/mobile/map.png',
  listIcon: '/images/mobile/list.png'

Configuration parameters descriptions:

All usable parameters with descriptions are listed below.


URL to API Points which will be connected to Geowidget.

Default: https://api-{locale}


Geowidget language that will be uses in front-end. Locales strings can be added/modified in js/_locales.js file.

Default: pl


Languages that will be display as list in front layer. They can be dynamically changed.

Default: ['pl']


Server which serves javascripts, stylesheets and images.



Folder relative to assetsServer where marker icons are available.

Default: /images/desktop/markers/


Folder relative to assetsServer where icons are available.

Default: /images/desktop/icons/


Loading icon (spinner), relative to assetsServer.

Default: /images/desktop/icons/ajax-loader.gif


Screen width below which mobile version is triggered.

Default: 768


Determines if point tooltip should be closed when user closes the info bar.

Default: true


Determines if language selection bar should be displayed.

Default: false


Determines if filters (functions) bar should be displayed.

Default: false


Point types that geowidget should show.


	types: ['pok', 'avizo', 'parcel_locker', 'allegro_courier']

Configuration parameters for Google Maps


Google API Key

Default: xxx


Determines if click on specific cluster should zoom map

Default: true


Cluster icon styles



		url: '/images/desktop/map-elements/cluster1.png',
        height: 61,
        width: 61
        url: '/images/desktop/map-elements/cluster2.png',
        height: 74,
        width: 74
        url: '/images/desktop/map-elements/cluster3.png',
        height: 90,
        width: 90

Determines if geowidget can use browser geolocation.

Default: true


Starting location point which to map will be centered.

Default: [52.229807, 21.011595]


Which point types should be selected by default.

Default: ['pok', 'avizo', 'parcel_locker']


Selected checkbox icon url relative to assetsServer.

Default: /images/desktop/icons/selected.png


Selected radio button icon url relative to assetsServer.

Default: /images/mobile/radio.png


Close icon url relative to assetsServer.

Default: /images/desktop/icons/close.png


Point icon url relative to assetsServer.

Default: /images/desktop/icons/point.png


Details icon url relative to assetsServer.

Default: /images/desktop/icons/info.png


Select icon url relative to assetsServer.

Default: /images/desktop/icons/select.png


Pointer icon url relative to assetsServer.

Default: /images/desktop/icons/pointer.png


Machines photos url relative to assetsServer.

Default: /uploads/{locale}/images/


Map icon url relative to assetsServer.

Default: /images/mobile/map.png


List icon url relative to assetsServer.

Default: /images/mobile/list.png

Modal Map

It is possible to display geowidget inside modal and then select point also:

button.onclick = function() {
	easyPack.modalMap(function(point) {
	}, {width: 500, height: 600 });

Dropdown (list)

It is possible to display geowidget as dropdown with machines list. User can search machine by inputing it into search field:

window.onload = function() {
    easyPack.dropdownWidget('easypack-widget', function(point) {
  • No labels