@vidro/map-handler 1.0.6 → 1.0.9

package/README.md

@@ -1,6 +1,6 @@
 # Map Handler
 
-#### Version 1.0.6 - September 2021
+#### Version 1.0.9 - June 2022
 
 Tool to achieve the easiest way of communication with the map iframe.
 
@@ -8,6 +8,8 @@ Tool to achieve the easiest way of communication with the map iframe.
 - [Events](#Events)
 - [Methods](#Methods)
 
+Some of the multiple use case flows are documented in [flows.md](flows.md)
+
 ## TL;DR
 
 ```
@@ -40,7 +42,7 @@ Tool to achieve the easiest way of communication with the map iframe.
 
 ### 0. Pre-requisites
 
-You should have one iframe already created on the DOM with the attributes `name="map-frame"`.
+You should have one iframe already created on the DOM with the attributes `name="map-frame" id="map-frame"`. 
 
 ### 1. Include the library:
 
@@ -94,6 +96,7 @@ setDebug(0);
     communicator.on("onZoomChange", function(data){
       console.log("onZoomChange event",data);
     });
+   
 
 ### Available events
 
@@ -148,6 +151,14 @@ Notifies an array of displayed GeoJSON layers
 
 Notifies wich layer is marked as active
 
+##### WMSInfoAvailable
+
+Notifies when WMS is available for this map
+
+##### availableWMSLayers
+
+List of available layers from WMS server
+
 ##### coordinates
 
 Notifies clicked coordinates (x,y)
@@ -177,6 +188,14 @@ Notifies info results. There're 2 availables infos `wms` and `giswater`
 {type: "info", infoType: "giswater", data: {…}}
 ```
 
+##### layerElements
+
+Receives a list of elements from a `getElementsFromLayer request
+
+```
+{type: "layerElements", data: {xml or json}}
+```
+
 ##### geolocation
 
 Notifies user position, coordinates (x,y)
@@ -236,13 +255,14 @@ Zooms to given coordinates
 
 > Params
 
-- coordinates `<array>` - lat, long
+- lat (x) `<integer>` 
+- long (y) `<integer>`
 - zoomLevel `<integer>` - zoom level 
 
 > E.G.
 
 ```
-zoomToCoordinates([419006.12985785044, 4576698.8136144625],18);
+zoomToCoordinates(419006.12985785044, 4576698.8136144625,18);
 
 ```
 
@@ -277,13 +297,33 @@ Shows/hides a layer
 > Params
 
 - layerName `<string>` - layer name
+- properties `<object>` - _optional_ layer properties 
+	- gutter `<integer>` - The size in pixels of the gutter around image tiles to ignore, only applies for multitile layer
+	- singletile `<boolean>` - SingleTile Layer
+	- transparent `<boolean>` - Transparent Layer
+
+By default, layer properties will be:
+
+`gutter: 0`
+
+`singletile: false` - will render a multitile layer
+
+`transparent: true` 
 
 > E.G.
 
+With no properties
+
 ```
 toggleLayer('somelayer_name');
 ```
 
+With properties
+
+```
+toggleLayer('somelayer_name', {gutter: 10, transparent: false, singletile: false);
+```
+
 ##### setActiveLayer()
 
 Sets a layer as acticve layer, used for infos
@@ -304,6 +344,37 @@ Reloads displayed layers
 reloadDisplayedLayers();
 ```
 
+##### loadWMSAvailableLayers
+
+Gets a list of available layers from WMS server
+
+> E.G.
+
+```
+loadWMSAvailableLayers();
+```
+
+An `availableWMSLayers ` event will be received after calling the method.
+
+
+
+##### getElementsFromLayer
+
+Gets a list of elements from a layer, based on a WMS request
+
+```
+getElementsFromLayer(layer,limit,format) 
+```
+
+> Params
+
+- layer `<string>` - layer name
+- limit `<integer>` - limit output number of elements (default 100)
+- format `<string>` - output format
+	- `xml` - default
+  	- `json` 
+
+
 ##### infoFromCoordinates
 
 There're two available info from coordinates `wms` or `giswater`.
@@ -380,8 +451,10 @@ Params
 
 let options = {
 	'geom': 'MULTILINESTRING((418596.62555076234 4577083.383681167,419026.2319996517 4577216.795306675))',
-	'type':'level',
-	'zoomLevel':6
+	'zoom':{
+		'type':'level',
+		'zoomLevel':6
+	}
 }
 
 Highlight(options);
@@ -390,7 +463,9 @@ Highlight(options);
 
 let options = {
 	'geom': 'MULTILINESTRING((418596.62555076234 4577083.383681167,419026.2319996517 4577216.795306675))',
-	'type':'element'
+	'zoom':{
+		'type':'element'
+	}
 }
 
 Highlight(options);
@@ -493,6 +568,58 @@ getGiswaterLayerAvailableFilters(layername);
 getGiswaterLayerAvailableFilters("Arc");
 ```
 
+##### setCustomColors
+
+Sets colors and stroke width for added & highlight geometries.
+
+Properties:
+
+- `geom_stroke_color` - stroke color in RGB format
+- `geom_fill_color` - fill color in RGB format
+- `geom_stroke_width` - stroke width in pixels, default 1.
+- `geom_shape` - shape por point, `circle`(default) or `square`
+- `radius` - point radius or square side in pixels. Default 4.
+
+```
+setCustomColors({geom_stroke_color, geom_fill_color, geom_stroke_width,geom_shape});
+```
+
+> E.G.
+
+```
+setCustomColors({
+		geom_stroke_color: 'rgb(19, 39, 99,0.5)',
+		geom_fill_color: 'rgb(19, 39, 99,0.5)',
+    	geom_stroke_width: 1,
+    	geom_shape: 'circle',
+    	radius: 2
+    	});
+```
+
+On Bmaps projects, default values are taken from Backoffice:
+
+```
+geom_stroke_color -> Bmaps: geom_select_stroke_color
+geom_fill_color -> Bmaps: geom_select_fill_color
+```
+
+
+
+### Multiple iframes
+
+Is possible to use multiple iframe on a single page, follow this steps.
+
+- Set to your `iframe` tags the id & value 
+- Add to each `iframe.src` `&domId=IFRAME_ID`
+- Instantiate each iframe:
+
+```
+var communicator = new VidroMaps.Communicator({
+      sessionToken: sessionToken,
+      id:'IFRAME_ID'
+});
+```
+
 ## Examples
 
 ### Simple
@@ -507,7 +634,7 @@ A simple integration with just zoom buttons
 2. Request a user token to the API
 3. Loads the first map of the user
 
-[http://www.vidrosoftware.com/examples/simple/?user=USER&pwd=USER_PASWORD&api=API_URL]()
+[https://www.vidrosoftware.com/examples/simple/?user=USER&pwd=USER_PASWORD&api=API_URL]()
 
 ### Full
 
@@ -521,7 +648,19 @@ Full integration
 2. Stores token and last map loaded in a fake cache
 3. There's a form for choosing map and customize map parameters
 
-[http://www.vidrosoftware.com/examples/full/]()
+[https://www.vidrosoftware.com/examples/full/]()
+
+### Vidromaps
+
+`examples/vidromaps/`
+
+Vidromaps integration
+
+##### How it works
+
+1. Paste iframe code
+
+[https://www.vidrosoftware.com/examples/vidromaps/]()
 
 ### Serverless
 
@@ -534,4 +673,42 @@ Server less sample integration
 1. Gets user, password and API url from the url
 2. Request a user token to the API
 3. Loads the first map of the user with one layer rendered
-4. On map click, performs an wms info, displays one attribute, highlights the clicked point and centers map on that point
+4. On map click, performs an wms info, displays one attribute, highlights the clicked point and centers map on that point
+
+### Mutiple iframes
+
+`examples/multipleiframes/`
+
+Multiple iframes integration
+
+##### How it works
+
+1. Replace `YOUR_SESSION_TOKEN` with your session token code on both inputs `code1` and `code2`.
+
+[https://www.vidrosoftware.com/examples/multipleiframes/]()
+
+### Known issues
+
+- **Custom logo is not displayed**
+
+Could be CORS issue. Check the headers sent by your server. 
+
+With Apache can be solved with and `.htaccess` file with this content:
+
+```
+Header set Access-Control-Allow-Origin "*"
+Header add Cross-Origin-Resource-Policy: "cross-origin"
+Header add Cross-Origin-Embedder-Policy: "require-corp"
+```
+
+- **QGIS Broken symbology**
+
+QGIS multi tile layers could show broken symbology:
+
+![](doc/multiTileNoGutter.png)
+
+This can be solved using `singletile: true` or adding `gutter: value in pixels` if is a multitiule layer, on toggleLayer method.
+
+Is if is a Giswwater project, you can set this options (`Render mode` and `Gutter`) on Bmaps backoffice.
+
+![](doc/multiTile.png)

package/dist/map-handler.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VidroMaps=t():e.VidroMaps=t()}(self,(function(){return(()=>{"use strict";var e={187:e=>{var t,n="object"==typeof Reflect?Reflect:null,o=n&&"function"==typeof n.apply?n.apply:function(e,t,n){return Function.prototype.apply.call(e,t,n)};t=n&&"function"==typeof n.ownKeys?n.ownKeys:Object.getOwnPropertySymbols?function(e){return Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e))}:function(e){return Object.getOwnPropertyNames(e)};var r=Number.isNaN||function(e){return e!=e};function i(){i.init.call(this)}e.exports=i,e.exports.once=function(e,t){return new Promise((function(n,o){function r(n){e.removeListener(t,i),o(n)}function i(){"function"==typeof e.removeListener&&e.removeListener("error",r),n([].slice.call(arguments))}v(e,t,i,{once:!0}),"error"!==t&&function(e,t,n){"function"==typeof e.on&&v(e,"error",t,{once:!0})}(e,r)}))},i.EventEmitter=i,i.prototype._events=void 0,i.prototype._eventsCount=0,i.prototype._maxListeners=void 0;var s=10;function a(e){if("function"!=typeof e)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof e)}function u(e){return void 0===e._maxListeners?i.defaultMaxListeners:e._maxListeners}function c(e,t,n,o){var r,i,s,c;if(a(n),void 0===(i=e._events)?(i=e._events=Object.create(null),e._eventsCount=0):(void 0!==i.newListener&&(e.emit("newListener",t,n.listener?n.listener:n),i=e._events),s=i[t]),void 0===s)s=i[t]=n,++e._eventsCount;else if("function"==typeof s?s=i[t]=o?[n,s]:[s,n]:o?s.unshift(n):s.push(n),(r=u(e))>0&&s.length>r&&!s.warned){s.warned=!0;var f=new Error("Possible EventEmitter memory leak detected. "+s.length+" "+String(t)+" listeners added. Use emitter.setMaxListeners() to increase limit");f.name="MaxListenersExceededWarning",f.emitter=e,f.type=t,f.count=s.length,c=f,console&&console.warn&&console.warn(c)}return e}function f(){if(!this.fired)return this.target.removeListener(this.type,this.wrapFn),this.fired=!0,0===arguments.length?this.listener.call(this.target):this.listener.apply(this.target,arguments)}function l(e,t,n){var o={fired:!1,wrapFn:void 0,target:e,type:t,listener:n},r=f.bind(o);return r.listener=n,o.wrapFn=r,r}function p(e,t,n){var o=e._events;if(void 0===o)return[];var r=o[t];return void 0===r?[]:"function"==typeof r?n?[r.listener||r]:[r]:n?function(e){for(var t=new Array(e.length),n=0;n<t.length;++n)t[n]=e[n].listener||e[n];return t}(r):d(r,r.length)}function y(e){var t=this._events;if(void 0!==t){var n=t[e];if("function"==typeof n)return 1;if(void 0!==n)return n.length}return 0}function d(e,t){for(var n=new Array(t),o=0;o<t;++o)n[o]=e[o];return n}function v(e,t,n,o){if("function"==typeof e.on)o.once?e.once(t,n):e.on(t,n);else{if("function"!=typeof e.addEventListener)throw new TypeError('The "emitter" argument must be of type EventEmitter. Received type '+typeof e);e.addEventListener(t,(function r(i){o.once&&e.removeEventListener(t,r),n(i)}))}}Object.defineProperty(i,"defaultMaxListeners",{enumerable:!0,get:function(){return s},set:function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received '+e+".");s=e}}),i.init=function(){void 0!==this._events&&this._events!==Object.getPrototypeOf(this)._events||(this._events=Object.create(null),this._eventsCount=0),this._maxListeners=this._maxListeners||void 0},i.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received '+e+".");return this._maxListeners=e,this},i.prototype.getMaxListeners=function(){return u(this)},i.prototype.emit=function(e){for(var t=[],n=1;n<arguments.length;n++)t.push(arguments[n]);var r="error"===e,i=this._events;if(void 0!==i)r=r&&void 0===i.error;else if(!r)return!1;if(r){var s;if(t.length>0&&(s=t[0]),s instanceof Error)throw s;var a=new Error("Unhandled error."+(s?" ("+s.message+")":""));throw a.context=s,a}var u=i[e];if(void 0===u)return!1;if("function"==typeof u)o(u,this,t);else{var c=u.length,f=d(u,c);for(n=0;n<c;++n)o(f[n],this,t)}return!0},i.prototype.addListener=function(e,t){return c(this,e,t,!1)},i.prototype.on=i.prototype.addListener,i.prototype.prependListener=function(e,t){return c(this,e,t,!0)},i.prototype.once=function(e,t){return a(t),this.on(e,l(this,e,t)),this},i.prototype.prependOnceListener=function(e,t){return a(t),this.prependListener(e,l(this,e,t)),this},i.prototype.removeListener=function(e,t){var n,o,r,i,s;if(a(t),void 0===(o=this._events))return this;if(void 0===(n=o[e]))return this;if(n===t||n.listener===t)0==--this._eventsCount?this._events=Object.create(null):(delete o[e],o.removeListener&&this.emit("removeListener",e,n.listener||t));else if("function"!=typeof n){for(r=-1,i=n.length-1;i>=0;i--)if(n[i]===t||n[i].listener===t){s=n[i].listener,r=i;break}if(r<0)return this;0===r?n.shift():function(e,t){for(;t+1<e.length;t++)e[t]=e[t+1];e.pop()}(n,r),1===n.length&&(o[e]=n[0]),void 0!==o.removeListener&&this.emit("removeListener",e,s||t)}return this},i.prototype.off=i.prototype.removeListener,i.prototype.removeAllListeners=function(e){var t,n,o;if(void 0===(n=this._events))return this;if(void 0===n.removeListener)return 0===arguments.length?(this._events=Object.create(null),this._eventsCount=0):void 0!==n[e]&&(0==--this._eventsCount?this._events=Object.create(null):delete n[e]),this;if(0===arguments.length){var r,i=Object.keys(n);for(o=0;o<i.length;++o)"removeListener"!==(r=i[o])&&this.removeAllListeners(r);return this.removeAllListeners("removeListener"),this._events=Object.create(null),this._eventsCount=0,this}if("function"==typeof(t=n[e]))this.removeListener(e,t);else if(void 0!==t)for(o=t.length-1;o>=0;o--)this.removeListener(e,t[o]);return this},i.prototype.listeners=function(e){return p(this,e,!0)},i.prototype.rawListeners=function(e){return p(this,e,!1)},i.listenerCount=function(e,t){return"function"==typeof e.listenerCount?e.listenerCount(t):y.call(e,t)},i.prototype.listenerCount=y,i.prototype.eventNames=function(){return this._eventsCount>0?t(this._events):[]}}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,n),i.exports}n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{Communicator:()=>l});var e=n(187),t="undefined"==typeof window,r=function(e){t||window.top.frames["map-frame"].postMessage(e,"*")};function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function a(e,t){return!t||"object"!==i(t)&&"function"!=typeof t?u(e):t}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var l=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&s(e,t)}(l,e);var t,n,o=(t=l,n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,o=c(t);if(n){var r=c(this).constructor;e=Reflect.construct(o,arguments,r)}else e=o.apply(this,arguments);return a(this,e)});function l(e){var t,n=e.sessionToken;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,l),f(u(t=o.call(this)),"onMessageReceived",(function(e){switch(e.data.type){case"onZoomChange":t.emit("onZoomChange",e.data.zoom);break;case"geomAdded":t.emit("geomAdded",e.data.geom_astext);break;case"layers":t.emit("layers",e.data.layers);break;case"geoJSONlayers":t.emit("geoJSONlayers",e.data.layers);break;case"info":t.emit("info",e.data);break;case"error":t.emit("error",e.data);break;case"coordinates":t.emit("coordinates",e.data);break;case"activeLayer":t.emit("activeLayer",e.data);break;case"geolocation":t.emit("geolocation",e.data);break;case"WMSInfoAvailable":t.emit("WMSInfoAvailable",e.data);break;case"giswaterTiledBackgroundDisplayed":t.emit("giswaterTiledBackgroundDisplayed",e.data);break;case"giswaterTiledBackgroundAvailable":t.emit("giswaterTiledBackgroundAvailable",e.data);break;case"GiswaterLayerAvailableFilters":t.emit("GiswaterLayerAvailableFilters",e.data);break;case"loaded":t.emit("loaded",e.data)}})),f(u(t),"ZoomIn",(function(){r({type:"zoomIn",sessionToken:t.sessionToken})})),f(u(t),"ZoomOut",(function(){r({type:"zoomOut",sessionToken:t.sessionToken})})),f(u(t),"AddGeom",(function(e){r({type:"AddGeom",geom:e,sessionToken:t.sessionToken})})),f(u(t),"toggleLayer",(function(e){r({type:"toggleLayer",layer:e,sessionToken:t.sessionToken})})),f(u(t),"setActiveLayer",(function(e){r({type:"setActiveLayer",layer:e,sessionToken:t.sessionToken})})),f(u(t),"getActiveLayer",(function(){r({type:"getActiveLayer",sessionToken:t.sessionToken})})),f(u(t),"clear",(function(){r({type:"clear",sessionToken:t.sessionToken})})),f(u(t),"Highlight",(function(e){r({type:"highlight",geom:e.geom,zoom:e.zoom,sessionToken:t.sessionToken})})),f(u(t),"zoomToExtent",(function(){r({type:"zoomToExtent",sessionToken:t.sessionToken})})),f(u(t),"zoomToCoordinates",(function(e,n,o){isNaN(parseInt(o))||r({type:"zoomToCoordinates",sessionToken:t.sessionToken,coordinates:[e,n],zoomLevel:o})})),f(u(t),"infoFromCoordinates",(function(e,n,o){r({type:"infoFromCoordinates",info:e,layer:void 0===n?null:n,hitTolerance:void 0!==o?parseInt(o):5,sessionToken:t.sessionToken})})),f(u(t),"Geolocalize",(function(e){r({type:"Geolocalize",toggle:e,sessionToken:t.sessionToken})})),f(u(t),"toggleGiswaterTiled",(function(e){r({type:"toggleGiswaterTiled",toggle:e,sessionToken:t.sessionToken})})),f(u(t),"reloadDisplayedLayers",(function(){return r({type:"reloadDisplayedLayers",sessionToken:t.sessionToken})})),f(u(t),"addGeoJSON",(function(e,n,o){return e?r({type:"addGeoJSON",geoJSON:e,options:void 0!==n?n:{fillcolor:null,strokecolor:null},name:o||Math.random().toString(36).substring(7),sessionToken:t.sessionToken}):void t.emit("error",{error:"No geoJSON data"})})),f(u(t),"clearGeoJSON",(function(){return r({type:"clearGeoJSON",sessionToken:t.sessionToken})})),f(u(t),"removeGeoJSONLayer",(function(e){return e?r({type:"removeGeoJSONLayer",name:e,sessionToken:t.sessionToken}):void t.emit("error",{error:"No geoJSON data"})})),f(u(t),"setGiswaterFilters",(function(e){var n=e;if(e){if("object"!=i(e)){e=(e=(e=e.trim()).replace(/^\s+|\s+$/g,"")).replace(/\\/g,"");try{n=JSON.parse(e)}catch(e){return void t.emit("error",{error:"Filters is not a valid JSON"})}}return r({type:"setGiswaterFilters",filters:n,sessionToken:t.sessionToken})}t.emit("error",{error:"No filters"})})),f(u(t),"getGiswaterLayerAvailableFilters",(function(e){return e?r({type:"getGiswaterLayerAvailableFilters",name:e,sessionToken:t.sessionToken}):void t.emit("error",{error:"No layer_name"})})),f(u(t),"setDebug",(function(e){if(!isNaN(parseInt(e)))return r({type:"setDebug",what:e,sessionToken:t.sessionToken})})),"undefined"==typeof window?a(t):(window.addEventListener("message",(function(e){return t.onMessageReceived(e)})),t.sessionToken=n,t)}return l}(e.EventEmitter)})(),o})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VidroMaps=t():e.VidroMaps=t()}(self,(function(){return(()=>{"use strict";var e={187:e=>{var t,o="object"==typeof Reflect?Reflect:null,n=o&&"function"==typeof o.apply?o.apply:function(e,t,o){return Function.prototype.apply.call(e,t,o)};t=o&&"function"==typeof o.ownKeys?o.ownKeys:Object.getOwnPropertySymbols?function(e){return Object.getOwnPropertyNames(e).concat(Object.getOwnPropertySymbols(e))}:function(e){return Object.getOwnPropertyNames(e)};var r=Number.isNaN||function(e){return e!=e};function s(){s.init.call(this)}e.exports=s,e.exports.once=function(e,t){return new Promise((function(o,n){function r(o){e.removeListener(t,s),n(o)}function s(){"function"==typeof e.removeListener&&e.removeListener("error",r),o([].slice.call(arguments))}y(e,t,s,{once:!0}),"error"!==t&&function(e,t,o){"function"==typeof e.on&&y(e,"error",t,{once:!0})}(e,r)}))},s.EventEmitter=s,s.prototype._events=void 0,s.prototype._eventsCount=0,s.prototype._maxListeners=void 0;var i=10;function a(e){if("function"!=typeof e)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof e)}function l(e){return void 0===e._maxListeners?s.defaultMaxListeners:e._maxListeners}function u(e,t,o,n){var r,s,i,u;if(a(o),void 0===(s=e._events)?(s=e._events=Object.create(null),e._eventsCount=0):(void 0!==s.newListener&&(e.emit("newListener",t,o.listener?o.listener:o),s=e._events),i=s[t]),void 0===i)i=s[t]=o,++e._eventsCount;else if("function"==typeof i?i=s[t]=n?[o,i]:[i,o]:n?i.unshift(o):i.push(o),(r=l(e))>0&&i.length>r&&!i.warned){i.warned=!0;var c=new Error("Possible EventEmitter memory leak detected. "+i.length+" "+String(t)+" listeners added. Use emitter.setMaxListeners() to increase limit");c.name="MaxListenersExceededWarning",c.emitter=e,c.type=t,c.count=i.length,u=c,console&&console.warn&&console.warn(u)}return e}function c(){if(!this.fired)return this.target.removeListener(this.type,this.wrapFn),this.fired=!0,0===arguments.length?this.listener.call(this.target):this.listener.apply(this.target,arguments)}function d(e,t,o){var n={fired:!1,wrapFn:void 0,target:e,type:t,listener:o},r=c.bind(n);return r.listener=o,n.wrapFn=r,r}function f(e,t,o){var n=e._events;if(void 0===n)return[];var r=n[t];return void 0===r?[]:"function"==typeof r?o?[r.listener||r]:[r]:o?function(e){for(var t=new Array(e.length),o=0;o<t.length;++o)t[o]=e[o].listener||e[o];return t}(r):m(r,r.length)}function p(e){var t=this._events;if(void 0!==t){var o=t[e];if("function"==typeof o)return 1;if(void 0!==o)return o.length}return 0}function m(e,t){for(var o=new Array(t),n=0;n<t;++n)o[n]=e[n];return o}function y(e,t,o,n){if("function"==typeof e.on)n.once?e.once(t,o):e.on(t,o);else{if("function"!=typeof e.addEventListener)throw new TypeError('The "emitter" argument must be of type EventEmitter. Received type '+typeof e);e.addEventListener(t,(function r(s){n.once&&e.removeEventListener(t,r),o(s)}))}}Object.defineProperty(s,"defaultMaxListeners",{enumerable:!0,get:function(){return i},set:function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received '+e+".");i=e}}),s.init=function(){void 0!==this._events&&this._events!==Object.getPrototypeOf(this)._events||(this._events=Object.create(null),this._eventsCount=0),this._maxListeners=this._maxListeners||void 0},s.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||r(e))throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received '+e+".");return this._maxListeners=e,this},s.prototype.getMaxListeners=function(){return l(this)},s.prototype.emit=function(e){for(var t=[],o=1;o<arguments.length;o++)t.push(arguments[o]);var r="error"===e,s=this._events;if(void 0!==s)r=r&&void 0===s.error;else if(!r)return!1;if(r){var i;if(t.length>0&&(i=t[0]),i instanceof Error)throw i;var a=new Error("Unhandled error."+(i?" ("+i.message+")":""));throw a.context=i,a}var l=s[e];if(void 0===l)return!1;if("function"==typeof l)n(l,this,t);else{var u=l.length,c=m(l,u);for(o=0;o<u;++o)n(c[o],this,t)}return!0},s.prototype.addListener=function(e,t){return u(this,e,t,!1)},s.prototype.on=s.prototype.addListener,s.prototype.prependListener=function(e,t){return u(this,e,t,!0)},s.prototype.once=function(e,t){return a(t),this.on(e,d(this,e,t)),this},s.prototype.prependOnceListener=function(e,t){return a(t),this.prependListener(e,d(this,e,t)),this},s.prototype.removeListener=function(e,t){var o,n,r,s,i;if(a(t),void 0===(n=this._events))return this;if(void 0===(o=n[e]))return this;if(o===t||o.listener===t)0==--this._eventsCount?this._events=Object.create(null):(delete n[e],n.removeListener&&this.emit("removeListener",e,o.listener||t));else if("function"!=typeof o){for(r=-1,s=o.length-1;s>=0;s--)if(o[s]===t||o[s].listener===t){i=o[s].listener,r=s;break}if(r<0)return this;0===r?o.shift():function(e,t){for(;t+1<e.length;t++)e[t]=e[t+1];e.pop()}(o,r),1===o.length&&(n[e]=o[0]),void 0!==n.removeListener&&this.emit("removeListener",e,i||t)}return this},s.prototype.off=s.prototype.removeListener,s.prototype.removeAllListeners=function(e){var t,o,n;if(void 0===(o=this._events))return this;if(void 0===o.removeListener)return 0===arguments.length?(this._events=Object.create(null),this._eventsCount=0):void 0!==o[e]&&(0==--this._eventsCount?this._events=Object.create(null):delete o[e]),this;if(0===arguments.length){var r,s=Object.keys(o);for(n=0;n<s.length;++n)"removeListener"!==(r=s[n])&&this.removeAllListeners(r);return this.removeAllListeners("removeListener"),this._events=Object.create(null),this._eventsCount=0,this}if("function"==typeof(t=o[e]))this.removeListener(e,t);else if(void 0!==t)for(n=t.length-1;n>=0;n--)this.removeListener(e,t[n]);return this},s.prototype.listeners=function(e){return f(this,e,!0)},s.prototype.rawListeners=function(e){return f(this,e,!1)},s.listenerCount=function(e,t){return"function"==typeof e.listenerCount?e.listenerCount(t):p.call(e,t)},s.prototype.listenerCount=p,s.prototype.eventNames=function(){return this._eventsCount>0?t(this._events):[]}}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,o),s.exports}o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{o.r(n),o.d(n,{Communicator:()=>d});var e=o(187),t="undefined"==typeof window,r=function e(o){var n,r,s=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),r=function(e){t||window.top.frames[s.domId].postMessage(e,"*")},(n="sendMessageToMap")in this?Object.defineProperty(this,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):this[n]=r,this.domId="map-frame","string"==typeof o.id&&(this.domId=o.id)};function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function a(e,t){return!t||"object"!==s(t)&&"function"!=typeof t?l(e):t}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function u(e){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function c(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}var d=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&i(e,t)}(d,e);var t,o,n=(t=d,o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,n=u(t);if(o){var r=u(this).constructor;e=Reflect.construct(n,arguments,r)}else e=n.apply(this,arguments);return a(this,e)});function d(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,d),c(l(t=n.call(this)),"onMessageReceived",(function(e){switch(e.data.type){case"onZoomChange":t.emitEvent("onZoomChange",e.data.zoom,e.data.domId);break;case"geomAdded":t.emitEvent("geomAdded",e.data.geom_astext,e.data.domId);break;case"layers":t.emitEvent("layers",e.data.layers,e.data.domId);break;case"geoJSONlayers":t.emitEvent("geoJSONlayers",e.data.layers,e.data.domId);break;case"info":t.emitEvent("info",e.data,e.data.domId);break;case"error":t.emitEvent("error",e.data,e.data.domId);break;case"coordinates":t.emitEvent("coordinates",e.data,e.data.domId);break;case"activeLayer":t.emitEvent("activeLayer",e.data,e.data.domId);break;case"geolocation":t.emitEvent("geolocation",e.data,e.data.domId);break;case"WMSInfoAvailable":t.emitEvent("WMSInfoAvailable",e.data,e.data.domId);break;case"giswaterTiledBackgroundDisplayed":t.emitEvent("giswaterTiledBackgroundDisplayed",e.data,e.data.domId);break;case"giswaterTiledBackgroundAvailable":t.emitEvent("giswaterTiledBackgroundAvailable",e.data,e.data.domId);break;case"GiswaterLayerAvailableFilters":t.emitEvent("GiswaterLayerAvailableFilters",e.data,e.data.domId);break;case"loaded":t.emitEvent("loaded",e.data,e.data.domId);break;case"availableWMSLayers":t.emitEvent("availableWMSLayers",e.data.layers,e.data.domId);break;case"layerElements":t.emitEvent("layerElements",e.data,e.data.domId)}})),c(l(t),"emitEvent",(function(e,o,n){n===t.domId&&(delete o.domId,t.emit(e,o))})),c(l(t),"ZoomIn",(function(){t.com.sendMessageToMap({type:"zoomIn",sessionToken:t.sessionToken})})),c(l(t),"ZoomOut",(function(){t.com.sendMessageToMap({type:"zoomOut",sessionToken:t.sessionToken})})),c(l(t),"AddGeom",(function(e){t.com.sendMessageToMap({type:"AddGeom",geom:e,sessionToken:t.sessionToken})})),c(l(t),"toggleLayer",(function(e,o){void 0===o&&(o={gutter:null,transparent:null,singletile:null}),null!==o.singletile&&"boolean"!=typeof o.singletile&&(o.singletile=null,t.emit("error",{error:"singleTile must be a Boolean"})),""!==o.gutter&&null!==o.gutter&&(isNaN(parseInt(o.gutter))&&(o.gutter=null,t.emit("error",{error:"Gutter must be a number"})),o.singletile&&(o.gutter=null,t.emit("error",{error:"Gutter can only be user with multitile layers; set singletile to false"}))),null!==o.transparent&&"boolean"!=typeof o.transparent&&(o.transparent=null,t.emit("error",{error:"transparent must be a Boolean"})),t.com.sendMessageToMap({type:"toggleLayer",layer:e,gutter:isNaN(parseInt(o.gutter))?null:parseInt(o.gutter),transparent:o.transparent,singletile:o.singletile,sessionToken:t.sessionToken})})),c(l(t),"setActiveLayer",(function(e){t.com.sendMessageToMap({type:"setActiveLayer",layer:e,sessionToken:t.sessionToken})})),c(l(t),"getActiveLayer",(function(){t.com.sendMessageToMap({type:"getActiveLayer",sessionToken:t.sessionToken})})),c(l(t),"loadWMSAvailableLayers",(function(){t.com.sendMessageToMap({type:"loadWMSAvailableLayers",sessionToken:t.sessionToken})})),c(l(t),"clear",(function(){t.com.sendMessageToMap({type:"clear",sessionToken:t.sessionToken})})),c(l(t),"Highlight",(function(e){t.com.sendMessageToMap({type:"highlight",geom:e.geom,zoom:e.zoom,sessionToken:t.sessionToken})})),c(l(t),"zoomToExtent",(function(){t.com.sendMessageToMap({type:"zoomToExtent",sessionToken:t.sessionToken})})),c(l(t),"zoomToCoordinates",(function(e,o,n){isNaN(parseInt(n))||t.com.sendMessageToMap({type:"zoomToCoordinates",sessionToken:t.sessionToken,coordinates:[e,o],zoomLevel:n})})),c(l(t),"infoFromCoordinates",(function(e,o,n){var r=void 0===o?null:o;t.com.sendMessageToMap({type:"infoFromCoordinates",info:e,layer:r,hitTolerance:void 0!==n?parseInt(n):5,sessionToken:t.sessionToken})})),c(l(t),"getElementsFromLayer",(function(e,o,n){var r=void 0===n?"xml":n.toLowerCase();if(console.log(r),"xml"===r||"json"===r)if(isNaN(o))console.error("Limit must be a number");else{var s=void 0===e?null:e;t.com.sendMessageToMap({type:"getElementsFromLayer",layer:s,limit:void 0!==o?parseInt(o):100,format:n,sessionToken:t.sessionToken})}else console.error("Format must be 'xml' or 'json")})),c(l(t),"Geolocalize",(function(e){t.com.sendMessageToMap({type:"Geolocalize",toggle:e,sessionToken:t.sessionToken})})),c(l(t),"toggleGiswaterTiled",(function(e){t.com.sendMessageToMap({type:"toggleGiswaterTiled",toggle:e,sessionToken:t.sessionToken})})),c(l(t),"reloadDisplayedLayers",(function(){return t.com.sendMessageToMap({type:"reloadDisplayedLayers",sessionToken:t.sessionToken})})),c(l(t),"addGeoJSON",(function(e,o,n){return e?t.com.sendMessageToMap({type:"addGeoJSON",geoJSON:e,options:void 0!==o?o:{fillcolor:null,strokecolor:null},name:n||Math.random().toString(36).substring(7),sessionToken:t.sessionToken}):void t.emit("error",{error:"No geoJSON data"})})),c(l(t),"clearGeoJSON",(function(){return t.com.sendMessageToMap({type:"clearGeoJSON",sessionToken:t.sessionToken})})),c(l(t),"removeGeoJSONLayer",(function(e){return e?t.com.sendMessageToMap({type:"removeGeoJSONLayer",name:e,sessionToken:t.sessionToken}):void t.emit("error",{error:"No geoJSON data"})})),c(l(t),"setGiswaterFilters",(function(e){var o=e;if(e){if("object"!=s(e)){e=(e=(e=e.trim()).replace(/^\s+|\s+$/g,"")).replace(/\\/g,"");try{o=JSON.parse(e)}catch(e){return void t.emit("error",{error:"Filters is not a valid JSON"})}}return t.com.sendMessageToMap({type:"setGiswaterFilters",filters:o,sessionToken:t.sessionToken})}t.emit("error",{error:"No filters"})})),c(l(t),"getGiswaterLayerAvailableFilters",(function(e){return e?t.com.sendMessageToMap({type:"getGiswaterLayerAvailableFilters",name:e,sessionToken:t.sessionToken}):void t.emit("error",{error:"No layer_name"})})),c(l(t),"setDebug",(function(e){isNaN(parseInt(e))?console.error("Debug is not a integer"):t.com.sendMessageToMap({type:"setDebug",what:e,sessionToken:t.sessionToken})})),c(l(t),"setCustomColors",(function(e){if("object"===s(e)){if(e.hasOwnProperty("geom_stroke_width")){if(isNaN(parseInt(e.geom_stroke_width)))return void console.error("geom_stroke_width is not an number");e.geom_stroke_width=parseInt(e.geom_stroke_width)}else e.geom_stroke_width=1;if(e.hasOwnProperty("geom_radius")){if(isNaN(parseInt(e.geom_radius)))return void console.error("geom_stroke_width is not an number");e.geom_radius=parseInt(e.geom_radius)}else e.geom_radius=4;e.hasOwnProperty("geom_shape")&&"circle"!==e.geom_shape&&"square"!==e.geom_shape&&(e.geom_shape="circle",console.error("geom_shape must be either 'circle' or 'square'")),t.com.sendMessageToMap({type:"setCustomColors",properties:e,sessionToken:t.sessionToken})}else console.error("properties is not an object")})),t.domId="map-frame","undefined"==typeof window?a(t):("string"==typeof e.id&&(t.domId=e.id),t.com=new r(e),window.addEventListener("message",(function(e){return t.onMessageReceived(e)})),t.sessionToken=e.sessionToken,t)}return d}(e.EventEmitter)})(),n})()}));

package/examples/externalwms/index.js

@@ -0,0 +1,20 @@
+
+var sessionToken = document.querySelector("#sessionToken");
+var mapContainer = document.querySelector("#mapContainer");
+var codeContent = document.querySelector("#code");
+var iframesContainer = document.querySelector("#iframes-container");
+
+var iframe = document.querySelector("#map-frame");
+var host = document.querySelector("#overrideHost");
+var btLoadIframe = document.querySelector("#btLoadIframe");
+
+
+//************** MAP EXAMPLE
+
+if(btLoadIframe){
+	btLoadIframe.addEventListener("click", function (evt) {
+		if(code.value!=""){
+			iframesContainer.innerHTML = code.value;
+		}
+	});
+}

package/examples/externalwms/index.php

@@ -0,0 +1,88 @@
+<html>
+  <head>
+    <title>🛠️ MAP TESTER - Vidro Map</title>
+    <link rel="stylesheet" href="../tester.css"></link>
+    <link rel="icon" type="image/png" href="https://www.vidrosoftware.com/favicon/favicon-32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="https://www.vidrosoftware.com/favicon/favicon-16x16.png" sizes="16x16" />
+  </head>
+  <body>
+
+
+
+    <div class="form" id="userData">
+      <h1>Vidromap</h1>
+
+      <div id="sessionToken"></div>
+      <div>
+        Paste your code here:<br> <textarea name="code" id="code" rows="10" cols="100" placeholder=""><iframe id="map-frame" name="map-frame" width="100%" height="600" src="http://localhost:3000?sessionToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJleHAiOjE2MzIzMzA3MDMsImF1ZCI6IjVkM2Y5NWU3YTg5NjBjYWQ4MWU2OGQ1ZTQzODYzZmRhMGJiOTM5NDUiLCJkYXRhIjp7Inpvb20iOjQsImJhY2tncm91bmQiOiJDYXJ0b0RCTGlnaHQiLCJzcmlkIjoiRVBTRzoyNTgzMSIsImV4dGVudCI6IjQxNzE1MC4wMzEsIDQ1NzYxNjQuMzY0LCA0MjA3MDAuMTg3LCA0NTc4MTExLjczNiIsImdlb3NlcnZpY2UiOm51bGwsIm5hbWUiOiJnZW9qc29uIiwicHJldmlldyI6dHJ1ZSwiYXBpIjoiaHR0cHM6XC9cL2RldmFwaS52aWRyb3NvZnR3YXJlLmNvbVwvIiwidHlwZSI6InZpZHJvbWFwIiwidG9rZW4iOiI4YjNhM2ZjYzM5YzNlMTczOWMzZDcyZGI3ZDg1MDU3MSIsInNob3dfbGF5ZXJzIjoiIiwiaWQiOjE0LCJsb2dvIjoiaHR0cHM6XC9cL3d3dy52aWRyb3NvZnR3YXJlLmNvbVwvbG9nb3NcL1ZJRFJPLnN2ZyJ9fQ.MPaZ956QccNsh8S8G70UwWu93xD-HcUDdk5RufJxrGCBi8gT-LJ-8JiJdd9z8L8vrtZsekdn-h4md9WkLmot8THE8lHl1lFF0DEh_qFdHHxtdHVbp6OfTaQthEU9MBKVXPdB1igTAVtl__uPbM_2u9ItdMhePDNTq8NnzgUhyjMSZW0uj-dq5Yli2xL4NY8BYkiEHLdF8kbpcyjyenH0c2-GV8JnAEFz3rxNdv7d0guvaADMer2DpJzstkKFCWKZtqJbBYq9j0sZ4Ypzsh9YK3lSqAoDeg-VyszRMFHfr9JWXkt2iy4s0FSAOG11HKDQcLMUkjPlPWMtDT92NDbjWH5ZLBHjuPklO1HX77QIcON1z1HjNVq5fqMSnXK_s0dniRmIp9W6FM9rv012aP61v7_VA6LwSEw6zAK7mlL686HmLGtHQ5emG-EzwJLQMGaZ-VgDSWnSntA5QNU1B0R4lhwlmEuEMAgGjI7aNh2q4BlqgZC2uDszjtyteOwdlxRn3M6zjv3W22_qaJA2mnQI7cDwMqbYRDZ7R4uUCEMyTxLk26QOa0lYsj3ZYCiBSC2LlQFeJu7XuKrHtR-9B6Q2bYq1c5ht6cqxIBPBoZPV0V3FnmFX8cU3AJUEUDNJ4m9KhwBsTFW9yJV5gfM-56zGIh09COxSJAhrqCRcEzSHMpk"></iframe></textarea> 
+      </div>
+      <div>
+       External wms url: <input type="text" name="service_uri" id="service_uri" size="55" value="https://nv.napr.gov.ge/geoserver/wms" placeholder="https://nv.napr.gov.ge/geoserver/wms"> 
+      </div>
+
+        <div>
+        Debug
+        <button id="btDebug">Debug</button>  
+        <select id="debug">
+          <option id="1" selected value=1>Show logs</option>
+          <option id="0" value=0>Hide logs</option>
+        </select> <small>Show/hide component logs</small>
+      </div>
+    </div>
+    <div>
+       <button id="btLoadIframe">Load Map</button> - 
+       <button id="btLoadWMSLayers">Load layers from wms</button>
+      </div>
+    <div id="Error_container"></div>
+    <div id="mapContainer">
+
+      <div id="iframes-container">
+      
+      </div>
+      <hr />
+      <pre id="Result_container"></pre>
+      <hr/>
+      <h2>Zoom</h2>
+      <button id="btZoomIn">Zoom In</button>
+      <button id="btZoomOut">Zoom Out</button>
+      <button id="btZoomToExtent">Zoom to extent</button>  
+      <br><br>
+      <button id="btZoomToCoordinates">Zoom to coordinates</button>  
+      ZoomToCoordinates level: <input type="text" name="zoomLevelToCoordinates" id="zoomLevelToCoordinates" size="5" value="4">
+      <h2>Add geometry</h2>
+      <button id="btAddPoint">Add point</button>
+      <button id="btAddPolygon">Add polygon</button>
+      <button id="btAddLine">Add line</button>
+      <button id="btClear">Clear geometries</button>
+      <h2>Info</h2>
+      <button id="btWMSInfo" disabled="true">WMS Info</button>
+      <h2>Layers</h2>
+      Project Layers:  <select id="projectlayers"></select> - <small>click on "Load Project Layers button</small>  <button id="btToggleLayer">Add / Remove Layer</button><br><br>
+      Displayed Layers: <select id="layers"></select> - 
+      <button id="btActiveLayer">Set Active Layer</button>
+      <button id="btGetActiveLayer">Get Active Layer</button>
+      <span id="currentActiveLayer"></span>
+
+    <h2>Geolocation</h2>
+    <button id="btGeolocalize">Geolocalize User</button>
+    <button id="btStopGeolocalize">Cancel Geolocalize</button>
+
+    <h2>Highlight</h2>
+    <button id="btHighlight">Highlight geom</button>
+     Geom: <input type="text" name="geom" id="geom" size="25" value="">
+     <br>
+     Highlight to zoom level: <input type="text" name="zoomLevel" id="zoomLevel" size="5" value=""> or Zoom to geometry: <input type="checkbox" name="zoomToHighlightCheck" id="zoomToHighlightCheck" size="5" value=""> 
+      <h2>GeoJSON</h2>
+      
+      <input type="file" id="geojsonfile" name="geojsonfile" accept="application/json"><small> Select geoJSON file</small><br><br>
+      <small>Or paste geoJSON content</small><br><br>
+      <textarea name="geojsondata" id="geojsondata" rows="10" cols="80" placeholder=""></textarea> <br><br>
+   <button id="btAddGeoJSON">Add GeoJSON </button><br><br>
+    </div>
+    
+    <!--<script src="https://unpkg.com/@vidro/map-handler@1.0.7/dist/map-handler.js"></script>-->
+    <script src="../../dist/map-handler.js"></script>
+    <script src="../full/tester.js"></script>
+    <script src="./index.js"></script>
+  </body>
+</html>

package/examples/full/apidemo.js

@@ -19,7 +19,7 @@ var btLoadMap = document.querySelector("#btLoadMap");
 var btLoadProjectLayers = document.querySelector("#btLoadProjectLayers");
 var projectlayers = document.getElementById("projectlayers");
 var userData = document.querySelector("#userData");
-
+var btAddGeoJSONFromGiswater = document.querySelector("#btAddGeoJSONFromGiswater");
 
 var btLogin = document.querySelector("#btLogin");
 
@@ -272,6 +272,7 @@ btLoadProjectLayers.addEventListener("click", function (evt) {
   oReq.send();
   console.log("Attempt to load project layers", uri);
 });
+
 function layersListener() {
   if (this.status === 200) {
     console.log("layersListener response", this.responseText);
@@ -303,3 +304,44 @@ function fillLayersSelect(options){
   //empty previous options
 
 }
+
+
+if(btAddGeoJSONFromGiswater){
+  btAddGeoJSONFromGiswater.addEventListener("click", function(){
+    let lay = document.getElementById('currentActiveLayerForGeoJSON').innerHTML.trim();
+    console.log(`Requesting Giswater GeoJSON for layer ${lay}`)
+    if(lay && lay!==''){
+      apiUrl = document.querySelector("#apiurl").value;
+      //Build XMLHttpRequest 
+      var selectedProjectId =
+      projects_select.options[projects_select.selectedIndex].value;
+      var uri = `${apiUrl}giswater/geojson/${selectedProjectId}/${lay}`;
+      var oReq = new XMLHttpRequest();
+      oReq.addEventListener("load", GeoJSONListener);
+      oReq.open("GET", uri, true);
+      oReq.setRequestHeader('Authorization',`Bearer ${usertoken.value}`);
+      oReq.setRequestHeader("Content-type", "application/json");
+      oReq.send();
+    }
+  });
+}
+
+function GeoJSONListener(){
+  if (this.status === 200) {
+    try{
+      var res = JSON.parse(this.responseText);
+      console.log("GeoJSONListener response", res.message);
+      if(document.getElementById('geojsondata')){
+        document.getElementById('geojsondata').value = JSON.stringify(res.message);
+        var btAddGeoJSON = document.querySelector("#btAddGeoJSON");
+        if(btAddGeoJSON){
+          btAddGeoJSON.click();
+        }
+      }
+    }catch(e){
+        console.error("Invalid API response")
+    }  
+  } else {
+    console.error(this.status);
+  }
+}

package/examples/full/cachedToken.dat

@@ -1 +1 @@
-fc8ba5c66c03c9bfedd815297c67eb9e
+68195fd70708b9e6b99b3e0a86b7b542

package/examples/full/cachedTokenData.dat

@@ -1 +1 @@
-132,131,128,126,130,129,117
+129,130,131,132,126,128,117,162

package/examples/full/index.php

@@ -55,8 +55,6 @@
       <div>
         Use Giswater tiled:  <input type="checkbox" name="use_giswater_tiled" id="use_giswater_tiled" size="5"   value=""> <small>If tiled background available, load it with map render</small>
       </div>
-
-
       <div>
        Override Capabitilites extent: <input type="text" name="extent" id="extent" size="55" value="" placeholder="397663,4615771,406392,4623596"> <small>Override project extent</small>
       </div>
@@ -92,6 +90,31 @@
       <hr />
       <pre id="Result_container"></pre>
       <hr/>
+       <h2>Layers</h2>
+      Project Layers:  <select id="projectlayers"></select> - <small>click on "Load Project Layers button</small>  <button id="btToggleLayer">Add / Remove Layer</button><br><br>
+      Displayed Layers: <select id="layers"></select> - 
+      <button id="btActiveLayer">Set Active Layer</button>
+      <button id="btGetActiveLayer">Get Active Layer</button>
+      <span id="currentActiveLayer"></span>
+      <button id="btReloadDisplayedLayers">Reload displayed layers</button>
+      <br><br>
+       Override layer properties (gutter, single/multi tile, transparent)
+<input type="checkbox" name="overrideLayerProperties" id="overrideLayerProperties" value="">
+  <div id="containerOverride" style="display: none;">____________________________________________________<br><br>
+        Gutter: <input type="text" name="gutter" id="gutter" size="5" value="">
+        <br><br>
+          Transparent layer: 
+    <input type="checkbox" name="toggleTransparentLayer" id="toggleTransparentLayer" checked value=""><br><br>
+          SingleTile layer: 
+    <input type="checkbox" name="toggleSingleTile" id="toggleSingleTile" checked value=""><br>
+    ____________________________________________________
+    </div>
+
+      <h4>Tiled layer</h4>
+      <button id="btToggleGiswaterTiled" disabled="true">Show/hide tiled Giswater tiled background</button>
+      <input type="checkbox" name="toggleGiswaterTiledCheck" id="toggleGiswaterTiledCheck" size="5" value=""><br><br>
+      <small>only for giswater projects with tiled enabled</small>
+    </div>
       <h2>Zoom</h2>
       <button id="btZoomIn">Zoom In</button>
       <button id="btZoomOut">Zoom Out</button>
@@ -107,18 +130,7 @@
       <h2>Info</h2>
       <button id="btWMSInfo" disabled="true">WMS Info</button>
       <button id="btGiswaterInfo">Giswater Info</button>
-      <h2>Layers</h2>
-      Project Layers:  <select id="projectlayers"></select> - <small>click on "Load Project Layers button</small>  <button id="btToggleLayer">Add / Remove Layer</button><br><br>
-      Displayed Layers: <select id="layers"></select> - 
-      <button id="btActiveLayer">Set Active Layer</button>
-      <button id="btGetActiveLayer">Get Active Layer</button>
-      <span id="currentActiveLayer"></span>
-      <button id="btReloadDisplayedLayers">Reload displayed layers</button>
-      <h4>Tiled layer</h4>
-      <button id="btToggleGiswaterTiled" disabled="true">Show/hide tiled Giswater tiled background</button>
-      <input type="checkbox" name="toggleGiswaterTiledCheck" id="toggleGiswaterTiledCheck" size="5" value=""><br><br>
-      <small>only for giswater projects with tiled enabled</small>
-    </div>
+     
     <h2>Geolocation</h2>
     <button id="btGeolocalize">Geolocalize User</button>
     <button id="btStopGeolocalize">Cancel Geolocalize</button>
@@ -133,16 +145,19 @@
     <textarea name="giswaterFilters" id="giswaterFilters" rows="10" cols="20">{"expl_id":[1,2,3]}</textarea> 
     <h2>GeoJSON</h2>
       <input type="file" id="geojsonfile" name="geojsonfile" accept="application/json"><small> Select geoJSON file</small><br><br>
+      <small>Load a geojson from a Giswater layer<b><span id="currentActiveLayerForGeoJSON"></span></b></span></small> <button id="btAddGeoJSONFromGiswater" disabled>Add GeoJSON from Giswater Layer </button> 
+      <input type="hidden" name="geojsondata" id="geojsondata"/>
+      <br><br>
       <b>Options</b><br><br>
        Stroke color: <input type="text" name="strokecolor" id="strokecolor" size="10" value="#994d4d" placeholder="#000000"> <small>Override stroke color, desfault #ff0000</small><br>
        Fill color: <input type="text" name="fillcolor" id="fillcolor" size="10" value="#4d995c" placeholder="#000000"> <small>Override fill color, desfault #ff0000</small><br><br>
         <button id="btAddGeoJSON">Add GeoJSON Layer</button> <button id="btClearGeoJSON">Clear GeoJSON Layers</button><br><br>
       <input type="text" name="hitTolerance" id="hitTolerance" size="5" value="" placeholder="5"> <small>Override hit tolerance</small><br><br>
+
       Selected GeoJSON Layer: <select id="geojsonlayers"></select> -   <button id="btGeoJSONInfo" disabled="true">GeoJSON Info</button> <button id="btRemoveGeoJSONLayer" disabled="true">Remove GeoJSON Layer</button><br><br>
  
      
-    <script src="https://unpkg.com/@vidro/map-handler@1.0.6/dist/map-handler.js"></script>
-    <!--<script src="../../dist/map-handler.js"></script>-->
+    <script src="https://unpkg.com/@vidro/map-handler@1.0.8/dist/map-handler.js"></script>
     <script src="./tester.js"></script>
     <script src="./apidemo.js"></script>
   </body>