@vidro/map-handler 1.0.7 → 1.0.8

package/examples/simple/index.html

@@ -12,7 +12,7 @@
       <br>https://www.vidrosoftware.com/examples/simple/?user=user&pwd=pwd&api=API URL
       </div>
       <div id="iframes-container">
-        <iframe id="map-frame" name="map-frame" src="" style="width:100%; height:600px;" ></iframe>
+        <iframe id="map-frame" name="map-frame" src="http://localhost:3000/?sessionToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJleHAiOjE2NDE5ODcyOTEsImF1ZCI6IjUyNmY5ODMyZDIxYWI0ZDI4ZjU0M2MxZWM1NzYxYTc0MjE3YjFiMDkiLCJkYXRhIjp7Inpvb20iOjE0LCJiYWNrZ3JvdW5kIjoiQ2FydG9EQkxpZ2h0Iiwic3JpZCI6bnVsbCwiZXh0ZW50IjpudWxsLCJnZW9zZXJ2aWNlIjoiUUdJUyIsIm5hbWUiOiJ0ZXN0ZmlsZSIsInByZXZpZXciOnRydWUsImFwaSI6Imh0dHBzOlwvXC9hcGkudmlkcm9zb2Z0d2FyZS5jb21cLyIsInR5cGUiOiJ2aWRyb21hcCIsInRva2VuIjoiMjNhYzNjMmY1YTEzYTY1NmVkNDBhYjU3N2E3YmU4Y2QiLCJzaG93X2xheWVycyI6ImxpbmVzIiwiaWQiOjYsImxvZ28iOiJodHRwczpcL1wvd3d3LnZpZHJvc29mdHdhcmUuY29tXC9sb2dvc1wvVklEUk8uc3ZnIn19.VlK69JRMTdHskUuYMT86sH_8adKZdwZHpOu3I1EzU-RQcVGaNIA-dwgqEPQG9qVXJNNWVlYA3YkPk7S0g4XpwHvdOZLqKO8a5Iwx9gYCPOAemGnNc3pQzf_OtBv8h2OuBZDRPeZEzB7PJ7WgRqvXJG6SsNWzaU8TXrMjs2aYiaS7ztSMIORT0jzwq1ssjl1lTwWdNOz_hgZVwcJNbBb1-aSTIV8SD3miru4iujokVDCLj8IhM_chb6RipegZb_lQc6AEm6vcxDBBIlpIXuJq-cot05w_eY6LuL9HPsah1ifxWGSQ8HM_-QLzna7eMEb9KzMHGmx0EIpO5bRBy358QLXkesxpxjLMe2BhRef-j7UlFojptVhsvZKCdE6-KCmzz52WH5d9xgFxlfypQopx3jPeMqZmIRdGQSaedKIgvnj8T_hiltG08KItM5LatVC-9L1XnDpffRlHIc96IOmYzWpDcbIltK6k4NudohV49liWBP0sv-d51TGSNePGnyXZS4rdNAouo-sI5V2fvtTn3nOfmMqMmlXEc41m43tE_ULIo9R1S0SIg7taPEc3vImzRNL6lcAhLjT0TIQZrQXBpiL_Ml8SRhPm7PWdw-VEIFhl3aZFA5e-BpK3A4fb_pn-Ooc1Dg0hVBnteX5COAcZJkYHqYhKBhKP23UaWoLG3l0" style="width:100%; height:600px;" ></iframe>
       </div>
       <button id="btZoomIn">Zoom In</button>
       <button id="btZoomOut">Zoom Out</button>

package/examples/vidromap/index.js

