npm - @vidro/map-handler - Versions diffs - 1.0.6 → 1.0.9 - Mend

@vidro/map-handler 1.0.6 → 1.0.9

Files changed (185) hide show

package/examples/serverLess/main.js CHANGED Viewed

@@ -16,7 +16,7 @@ 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`, {
@@ -84,7 +84,7 @@ axios
   .catch(function (error) {
     console.log(error);
   });
+*/
 //DOM handlers
 closeInfo.addEventListener("click", (evt) => {
   infoContainer.style.display = "none";

package/examples/simple/index.html CHANGED Viewed

@@ -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.eyJleHAiOjE2NTQ2ODUzODYsImF1ZCI6IjFhOTQ1OTcyN2YyMTIzNWFkNzhmMWQ4N2NjMTIzMzAxOTQ3NTEyNDMiLCJkYXRhIjp7Inpvb20iOjQsImJhY2tncm91bmQiOiJDYXJ0b0RCTGlnaHQiLCJzcmlkIjpudWxsLCJleHRlbnQiOm51bGwsImdlb3NlcnZpY2UiOiJRR0lTIiwibmFtZSI6IlBhcmlzIiwicHJldmlldyI6dHJ1ZSwiYXBpIjoiaHR0cHM6XC9cL2FwaS52aWRyb3NvZnR3YXJlLmNvbVwvIiwidHlwZSI6InZpZHJvbWFwIiwidG9rZW4iOiIzZDAxNzBjNjZlNTE2MjM4ZWRiODU3ZjE1MDhlYzQyNCIsInNob3dfbGF5ZXJzIjoiIiwiaWQiOjExMSwibG9nbyI6Imh0dHBzOlwvXC93d3cudmlkcm9zb2Z0d2FyZS5jb21cL2xvZ29zXC9WSURSTy5zdmcifX0.OKluQa49gCA2r9cd80Did2CaPJCD7NR-fblL_D8EI4tTNBHavfIjxI_Nmj-K4PTqr54acJWwtih4f0bmLTE6aT0dF6aA3CVGfhOEC7yZc5gVncGSxL9l3HRQvevQHf_it6H-lCx5Yuee98tQyIMJJipMWpAjnkmmJoyk8K4Ri058J44XlI1EJKMv13dafIHUME9puoUry-GVXfImb3vNbZ0vvIr-XHQb8tD882qBgKxoe50bzdPMHdDmWLkN99RrVsfvX9Z1m3zeWxL-3DNOErRbqtN0gkMDh6u043LJ_hO0NyLd06Uxl2Cs5Q3bld9Bs4nYuAq4kADQHGBJJPiuI82KU9pmIWAkhzlhA00aPSulhHkz39WaSpbClFI82zftpqBOicuYP1f09gjyMT_oARlIP1wSSJw8E0rBpbPDHjSiJLcE4qKk3nZw6dz_n34zUCs_lvlU2QnRvJO5m77Iu1ZPqnaQx_HSgSV9T07aCvN-cas9H9Fx7uQXAhlU-AqHd68HX8MxXGsKceWtdJdb1aAFP_5LYXCYPzleD756uDatreIhmUzKZguiFEpiin74xozd-UAM75M1M1KmeZiZnqmtFW60Zq-VDHVhLSToD4xa6oT8pZUnSLWrGe3odkigHZSrnQUYPlesULD4eCGEWasfEXyfkB4Y2XbNewDuAPU" style="width:100%; height:600px;" ></iframe>
       </div>
       <button id="btZoomIn">Zoom In</button>
       <button id="btZoomOut">Zoom Out</button>

package/examples/taigua/index.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div><iframe id="map-frame" name="map-frame" width="100%" height="600"
+    src="https://component.vidrosoftware.com?sessionToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJleHAiOjE2NTI3NzU1MjcsImF1ZCI6ImE4MmY1MTQ2Y2Y4NTQ3ODg1YjFiNzY2MjE5Yjk4YjI4YWJkZGJkNTIiLCJkYXRhIjp7Inpvb20iOjksImJhY2tncm91bmQiOiJDYXJ0b0RCTGlnaHQiLCJzcmlkIjpudWxsLCJleHRlbnQiOm51bGwsImdlb3NlcnZpY2UiOiJRR0lTIiwibmFtZSI6IlBST1ZBMjYiLCJwcmV2aWV3Ijp0cnVlLCJhcGkiOiJodHRwczpcL1wvYXBpLnZpZHJvc29mdHdhcmUuY29tXC8iLCJ0eXBlIjoidmlkcm9tYXAiLCJ0b2tlbiI6ImYzMTU5MTY4OTliZmVjODljZjM0NjlkMDVjNTlkZTY1Iiwic2hvd19sYXllcnMiOiJMSU5LUyxUUkFNUyxDT01QVFNSRUcsTk9ERVMiLCJpZCI6MTU5LCJsb2dvIjoiaHR0cHM6XC9cL3d3dy52aWRyb3NvZnR3YXJlLmNvbVwvbG9nb3NcL1ZJRFJPLnN2ZyJ9fQ.OAGvwBb20ZkBtI2HqLd7dwnS2kFFuOJmqs1WGSDX_6vm_KAhd3KQNvDqyZrXw3NJehTvOnes0fkK-gD3r2uKlz2beCdnoXLzVnkOYkO5rZpon6WIRNRtbSBqQ2dpgijnsWwH_inhs-EAUB-la9Itdmhk7SlswGWPcs7cU19YeaD6FizNaFaROB_1UHTWw-t7ks7GGkd47J0m5rl9AVvJNC3-SDsMLzcC7WO-rnibDtmB6cCgPFND0zpzjQlt0IYTHxTBsyS6MczcBsdl9jzyuO3rl802fZ5T1KhY5TxHGni8ljeMtXe0L-tNaJy6F6rjtfY2I4-RCZF4nQ6RPjd1AWoXhPI2Uw6YGu8TFIEGwK0k-vH6dRU2IrWXLuEgniirvLj4YZVVNtJzlhHeAE_yGE-3ygF3vU4aRWlD54gKv0lL1mO2EdeXbIUb4_jrlTwJN5Lxy2k0cv1t6HR8RVjTqj0k2gLDR-Rwe3bhNPQCuUyJOnllIh5OkKx-ZzxUU3qZ23T4phpqMCC67EQaJ1qrHcKX9nFZJ8qGwVaWbaQJHlPYQBpPCLtetNm7C5INxuEWmQMMvdlEtUyHlL8EQeYSc54kw_SaVTsHHs9PhX6uD-RcfzYFmfHcFKQaOO1oNFq6aHdIuK8BQuj8s_q4h4r3acU5QzHGwKuS9-0k3IOuvWU"></iframe>
+</duv>
+<div><button id="btZoomIn" name="btZoomIn">Zoom in</button></div>
+<div id="messages"></div>
+</body>
+<script src="https://unpkg.com/@vidro/map-handler@1.0.5/dist/map-handler.js"></script>
+<script src="main.js"></script>
+</html>

package/examples/taigua/main.js ADDED Viewed

@@ -0,0 +1,44 @@
+var sessionToken =
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJleHAiOjE2NTI3NzU1MjcsImF1ZCI6ImE4MmY1MTQ2Y2Y4NTQ3ODg1YjFiNzY2MjE5Yjk4YjI4YWJkZGJkNTIiLCJkYXRhIjp7Inpvb20iOjksImJhY2tncm91bmQiOiJDYXJ0b0RCTGlnaHQiLCJzcmlkIjpudWxsLCJleHRlbnQiOm51bGwsImdlb3NlcnZpY2UiOiJRR0lTIiwibmFtZSI6IlBST1ZBMjYiLCJwcmV2aWV3Ijp0cnVlLCJhcGkiOiJodHRwczpcL1wvYXBpLnZpZHJvc29mdHdhcmUuY29tXC8iLCJ0eXBlIjoidmlkcm9tYXAiLCJ0b2tlbiI6ImYzMTU5MTY4OTliZmVjODljZjM0NjlkMDVjNTlkZTY1Iiwic2hvd19sYXllcnMiOiJMSU5LUyxUUkFNUyxDT01QVFNSRUcsTk9ERVMiLCJpZCI6MTU5LCJsb2dvIjoiaHR0cHM6XC9cL3d3dy52aWRyb3NvZnR3YXJlLmNvbVwvbG9nb3NcL1ZJRFJPLnN2ZyJ9fQ.OAGvwBb20ZkBtI2HqLd7dwnS2kFFuOJmqs1WGSDX_6vm_KAhd3KQNvDqyZrXw3NJehTvOnes0fkK-gD3r2uKlz2beCdnoXLzVnkOYkO5rZpon6WIRNRtbSBqQ2dpgijnsWwH_inhs-EAUB-la9Itdmhk7SlswGWPcs7cU19YeaD6FizNaFaROB_1UHTWw-t7ks7GGkd47J0m5rl9AVvJNC3-SDsMLzcC7WO-rnibDtmB6cCgPFND0zpzjQlt0IYTHxTBsyS6MczcBsdl9jzyuO3rl802fZ5T1KhY5TxHGni8ljeMtXe0L-tNaJy6F6rjtfY2I4-RCZF4nQ6RPjd1AWoXhPI2Uw6YGu8TFIEGwK0k-vH6dRU2IrWXLuEgniirvLj4YZVVNtJzlhHeAE_yGE-3ygF3vU4aRWlD54gKv0lL1mO2EdeXbIUb4_jrlTwJN5Lxy2k0cv1t6HR8RVjTqj0k2gLDR-Rwe3bhNPQCuUyJOnllIh5OkKx-ZzxUU3qZ23T4phpqMCC67EQaJ1qrHcKX9nFZJ8qGwVaWbaQJHlPYQBpPCLtetNm7C5INxuEWmQMMvdlEtUyHlL8EQeYSc54kw_SaVTsHHs9PhX6uD-RcfzYFmfHcFKQaOO1oNFq6aHdIuK8BQuj8s_q4h4r3acU5QzHGwKuS9-0k3IOuvWU";
+var clickedCoordinates = null;
+var communicator = new VidroMaps.Communicator({
+  sessionToken: sessionToken,
+});
+var btZoomIn = document.getElementById("btZoomIn");
+btZoomIn.addEventListener("click", function () {
+  console.log("m'han clicat");
+  communicator.ZoomIn();
+});
+var containerMessages = document.getElementById("messages");
+communicator.on("onZoomChange", function (data) {
+  console.log("onZoomChange event", data);
+  containerMessages.innerHTML = data;
+});
+communicator.on("loaded", function (data) {
+  console.log("loaded event", data);
+});
+//clicked coordinates
+communicator.on("coordinates", function (data) {
+  console.info("coordinates", data);
+  clickedCoordinates = [data.coordinates[0], data.coordinates[1]];
+  containerMessages.innerHTML = `Clicked coordinates -> x: ${data.coordinates[0]}, y: ${data.coordinates[1]}`;
+  communicator.infoFromCoordinates("wms", "COMPTSREG");
+});
+//info event
+communicator.on("info", function (data) {
+  console.log("info received", data);
+  var dataToRender = data.data;
+  //depending on infoType, data.data can be an string or a JSON
+  if (data.infoType === "giswater") {
+    dataToRender = JSON.stringify(data.data);
+  }
+  containerMessages.innerText = dataToRender;
+});

package/examples/vidromap/index.js CHANGED Viewed

@@ -1,87 +1,20 @@
-// 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");
+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
-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
+if(btLoadIframe){
+	btLoadIframe.addEventListener("click", function (evt) {
+		if(codeContent.value!=""){
+			iframesContainer.innerHTML = codeContent.value;
+		}
+	});
+}

package/examples/vidromap/index.php CHANGED Viewed

@@ -6,74 +6,71 @@
     <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>
+        Paste your code here:<br> <textarea name="code" id="code" rows="10" cols="100" placeholder=""><iframe id="map-frame" name="map-frame" src="http://localhost:3000?sessionToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJleHAiOjE2NTQ5MzMyMTksImF1ZCI6ImM1NzhjY2IyODFlMTY1ZGEwODljZWZlYzgxMGE5NDliNDllYWU5ODEiLCJkYXRhIjp7Inpvb20iOjksImJhY2tncm91bmQiOiJDYXJ0b0RCTGlnaHQiLCJzcmlkIjpudWxsLCJleHRlbnQiOm51bGwsImdlb3NlcnZpY2UiOiJRR0lTIiwibmFtZSI6IlBVTlRTTU9TVFJFSUcyIiwicHJldmlldyI6dHJ1ZSwiYXBpIjoiaHR0cHM6XC9cL2FwaS52aWRyb3NvZnR3YXJlLmNvbVwvIiwidHlwZSI6InZpZHJvbWFwIiwidG9rZW4iOiIwZGNkZTI2MjdhNDk0MTcxNjk0YTIxZmFmNjcwNmE5NiIsInNob3dfbGF5ZXJzIjoiUFVOVFNNT1NUUkVJRyIsImlkIjoxOTEsImxvZ28iOiJodHRwczpcL1wvd3d3LnZpZHJvc29mdHdhcmUuY29tXC9sb2dvc1wvVklEUk8uc3ZnIn19.qq2NOgCYPGqauE0IbCAoZoU8kHUaqhk9Z43f1ahFmNVAnjGpQ12xv2ITsvDR4g9LhfJg2s3MQaUKreZQTesIvDPLJGrwrCriDiBrsHnfgh0S0G3wQdUw58KxQapVVJKqznCK9QVaCQiA2xAm4HcLeRBHGpjd7f0sRa1kkGc-MGUkT5-S4WfPhJa7svs2YKM2n17MRBR5KCI6Ujlw-HMTt-UnBFs7CcHcvq-P5rbEs4UzMmvAiwM3Do-w3Mwx2fAeTq3RD1TdAobvPM3SiFKjoQINDW-4zj3Ds0Iuc2NNdIGzJX7hKelD80hXm5iHO3N8M-Du8lX2YCQS1qkz-XeKmRhKkLP_WCDC1ry1yKwTvd6xWvR_Hz1YbeAm6jmUYp6gIf0UZl_ZuwA-UQjMCWWmDrNvO9it215OwUEDPGznuvTfg-ESNLpmvxkedQoIsrVIRuSMwH4Vk990OMXSvYsZbJJZb71Z9BA1HhMQQ-ifT77m0vnBBfqeBikRAUhm0-uQq97JMRrb9GC9Pg_IQwg4jLtubirE5T-8JMjS6SWRfjeWdHmzFHngFxLkCayai7j8Bf8QoorBT0_zdcXYnzTKL3W9TDHmHdvQ4M8C7RVe3_NtNpJPm4ErmdWDL1NecsA8HUxWz5m6Y0FY7z8KO9hYpsRsj5MS4Q8zyldqvs91rx0" style="width:100%; height:600px;" ></iframe>
+       </textarea>
       </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>
-      </div>
+          <button id="btGetElementsFromLayer">List Elements from layer</button>
+          <select id="format">
+          <option id="xml" selected value="xml">XML</option>
+          <option id="json" value="json">JSON</option>
+        </select> <small>Output format</small> Limit:
+        <input type="limit" name="limit" id="limit" size="4" value="2"><br><br>
+        </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>
       <h2>Layers</h2>
@@ -83,11 +80,29 @@
       <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="https://unpkg.com/@vidro/map-handler@1.0.8/dist/map-handler.js"></script>-->
     <script src="../../dist/map-handler.js"></script>
-    <script src="../full/tester.js"></script>
-    <script src="./vidromap.js"></script>
+    <script src="../full/taigua.js"></script>
+    <script src="./index.js"></script>
   </body>
 </html>

package/examples/xavi/index.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <link rel="stylesheet" type="text/css" href="./css/fulla.css" media="screen" />
+<body>
+<div><iframe id="map-frame" name="map-frame" width="100%" height="750" allow="geolocation"
+    src="https://component.vidrosoftware.com?sessionToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJmYzYyYmY3ZTcyN2I5N2MxMTU3YzRjODQ0MjgxOGYyM2E5MDM0MmYyIiwiZGF0YSI6eyJ6b29tIjo5LCJiYWNrZ3JvdW5kIjoiQ2FydG9EQkxpZ2h0Iiwic3JpZCI6bnVsbCwiZXh0ZW50IjpudWxsLCJnZW9zZXJ2aWNlIjoiUUdJUyIsIm5hbWUiOiJQVU5UU01PU1RSRUlHMiIsInByZXZpZXciOmZhbHNlLCJhcGkiOiJodHRwczpcL1wvYXBpLnZpZHJvc29mdHdhcmUuY29tXC8iLCJ0eXBlIjoidmlkcm9tYXAiLCJ0b2tlbiI6ImIzYWM0N2M0MDIzYzJiMjBmNTU2MGVkZGFlMzllMDIyIiwic2hvd19sYXllcnMiOiJQVU5UU01PU1RSRUlHIiwiaWQiOjE5MSwibG9nbyI6Imh0dHBzOlwvXC93d3cudmlkcm9zb2Z0d2FyZS5jb21cL2xvZ29zXC9WSURSTy5zdmcifX0.V810R82nV0qpw4UcZQuUfINuTeCXSOX7bOwJzMxWurTcHXw-Zxlzb753aQuI0-biodJQrIvV_MQMh5PJImrKQOEEDa-z4pDiEhiHo1uAdOHLRHBmcdG7p_ejRVc76LGeIF3Dh566pnPPAFZRSdsd_tS5Wdeye84OTyUoQG9oZ27UsE-ctr43Umlo1oi-As0g41ITv6nuao51hSd1xOAqozKYqf1IUVY-z4g9EbvVikOn8RVs9BIedQOA3YtKPeV_UXMpjBIWgjnJDCkty08DYxZGsxnaoKo2YoBOTR9deaRIEVygvXPY485hJY3mD25SSmuJof474WlpmyVqSPZTunAMU7uRBCV-XpMYb9hlLzG0mXB26E-l41PEZGwPsBi0p-QvnYFcUhT2F9pZckcI63lxU4-XRdaTbaG0N3Aznk9zO6_RC3QEHp6fLaq74zrMUbOROR5gkBmEAg28PkUNv4zMPV91lcx6qLJVkO7M_4uzr9bSJmifC7XFvm5MiRSgdfEVCG4-TNnc_V-ake_ijNAFU-YsmSoZ2HejbZf61uemYu6S8_JnTAS1fGamv4DA4L0cDsCfNcwtbC-yIaQeRdq36b1Q612RcWIChX8MHpb_RoRfrI-lLsyf8VgX24I0piAAq9TAIsk2UYFu10ebYR0kpeMzXS0wxkKE-ArfTFU"></iframe>
+</div>
+<div id="botonera">
+    <button id="btZoomIn" name="btZoomIn"> <img id="img" src="./img/zoom-in.png"/></button>
+    <button id="btZoomOut" name="btZoomOut"><img id="img" src="./img/zoom-out.png"></button>
+    <button id="btPosition" name="btPosition"><img id="img" src="./img/geo.png"></button>
+    <button id="btZoomToCoordinates" name="btZoomToCoordinates"><img id="img" src="./img/geo.png"></button>
+    <button id="btGetElementsFromLayer" name="btGetElementsFromLayer">Get Elements from layer</button>
+    <br>
+    <label>Cercar:</label>
+      <ul>
+        <li><a href="">Punt 1</a></li>
+        <li><a href="">Punt 2</a></li>
+      </ul>
+  </div>
+  <p>
+    <a href="http://jigsaw.w3.org/css-validator/check/referer">
+        <img style="border:0;width:88px;height:31px"
+            src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
+            alt="¡CSS Válido!" />
+        </a>
+    </p>
+<div id="messages"></div>
+</body>
+<script src="https://unpkg.com/@vidro/map-handler@1.0.7/dist/map-handler.js"></script>
+<script src="main.js"></script>
+</html>

package/examples/xavi/main.js ADDED Viewed

@@ -0,0 +1,160 @@
+var sessionToken =
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJleHAiOjE2NTQ5MzMyMTksImF1ZCI6ImM1NzhjY2IyODFlMTY1ZGEwODljZWZlYzgxMGE5NDliNDllYWU5ODEiLCJkYXRhIjp7Inpvb20iOjksImJhY2tncm91bmQiOiJDYXJ0b0RCTGlnaHQiLCJzcmlkIjpudWxsLCJleHRlbnQiOm51bGwsImdlb3NlcnZpY2UiOiJRR0lTIiwibmFtZSI6IlBVTlRTTU9TVFJFSUcyIiwicHJldmlldyI6dHJ1ZSwiYXBpIjoiaHR0cHM6XC9cL2FwaS52aWRyb3NvZnR3YXJlLmNvbVwvIiwidHlwZSI6InZpZHJvbWFwIiwidG9rZW4iOiIwZGNkZTI2MjdhNDk0MTcxNjk0YTIxZmFmNjcwNmE5NiIsInNob3dfbGF5ZXJzIjoiUFVOVFNNT1NUUkVJRyIsImlkIjoxOTEsImxvZ28iOiJodHRwczpcL1wvd3d3LnZpZHJvc29mdHdhcmUuY29tXC9sb2dvc1wvVklEUk8uc3ZnIn19.qq2NOgCYPGqauE0IbCAoZoU8kHUaqhk9Z43f1ahFmNVAnjGpQ12xv2ITsvDR4g9LhfJg2s3MQaUKreZQTesIvDPLJGrwrCriDiBrsHnfgh0S0G3wQdUw58KxQapVVJKqznCK9QVaCQiA2xAm4HcLeRBHGpjd7f0sRa1kkGc-MGUkT5-S4WfPhJa7svs2YKM2n17MRBR5KCI6Ujlw-HMTt-UnBFs7CcHcvq-P5rbEs4UzMmvAiwM3Do-w3Mwx2fAeTq3RD1TdAobvPM3SiFKjoQINDW-4zj3Ds0Iuc2NNdIGzJX7hKelD80hXm5iHO3N8M-Du8lX2YCQS1qkz-XeKmRhKkLP_WCDC1ry1yKwTvd6xWvR_Hz1YbeAm6jmUYp6gIf0UZl_ZuwA-UQjMCWWmDrNvO9it215OwUEDPGznuvTfg-ESNLpmvxkedQoIsrVIRuSMwH4Vk990OMXSvYsZbJJZb71Z9BA1HhMQQ-ifT77m0vnBBfqeBikRAUhm0-uQq97JMRrb9GC9Pg_IQwg4jLtubirE5T-8JMjS6SWRfjeWdHmzFHngFxLkCayai7j8Bf8QoorBT0_zdcXYnzTKL3W9TDHmHdvQ4M8C7RVe3_NtNpJPm4ErmdWDL1NecsA8HUxWz5m6Y0FY7z8KO9hYpsRsj5MS4Q8zyldqvs91rx0"
+  var clickedCoordinates = null;
+var communicator = new VidroMaps.Communicator({
+  sessionToken: sessionToken,
+});
+var selected_layer; //active layer
+//ZoomIn -------------------------------------------------------------
+var btZoomIn = document.getElementById("btZoomIn");
+btZoomIn.addEventListener("click", function () {
+  console.log("Zoom In");
+  communicator.ZoomIn();
+});
+//ZoomOut-------------------------------------------------------------
+var btZoomOut = document.getElementById("btZoomOut");
+btZoomOut.addEventListener("click", function () {
+  console.log("Zoom Out");
+  communicator.ZoomOut();
+});
+//GeoPosicionament----------------------------------------------------
+var btZoomToCoordinates = document.getElementById("btZoomToCoordinates");
+/*btZoomToCoordinates.addEventListener("click", function () {
+  //console.log("m'han clicat i demanat geolocalitzacio");
+  //containerMessages.innerHTML = `Coordinates -> x: ${data.coordinates[0]}, y: ${data.coordinates[1]}`;
+  //communicator.zoomToCoordinates;
+   communicator.zoomToCoordinates(419006.12985785044, 4576698.8136144625, 18);
+   console.log("llego")
+});
+*/
+//zoomTocoordinates
+if(btZoomToCoordinates){
+	btZoomToCoordinates.addEventListener("click", function(){
+    console.log("btZoomToCoordinates clicked" )
+		let level = 18;
+		if(document.getElementById('zoomLevelToCoordinates')){
+		 	//zoom Level
+		 	level = document.getElementById('zoomLevelToCoordinates').value
+		 }
+		if(clickedCoordinates){
+			  communicator.zoomToCoordinates(clickedCoordinates[0],clickedCoordinates[1],level);
+			}else{
+				console.error("No coordinates provided");
+			}
+	});
+}
+var btZoomToExtent = document.querySelector("#btZoomToExtent");
+//capa actual
+var currentActiveLayer = null;
+function cleanContainers(){
+	Error_container.innerHTML = '';
+	Result_container.innerHTML = '';
+}
+//per veure les capas
+communicator.on("layers", function(data){
+  console.log("layers received",data);
+  //fillDisplayedLayersSelect(data);
+  selected_layer = data[0]; //select first layer from available layers
+});
+//error event
+communicator.on("error", function(data){
+  console.error("error",data);
+  cleanContainers();
+  Error_container.innerHTML = data.error;
+});
+//clicked coordinates
+communicator.on("coordinates", function (data) {
+  console.info("coordinates", data);
+  clickedCoordinates = [data.coordinates[0], data.coordinates[1]];
+  containerMessages.innerHTML = `Clicked coordinates -> x: ${data.coordinates[0]}, y: ${data.coordinates[1]}`;
+});
+//event geolocation
+communicator.on("geolocation", function(data){
+  console.info("geolocation",data);
+  containerMessages.innerHTML= `Geolocation: -> ${data}`;
+  cleanContainers();
+});
+//info event
+communicator.on("info", function(data){
+  console.log("info received",data);
+  var dataToRender = data.data;
+  //depending on infoType, data.data can be an string or a JSON
+  if(data.infoType==="giswater"){
+   dataToRender = JSON.stringify(data.data)
+  }
+  cleanContainers();
+  Result_container.innerText = dataToRender;
+});
+var containerMessages = document.getElementById("messages");
+//geolocation
+communicator.on("geolocation", function(data){
+  console.info("geolocation",data);
+  cleanContainers();
+  result_container.innerHTML = `Clicked coordinates -> x: ${data.coordinates[0]}, y: ${data.coordinates[1]}`;
+});
+communicator.on("onZoomChange", function (data) {
+  console.log("onZoomChange event", data);
+  //containerMessages.innerHTML = `Zoom aplicat: ${data}`;
+});
+communicator.on("loaded", function (data) {
+  console.log("loaded event", data);
+});
+//zoom to extent
+if(btZoomToExtent){
+	btZoomToExtent.addEventListener("click", function(){
+		cleanContainers();
+	  	communicator.zoomToExtent();
+	});
+}
+//info event
+communicator.on("info", function (data) {
+  console.log("info received", data);
+  var dataToRender = data.data;
+  //depending on infoType, data.data can be an string or a JSON
+  if (data.infoType === "giswater") {
+    dataToRender = JSON.stringify(data.data);
+  }
+  containerMessages.innerText = dataToRender;
+});
+//NEW
+var btGetElementsFromLayer = document.querySelector("#btGetElementsFromLayer");
+if(btGetElementsFromLayer){
+  btGetElementsFromLayer.addEventListener("click", function(){
+    let limit = document.getElementById('limit') ? document.getElementById('limit').value : 100;
+    let format = document.getElementById('format') ? document.getElementById('format').value : 'xml';
+    communicator.getElementsFromLayer(selected_layer,limit,format);
+  });
+}

package/flows.md ADDED Viewed

@@ -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 CHANGED Viewed

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