That look is static but client can change marker icons by adjusting configuration property about which I talk later.
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. | |||||||||||||||||||||||||||||||||||||||
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:
| |||||||||||||||||||||||||||||||||||||||
map | Configuration parameters for Google Maps
|
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); }); |
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 }); } |