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 17 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>

 


Basic 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',
    		closeTooltip: false,
    		points: {
        		types: ['parcel_locker']
    		},
    		map: {
       			defaultLocation: [51.507351, -0.127758]
    		}
		});
		var map = easyPack.mapWidget('easypack-map', function(point) {
			console.log(point);
			alert(point.name, point.location_description);
		});
 	};
 </script>

 

 

All configuration parameters

/*
  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'],  // options: pl, uk, ca, fr
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'
}

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