Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

 

There are following SDK4JS (Geowidget) environments:

  1. Production environment available at: https://geowidget.easypack24.net/
  2. Staging environment available at: https://sandbox-geowidget.easypack24.net/
  3. Test environment available at: https://test-geowidget.easypack24.net/
Panel
bgColor#f0f0f0
titleBGColor#f0f0f0
titlePage contents

Table of Contents
minLevel2
 

Quick Start

EasyPack 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:

Code Block
languagexml
<script type="text/javascript">
  window.easyPackAsyncInit = function () {
    easyPack.init({});
    easyPack.mapWidget('easypack-map');
  };
</script>
<script async src="https://staging-geowidget.easypack24.net/js/sdk-for-javascript.js"></script>
<link rel="stylesheet" type="text/css" href="https://staging-geowidget.easypack24.net/css/easypack.css">

Create easypack-map placeholder and set it's height:

Info
titleIMPORTANT

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

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

Integration

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

Code Block
<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:

Code Block
 <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:

Code Block
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:

Code Block
{
	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:

 

Code Block
[
	{
		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:

Code Block
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:

Code Block
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:

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