Page tree

Versions Compared

Key

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

Table of Contents


Basic info

GEOv4 (also known as Geowidget v4) is a point locator and picker designed by Integer sp. z o.o. It's main goal is to show map of points with several types (for example machines), provide informations about this points and give possibility to integrate with clients external systems. GEOv4 is a widget-type software, it means that whole code and processing is held on Integer servers, external clients only attach link to this code and specify configuration that will be used on theirs systems.

Data source

API Points

Nomenclature basics: https://api-{locale}-points.easypack24.net/v1

Responsive Web Design (RWD)



 

Integration

Basic integration (easypack.mapWdget())

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

Code Block
languagetext
<script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script>
<link rel="stylesheet" href="https://geowidget.easypack24.net/css/easypack.css"/>

... then initialize widget by specifying DOM element ID (HTML) and configuration of their choice:

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

<div id="easypack-map"></div>

Example 1 - https://geowidget.easypack24.net/examples/basic.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
languagetext
easyPack.init({
	defaultLocale: 'pl',
	points: {
		types: ['parcel_locker']
	},
	map: {
		defaultLocation: [51.507351, -0.127758],
		initialTypes: ['parcel_locker']
	}
});

xample 2 - https://geowidget.easypack24.net/examples/basic-with-params.html

Parameters

Parameter nameDescriptionDefaults by instance
instance

Override default config by config prepared for instance.

Default: pl

Available: pl,uk,it


apiEndpoint

URL to API Points which will be connected to Geowidget

pl: https://api-pl-points.easypack24.net/v1
uk: https://api-uk-points.easypack24.net/v1
it: https://api-it-points.easypack24.net/v1
defaultLocale

Geowidget language that will be uses in front-end.

Available: pl,uk

pl: pl
uk: uk
locales

Languages that will be display as list in front layer. They can be dynamically changed.

pl: ['pl']
uk: ['uk'] 
mobileSize
Screen width below which mobile version is triggered.
768
langSelection
Determines if language selection bar should be displayed.
false
filters

Determines if filters (functions) bar should be displayed.

false
addressFormat

Visible format of address

'{street} {building_number} <br> {post_code} {city}'
listItemFormat
Visible format of address on list


Code Block
languagetext
collapsetrue
[
	"<b>{name}</b>",
	"{address_details.street} {address_details.building_number}"
]


display
Enable/disable visible type filters and search bar


Code Block
languagetext
collapsetrue
{
	showTypesFilters: true,
	showSearchBar: true,
}


mapType

Setup map type, available to use Open Street Map or Google Maps.

Available: osm, google

Info

For 'google' option map.googleKey is required.


'osm'
searchType

Setup search type, available to use Open Street Map Nominatim or Google Maps Autocomplete.

Available: osm, google

Info

For 'google' option map.googleKey is required.


'osm'
map
Setup map details.


Code Block
languagetext
collapsetrue
{
	googleKey: '', // required to use Google Maps API
	useGeolocation: true,
	initialZoom: 13,
	detailsMinZoom: 15, // minimum zoom after marker click
	autocompleteZoom: 14,
	visiblePointsMinZoom: 13,
	defaultLocation: [52.229807, 21.011595],
    initialTypes: ['pop', 'parcel_locker'], // which type should be selected by default. Options: parcel_locker_only, parcel_locker, pop
}


points

Setup points details

Available functions:

parcel - points with functions send and collect 
parcel_send - points with functions send only
parcel_collect - points with functions collect only


Code Block
languagetext
collapsetrue
{
	types: ['pop', 'parcel_locker'],  # Options: parcel_locker_only, parcel_locker, pop     
    allowedToolTips: ['pok', 'pop'],
    functions: []
}


customDetailsCallback

Allows to set custom callback for details action

Available: function(point){...}, false

false
customMapAndListInRow
Allow to change layout where list of point is below map. Points on list were paginated, number of point per page can be configured.


Code Block
languagetext
collapsetrue
{
	enabled: false,
	itemsPerPage: 8
}


listItemFormat
Allows to change default layout of point information on points list.


Code Block
languagetext
collapsetrue
[
	"<b>{name}</b>",
	"<strong>{address_details.street}</strong> {address_details.building_number}"
]


mobileFiltersAsCheckbox

Option set to false make filter option as radio in mobile, option true as checkobx.

true

Getting selected point data

If client wants to get point data that user selected on Geowidget, he can configure callback like this:

Code Block
languagetext
var map = easyPack.mapWidget('easypack-map', function(point) {
    alert(point.name);
});

