@vidro/map-handler 1.0.7 → 1.0.8

package/README.md

@@ -1,6 +1,6 @@
 # Map Handler
 
-#### Version 1.0.7 - September 2021
+#### Version 1.0.8 - January 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
 
 ```
@@ -149,6 +151,10 @@ 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
@@ -241,13 +247,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);
 
 ```
 
@@ -282,13 +289,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
@@ -397,8 +424,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);
@@ -407,7 +436,9 @@ Highlight(options);
 
 let options = {
 	'geom': 'MULTILINESTRING((418596.62555076234 4577083.383681167,419026.2319996517 4577216.795306675))',
-	'type':'element'
+	'zoom':{
+		'type':'element'
+	}
 }
 
 Highlight(options);
@@ -510,6 +541,43 @@ 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.
@@ -592,7 +660,6 @@ Multiple iframes integration
 
 [https://www.vidrosoftware.com/examples/multipleiframes/]()
 
-
 ### Known issues
 
 - **Custom logo is not displayed**
@@ -605,4 +672,16 @@ 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 s(){s.init.call(this)}e.exports=s,e.exports.once=function(e,t){return new Promise((function(n,o){function r(n){e.removeListener(t,s),o(n)}function s(){"function"==typeof e.removeListener&&e.removeListener("error",r),n([].slice.call(arguments))}v(e,t,s,{once:!0}),"error"!==t&&function(e,t,n){"function"==typeof e.on&&v(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 c(e){return void 0===e._maxListeners?s.defaultMaxListeners:e._maxListeners}function u(e,t,n,o){var r,s,i,u;if(a(n),void 0===(s=e._events)?(s=e._events=Object.create(null),e._eventsCount=0):(void 0!==s.newListener&&(e.emit("newListener",t,n.listener?n.listener:n),s=e._events),i=s[t]),void 0===i)i=s[t]=n,++e._eventsCount;else if("function"==typeof i?i=s[t]=o?[n,i]:[i,n]:o?i.unshift(n):i.push(n),(r=c(e))>0&&i.length>r&&!i.warned){i.warned=!0;var f=new Error("Possible EventEmitter memory leak detected. "+i.length+" "+String(t)+" listeners added. Use emitter.setMaxListeners() to increase limit");f.name="MaxListenersExceededWarning",f.emitter=e,f.type=t,f.count=i.length,u=f,console&&console.warn&&console.warn(u)}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 d(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 l(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):m(r,r.length)}function p(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 m(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(s){o.once&&e.removeEventListener(t,r),n(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 c(this)},s.prototype.emit=function(e){for(var t=[],n=1;n<arguments.length;n++)t.push(arguments[n]);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 c=s[e];if(void 0===c)return!1;if("function"==typeof c)o(c,this,t);else{var u=c.length,f=m(c,u);for(n=0;n<u;++n)o(f[n],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 n,o,r,s,i;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,s=n.length-1;s>=0;s--)if(n[s]===t||n[s].listener===t){i=n[s].listener,r=s;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,i||t)}return this},s.prototype.off=s.prototype.removeListener,s.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,s=Object.keys(n);for(o=0;o<s.length;++o)"removeListener"!==(r=s[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},s.prototype.listeners=function(e){return l(this,e,!0)},s.prototype.rawListeners=function(e){return l(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 n(o){var r=t[o];if(void 0!==r)return r.exports;var s=t[o]={exports:{}};return e[o](s,s.exports,n),s.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:()=>d});var e=n(187),t="undefined"==typeof window,r=function e(n){var o,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||document.getElementById(s.domId)&&window.top.frames[s.domId].postMessage(e,"*")},(o="sendMessageToMap")in this?Object.defineProperty(this,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):this[o]=r,this.domId="map-frame","string"==typeof n.id&&(this.domId=n.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?c(e):t}function c(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 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 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,n,o=(t=d,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=u(t);if(n){var r=u(this).constructor;e=Reflect.construct(o,arguments,r)}else e=o.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),f(c(t=o.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)}})),f(c(t),"emitEvent",(function(e,n,o){o===t.domId&&(delete n.domId,t.emit(e,n))})),f(c(t),"ZoomIn",(function(){t.com.sendMessageToMap({type:"zoomIn",sessionToken:t.sessionToken})})),f(c(t),"ZoomOut",(function(){t.com.sendMessageToMap({type:"zoomOut",sessionToken:t.sessionToken})})),f(c(t),"AddGeom",(function(e){t.com.sendMessageToMap({type:"AddGeom",geom:e,sessionToken:t.sessionToken})})),f(c(t),"toggleLayer",(function(e){t.com.sendMessageToMap({type:"toggleLayer",layer:e,sessionToken:t.sessionToken})})),f(c(t),"setActiveLayer",(function(e){t.com.sendMessageToMap({type:"setActiveLayer",layer:e,sessionToken:t.sessionToken})})),f(c(t),"getActiveLayer",(function(){t.com.sendMessageToMap({type:"getActiveLayer",sessionToken:t.sessionToken})})),f(c(t),"loadWMSAvailableLayers",(function(){t.com.sendMessageToMap({type:"loadWMSAvailableLayers",sessionToken:t.sessionToken})})),f(c(t),"clear",(function(){t.com.sendMessageToMap({type:"clear",sessionToken:t.sessionToken})})),f(c(t),"Highlight",(function(e){t.com.sendMessageToMap({type:"highlight",geom:e.geom,zoom:e.zoom,sessionToken:t.sessionToken})})),f(c(t),"zoomToExtent",(function(){t.com.sendMessageToMap({type:"zoomToExtent",sessionToken:t.sessionToken})})),f(c(t),"zoomToCoordinates",(function(e,n,o){isNaN(parseInt(o))||t.com.sendMessageToMap({type:"zoomToCoordinates",sessionToken:t.sessionToken,coordinates:[e,n],zoomLevel:o})})),f(c(t),"infoFromCoordinates",(function(e,n,o){var r=void 0===n?null:n;t.com.sendMessageToMap({type:"infoFromCoordinates",info:e,layer:r,hitTolerance:void 0!==o?parseInt(o):5,sessionToken:t.sessionToken})})),f(c(t),"Geolocalize",(function(e){t.com.sendMessageToMap({type:"Geolocalize",toggle:e,sessionToken:t.sessionToken})})),f(c(t),"toggleGiswaterTiled",(function(e){t.com.sendMessageToMap({type:"toggleGiswaterTiled",toggle:e,sessionToken:t.sessionToken})})),f(c(t),"reloadDisplayedLayers",(function(){return t.com.sendMessageToMap({type:"reloadDisplayedLayers",sessionToken:t.sessionToken})})),f(c(t),"addGeoJSON",(function(e,n,o){return e?t.com.sendMessageToMap({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(c(t),"clearGeoJSON",(function(){return t.com.sendMessageToMap({type:"clearGeoJSON",sessionToken:t.sessionToken})})),f(c(t),"removeGeoJSONLayer",(function(e){return e?t.com.sendMessageToMap({type:"removeGeoJSONLayer",name:e,sessionToken:t.sessionToken}):void t.emit("error",{error:"No geoJSON data"})})),f(c(t),"setGiswaterFilters",(function(e){var n=e;if(e){if("object"!=s(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 t.com.sendMessageToMap({type:"setGiswaterFilters",filters:n,sessionToken:t.sessionToken})}t.emit("error",{error:"No filters"})})),f(c(t),"getGiswaterLayerAvailableFilters",(function(e){return e?t.com.sendMessageToMap({type:"getGiswaterLayerAvailableFilters",name:e,sessionToken:t.sessionToken}):void t.emit("error",{error:"No layer_name"})})),f(c(t),"setDebug",(function(e){console.log("setDebug culo",e),isNaN(parseInt(e))?console.error("Debug is not a integer"):t.com.sendMessageToMap({type:"setDebug",what:e,sessionToken:t.sessionToken})})),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)})(),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,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 s(){s.init.call(this)}e.exports=s,e.exports.once=function(e,t){return new Promise((function(n,o){function r(n){e.removeListener(t,s),o(n)}function s(){"function"==typeof e.removeListener&&e.removeListener("error",r),n([].slice.call(arguments))}y(e,t,s,{once:!0}),"error"!==t&&function(e,t,n){"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,n,o){var r,s,i,u;if(a(n),void 0===(s=e._events)?(s=e._events=Object.create(null),e._eventsCount=0):(void 0!==s.newListener&&(e.emit("newListener",t,n.listener?n.listener:n),s=e._events),i=s[t]),void 0===i)i=s[t]=n,++e._eventsCount;else if("function"==typeof i?i=s[t]=o?[n,i]:[i,n]:o?i.unshift(n):i.push(n),(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,n){var o={fired:!1,wrapFn:void 0,target:e,type:t,listener:n},r=c.bind(o);return r.listener=n,o.wrapFn=r,r}function f(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):m(r,r.length)}function p(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 m(e,t){for(var n=new Array(t),o=0;o<t;++o)n[o]=e[o];return n}function y(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(s){o.once&&e.removeEventListener(t,r),n(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=[],n=1;n<arguments.length;n++)t.push(arguments[n]);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)o(l,this,t);else{var u=l.length,c=m(l,u);for(n=0;n<u;++n)o(c[n],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 n,o,r,s,i;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,s=n.length-1;s>=0;s--)if(n[s]===t||n[s].listener===t){i=n[s].listener,r=s;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,i||t)}return this},s.prototype.off=s.prototype.removeListener,s.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,s=Object.keys(n);for(o=0;o<s.length;++o)"removeListener"!==(r=s[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},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 n(o){var r=t[o];if(void 0!==r)return r.exports;var s=t[o]={exports:{}};return e[o](s,s.exports,n),s.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:()=>d});var e=n(187),t="undefined"==typeof window,r=function e(n){var o,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,"*")},(o="sendMessageToMap")in this?Object.defineProperty(this,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):this[o]=r,this.domId="map-frame","string"==typeof n.id&&(this.domId=n.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,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,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,n,o=(t=d,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=u(t);if(n){var r=u(this).constructor;e=Reflect.construct(o,arguments,r)}else e=o.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=o.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)}})),c(l(t),"emitEvent",(function(e,n,o){o===t.domId&&(delete n.domId,t.emit(e,n))})),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,n){void 0===n&&(n={gutter:null,transparent:null,singletile:null}),null!==n.singletile&&"boolean"!=typeof n.singletile&&(n.singletile=null,t.emit("error",{error:"singleTile must be a Boolean"})),""!==n.gutter&&null!==n.gutter&&(isNaN(parseInt(n.gutter))&&(n.gutter=null,t.emit("error",{error:"Gutter must be a number"})),n.singletile&&(n.gutter=null,t.emit("error",{error:"Gutter can only be user with multitile layers; set singletile to false"}))),null!==n.transparent&&"boolean"!=typeof n.transparent&&(n.transparent=null,t.emit("error",{error:"transparent must be a Boolean"})),t.com.sendMessageToMap({type:"toggleLayer",layer:e,gutter:isNaN(parseInt(n.gutter))?null:parseInt(n.gutter),transparent:n.transparent,singletile:n.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,n,o){isNaN(parseInt(o))||t.com.sendMessageToMap({type:"zoomToCoordinates",sessionToken:t.sessionToken,coordinates:[e,n],zoomLevel:o})})),c(l(t),"infoFromCoordinates",(function(e,n,o){var r=void 0===n?null:n;t.com.sendMessageToMap({type:"infoFromCoordinates",info:e,layer:r,hitTolerance:void 0!==o?parseInt(o):5,sessionToken:t.sessionToken})})),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,n,o){return e?t.com.sendMessageToMap({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"})})),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 n=e;if(e){if("object"!=s(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 t.com.sendMessageToMap({type:"setGiswaterFilters",filters:n,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)})(),o})()}));

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 @@
-b6a2c2370fbec7fe707423e8c8775b91
+170e6711fb6bc66563082bfc6237c548

package/examples/full/cachedTokenData.dat

@@ -1 +1 @@
-129,130,131,132,126,128,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>
@@ -66,7 +64,7 @@
       <hr>
       <h5>Development parameters</h5>
       <div>
-       Override iframe url: <input type="text" name="overrideHost" id="overrideHost" size="35" value="" placeholder="http://localhost:3000"> <small>Override map component url</small>
+       Override iframe url: <input type="text" name="overrideHost" id="overrideHost" size="35" value="http://localhost:3000" placeholder="http://localhost:3000"> <small>Override map component url</small>
       </div>
       <div>
         Debug
@@ -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,15 +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.7/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>

package/examples/full/tester.js

@@ -36,6 +36,21 @@ var btsetGiswaterFilters = document.querySelector("#btsetGiswaterFilters");
 var btgetGiswaterFilters = document.querySelector("#btgetGiswaterFilters");
 var btLoadWMSLayers = document.querySelector("#btLoadWMSLayers");
 var btDebug = document.querySelector("#btDebug");
+var btAddGeoJSONFromGiswater = document.querySelector("#btAddGeoJSONFromGiswater");
+//override layer properties
+var overrideLayerProperties = document.querySelector("#overrideLayerProperties");
+var gutter = document.querySelector("#gutter");
+var toggleTransparentLayer = document.querySelector("#toggleTransparentLayer");
+var toggleSingleTile = document.querySelector("#toggleSingleTile");
+var containerOverride = document.querySelector("#containerOverride");
+//custom colores
+var geom_stroke_color = document.querySelector("#geom_stroke_color");
+var geom_stroke_width = document.querySelector("#geom_stroke_width");
+var geom_fill_color = document.querySelector("#geom_fill_color");
+var geom_shape = document.querySelector("#geom_shape");
+var geom_radius = document.querySelector("#geom_radius");
+		
+var btSetColors = document.querySelector("#btSetColors");
 
 var geoJSONName = null; //geoJSON file name
 var geoJSONContent = null; // geojson file content
@@ -247,11 +262,72 @@ if(btStopGeolocalize){
 	  communicator.Geolocalize(false);
 	});
 }
+//**********************************************************
+//**************            LAYERS          ****************
+//**********************************************************
 if(btToggleLayer){
 	btToggleLayer.addEventListener("click", function(){
+
+		if(overrideLayerProperties){
+			if(overrideLayerProperties.checked){
+				var properties = {};
+				if(toggleTransparentLayer){
+					properties.transparent = toggleTransparentLayer.checked;
+			
+				}
+				if(toggleSingleTile){
+					properties.singletile = toggleSingleTile.checked;
+				}
+				if(gutter) properties.gutter = gutter.value;
+				communicator.toggleLayer(document.getElementById('projectlayers').value,properties);
+				return;
+			}
+			
+		}
+
 	  communicator.toggleLayer(document.getElementById('projectlayers').value);
 	});
 }
+
+
+if(btGetActiveLayer){
+	btGetActiveLayer.addEventListener("click", function(){
+		cleanContainers();
+	 	communicator.getActiveLayer();
+	});
+}
+if(btReloadDisplayedLayers){
+	btReloadDisplayedLayers.addEventListener("click", function(){
+	 	communicator.reloadDisplayedLayers();
+	});
+}
+if(btLoadWMSLayers){
+	btLoadWMSLayers.addEventListener("click", function (evt) {
+		console.log('btLoadWMSLayers')
+		communicator.loadWMSAvailableLayers();
+	});
+}
+
+//Override layer properties
+if(overrideLayerProperties){
+	overrideLayerProperties.addEventListener("click", function(){
+		if(overrideLayerProperties.checked){
+			if(containerOverride) containerOverride.style.display = 'block';
+		}else{
+			if(containerOverride) containerOverride.style.display = 'none';
+		}
+	});
+}
+/*
+overrideLayerProperties
+gutter
+toggleTransparentLayer
+toggleSingleTile
+containerOverride*/
+
+//**********************************************************
+//**************            END LAYERS      ****************
+//**********************************************************
 if(btClear){
 	btClear.addEventListener("click", function(){
 		cleanContainers();
@@ -282,25 +358,10 @@ if(btActiveLayer){
 	 	communicator.setActiveLayer(document.getElementById('layers').value);
 	 	currentActiveLayer = document.getElementById('layers').value;
 	 	document.getElementById('currentActiveLayer').innerHTML = `<b>Active layer</b>: ${currentActiveLayer}`;
-	});
-}
-if(btGetActiveLayer){
-	btGetActiveLayer.addEventListener("click", function(){
-		cleanContainers();
-	 	communicator.getActiveLayer();
-	});
-}
-if(btReloadDisplayedLayers){
-	btReloadDisplayedLayers.addEventListener("click", function(){
-	 	communicator.reloadDisplayedLayers();
-	});
-}
-if(btLoadWMSLayers){
-	btLoadWMSLayers.addEventListener("click", function (evt) {
-
-		console.log('btLoadWMSLayers')
-		communicator.loadWMSAvailableLayers();
-
+	 	if(btAddGeoJSONFromGiswater){
+	 		btAddGeoJSONFromGiswater.disabled = false;
+	 	}
+	 	document.getElementById('currentActiveLayerForGeoJSON').innerHTML = ` ${currentActiveLayer}`;
 	});
 }
 
@@ -420,10 +481,11 @@ if(btGeoJSONInfo){
 if(btRemoveGeoJSONLayer){
 	btRemoveGeoJSONLayer.addEventListener("click", function(){
 		cleanContainers();
-	  	communicator.removeGeoJSONLayer(document.getElementById('geojsonlayers').value);
+	  communicator.removeGeoJSONLayer(document.getElementById('geojsonlayers').value);
 	});
 }
 
+
 function fillGeoJSONLayersSelect(options){
 	var layers_select = document.getElementById("geojsonlayers");
 	if(layers_select){
@@ -477,3 +539,43 @@ if(btgetGiswaterFilters){
 //**********************************************************
 //**************     END GISWATER FILTERS   ****************
 //**********************************************************
+
+//**********************************************************
+//**************        CUSTOM COLORS       ****************
+//**********************************************************
+
+if(btSetColors){
+
+	btSetColors.addEventListener("click", function(){
+		var properties = {
+			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',
+    	geom_radius: 4,
+		}
+		if(geom_stroke_color){
+			properties.geom_stroke_color = geom_stroke_color.value;
+		}
+		if(geom_stroke_width){
+			properties.geom_stroke_width = geom_stroke_width.value;
+		}
+		if(geom_fill_color){
+			properties.geom_fill_color = geom_fill_color.value;
+		}
+		if(geom_shape){
+			properties.geom_shape = geom_shape.value;
+		}
+		if(geom_radius){
+			properties.geom_radius = geom_radius.value;
+		}
+		communicator.setCustomColors(properties);
+	});
+}
+
+
+
+
+//**********************************************************
+//**************        CUSTOM COLORS       ****************
+//**********************************************************

package/examples/integration/tool/css/dist/home.min.css

@@ -0,0 +1 @@
+body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;font-family:'Open Sans',sans-serif;color:#1c1c1b}[v-cloak]{display:none}header{background-color:#dadad9;margin-bottom:70px}header .flex{display:flex}header .flex .col-1 img{padding:4px 0}header .flex .col-2{flex-grow:1;flex-shrink:1;align-self:center;margin-left:15px}header .flex .col-2 .text-1{font-size:17px;font-weight:700;line-height:1}header .flex .col-2 .text-2{font-size:14px;font-weight:700;line-height:1;margin:0}@media (max-width:991px){header .flex .col-2 .text-1,header .flex .col-2 .text-2{display:none}}header .flex .col-3{text-align:right;position:relative}header .flex .col-3 a{display:inline-block;padding:25px 1em;font-size:15px;font-weight:700}header .flex .col-3 a svg{vertical-align:middle;margin:0 .5em}header .flex .col-3 a svg path{fill:#1c1c1b}header .flex .col-3 a:active,header .flex .col-3 a:hover{background-color:#f5f5f5;color:#fff}header .flex .col-3 a:active svg path,header .flex .col-3 a:hover svg path{fill:#fff}header .flex .col-3 ul{position:absolute;z-index:1;background-color:#f5f5f5;box-shadow:0 2px 4px 0 rgba(0,0,0,.5);width:100%;text-align:left;display:none}a.block,header .flex .col-3.menu-visible>ul{display:block}header .flex .col-3 ul a{width:100%;padding:1em 1.2em;font-size:13px;color:#1c1c1b}header .flex .col-3 ul a:active,header .flex .col-3 ul a:hover{color:#1c1c1b;background-color:#dadad9}header .flex .col-3 ul a:active svg path,header .flex .col-3 ul a:hover svg path{fill:#1c1c1b}header .flex .col-3.menu-visible>a{background-color:#f5f5f5;color:#fff}header .flex .col-3.menu-visible>a svg path{fill:#fff}table{width:100%;border-spacing:3px;border-collapse:separate}table td,table th{padding:7px 8px;font-size:15px}table td svg,table th svg{vertical-align:middle}table thead td{font-weight:700;background-color:#f5f5f5}table thead th{font-weight:400;background-color:#dadad9}table tbody td{background-color:#f5f5f5;font-weight:600}a{color:inherit}a svg path{fill:#1c1c1b}a:active,a:focus,a:hover{color:#005DB4;text-decoration:none}a:active svg path,a:focus svg path,a:hover svg path{fill:#005DB4}footer{display:flex;width:100%;align-items:center;justify-content:space-between;margin:50px 0}footer .divider{width:1px;height:54px;background-color:#434448}footer .col-1,footer .col-2,footer .col-3{margin:0 15px}footer .col-1{margin-left:0}footer .col-2{text-align:left}footer .col-3{text-align:left;margin-right:0}footer h4{font-size:17px;font-weight:700;color:#56565c}footer p{color:#58585e}@media (max-width:991px){footer{display:block}footer .divider{display:none}footer .col-1,footer .col-2,footer .col-3{text-align:center;margin:0 15px}footer .col-1 .img-responsive,footer .col-2 .img-responsive,footer .col-3 .img-responsive{margin-left:auto;margin-right:auto}}.row.equal{display:flex;flex-wrap:wrap}.thumbnail{width:260px;height:100%}.greenDot{fill:#00cd15}.redDot{fill:#950000}.rolesCaption{margin:20px}.roleChooser{background-color:#eee;padding-top:25px}.roleChooser img{padding-bottom:25px}

package/examples/integration/tool/css/dist/home.min.css.map

@@ -0,0 +1,10 @@
+{
+	"version": 3,
+	"file": "home.min.css",
+	"sources": [
+		"../master/home.scss",
+		"../master/_colors.scss"
+	],
+	"names": [],
+	"mappings": "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"
+}

package/examples/integration/tool/css/dist/style-login.min.css

@@ -0,0 +1 @@
+.footer .title,.header div.text div.a{font-size:17px}.container,.form-title{width:100%;box-sizing:border-box}.footer .title,.form-title,form button{text-transform:uppercase;font-weight:700}.footer .title,.form-title,.header div.text,.login-error,form button,form label{font-weight:700}body{margin:0;padding:0;font-family:'Open Sans',sans-serif;color:#1c1c1b;background-color:#fff;letter-spacing:-.5px}body a{color:inherit;text-decoration:none}.container{max-width:700px;padding:0 15px;margin:0 auto}.header{background:#dadad9;padding:5px 0;margin-bottom:60px}.header .container{max-width:500px}.header img.logo{display:inline-block;margin-right:5px;vertical-align:middle}.header div.text{display:inline-block;vertical-align:middle;max-width:100%}.header div.text div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.header div.text div.b{font-size:14px}@media (max-width:620px){.header{text-align:center}.header img.logo{display:block;margin:20px auto}.header div.text{display:block}}.form-title{max-width:450px;margin:0 auto 3px;background-color:#dadad9;font-size:13px;padding:6px 10px}.form-title img,.form-title span{display:inline-block;vertical-align:middle}.form-title img{margin:0 6px 0 7px;width:23px;height:24px}form,form input[type=password].block,form input[type=text].block,form textarea.block{width:100%;box-sizing:border-box}form{font-size:13px;background-color:#f5f5f5;max-width:450px;margin:0 auto 100px;padding:12px 48px 1px}form .form-control,form .form-group{margin:8px 0}form .form-control.form-control-double,form .form-control.form-group-double,form .form-group.form-control-double,form .form-group.form-group-double{margin:2em 0}form label{display:block;font-size:13px;line-height:18px;margin-bottom:5px}form input[type=password],form input[type=text],form textarea{border:none;background-color:#fff;border-radius:3px;padding:8px 16px;font-size:14px}form input[type=password]:active,form input[type=password]:focus,form input[type=text]:active,form input[type=text]:focus,form textarea:active,form textarea:focus{outline:0!important}form button{color:#005cb8;background:0 0;border:none;padding:0;margin:0;font-size:13px;vertical-align:middle}form button img{vertical-align:middle;margin-left:.1em;margin-top:-3px;width:23px;height:24px}.footer{width:100%;max-width:1000px;margin:25px auto}@media (min-width:850px){.footer{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center}}.footer .title{color:#58585e}.footer .col{padding:1em;color:#808089;text-align:center;font-size:14px;letter-spacing:0}.footer .col.col-1{flex-basis:33%}.footer .col.col-2{width:420px;border-left:3px solid #6f6f6e;border-right:3px solid #6f6f6e;flex-shrink:0}@media (max-width:849px){.footer{text-align:center}.footer .col.col-2{width:inherit;border:none;box-sizing:border-box}}.footer .col.col-3{flex-basis:33%}.footer .separator{height:50px;background-color:#6f6f6e;width:3px;display:none}@media (max-width:700px){.footer .separator{display:none}}.login-error{color:red;text-align:center}#loginError{display:none}#networkIndicatorOffline,#networkIndicatorOnline{float:right;display:none}