@vidro/map-handler 1.0.4 → 1.0.8

package/examples/serverLess/main.js

@@ -0,0 +1,113 @@
+import axios from "axios"; //lib for simplify XMLHttpRequest
+import { Communicator } from "@vidro/map-handler"; //Vidro Software map js library
+import parser from "xml2json-light"; //open source XML to JSON, used for parse WMS Info
+let clickedPoint = null; //store clicked coordinates for further use
+
+const apiUrl = "<YOUR API URL>";
+const user = "<YOUR USER>";
+const pwd = "<YOUR USER PASSWORD>";
+const customLogo = "<YOUR LOGO URL>";
+
+const layerToLoad = "Arc"; //Layer to be loaded
+const zoomLevel = 17;
+
+//DOM Elements
+const iframe = document.querySelector("#map-frame");
+const infoContainer = document.querySelector("#infoContainer");
+const infoContent = document.querySelector("#infoContent");
+const closeInfo = document.querySelector("#closeInfo");
+
+//1. Get BMAPS user token
+axios
+  .post(`${apiUrl}letsgo`, {
+    user: user,
+    pwd: pwd,
+  })
+  .then(function (response) {
+    console.log(response.data.message);
+    const userToken = response.data.message.token;
+    //2. Get first user project
+    const project_id = response.data.message.projects[0];
+    console.log(project_id);
+    //3. Get Map
+    axios
+      .get(`${apiUrl}map/${project_id}`, {
+        headers: { Authorization: `Bearer ${userToken}` },
+        params: {
+          logo: customLogo,
+          active_layer: layerToLoad,
+          show_layers: layerToLoad,
+          zoom: zoomLevel,
+        },
+      })
+      .then(function (response) {
+        console.log(response.data.message);
+        const sessionToken = response.data.message.sessionToken;
+        //4. Load iframe
+        iframe.src = `${response.data.message.iframe}?sessionToken=${sessionToken}`;
+        //5. Use js lib
+        const communicator = new Communicator({
+          sessionToken: sessionToken,
+        });
+        //6. Do WMS info on clickclicked coordinates
+        communicator.on("coordinates", function (data) {
+          console.info("clicked coordinates", data);
+          //create geometry for highlight clicked point and center map
+          clickedPoint = `POINT(${data.coordinates[0]} ${data.coordinates[1]})`;
+          communicator.infoFromCoordinates("wms", layerToLoad);
+        });
+
+        //info event
+        communicator.on("info", function (data) {
+          console.log("info received", data);
+          communicator.clear(); //clear previous higlight geometry
+          //highlight click point and center map o it
+          communicator.Highlight({
+            geom: clickedPoint,
+            zoom: { type: "level", zoomLevel: zoomLevel },
+          });
+          //parse WMS and display Arc Id attributte
+          let arc_id = parseWMSInfo(data.data);
+          if (arc_id) {
+            infoContainer.style.display = "block"; //show info container
+            infoContent.innerHTML = `ID: ${parseWMSInfo(data.data)}`;
+          } else {
+            infoContainer.style.display = "none"; //hide info container in case there's no info
+          }
+        });
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  })
+
+  .catch(function (error) {
+    console.log(error);
+  });
+
+//DOM handlers
+closeInfo.addEventListener("click", (evt) => {
+  infoContainer.style.display = "none";
+});
+
+const parseWMSInfo = (data) => {
+  //console.log("parseWMSInfo", data);
+  try {
+    let parsedData = parser.xml2json(data);
+    for (
+      let i = 0;
+      i < parsedData.GetFeatureInfoResponse.Layer.Feature.Attribute.length;
+      i++
+    ) {
+      if (
+        parsedData.GetFeatureInfoResponse.Layer.Feature.Attribute[i].name ===
+        "arc_id"
+      ) {
+        return parsedData.GetFeatureInfoResponse.Layer.Feature.Attribute[i]
+          .value;
+      }
+    }
+  } catch (e) {
+    return false;
+  }
+};

package/examples/serverLess/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "serverlessMapHandlerExample",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "parcel index.html",
+    "build": "parcel build --public-url . index.html"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "parcel": "^2.0.0-beta.2"
+  },
+  "dependencies": {
+    "@vidro/map-handler": "^1.0.5",
+    "axios": "^0.21.1",
+    "xml2json-light": "^1.0.6"
+  }
+}

