@vidro/map-handler 1.0.18 → 1.1.0-b

package/src/index.js

@@ -1,150 +1,217 @@
-import { EventEmitter } from "events"
+import { EventEmitter } from "events";
 import { iframeCommunicator } from "./shared/iframe-communicator";
 class Communicator extends EventEmitter {
-
-  constructor(data){
+  constructor(data) {
     super();
-    this.domId = 'map-frame';
-    if(typeof window === 'undefined'){
+    this.domId = "map-frame";
+    if (typeof window === "undefined") {
       return;
-    };
-    if(typeof data.id==="string"){
+    }
+    if (typeof data.id === "string") {
       this.domId = data.id;
-    } 
-    this.com = new iframeCommunicator(data)
-    window.addEventListener("message", e => this.onMessageReceived(e));
+    }
+    this.com = new iframeCommunicator(data);
+    window.addEventListener("message", (e) => this.onMessageReceived(e));
     this.sessionToken = data.sessionToken;
     this.setMaxListeners(100);
   }
 
-  onMessageReceived = e => {
-    switch(e.data.type){
-      case "onZoomChange": this.emitEvent("onZoomChange", e.data,e.data.domId); break;
-      case "onCenterChange": this.emitEvent("onCenterChange", e.data,e.data.domId); break;
-      case "geomAdded": this.emitEvent("geomAdded", e.data,e.data.domId); break;
-      case "layers": this.emitEvent("layers", e.data,e.data.domId); break;  
-      case "geoJSONlayers": this.emitEvent("geoJSONlayers", e.data,e.data.domId); break;     
-      case "info": this.emitEvent("info", e.data,e.data.domId); break;    
-      case "error": this.emitEvent("error", e.data,e.data.domId); break;  
-      case "coordinates": this.emitEvent("coordinates", e.data,e.data.domId); break;  
-      case "activeLayer": this.emitEvent("activeLayer", e.data,e.data.domId); break;  
-      case "geolocation": this.emitEvent("geolocation", e.data,e.data.domId); break; 
-      case "WMSInfoAvailable": this.emitEvent("WMSInfoAvailable", e.data,e.data.domId); break;  
-      case "giswaterTiledBackgroundDisplayed": this.emitEvent("giswaterTiledBackgroundDisplayed", e.data,e.data.domId); break; 
-      case "giswaterTiledBackgroundAvailable": this.emitEvent("giswaterTiledBackgroundAvailable", e.data,e.data.domId); break;  
-      case "GiswaterLayerAvailableFilters": this.emitEvent("GiswaterLayerAvailableFilters", e.data,e.data.domId); break;  
-      case "loaded": this.emitEvent("loaded", e.data,e.data.domId); break;  
-      case "availableWMSLayers":    this.emitEvent("availableWMSLayers", e.data,e.data.domId); break;       
-      case "layerElements": this.emitEvent("layerElements", e.data,e.data.domId); break; 
-      case "getToc": this.emitEvent("getToc", e.data,e.data.domId); break; 
-      case "capabilities": this.emitEvent("capabilities", e.data,e.data.domId); break; 
-      case "GiswaterFiltersApplied": this.emitEvent("GiswaterFiltersApplied", e.data,e.data.domId); break; 
-      
+  onMessageReceived = (e) => {
+    switch (e.data.type) {
+      case "onZoomChange":
+        this.emitEvent("onZoomChange", e.data, e.data.domId);
+        break;
+      case "onCenterChange":
+        this.emitEvent("onCenterChange", e.data, e.data.domId);
+        break;
+      case "geomAdded":
+        this.emitEvent("geomAdded", e.data, e.data.domId);
+        break;
+      case "layers":
+        this.emitEvent("layers", e.data, e.data.domId);
+        break;
+      case "geoJSONlayers":
+        this.emitEvent("geoJSONlayers", e.data, e.data.domId);
+        break;
+      case "info":
+        this.emitEvent("info", e.data, e.data.domId);
+        break;
+      case "error":
+        this.emitEvent("error", e.data, e.data.domId);
+        break;
+      case "coordinates":
+        this.emitEvent("coordinates", e.data, e.data.domId);
+        break;
+      case "activeLayer":
+        this.emitEvent("activeLayer", e.data, e.data.domId);
+        break;
+      case "geolocation":
+        this.emitEvent("geolocation", e.data, e.data.domId);
+        break;
+      case "WMSInfoAvailable":
+        this.emitEvent("WMSInfoAvailable", e.data, e.data.domId);
+        break;
+      case "giswaterTiledBackgroundDisplayed":
+        this.emitEvent(
+          "giswaterTiledBackgroundDisplayed",
+          e.data,
+          e.data.domId
+        );
+        break;
+      case "giswaterTiledBackgroundAvailable":
+        this.emitEvent(
+          "giswaterTiledBackgroundAvailable",
+          e.data,
+          e.data.domId
+        );
+        break;
+      case "GiswaterLayerAvailableFilters":
+        this.emitEvent("GiswaterLayerAvailableFilters", e.data, e.data.domId);
+        break;
+      case "loaded":
+        this.emitEvent("loaded", e.data, e.data.domId);
+        break;
+      case "availableWMSLayers":
+        this.emitEvent("availableWMSLayers", e.data, e.data.domId);
+        break;
+      case "layerElements":
+        this.emitEvent("layerElements", e.data, e.data.domId);
+        break;
+      case "getToc":
+        this.emitEvent("getToc", e.data, e.data.domId);
+        break;
+      case "capabilities":
+        this.emitEvent("capabilities", e.data, e.data.domId);
+        break;
+      case "GiswaterFiltersApplied":
+        this.emitEvent("GiswaterFiltersApplied", e.data, e.data.domId);
+        break;
+      case "MeasureEnd":
+        this.emitEvent("MeasureEnd", e.data, e.data.domId);
+        break;
     }
-    
-  }
+  };
 
-  emitEvent = (type,data,domId)=>{
-    if(domId===this.domId){
+  emitEvent = (type, data, domId) => {
+    if (domId === this.domId) {
       delete data.domId;
-      this.emit(type, data); 
+      this.emit(type, data);
     }
-  }
+  };
 
   ZoomIn = () => {
     this.com.sendMessageToMap({
       type: "zoomIn",
       sessionToken: this.sessionToken,
-    }); 
+    });
+  };
 
-  }
-  
   ZoomOut = () => {
     this.com.sendMessageToMap({
       type: "zoomOut",
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
   AddGeom = (geomtype) => {
     this.com.sendMessageToMap({
       type: "AddGeom",
       geom: geomtype,
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
-  toggleLayer = (layer,properties) => {
-    if(typeof properties==='undefined'){
+  toggleLayer = (layer, properties) => {
+    if (typeof properties === "undefined") {
       properties = {
         gutter: null,
         transparent: null,
-        singletile: null
+        singletile: null,
+        layerType: null,
       };
     }
 
-    if(properties.singletile!==null){
-      if(typeof properties.singletile!=='boolean'){
+    if (properties.layerType !== null) {
+      if (
+        properties.layerType !== "wms" &&
+        properties.layerType !== "vector"
+      ) {
+        this.emit("error", { error: "layerType must be 'wms' or 'vector'" });
+        return;
+      }
+    }
+
+    if (
+      properties.singletile !== null &&
+      properties.layerType !== "vector"
+    ) {
+      if (typeof properties.singletile !== "boolean") {
         properties.singletile = null;
-        this.emit("error",{error:"singleTile must be a Boolean"});
+        this.emit("error", { error: "singleTile must be a Boolean" });
       }
-    } 
-    if(properties.gutter!=='' && properties.gutter!==null){
-      if(isNaN(parseInt(properties.gutter))){
+    }
+    if (properties.gutter !== "" && properties.gutter !== null) {
+      if (isNaN(parseInt(properties.gutter))) {
         properties.gutter = null;
-        this.emit("error",{error:"Gutter must be a number"});
+        this.emit("error", { error: "Gutter must be a number" });
       }
-      if(properties.singletile){
+      if (properties.singletile) {
         properties.gutter = null;
-        this.emit("error",{error:"Gutter can only be user with multitile layers; set singletile to false"});
+        this.emit("error", {
+          error:
+            "Gutter can only be user with multitile layers; set singletile to false",
+        });
       }
-    } 
+    }
 
-    if(properties.transparent!==null){
-       if(typeof properties.transparent!=='boolean'){
+    if (properties.transparent !== null) {
+      if (typeof properties.transparent !== "boolean") {
         properties.transparent = null;
-        this.emit("error",{error:"transparent must be a Boolean"});
+        this.emit("error", { error: "transparent must be a Boolean" });
       }
-    } 
- 
+    }
+
     this.com.sendMessageToMap({
       type: "toggleLayer",
       layer: layer,
-      gutter: !isNaN(parseInt(properties.gutter)) ? parseInt(properties.gutter) : null,
+      gutter: !isNaN(parseInt(properties.gutter))
+        ? parseInt(properties.gutter)
+        : null,
       transparent: properties.transparent,
       singletile: properties.singletile,
+      layerType: properties.layerType.toLowerCase(),
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
   setActiveLayer = (layer) => {
     this.com.sendMessageToMap({
       type: "setActiveLayer",
       layer: layer,
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
   getActiveLayer = () => {
     this.com.sendMessageToMap({
       type: "getActiveLayer",
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
   loadWMSAvailableLayers = () => {
     this.com.sendMessageToMap({
       type: "loadWMSAvailableLayers",
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
   clear = () => {
     this.com.sendMessageToMap({
       type: "clear",
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
   Highlight = (options) => {
     this.com.sendMessageToMap({
@@ -152,36 +219,39 @@ class Communicator extends EventEmitter {
       geom: options.geom,
       zoom: options.zoom,
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
   zoomToExtent = () => {
     this.com.sendMessageToMap({
       type: "zoomToExtent",
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
-  zoomToCoordinates= (lat,lon,zoomLevel) => {
-    if(!isNaN(parseInt(zoomLevel))){
+  zoomToCoordinates = (lat, lon, zoomLevel) => {
+    if (!isNaN(parseInt(zoomLevel))) {
       this.com.sendMessageToMap({
         type: "zoomToCoordinates",
         sessionToken: this.sessionToken,
-        coordinates:[lat,lon],
-        zoomLevel: zoomLevel
-      });   
+        coordinates: [lat, lon],
+        zoomLevel: zoomLevel,
+      });
     }
-  }
-
-  infoFromCoordinates = (type,layer,hitTolerance,format) => {
-    const _layer = (typeof layer=='undefined') ? null : layer
-    const _hitTolerance = (typeof hitTolerance=='undefined' || !hitTolerance) ? 5 : parseInt(hitTolerance)
-    const _format = (typeof format=='undefined') ? 'xml' : format.toLowerCase();
-    if(_format!=="xml" && _format!=='json'){
+  };
+
+  infoFromCoordinates = (type, layer, hitTolerance, format) => {
+    const _layer = typeof layer == "undefined" ? null : layer;
+    const _hitTolerance =
+      typeof hitTolerance == "undefined" || !hitTolerance
+        ? 5
+        : parseInt(hitTolerance);
+    const _format = typeof format == "undefined" ? "xml" : format.toLowerCase();
+    if (_format !== "xml" && _format !== "json") {
       console.error("Format must be 'xml' or 'json");
       return;
     }
-    if(isNaN(_hitTolerance)){
+    if (isNaN(_hitTolerance)) {
       console.error("hitTolerance must be a number");
       return;
     }
@@ -192,209 +262,262 @@ class Communicator extends EventEmitter {
       format: _format,
       hitTolerance: _hitTolerance,
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
-  getElementsFromLayer= (layer,limit,format) => {
-    const _format = (typeof format=='undefined') ? 'xml' : format.toLowerCase();
-    if(_format!=="xml" && _format!=='json'){
+  getElementsFromLayer = (layer, limit, format) => {
+    const _format = typeof format == "undefined" ? "xml" : format.toLowerCase();
+    if (_format !== "xml" && _format !== "json") {
       console.error("Format must be 'xml' or 'json");
       return;
     }
-    if(isNaN(limit)){
-       console.error("Limit must be a number");
+    if (isNaN(limit)) {
+      console.error("Limit must be a number");
       return;
     }
-    const _layer = (typeof layer=='undefined') ? null : layer
+    const _layer = typeof layer == "undefined" ? null : layer;
     this.com.sendMessageToMap({
       type: "getElementsFromLayer",
       layer: _layer,
-      limit: (typeof limit!='undefined') ? parseInt(limit) : 100,
+      limit: typeof limit != "undefined" ? parseInt(limit) : 100,
       format: format,
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
   Geolocalize = (toggle) => {
     this.com.sendMessageToMap({
       type: "Geolocalize",
       toggle: toggle,
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
-  toggleGiswaterTiled = (toggle,tiled) => {
+  toggleGiswaterTiled = (toggle, tiled) => {
     this.com.sendMessageToMap({
       type: "toggleGiswaterTiled",
       toggle: toggle,
       tiled: tiled,
       sessionToken: this.sessionToken,
-    });   
-  }
+    });
+  };
 
-  reloadDisplayedLayers = ()=>{
+  reloadDisplayedLayers = () => {
     return this.com.sendMessageToMap({
       type: "reloadDisplayedLayers",
       sessionToken: this.sessionToken,
-    });  
-  }
+    });
+  };
 
-  addGeoJSON = (geoJSON,options, name)=>{
-    if(geoJSON){
+  addGeoJSON = (geoJSON, options, name) => {
+    if (geoJSON) {
       return this.com.sendMessageToMap({
         type: "addGeoJSON",
         geoJSON: geoJSON,
-        options: (typeof options!='undefined') ? options : {fillcolor:null,strokecolor:null},
-        name: name ? name: Math.random().toString(36).substring(7),
+        options:
+          typeof options != "undefined"
+            ? options
+            : { fillcolor: null, strokecolor: null },
+        name: name ? name : Math.random().toString(36).substring(7),
         sessionToken: this.sessionToken,
-      });  
-    }else{
-      this.emit("error",{error:"No geoJSON data"});
+      });
+    } else {
+      this.emit("error", { error: "No geoJSON data" });
       return;
     }
-  }
+  };
 
- clearGeoJSON = ()=>{
+  clearGeoJSON = () => {
     return this.com.sendMessageToMap({
       type: "clearGeoJSON",
       sessionToken: this.sessionToken,
-    });  
-  }
+    });
+  };
 
- removeGeoJSONLayer = (name)=>{
-    if(name){
+  removeGeoJSONLayer = (name) => {
+    if (name) {
       return this.com.sendMessageToMap({
         type: "removeGeoJSONLayer",
         name: name,
         sessionToken: this.sessionToken,
-      });  
-    }else{
-      this.emit("error",{error:"No geoJSON data"});
+      });
+    } else {
+      this.emit("error", { error: "No geoJSON data" });
       return;
     }
-  }
-  
-  setGiswaterFilters = (filters)=>{
+  };
+
+  setGiswaterFilters = (filters) => {
     var filtersJson = filters;
-    if(filters){
-      if(typeof filters!="object"){
-        filters = filters.trim()
-        filters = filters.replace(/^\s+|\s+$/g, '');
-        filters = filters.replace(/\\/g, '');
-        try{
-          filtersJson = JSON.parse(filters); 
-        }catch(e){
-          this.emit("error",{error:"Filters is not a valid JSON"});
+    if (filters) {
+      if (typeof filters != "object") {
+        filters = filters.trim();
+        filters = filters.replace(/^\s+|\s+$/g, "");
+        filters = filters.replace(/\\/g, "");
+        try {
+          filtersJson = JSON.parse(filters);
+        } catch (e) {
+          this.emit("error", { error: "Filters is not a valid JSON" });
           return;
         }
       }
- 
+
       return this.com.sendMessageToMap({
         type: "setGiswaterFilters",
         filters: filtersJson,
         sessionToken: this.sessionToken,
-      }); 
-    }else{
-      this.emit("error",{error:"No filters"});
+      });
+    } else {
+      this.emit("error", { error: "No filters" });
       return;
     }
-  }
+  };
 
-  getGiswaterLayerAvailableFilters = (layer_name)=>{
-    if(layer_name){
-     return this.com.sendMessageToMap({
+  getGiswaterLayerAvailableFilters = (layer_name) => {
+    if (layer_name) {
+      return this.com.sendMessageToMap({
         type: "getGiswaterLayerAvailableFilters",
         name: layer_name,
         sessionToken: this.sessionToken,
-      }); 
-    }else{
-      this.emit("error",{error:"No layer_name"});
+      });
+    } else {
+      this.emit("error", { error: "No layer_name" });
       return;
     }
-  }
+  };
 
-  getToc = ()=>{
+  getToc = () => {
     return this.com.sendMessageToMap({
       type: "getToc",
       sessionToken: this.sessionToken,
-    });  
-  }
+    });
+  };
 
-  setDebug = (what) =>{
-    if(!isNaN(parseInt(what))){
+  setDebug = (what) => {
+    if (!isNaN(parseInt(what))) {
       this.com.sendMessageToMap({
         type: "setDebug",
         what: what,
         sessionToken: this.sessionToken,
       });
-    }else{
+    } else {
       console.error("Debug is not a integer");
     }
-  }
+  };
 
-  setCustomColors = (properties)=>{
+  setCustomColors = (properties) => {
     //validate data
-    if(typeof properties!=='object'){
+    if (typeof properties !== "object") {
       console.error("properties is not an object");
       return;
     }
-    if(properties.hasOwnProperty('geom_stroke_width')){
-      if(isNaN(parseInt(properties.geom_stroke_width))){
+    if (properties.hasOwnProperty("geom_stroke_width")) {
+      if (isNaN(parseInt(properties.geom_stroke_width))) {
         console.error("geom_stroke_width is not an number");
         return;
-      }else{
+      } else {
         properties.geom_stroke_width = parseInt(properties.geom_stroke_width);
       }
-    }else{
+    } else {
       properties.geom_stroke_width = 1;
     }
-    if(properties.hasOwnProperty('geom_radius')){
-      if(isNaN(parseInt(properties.geom_radius))){
+    if (properties.hasOwnProperty("geom_radius")) {
+      if (isNaN(parseInt(properties.geom_radius))) {
         console.error("geom_stroke_width is not an number");
         return;
-      }else{
+      } else {
         properties.geom_radius = parseInt(properties.geom_radius);
       }
-    }else{
+    } else {
       properties.geom_radius = 4;
     }
 
-    if(properties.hasOwnProperty('geom_shape')){
-      if(properties.geom_shape!=="circle" && properties.geom_shape!=="square"){
-        properties.geom_shape = 'circle';
+    if (properties.hasOwnProperty("geom_shape")) {
+      if (
+        properties.geom_shape !== "circle" &&
+        properties.geom_shape !== "square"
+      ) {
+        properties.geom_shape = "circle";
         console.error("geom_shape must be either 'circle' or 'square'");
       }
     }
     this.com.sendMessageToMap({
-        type: "setCustomColors",
-        properties: properties,
-        sessionToken: this.sessionToken,
+      type: "setCustomColors",
+      properties: properties,
+      sessionToken: this.sessionToken,
     });
-  }
+  };
 
-  changeBackground = (newBackground)=>{
+  changeBackground = (newBackground) => {
     return this.com.sendMessageToMap({
       type: "changeBackground",
       sessionToken: this.sessionToken,
-      newBackground: newBackground
-    });  
-  }
+      newBackground: newBackground,
+    });
+  };
 
-   centerMap = (coordinates)=>{
+  centerMap = (coordinates) => {
     //validate data
-    if(typeof coordinates!=='object'){
+    if (typeof coordinates !== "object") {
       console.error("properties is not an object");
       return;
     }
     return this.com.sendMessageToMap({
       type: "centerMap",
       sessionToken: this.sessionToken,
-      coordinates
-    });  
+      coordinates: coordinates,
+    });
+  };
+
+  drawGeometryInLayer = (uuid, layerName, geom_astext, label, style) => {
+    return this.com.sendMessageToMap({
+      type: "drawGeometryInLayer",
+      sessionToken: this.sessionToken,
+      uuid,
+      layerName,
+      geom_astext,
+      label,
+      style,
+    });
+  };
+
+  removeGeometryFromLayer = (uuid, layerName) => {
+    return this.com.sendMessageToMap({
+      type: "removeGeometryFromLayer",
+      sessionToken: this.sessionToken,
+      uuid,
+      layerName,
+    });
+  };
+
+  initMeasure = (type,textStart,textContinue)=>{
+    if(type!=='line' && type!=='area'){
+      console.error(  );
+      return;
+    }
+    let text = null;
+    if(textStart && textContinue){
+    
+      text =  {
+        textStart: textStart,
+        textContinue: textContinue,
+      }
+    }
+
+    return this.com.sendMessageToMap({
+      type: "initMeasure",
+      sessionToken: this.sessionToken,
+      measure: type,
+      text: text ? text: null,
+    });
   }
 
+  cancelMeasure= ()=>{
+    return this.com.sendMessageToMap({
+      type: "cancelMeasure",
+      sessionToken: this.sessionToken,
+    });
+  }
 }
 
-export {
-  Communicator,
-}
+export { Communicator };