Example 2 - https://geowidget.easypack24.net/examples/basic-with-params.html

Example 3 - https://geowidget.easypack24.net/examples/basic-with-collect-only.html

Modal Map (easyPack.modalMap())

It is possible to display Geowidget inside modal and then select point also:

Code Block
languagetext
easyPack.modalMap(function(point, modal) {
    modal.closeModal();
    console.log(point);
}, { width: 500, height: 600 });

Example 4 - https://geowidget.easypack24.net/examples/modal.html

Dropdown Widget (easyPack.dropdownWidget())

It is possible to display Geowidget as dropdown for select point.

Code Block
languagetext
 easyPack.dropdownWidget('easypack-widget', function(point) {
	console.log(point)
});

Example 5 - https://geowidget.easypack24.net/examples/dropdown-widget.html

Enable Google Maps

Defaults settings for display map and search place by address is setup to use Open Street Map.

Info

Google API Key is required

https://developers.google.com/maps/documentation/javascript/get-api-key

with enabled interfaces:

  • Geocoding API
  • Geolocation API
  • Google Cloud APIs
  • Maps JavaScript API
  • Places API

Initialize Geowidget with params:

Code Block
languagetext
easyPack.init({
	mapType: 'google',
	searchType: 'google',
	map: {
		googleKey: 'your-google-api-key'
	}
});

Example 6 - https://geowidget.easypack24.net/examples/google.html


Functions of mapWidget

searchLockerPoint(pointName)

Function for search point by name and show it on map.

Code Block
languagetext
map.searchLockerPoint('PointName');

Example 7 - https://geowidget.easypack24.net/examples/search-locker-point.html

searchPlace(placeName)

Function fo search place by name and show it on map.

Code Block
languagetext
map.searchPlace('Wroclaw');

Example 8 - https://geowidget.easypack24.net/examples/search-place.html

Examples

Display points with different types


Params in init()

PARCEL_LOCKER_ONLY
In results we have points - physical machines only


Code Block
languagetext
points: {
  types: [‘parcel_locker_only']
},
map: {
  initialTypes: [‘parcel_locker_only']
}


POP
In results we have points with types 'pop' and 'super_pop'


Code Block
languagetext
points: {
  types: [‘pop']
},
map: {
  initialTypes: [‘pop']
}


PARCEL_LOCKER
In results we have points -physical machines and 'super_pop' type


Code Block
languagetext
points: {
   types: [‘parcel_locker']
},
map: {
  initialTypes: [‘parcel_locker']
}


PARCEL_LOCKER_SUPERPOP
In results we have points - 'super_pop' type only


Code Block
languagetext
points: {
  types: [‘parcel_locker_superpop']
},
map: {
  initialTypes: [‘parcel_locker_superpop']
}


PARCEL LOCKER + POP
In results we have points - physical machines, 'pop' and 'super_pop' types


Code Block
languagetext
points: {
  types: [‘parcel_locker', 'pop']
},
map: {
  initialTypes: [‘parcel_locker', 'pop']
}


PARCEL LOCKER + POP
In results we have points - physical machines, 'pop' and 'super_pop' types but selected is only 'parcel_locker' and 'super_pop' type


Code Block
languagetext
points: {
types: [‘parcel_locker, pop']
},
map: {
  initialTypes: [‘parcel_locker']
}


PARCEL LOCKER + POP
In results we have points - physical machines, 'pop' and 'super_pop' types but selected is only 'pop' and 'super_pop' type


Code Block
languagetext
points: {
  types: [‘parcel_locker, pop']
},
map: {
  initialTypes: [‘pop']
}



Example 1 - https://geowidget.easypack24.net/examples/basic.html - Basic integration

Example 2 - https://geowidget.easypack24.net/examples/basic-with-params.html - Basic integration with params and callback after point choose

Example 3 - https://geowidget.easypack24.net/examples/basic-with-collect-only.html - Basic integration with params and callback after point choose, points only with collect function

Example 4 - https://geowidget.easypack24.net/examples/modal.html - Open map as modal

Example 5 - https://geowidget.easypack24.net/examples/dropdown-widget.html - Open as dropdown

Example 6 - https://geowidget.easypack24.net/examples/google.html - Enable Google Maps

Example 7 - https://geowidget.easypack24.net/examples/search-locker-point.html - Function searchLockerPoint()

Example 8 - https://geowidget.easypack24.net/examples/search-place.html - Function searchPlace()

Example 9 - https://geowidget.easypack24.net/examples/multi-maps.html - Open multi maps with different initial parameters