package/examples/serverLess/readme.md

@@ -0,0 +1,41 @@
+# Map Handler ServerLess Demo
+
+#### Version 1.0.0 - July 2021
+
+Simple server less map integration. 
+
+Loads a BMAPS map with custom logo and one layer rendered.
+On map click, performs an wms info and shows a property value.
+
+
+## Installation
+
+Open a terminal/shell:
+
+```
+cd examples/serverLess
+```
+Install dependencies
+
+```
+npm install
+```
+
+Edit your credentials in `examples/serverLess/main.js` :
+
+```
+const apiUrl = "<YOUR API URL>";
+const user = "<YOUR USER>";
+const pwd = "<YOUR USER PASSWORD>";
+const customLogo ="<YOUR LOGO URL>";
+```
+
+Run
+
+```
+npm start
+```
+
+View
+
+Open a web broser with this url: `http://localhost:1234/`

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/simple/simple.js

@@ -4,79 +4,77 @@ var usertoken = null;
 var sessionToken = null;
 var iframe = document.querySelector("#map-frame");
 const urlParams = new URLSearchParams(window.location.search);
-const user = urlParams.get('user');
-const pwd = urlParams.get('pwd');
-const apiUrl = urlParams.get('api');
+const user = urlParams.get("user");
+const pwd = urlParams.get("pwd");
+const apiUrl = urlParams.get("api");
 
 //************** Simple example
 
