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

@vidro/map-handler 1.0.6 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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": {