Integration

SDK4JS can be easily integrated into any system or web page. Client web page should insert script in <head> tag:

<script async src="https://static.easypack24.net/sdk/js/sdk-for-javascript.js"></script>
<link rel="stylesheet" href="https://static.easypack24.net/sdk/css/easypack.css"/>

... then initialize widget by specifying DOM element ID (HTML) and configuration of their choice:

 <script type="text/javascript">
 	window.easyPackAsyncInit = function () {
    	easyPack.init({});
        var map = easyPack.mapWidget('easypack-map');
 	};
 </script>

Example can be found here: https://static.easypack24.net/sdk/pl/index.html

 

Configuration options should be passed inside easyPack.init({}) object. It's not obligatory but client will definitely need to adjust it for himself.

For example:

easyPack.init({
	defaultLocale: 'uk',
    closeTooltip: false,
    points: {
    	types: ['parcel_locker']
    },
    map: {
       defaultLocation: [51.507351, -0.127758]
    }
});

All usable parameters with descriptions are listed below.

apiEndpoint

URL to API Points which will be connected to Geowidget.

Default: https://api-{locale}-points.easypack24.net/v1

defaultLocale

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

Default: pl

locales

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

Default: ['pl']

assetsServer

Server which serves javascripts, stylesheets and images.

Default: https://geowidget.easypack24.net

markersUrl

Folder relative to assetsServer where marker icons are available.

Default: /images/desktop/markers/

iconsUrl

Folder relative to assetsServer where icons are available.

Default: /images/desktop/icons/

loadingIcon

Loading icon (spinner), relative to assetsServer.

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

mobileSize

Screen width below which mobile version is triggered.

Default: 768

closeTooltip

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

Default: true

langSelection

Determines if language selection bar should be displayed.

Default: false

filters

Determines if filters (functions) bar should be displayed.

Default: false

points

Point types that geowidget should show.

Default:

{
	types: ['pok', 'avizo', 'parcel_locker', 'allegro_courier']
}
map

Configuration parameters for Google Maps

  
googleKey

Google API Key

Default: xxx

clusterer
  
zoomOnClick

Determines if click on specific cluster should zoom map

Default: true

styles

Cluster icon styles

Default:

 

[
	{
		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

Determines if geowidget can use browser geolocation.

Default: true

defaultLocation

Starting location point which to map will be centered.

Default: [52.229807, 21.011595]

initialTypes

Which point types should be selected by default.

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

typeSelectedIcon

Selected checkbox icon url relative to assetsServer.

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

typeSelectedRadio

Selected radio button icon url relative to assetsServer.

Default: /images/mobile/radio.png

closeIcon

Close icon url relative to assetsServer.

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


pointIcon

Point icon url relative to assetsServer.

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

detailsIcon

Details icon url relative to assetsServer.

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

selectIcon

Select icon url relative to assetsServer.

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

pointerIcon

Pointer icon url relative to assetsServer.

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

photosUrl

Machines photos url relative to assetsServer.

Default: /uploads/{locale}/images/

mapIcon

Map icon url relative to assetsServer.

Default: /images/mobile/map.png

listIcon

List icon url relative to assetsServer.

Default: /images/mobile/list.png

Getting selected point data

If client wants to get point data that user selected on geowidget, he can configure callback like this:

var map = easyPack.mapWidget('easypack-map', function(point) {
	alert(point.name);
});

Modal Map

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

button.onclick = function() {
	easyPack.modalMap(function(point) {
		this.close();
		console.log(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:

easyPack.init({});
window.onload = function() {
    easyPack.dropdownWidget('easypack-widget', function(point) {
        console.log(point)
    });
}