-function loadMap(){
+function loadMap() {
+  //************************************************
+  //************************************************
+  //*************                     **************
+  //*************  1. Get user token  **************
+  //*************                     **************
+  //************************************************
+  //************************************************
 
-	//************************************************
-	//************************************************
-	//*************                     **************
-	//*************  1. Get user token  **************
-	//*************                     **************
-	//************************************************
-	//************************************************
+  var data = { user: user, pwd: pwd };
+  //Build XMLHttpRequest to API
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", `${apiUrl}letsgo`, true);
+  oReq.setRequestHeader("Content-type", "application/json");
+  oReq.send(JSON.stringify(data));
+  console.log("Attempt to get user token", `${apiUrl}letsgo`, data);
+  oReq.addEventListener("load", function () {
+    console.log("Get user token response", this.responseText);
+    var res = JSON.parse(this.responseText);
+    //store token
+    usertoken = res.message.token;
+    var dataForMap = { token: usertoken };
 
-	var data = { 'user': user, 'pwd': pwd }
-	//Build XMLHttpRequest to API
-	var oReq = new XMLHttpRequest();
-	oReq.open("POST", `${apiUrl}letsgo`,true);
-	oReq.setRequestHeader('Content-type', 'application/json');
-	oReq.send(JSON.stringify(data));
- 	console.log("Attempt to get user token",`${apiUrl}letsgo`,data);
- 	oReq.addEventListener("load", function(){
- 		console.log("Get user token response",this.responseText);
-  		var res = JSON.parse(this.responseText);
-  		//store token
-   		usertoken = res.message.token;
-		var dataForMap = { 'token': usertoken }
-		
-		//************************************************
-		//************************************************
-		//*************                     **************
-		//*************      2. Get MAP     **************
-		//*************                     **************
-		//************************************************
-		//************************************************
+    //************************************************
+    //************************************************
+    //*************                     **************
+    //*************      2. Get MAP     **************
+    //*************                     **************
+    //************************************************
+    //************************************************
 
-		//Build XMLHttpRequest to API
-		var uri = `${apiUrl}map/${res.message.projects[0]}?token=${usertoken}` 
-		var loadMapReq = new XMLHttpRequest();
-		loadMapReq.addEventListener("load", function(){
-			console.log("Map response",this.responseText);
-			var res = JSON.parse(this.responseText);
-			sessionToken = res.message.sessionToken;
-			
-			//start JS Communicator 
-			communicator = new VidroMaps.Communicator({sessionToken});
-			
-			//Load iframne
-			iframe.src = `${res.message.iframe}?sessionToken=${sessionToken}`;
+    //Build XMLHttpRequest to API
+    var uri = `${apiUrl}map/${res.message.projects[0]}`;
+    var loadMapReq = new XMLHttpRequest();
+    loadMapReq.addEventListener("load", function () {
+      console.log("Map response", this.responseText);
+      var res = JSON.parse(this.responseText);
+      sessionToken = res.message.sessionToken;
 
-			// Map events
-			communicator.on("onZoomChange", function(data){
-				console.log("communicator->onZoomChange",data);
-			});
+      //start JS Communicator
+      communicator = new VidroMaps.Communicator({ sessionToken });
 
-			// Map Actions
-			btZoomIn.addEventListener("click", function(){
-			  communicator.ZoomIn();
-			});
+      //Load iframe
+      iframe.src = `${res.message.iframe}?sessionToken=${sessionToken}`;
 
-			btZoomOut.addEventListener("click", function(){
-			  communicator.ZoomOut();
-			});
-			btZoomToExtent.addEventListener("click", function(){
-			  communicator.zoomToExtent();
-			});
+      // Map events
+      communicator.on("onZoomChange", function (data) {
+        console.log("communicator->onZoomChange", data);
+      });
 
+      // Map Actions
+      btZoomIn.addEventListener("click", function () {
+        communicator.ZoomIn();
+      });
 
-		});
-		loadMapReq.open("GET", uri,true);
-		loadMapReq.setRequestHeader('Content-type', 'application/json');
-		loadMapReq.send(JSON.stringify(dataForMap));
- 	});
-};
+      btZoomOut.addEventListener("click", function () {
+        communicator.ZoomOut();
+      });
+      btZoomToExtent.addEventListener("click", function () {
+        communicator.zoomToExtent();
+      });
+    });
+    loadMapReq.open("GET", uri, true);
+    loadMapReq.setRequestHeader("Content-type", "application/json");
+    loadMapReq.setRequestHeader("Authorization", `Bearer ${usertoken}`);
+    loadMapReq.send(JSON.stringify(dataForMap));
+  });
+}

package/examples/vidromap/index.js

@@ -0,0 +1,20 @@
+
+var sessionToken = document.querySelector("#sessionToken");
+var mapContainer = document.querySelector("#mapContainer");
+var codeContent = document.querySelector("#code");
+var iframesContainer = document.querySelector("#iframes-container");
+
+var iframe = document.querySelector("#map-frame");
+var host = document.querySelector("#overrideHost");
+var btLoadIframe = document.querySelector("#btLoadIframe");
+
+
+//************** MAP EXAMPLE
+
+if(btLoadIframe){
+	btLoadIframe.addEventListener("click", function (evt) {
+		if(codeContent.value!=""){
+			iframesContainer.innerHTML = codeContent.value;
+		}
+	});
+}

package/examples/vidromap/index.php

@@ -6,77 +6,65 @@
     <link rel="icon" type="image/png" href="https://www.vidrosoftware.com/favicon/favicon-16x16.png" sizes="16x16" />
   </head>
   <body>
-    <div class="form">
-      <div>
-        Api URL <input type="text" name="apiurl" id="apiurl" value="http://localhost" size="30"> 
-      </div>
-    </div>
+
 
 
     <div class="form" id="userData">
-      <h1>Map Properties</h1>
+      <h1>Vidromap</h1>
 
+      <div id="sessionToken"></div>
       <div>
