[4.0.0] Geowidget Documentation (Old)

Owned by Former user (Deleted)
Last updated: Sept 20, 2023 by Michał Machowski
2 min read


That look is static but client can change marker icons by adjusting configuration property about which I talk later.

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

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

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 });
}