@vidro/map-handler 1.0.6 → 1.0.9

package/src/index.js

@@ -1,71 +1,117 @@
 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 "loaded": this.emit("loaded", 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;       
+      case "layerElements": this.emitEvent("layerElements", e.data,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 +119,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,7 +149,7 @@ class Communicator extends EventEmitter {
   }
 
   zoomToExtent = () => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "zoomToExtent",
       sessionToken: this.sessionToken,
     });   
@@ -104,7 +157,7 @@ class Communicator extends EventEmitter {
 
   zoomToCoordinates= (lat,lon,zoomLevel) => {
     if(!isNaN(parseInt(zoomLevel))){
-      sendMessageToMap({
+      this.com.sendMessageToMap({
         type: "zoomToCoordinates",
         sessionToken: this.sessionToken,
         coordinates:[lat,lon],
@@ -115,7 +168,7 @@ class Communicator extends EventEmitter {
 
   infoFromCoordinates = (type,layer,hitTolerance) => {
     const _layer = (typeof layer=='undefined') ? null : layer
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "infoFromCoordinates",
       info: type,
       layer: _layer,
@@ -124,8 +177,29 @@ class Communicator extends EventEmitter {
     });   
   }
 
+  getElementsFromLayer= (layer,limit,format) => {
+    const _format = (typeof format=='undefined') ? 'xml' : format.toLowerCase();
+    console.log(_format)
+    if(_format!=="xml" && _format!=='json'){
+      console.error("Format must be 'xml' or 'json");
+      return;
+    }
+    if(isNaN(limit)){
+       console.error("Limit must be a number");
+      return;
+    }
+    const _layer = (typeof layer=='undefined') ? null : layer
+    this.com.sendMessageToMap({
+      type: "getElementsFromLayer",
+      layer: _layer,
+      limit: (typeof limit!='undefined') ? parseInt(limit) : 100,
+      format: format,
+      sessionToken: this.sessionToken,
+    });   
+  }
+
   Geolocalize = (toggle) => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "Geolocalize",
       toggle: toggle,
       sessionToken: this.sessionToken,
@@ -133,7 +207,7 @@ class Communicator extends EventEmitter {
   }
 
   toggleGiswaterTiled = (toggle) => {
-    sendMessageToMap({
+    this.com.sendMessageToMap({
       type: "toggleGiswaterTiled",
       toggle: toggle,
       sessionToken: this.sessionToken,
@@ -141,7 +215,7 @@ class Communicator extends EventEmitter {
   }
 
   reloadDisplayedLayers = ()=>{
-    return sendMessageToMap({
+    return this.com.sendMessageToMap({
       type: "reloadDisplayedLayers",
       sessionToken: this.sessionToken,
     });  
@@ -149,7 +223,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},
@@ -163,7 +237,7 @@ class Communicator extends EventEmitter {
   }
 
  clearGeoJSON = ()=>{
-    return sendMessageToMap({
+    return this.com.sendMessageToMap({
       type: "clearGeoJSON",
       sessionToken: this.sessionToken,
     });  
@@ -171,7 +245,7 @@ class Communicator extends EventEmitter {
 
  removeGeoJSONLayer = (name)=>{
     if(name){
-      return sendMessageToMap({
+      return this.com.sendMessageToMap({
         type: "removeGeoJSONLayer",
         name: name,
         sessionToken: this.sessionToken,
@@ -197,7 +271,7 @@ class Communicator extends EventEmitter {
         }
       }
  
-      return sendMessageToMap({
+      return this.com.sendMessageToMap({
         type: "setGiswaterFilters",
         filters: filtersJson,
         sessionToken: this.sessionToken,
@@ -210,7 +284,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,
@@ -223,14 +297,56 @@ class Communicator extends EventEmitter {
 
   setDebug = (what) =>{
     if(!isNaN(parseInt(what))){
-      return sendMessageToMap({
+      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,13 +0,0 @@
-
-var sessionToken = document.querySelector("#sessionToken");
-var mapContainer = document.querySelector("#mapContainer");
-var iframe = document.querySelector("#map-frame");
-var host = document.querySelector("#overrideHost");
-//************** MAP EXAMPLE
-console.log("Load",`${host.value}?sessionToken=${sessionToken.value}`)
-iframe.src = `${host.value}?sessionToken=${sessionToken.value}`;
-
-
-
-
-

package/examples/vidromap/vidromap.php

@@ -1,59 +0,0 @@
-<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>Map Properties</h1>
-      <div>
-       Override iframe url: <input type="text" name="overrideHost" id="overrideHost" size="25" value="http://localhost:3000">
-      </div>
-      <div>
-        Session Token: <textarea  name="sessionToken" id="sessionToken" rows="4" cols="50" placeholder="">eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJleHAiOjE2MzEzNTM3NTksImF1ZCI6IjA0MWZkOWE2NWEyYzRlZDUxNjk5OTBkZWY1NGNiZWI4NmM1ZmNhYzgiLCJkYXRhIjp7Inpvb20iOjQsImJhY2tncm91bmQiOiJDYXJ0b0RCTGlnaHQiLCJzcmlkIjpudWxsLCJleHRlbnQiOm51bGwsImdlb3NlcnZpY2UiOiJRR0lTIiwibmFtZSI6Im5leHQiLCJwcmV2aWV3IjpudWxsLCJhcGkiOiJodHRwczpcL1wvZGV2YXBpLnZpZHJvc29mdHdhcmUuY29tXC8iLCJ0eXBlIjoidmlkcm9tYXAiLCJ0b2tlbiI6IjllNDlhOTQ2MmFhZjFkYjcwMjgxMjFhMDk0NDRlNWJkIiwic2hvd19sYXllcnMiOiIiLCJpZCI6OCwibG9nbyI6Imh0dHBzOlwvXC93d3cudmlkcm9zb2Z0d2FyZS5jb21cL2xvZ29zXC9WSURSTy5zdmcifX0.FJhMMjgvXBIvaDgroq2eZtnER6qKoIDtfm7-8ofjl_TXHB9GLAVKOAfKibEGCjPTaMlG9K4CT4zPzF9Y98Hp333Qk2_hmKKofDYLw1Zoce2hYQKXFUDcY-nMoN39Yxq_dT-txUkMjhGqVDFk0vlcweoUwsJcvRdPXmj4nweCh4Q5MNTFh9i9VKongZ4XY4w2IZnxtwFB2onjMR0G7p_qzYp0g6rcpFIlo2enzVFH9_8H0nlcQYXi7FikaTQRDCf6NX2WFRGjd5LN4ruUXwxtxsmqFcc4EmgqiwrgqIbv75d_udeCszVdJCCFExcfAyzjhSkrSZtiCvkq763SQNcCZcc_pyDzWKhLaDMgXlapafWfYpTQUQaE4G88AdjV8MVeqd46yn9qJN2kzHiDKUnFfj8QGGkkDMz6QVXDxcdsOOCOc1NIN-pH0hPF0biaDosKZ1mWyk3xNM74Pet8m2qfzMDfcHiOzDWuNqr_QRJiV4HTmBJfegB72vwKaBleNCQoG-H1ukpwWuHJouoUpYrlz5pOrTWHAUERr9bMp0usf_r8X_IZtfbrF3gxuA6b8hvz1APd2E8ZmHpTBx6nMxuhdtUS2UE9RQgefkp4UbWjwdxmTkLEtNBM1_W_avoaL5RTMOHs96-i7IO5rVFwE18K9n-kLmVzcZ2oiL5Rtbt2tII</textarea> 
-      </div>
-  
-    </div>
-    <div id="Error_container"></div>
-    <div id="mapContainer">
-
-      <div id="iframes-container">
-        <iframe id="map-frame" name="map-frame" src="" style="width:100%; height:600px;" allow="geolocation"></iframe>
-      </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>  
-      <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>
-
-
-      <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.1/dist/map-handler.js"></script>-->
-    <script src="../../dist/map-handler.js"></script>
-    <script src="../full/tester.js"></script>
-    <script src="./vidromap.js"></script>
-  </body>
-</html>