-        Zoom: <input type="text" name="zoom" id="zoom" size="5" value="">
-      </div>
-      <div>
-        Custom logo: <input type="text" name="logo" id="logo" size="25" value="">
-      </div>
-      <div>
-        Name: <input type="text" name="name" id="name" size="25" value="opentest">
-      </div>
-      <div>
-        Srid: <input type="text" name="srid" id="srid" size="18" placeholder="EPSG:4326" value="EPSG:25831">
-      </div>
-      <div>
-        Geo server: <input type="text" name="geoserver" id="geoserver" size="54" value=""placeholder="https://nv.napr.gov.ge/geoserver/wms"> <small>Geo server url</small>
-      </div>
-      <div>
-        Show Layers: <input type="text" name="show_layers" id="show_layers" size="25" value="" placeholder="NG_REG_LAYER"> <small>Show layers on map load</small>
-      </div>
-      <div>
-        Geo server data: <textarea  name="geoserverdata" id="geoserverdata" rows="4" cols="50" placeholder="">{"options": {"params":{"LAYERS": "NG_REG_LAYER","FORMAT" : "image/png"},"srid" : "EPSG:4326","type" : "WMS"}}</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>
-       Override Capabitilites extent: <input type="text" name="extent" id="extent" size="55" value="417309, 4576150, 420550, 4578120" placeholder="397663,4615771,406392,4623596"> <small>Override project extent</small>
-      </div>
-      <div>
-       Override iframe url: <input type="text" name="overrideHost" id="overrideHost" size="25" value="">
-      </div>
-      
-      <div>
-        Background: <input type="text" name="Background" id="Background" size="25" value="">
-      </div>
-
-
-      <div>
         Debug
+        <button id="btDebug">Debug</button>  
         <select id="debug">
-          <option id="1"  value=1>True</option>
-          <option id="0" selected value=0>False</option>
-        </select>
-      </div>
-       <div>
-       <button id="btLoadMap">Load Map</button>
+          <option id="1" selected value=1>Show logs</option>
+          <option id="0" value=0>Hide logs</option>
+        </select> <small>Show/hide component logs</small>
       </div>
     </div>
+    <div>
+       <button id="btLoadIframe">Load Map</button> - 
+       <button id="btLoadWMSLayers">Load layers from wms</button>
+      </div>
     <div id="Error_container"></div>
-    <div id="mapContainer" class="hide">
+    <div id="mapContainer">
 
-      <div id="sessionToken"></div>
       <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>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>
       <button id="btZoomToExtent">Zoom to extent</button>  
+      <br><br>
+      <button id="btZoomToCoordinates">Zoom to coordinates</button>  
+      ZoomToCoordinates level: <input type="text" name="zoomLevelToCoordinates" id="zoomLevelToCoordinates" size="5" value="4">
+      <h2>Add geometry</h2>
+      <button id="btAddPoint">Add point</button>
+      <button id="btAddPolygon">Add polygon</button>
+      <button id="btAddLine">Add line</button>
+      <button id="btClear">Clear geometries</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> - 
@@ -84,18 +72,27 @@
       <button id="btGetActiveLayer">Get Active Layer</button>
       <span id="currentActiveLayer"></span>
 
+    <h2>Geolocation</h2>
+    <button id="btGeolocalize">Geolocalize User</button>
+    <button id="btStopGeolocalize">Cancel Geolocalize</button>
 
+    <h2>Highlight</h2>
+    <button id="btHighlight">Highlight geom</button>
+     Geom: <input type="text" name="geom" id="geom" size="25" value="">
+     <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.1/dist/map-handler.js"></script>-->
-    <script src="../../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="./vidromap.js"></script>
+    <script src="./index.js"></script>
   </body>
 </html>

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,13 +1,13 @@
 {
   "name": "@vidro/map-handler",
-  "version": "1.0.4",
+  "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": {
     "type": "git",
     "url": "https://github.com/Vidro-Software-SL/maphandler.git"
   },
-  "main": "dist/vidro-map-handler.js",
+  "main": "dist/map-handler.js",
   "scripts": {
     "build": "webpack"
   },