@vidro/map-handler 1.0.4 → 1.0.8

package/src/index.js

@@ -1,71 +1,116 @@
 import { EventEmitter } from "events"
-import { sendMessageToMap } from "./shared/iframe-communicator";
-
+import { iframeCommunicator } from "./shared/iframe-communicator";
 class Communicator extends EventEmitter {
 
-  constructor({ sessionToken }){
+  constructor(data){
     super();
-
+    this.domId = 'map-frame';
     if(typeof window === 'undefined'){
       return;
     };
-
+    if(typeof data.id==="string"){
+      this.domId = data.id;
+    } 
+    this.com = new iframeCommunicator(data)
     window.addEventListener("message", e => this.onMessageReceived(e));
-    this.sessionToken = sessionToken;
-
+    this.sessionToken = data.sessionToken;
   }
 
   onMessageReceived = e => {
     switch(e.data.type){
-      case "onZoomChange": this.emit("onZoomChange", e.data.zoom); break;
-      case "geomAdded": this.emit("geomAdded", e.data.geom_astext); break;
-      case "layers": this.emit("layers", e.data.layers); break;  
-      case "geoJSONlayers": this.emit("geoJSONlayers", e.data.layers); break;     
-      case "info": this.emit("info", e.data); break;    
-      case "error": this.emit("error", e.data); break;  
-      case "coordinates": this.emit("coordinates", e.data); break;  
-      case "activeLayer": this.emit("activeLayer", e.data); break;  
-      case "geolocation": this.emit("geolocation", e.data); break; 
-      case "WMSInfoAvailable": this.emit("WMSInfoAvailable", e.data); break;  
-      case "giswaterTiledBackgroundDisplayed": this.emit("giswaterTiledBackgroundDisplayed", e.data); break; 
-      case "giswaterTiledBackgroundAvailable": this.emit("giswaterTiledBackgroundAvailable", e.data); break;  
-      case "GiswaterLayerAvailableFilters": this.emit("GiswaterLayerAvailableFilters", e.data); break;  
-              
+      case "onZoomChange": this.emitEvent("onZoomChange", e.data.zoom,e.data.domId); break;
+      case "geomAdded": this.emitEvent("geomAdded", e.data.geom_astext,e.data.domId); break;
+      case "layers": this.emitEvent("layers", e.data.layers,e.data.domId); break;  
+      case "geoJSONlayers": this.emitEvent("geoJSONlayers", e.data.layers,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.layers,e.data.domId); break;       
+    }
+    
+  }
+
+  emitEvent = (type,data,domId)=>{
+    if(domId===this.domId){
+      delete data.domId;
+      this.emit(type, data); 
     }
   }
 
   ZoomIn = () => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "zoomIn",
       sessionToken: this.sessionToken,
-    });   
+    }); 
+
   }
   
   ZoomOut = () => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "zoomOut",
       sessionToken: this.sessionToken,
     });   
   }
 
   AddGeom = (geomtype) => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "AddGeom",
       geom: geomtype,
       sessionToken: this.sessionToken,
     });   
   }
 
-  toggleLayer = (layer) => {
-    sendMessageToMap({
+  toggleLayer = (layer,properties) => {
+    if(typeof properties==='undefined'){
+      properties = {
+        gutter: null,
+        transparent: null,
+        singletile: null
+      };
+    }
+
+    if(properties.singletile!==null){
+      if(typeof properties.singletile!=='boolean'){
+        properties.singletile = null;
+        this.emit("error",{error:"singleTile must be a Boolean"});
+      }
+    } 
+    if(properties.gutter!=='' && properties.gutter!==null){
+      if(isNaN(parseInt(properties.gutter))){
+        properties.gutter = null;
+        this.emit("error",{error:"Gutter must be a number"});
+      }
+      if(properties.singletile){
+        properties.gutter = null;
+        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'){
+        properties.transparent = null;
+        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,
+      transparent: properties.transparent,
+      singletile: properties.singletile,
       sessionToken: this.sessionToken,
     });   
   }
 
   setActiveLayer = (layer) => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "setActiveLayer",
       layer: layer,
       sessionToken: this.sessionToken,
@@ -73,21 +118,28 @@ class Communicator extends EventEmitter {
   }
 
   getActiveLayer = () => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "getActiveLayer",
       sessionToken: this.sessionToken,
     });   
   }
 