@@ -13,8 +13,8 @@ var btLoadIframe = document.querySelector("#btLoadIframe");
 
 if(btLoadIframe){
 	btLoadIframe.addEventListener("click", function (evt) {
-		if(code.value!=""){
-			iframesContainer.innerHTML = code.value;
+		if(codeContent.value!=""){
+			iframesContainer.innerHTML = codeContent.value;
 		}
 	});
 }

package/examples/vidromap/index.php

@@ -14,7 +14,9 @@
 
       <div id="sessionToken"></div>
       <div>
-        Paste your code here:<br> <textarea name="code" id="code" rows="10" cols="100" placeholder=""></textarea> 
+        Paste your code here:<br> <textarea name="code" id="code" rows="10" cols="100" placeholder=""><iframe id="map-frame" name="map-frame" width="100%" height="600" src="http://localhost:3000/?sessionToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJleHAiOjE2NDMxMjM5MTcsImF1ZCI6ImVjNWI4ZDI5OWM1NjVlZjUxYmQxZmU4MzY1OGE5NTgwNDk0MDZkMjMiLCJkYXRhIjp7Inpvb20iOjE0LCJiYWNrZ3JvdW5kIjoiQ2FydG9EQkxpZ2h0Iiwic3JpZCI6bnVsbCwiZXh0ZW50IjpudWxsLCJnZW9zZXJ2aWNlIjoiUUdJUyIsIm5hbWUiOiJ0ZXN0ZmlsZSIsInByZXZpZXciOnRydWUsImFwaSI6Imh0dHBzOlwvXC9hcGkudmlkcm9zb2Z0d2FyZS5jb21cLyIsInR5cGUiOiJ2aWRyb21hcCIsInRva2VuIjoiNmJiNTM2MjY1NWU3MzdlNjY2YzY5OGU2ZmI1ZjA5YzQiLCJzaG93X2xheWVycyI6ImxpbmVzIiwiaWQiOjYsImxvZ28iOiJodHRwczpcL1wvd3d3LnZpZHJvc29mdHdhcmUuY29tXC9sb2dvc1wvVklEUk8uc3ZnIn19.Ocv0JUFhVHRep6-bkEt0AJ9KnmXcSVc9khMzS1d3Sb33n5jAXvgt2nAjh4CckUSkJUsekuQqk6Y0ZdiWIyOp780U3S5JK962PivB00tXB_05YHPyfU5XPrVbDWTMUcww9Qg9kYdTZsTjede3cOfjbGlU_opg2igL1hlKqkbeqBY2vAfhHF_zNa2EShcEIke21AIpuAo6h-FJXzkCRSQbGtnqEhJCXWT0LNQCns5Rc1q5fKpg98iaEUFFZRu3rM58s0UTK5sUu6LAXXbRWXDw3Q4jkCuGrV58QPeqVHjJQOo70hDWvV33HFJSSJZP2TkhWapPZqw7UxhPipo4K7p9WnFBmGWQqrhQ5yiQZY92E4Y8cwAsUvLbuJwBO-jZAsk4kNI8uK9L6Uy5JvEw6G-Ce8HUbEF3E-nYQKHzKtqOpLpsgo1PNFIV7PcWlQPhFZnOtSBjhH-DCKX9QzgiKu4n9L7uKUE_7YvxeJ8Zs-Oi0QoxBPa1GJ0KYGJg4VHBPuVRSfq9Plwtv8uWG-etJQjQYCDNM6z6oWjw9m1CzS67kFp49p3ek46MdlI86URGTUDX7u4bjuvCdYZdOxYGdw6XkCMdyeIxFXX2CUOQZPeFtc3wGZbHI7-WFqkkbnBJ2fDWQfOpcUncEeCSiKuvgI9pykhCXnP7TKA0DFHCJmcDuzo"></iframe>
+       
+       </textarea> 
       </div>
         <div>
         Debug
@@ -38,6 +40,17 @@
       <hr />
       <pre id="Result_container"></pre>
       <hr/>
+      <h2>Custom colors</h2>
+       Geom fill color: <input type="text" name="geom_fill_color" id="geom_fill_color" size="12" value="rgba(252,0,0,0.37)"><br><br>
+       Geom stroke color: <input type="text" name="geom_stroke_color" id="geom_stroke_color" size="12" value="rgba(252,0,0,0.37)"><br><br>
+       Geom stroke width: <input type="text" name="geom_stroke_width" id="geom_stroke_width" size="4" value="1"><br><br>
+       Geom shape for points - circle/square: <select id="geom_shape">
+          <option id="circle" selected value="circle">Circle</option>
+          <option id="square" value="square">Square</option>
+        </select><br><br>
+        Point radius: <input type="text" name="geom_radius" id="geom_radius" size="4" value="4"><br><br>
+      <button id="btSetColors">Set colors</button> <br><br>
+
       <h2>Zoom</h2>
       <button id="btZoomIn">Zoom In</button>
       <button id="btZoomOut">Zoom Out</button>
@@ -69,14 +82,16 @@
      <br>
      Highlight to zoom level: <input type="text" name="zoomLevel" id="zoomLevel" size="5" value=""> or Zoom to geometry: <input type="checkbox" name="zoomToHighlightCheck" id="zoomToHighlightCheck" size="5" value=""> 
       <h2>GeoJSON</h2>
-      
       <input type="file" id="geojsonfile" name="geojsonfile" accept="application/json"><small> Select geoJSON file</small><br><br>
       <small>Or paste geoJSON content</small><br><br>
       <textarea name="geojsondata" id="geojsondata" rows="10" cols="80" placeholder=""></textarea> <br><br>
+
+
    <button id="btAddGeoJSON">Add GeoJSON </button><br><br>
+
     </div>
     
-    <script src="https://unpkg.com/@vidro/map-handler@1.0.7/dist/map-handler.js"></script>
+    <script src="https://unpkg.com/@vidro/map-handler@1.0.8/dist/map-handler.js"></script>
     <script src="../full/tester.js"></script>
     <script src="./index.js"></script>
   </body>

package/flows.md

@@ -0,0 +1,73 @@
+# Map Handler flows
+
+This document defines use case flows of map handler
+
+## Vidromaps basic flow
+
+Vidromaps basic flow
+
+1. Login to giswater - API `letsgo`
+2. Get map - API `map/{project_id}`
+3. Load iframe
+
+![](doc/vidromaps-basic.png)
+
+## Giswater basic flow
+
+Giswater basic flow
+
+1. Login to giswater - API `letsgo`
+2. Get map - API `map/{project_id}`
+3. Load iframe
+
+
+![](doc/giswater.png)
+
+## Giswater info
+
+Giswater info can be performed using mapHandler or usind API REST methods
+
+1. Login to giswater - API `letsgo`
+2. Get map - API `map/{project_id}`
+3. Load iframe
+4. Instance mapHandler - `new VidroMaps.Communicator({sessionToken});`
+5. Click on map
+
+**Using mapHandler**
+
+6. Info`mapHandler.js` method [**`infofromcoordinates `**](https://github.com/Vidro-Software-SL/maphandler#infofromcoordinates)
+![](doc/giswaterInfo.png)
+
+**Using API REST**
+
+6. Listen event [**`coordinates`**](https://github.com/Vidro-Software-SL/maphandler#coordinates)
+7. POST to API `giswater/info` with x, y, srid and device parameters.
+
+![](doc/giswaterInfoApi.png)
+
+
+## Giswater display layer
+
+Display a Giswater layer using mapHandler
+
+1. Login to giswater - API `letsgo`
+2. Get map - API `map/{project_id}`
+3. Load iframe
+4. Instance mapHandler - `new VidroMaps.Communicator({sessionToken});`
+5. Render layer using `mapHandler.js` method [**`toggleLayer`**](https://github.com/Vidro-Software-SL/maphandler#togglelayer)
+
+![](doc/togglelayergiswater.png)
+
+## Giswater JSON layer
+
+Giswater layers can be rendered as geojson.
+
+1. Login to giswater - API `letsgo`
+2. Get map - API `map/{project_id}`
+3. Load iframe
+4. Get geojson data for a layer - API `giswater/geojson/{project_id}/{layer_name}`. 
+5. Instance mapHandler - `new VidroMaps.Communicator({sessionToken});`
+6. Render geojson data using `maphandler.js` method [**`addGeoJSON`**](https://github.com/Vidro-Software-SL/maphandler#addgeojson)
+![](doc/giswatergeojson.png)
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidro/map-handler",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Tool to achieve the easiest way of communication with the map",
   "homepage": "https://github.com/Vidro-Software-SL/maphandler",
   "repository": {

package/src/index.js

@@ -67,10 +67,44 @@ class Communicator extends EventEmitter {
     });   
   }
 
-  toggleLayer = (layer) => {
+  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,
     });   
   }
@@ -240,7 +274,6 @@ class Communicator extends EventEmitter {
   }
 
   setDebug = (what) =>{
-    console.log("setDebug culo",what)
     if(!isNaN(parseInt(what))){
       this.com.sendMessageToMap({
         type: "setDebug",
@@ -252,6 +285,46 @@ class Communicator extends EventEmitter {
     }
   }
 
+  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 {