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 5 Next »

 

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)
    });
}
  • No labels