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

 

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/
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="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">


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

 <script type="text/javascript">
 	window.easyPackAsyncInit = function () {
    	easyPack.init({});
		var map = easyPack.mapWidget('easypack-map', function(point) {
			console.log(point);
			alert(point.name, point.location_description);
		});
 	};
 </script>

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:

IMPORTANT

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>
</div>

 


Configuration 

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

<script type="text/javascript">
 	window.easyPackAsyncInit = function () {
    	easyPack.init({
			defaultLocale: 'uk'
		});
		var map = easyPack.mapWidget('easypack-map', function(point) {
			console.log(point);
			alert(point.name, point.location_description);
		});
 	};
 </script>

 

 

All 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}-points.easypack24.net/v1',
locales: ['pl'],
defaultLocale: 'pl',
/*
  Server which serves javascripts, stylesheets and images.
 */
assetsServer: 'https://geowidget.easypack24.net',
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.

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

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