+  loadWMSAvailableLayers = () => {
+    this.com.sendMessageToMap({
+      type: "loadWMSAvailableLayers",
+      sessionToken: this.sessionToken,
+    });   
+  }
+
   clear = () => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "clear",
       sessionToken: this.sessionToken,
     });   
   }
 
   Highlight = (options) => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "highlight",
       geom: options.geom,
       zoom: options.zoom,
@@ -96,15 +148,26 @@ class Communicator extends EventEmitter {
   }
 
   zoomToExtent = () => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "zoomToExtent",
       sessionToken: this.sessionToken,
     });   
   }
 
+  zoomToCoordinates= (lat,lon,zoomLevel) => {
+    if(!isNaN(parseInt(zoomLevel))){
+      this.com.sendMessageToMap({
+        type: "zoomToCoordinates",
+        sessionToken: this.sessionToken,
+        coordinates:[lat,lon],
+        zoomLevel: zoomLevel
+      });   
+    }
+  }
+
   infoFromCoordinates = (type,layer,hitTolerance) => {
     const _layer = (typeof layer=='undefined') ? null : layer
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "infoFromCoordinates",
       info: type,
       layer: _layer,
@@ -114,7 +177,7 @@ class Communicator extends EventEmitter {
   }
 
   Geolocalize = (toggle) => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "Geolocalize",
       toggle: toggle,
       sessionToken: this.sessionToken,
@@ -122,7 +185,7 @@ class Communicator extends EventEmitter {
   }
 
   toggleGiswaterTiled = (toggle) => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "toggleGiswaterTiled",
       toggle: toggle,
       sessionToken: this.sessionToken,
@@ -130,7 +193,7 @@ class Communicator extends EventEmitter {
   }
 
   reloadDisplayedLayers = ()=>{
-    return sendMessageToMap({
+    return this.com.sendMessageToMap({
       type: "reloadDisplayedLayers",
       sessionToken: this.sessionToken,
     });  
@@ -138,7 +201,7 @@ class Communicator extends EventEmitter {
 
   addGeoJSON = (geoJSON,options, name)=>{
     if(geoJSON){
-      return sendMessageToMap({
+      return this.com.sendMessageToMap({
         type: "addGeoJSON",
         geoJSON: geoJSON,
         options: (typeof options!='undefined') ? options : {fillcolor:null,strokecolor:null},
@@ -152,7 +215,7 @@ class Communicator extends EventEmitter {
   }
 
  clearGeoJSON = ()=>{
-    return sendMessageToMap({
+    return this.com.sendMessageToMap({
       type: "clearGeoJSON",
       sessionToken: this.sessionToken,
     });  
@@ -160,7 +223,7 @@ class Communicator extends EventEmitter {
 
  removeGeoJSONLayer = (name)=>{
     if(name){
-      return sendMessageToMap({
+      return this.com.sendMessageToMap({
         type: "removeGeoJSONLayer",
         name: name,
         sessionToken: this.sessionToken,
@@ -186,7 +249,7 @@ class Communicator extends EventEmitter {
         }
       }
  
-      return sendMessageToMap({
+      return this.com.sendMessageToMap({
         type: "setGiswaterFilters",
         filters: filtersJson,
         sessionToken: this.sessionToken,
@@ -199,7 +262,7 @@ class Communicator extends EventEmitter {
 
   getGiswaterLayerAvailableFilters = (layer_name)=>{
     if(layer_name){
-     return sendMessageToMap({
+     return this.com.sendMessageToMap({
         type: "getGiswaterLayerAvailableFilters",
         name: layer_name,
         sessionToken: this.sessionToken,
@@ -210,7 +273,58 @@ class Communicator extends EventEmitter {
     }
   }
 
-  
+  setDebug = (what) =>{
+    if(!isNaN(parseInt(what))){
+      this.com.sendMessageToMap({
+        type: "setDebug",
+        what: what,
+        sessionToken: this.sessionToken,
+      });
+    }else{
+      console.error("Debug is not a integer");
+    }
+  }
+
+  setCustomColors = (properties)=>{
+    //validate data
+    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))){
+        console.error("geom_stroke_width is not an number");
+        return;
+      }else{
+        properties.geom_stroke_width = parseInt(properties.geom_stroke_width);
+      }
+    }else{
+      properties.geom_stroke_width = 1;
+    }
+    if(properties.hasOwnProperty('geom_radius')){
+      if(isNaN(parseInt(properties.geom_radius))){
+        console.error("geom_stroke_width is not an number");
+        return;
+      }else{
+        properties.geom_radius = parseInt(properties.geom_radius);
+      }
+    }else{
+      properties.geom_radius = 4;
+    }
+
+    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,
+    });
+  }
+
 }
 
 export {

package/src/shared/iframe-communicator.js

@@ -1,11 +1,18 @@
 const isSSR = typeof window === 'undefined';
+class iframeCommunicator {
+  constructor(data){
+    this.domId = 'map-frame';
+    if(typeof data.id==="string"){
+      this.domId = data.id;
+    }  
+  }
 
-const sendMessageToMap = message => {
-  if(isSSR) return;
-  window.top.frames['map-frame'].postMessage(message, "*");
+  sendMessageToMap = message => {
+    if(isSSR) return;
+    window.top.frames[this.domId].postMessage(message, "*");
+  }
 }
 
-
 export {
-	sendMessageToMap,
+  iframeCommunicator,
 }

package/examples/vidromap/vidromap.js

@@ -1,87 +0,0 @@
-// Config:
-
-
-// UI:
-
-var loginContainer = document.querySelector("#loginContainer");
-
-var btLoadMap = document.querySelector("#btLoadMap");
-
-
-var sessionToken = document.querySelector("#sessionToken");
-var mapContainer = document.querySelector("#mapContainer");
-var iframe = document.querySelector("#map-frame");
-var errorContainer = document.querySelector("#Error_container");
-mapContainer.classList.add("hide");
-
-
-
-//************** MAP EXAMPLE
-
-btLoadMap.addEventListener("click", function (evt) {
-  apiUrl = document.querySelector("#apiurl").value;
-  var debug = parseInt(document.getElementById("debug").value);
-  //Build XMLHttpRequest for map
-  var name = document.querySelector("#name").value;
-  var uri = `${apiUrl}/vidromap/${name}`;
-  var zoom = document.querySelector("#zoom").value;
-  var data = { zoom: zoom};
-
-  var srid = document.querySelector("#srid").value;
-  if(srid){
-    data.srid = srid;
-  }
-  var geoserver = document.querySelector("#geoserver").value;
-  if(geoserver){
-    data.geoserver = geoserver;
-  }
-  var geoserverdata = document.querySelector("#geoserverdata").value;
-  if(geoserverdata){
-    data.geoserverdata = geoserverdata;
-  }
-  var show_layers = document.querySelector("#show_layers").value;
-  if(show_layers){
-    data.show_layers = show_layers;
-  }
-  var extent = document.querySelector("#extent").value;
-  if(extent){
-    data.extent = extent;
-  }
-  
-
-  var oReq = new XMLHttpRequest();
-
-  oReq.addEventListener("load", mapListener);
-  oReq.open("POST", uri, true);
-  oReq.setRequestHeader("Content-type", "application/json");
-  oReq.send(JSON.stringify(data));
-  console.log("Attempt to load map", `${apiUrl}/vidromap/${name}`);
-});
-
-function mapListener() {
-  if (this.status === 200) {
-    console.log("mapListener response", this.responseText);
-    var res = JSON.parse(this.responseText);
-    errorContainer.classList.add("hide");
-    mapContainer.classList.remove("hide");
-    iframe.src = `${res.message.iframe}?sessionToken=${res.message.sessionToken}`;
-    sessionToken.innerHTML = res.message.sessionToken;
-    localStorage.setItem("iframe", iframe.src);
-    localStorage.setItem("sessionToken", res.message.sessionToken);
-  } else {
-    console.error(this.status);
-    var res = JSON.parse(this.responseText);
-    console.log(res.error);
-    //show DOM error element
-    errorContainer.innerHTML = res.error;
-    errorContainer.classList.remove("hide");
-    mapContainer.classList.add("hide");
-  }
-}
-//************** END MAP EXAMPLE
-
-
-
-
-
-