...
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:
...
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 |
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: 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
|
|
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);
}); |
It is possible to display geowidget inside modal and then select point also:
...