@vidro/map-handler 1.1.4 → 1.1.16

package/examples/taigua/main.js

@@ -1,41 +1,490 @@
-var sessionToken ="eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiI3YWU4NzJmODJjMzk0OTc2NDk0MzBjZGYyZGVhNDdjYWFhMzEyODFmIiwiZGF0YSI6eyJ6b29tIjo5LCJiYWNrZ3JvdW5kIjoiQ2FydG9EQkxpZ2h0Iiwic3JpZCI6bnVsbCwiZXh0ZW50IjpudWxsLCJnZW9zZXJ2aWNlIjoiUUdJUyIsIm5hbWUiOiJJbnZlcnNpb25zVEFJR1VBIiwicHJldmlldyI6ZmFsc2UsImFwaSI6Imh0dHBzOlwvXC9hcGkudmlkcm9zb2Z0d2FyZS5jb21cLyIsInR5cGUiOiJ2aWRyb21hcCIsInRva2VuIjoiMmE4MjUzYzY0NWY1MjQ5MmM0Yjc3YTNkNjQ2ZmI0YWEiLCJzaG93X2xheWVycyI6IiIsImlkIjoyMDAsImxvZ28iOiJodHRwczpcL1wvdGFpZ3VhLmNhdFwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMVwvMDdcL2xvZ28ucG5nIn19.K9D42ILcYlbJAGpTo96nCrENP_9ok_1RW_hdlJDoZFT3Q32DBvx7U8R4OeuC7HrlIi07PLXTdBb8x96jKkwwy-8pRWBYVRj50QYxh6-kGSZRSMhRFbSL27fKzFWmkZR1A2dmidWe5U4-BPbCOkhxERVcSFFupBYBImz-Fyix3K2COoXyajMshmZwcs4ew6WQ8YgsCayBY4nAuhgW12coPTLxdx33PtCKYSMsTV_d-czxRFD0CA0-PZlTFHK0xYX9lRpvLAkfYzJ_JrZ8txETHXelQeBtVJi-3qhEFE5AWQKQRQ3V-50CBbUD_L9ljDDJDOcgIr_lg8bMaXr0M4Y6D9Uvcm8AsTZ_Vg61oSIsZKv6AT1Gf4C8F5hc2mD7KDFfwUQMzJ6bLdvTF1mLTjq8vueDgRjFmYZcA8X5fDMOTt1LiPuC3pS06PMhfED6xhg6pIVLhmBtrXn7zsQwvV-JopjoYxDL2UMf4dfBG1lsqcAc8vNhU1p2YGFzxj01UZ_a9x89Dgn2uORNQPbWO6vEaXjertmyv3zPX9gQ0_gt97mDhLOLl9F995G-UBWXU6h6TDqu4sLjHxVmPPlOb84WOf6xxQLWfmDmilcwi54fJgs_tGXhS9F0iJ8Np_5X-YmRx5dYG9pBjFAwbcAeb4kbk3UN8ZyN1kqraM_Lv_DO73A";
-var clickedCoordinates = null;
+var sessionToken =
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJleHAiOjE2ODIwNzk1NTksImF1ZCI6ImY0ODkxOWMwN2IzOGE5YzlmMmUzZDAyYWQ1NGQxNzFiYzY5ZTczNzUiLCJkYXRhIjp7Inpvb20iOjksImJhY2tncm91bmQiOiJDYXJ0b0RCTGlnaHQiLCJzcmlkIjpudWxsLCJleHRlbnQiOm51bGwsImdlb3NlcnZpY2UiOiJRR0lTIiwibmFtZSI6IlBST1ZBMjAwNDIwMjNWMyIsInByZXZpZXciOnRydWUsImFwaSI6Imh0dHBzOlwvXC9hcGkudmlkcm9zb2Z0d2FyZS5jb21cLyIsInR5cGUiOiJ2aWRyb21hcCIsInRva2VuIjoiZWE1NzU5ZGYwYzU1YmJiYzJkNTdiYWY4ZjM4YTMyZDAiLCJzaG93X2xheWVycyI6Ik9CUkVTX0VOX0VYRUNVQ0lPX1YyLE9CUkVTX0ZJTkFMSVRaQURFU19WMixPQlJFU19QTEFOSUZJQ0FERVNfVjIsVE1fVEVSUkFTU0EiLCJpZCI6MjE5LCJsb2dvIjoiaHR0cHM6XC9cL3d3dy52aWRyb3NvZnR3YXJlLmNvbVwvbG9nb3NcL1ZJRFJPLnN2ZyJ9fQ.NwNbZrcYxm_hy8HbwRaEBjWoxGoEH1voUIraCaL7jc0ZwjotYtMABmfxW1SqqJPOALse1z61-r3odaeEW0g0nqKnlfbveeikO5viCo01L0gq-CJJdK4MemPEA-o7JgRqN3SImRaIUncJ3vrwtX-URmh2v_xp2YSzxyRYESOjlOhecmPLaUyP2T9S9nawg8Yx2y8QyPRAwauX_vAkE6u2K2QSfQPIVw0x7zy6v3WgzEGu6i3f5_hO14d10HB2QkhXm_XNj-yXcNB7djk30p7C1GwJH-VZxg6Ye3smyVNG6x0yLiWMUBJbPibsIdZFhlFUgBnYpjYP9vk_OLbzWIK5EKih99f584ohv_L9K4pat_4-ou265_0wvjM7iBQLykJddyNUHbcVgGJgKjeMw5glFGbpfLct9u6W7uTIWpjJdg1rwCNrrQBhgmGVCU8Luxj-durelRk7eQjXrl3ti0UJ4sXB09UKM-5AOXHwIMVB4CnpRL_-9zZD5-a_j1Jh5ozyyG6g2AdqpySXR_BLE_kph1-l3d3x6EwZCO5bfd_Z-lzrhUjwuMpoUKzzGp5JmEwjcWkzvsDEDu9XYuEDeU4zw57B6436MJFipnHXrAkuapyfjx1TZsSEuEh47B8x_Rm2hl65467NrDD5PeSauY2s75zB1OAOD8j7W072G7cbc4w";
+//var clickedCoordinates = null;
 var communicator = new VidroMaps.Communicator({
   sessionToken: sessionToken,
 });
+var selected_layer; //active layer
 
-communicator.on("onZoomChange", function (data) {
-  console.log("onZoomChange event", data);
+//var per geolocalització
+var geoxy;
 
+//codi per amagar parts del html ///////////////////////////////////////
+//document.getElementById(id).style.visibility = "visible"; // show
+//document.getElementById(btZoomToCoordinates).style.visibility = "hidden"; // hide
+///////////////////////////////////////////////////////////////////////
+
+//ZoomIn -------------------------------------------------------------ok
+var btZoomIn = document.getElementById("btZoomIn");
+btZoomIn.addEventListener("click", function () {
+  //communicator.Geolocalize(true);
+  console.log("Zoom In");
+  communicator.ZoomIn();
+});
+
+//ZoomOut-------------------------------------------------------------ok
+var btZoomOut = document.getElementById("btZoomOut");
+btZoomOut.addEventListener("click", function () {
+  //communicator.Geolocalize(true);
+  console.log("Zoom Out");
+  communicator.ZoomOut();
+});
+//codi per butons caper
+/***codi per mostrar i amagar layers**/
+var btOfi = document.getElementById("btOfi");
+btOfi.addEventListener("click", function () {
+  console.log("Activo capa Obra Finalitzada");
+  communicator.toggleLayer("OBRES_FINALITZADES_V2");
+});
+var btOex = document.getElementById("btOex");
+btOex.addEventListener("click", function () {
+  console.log("Capa Obra Executada");
+  communicator.toggleLayer("OBRES_EN_EXECUCIO_V2");
+});
+var btOpl = document.getElementById("btOpl");
+btOpl.addEventListener("click", function () {
+  console.log("Capa Obra Planificada");
+  communicator.toggleLayer("OBRES_PLANIFICADES_V2");
+});
+var btOtm = document.getElementById("btOtm");
+btOtm.addEventListener("click", function () {
+  console.log("TM_TERRASSA");
+  communicator.toggleLayer("TM_TERRASSA");
 });
-communicator.on("error", function (data) {
-  console.log("error", data);
 
+var btMostraDades = document.getElementById("btGetElementsFromLayer");
+btMostraDades.addEventListener("click", function () {
+  console.log("Mostrar Dades.");
 });
+//Geolocation---------------------------------------------------------ok
+var btGeoLocation = document.getElementById("btGeoLocation");
+//quan cliquem al boto geolocalització executem->
+btGeoLocation.addEventListener("click", function () {
+  console.log("Demanada Geolocalització");
+  communicator.Geolocalize(true);
 
-communicator.on("loaded", function (data) {
-  console.log("loaded event");
-  
- if(data.what==="map"){
+  /////////////////////////////////////////////
+  communicator.ZoomIn();
+  console.log("Geolocalitzo i aplico zoom x1");
+  //communicator.Geolocalize(true);
+  //communicator.ZoomIn();
+  //console.log("Geolocalitzo i aplico zoom x2");
+  //communicator.Geolocalize(true);
+  //communicator.ZoomIn();
+  //console.log("Geolocalitzo i aplico zoom x3");
+  //communicator.Geolocalize(true);
+  //communicator.ZoomIn();
+  //console.log("Geolocalitzo i aplico zoom x4");
+  //communicator.Geolocalize(true);
+  //communicator.ZoomIn();
+  //console.log("Geolocalitzo i aplico zoom x5");
+  //communicator.Geolocalize(true);
+  //communicator.ZoomIn();
+  //console.log("Geolocalitzo i aplico zoom x6");
+  //communicator.Geolocalize(true);
+});
 
-  setTimeout(()=>{
-    communicator.toggleLayer('inversions', {gutter:null, transparent: true, singletile: true});
-  },1000);
+//zoomTocoordinates........................................................??
+if (btZoomToCoordinates) {
+  btZoomToCoordinates.addEventListener("click", function (geoXY) {
+    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() {
+  containerMessages.innerHTML = "";
+  result_container.innerHTML = "";
+}
+
+//////////////////////////////////////////////////////////////////////////////////////
+//events interceptats pel communicator i que fem amb ells. ///////////////////////////
+//////////////////////////////////////////////////////////////////////////////////////
+//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
+  communicator.setActiveLayer(selected_layer);
+});
+
+//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);
-
+  console.info("Clic at coordinates", data);
+  //communicator.Geolocalize(true);
+  //geoxy.coordinates[0]= data.coordinates[0];
+  //geoxy.coordinates[1]= data.coordinates[1];
+  communicator.infoFromCoordinates("wms", selected_layer, null, "json");
   clickedCoordinates = [data.coordinates[0], data.coordinates[1]];
-  
+  //result_container.innerHTML = `Clicked coordinates -> x: ${data.coordinates[0]}, y: ${data.coordinates[1]}`;
+});
+
+//event geolocation
+communicator.on("geolocation", function (data) {
+  console.info("geolocation", data);
+  //communicator.Geolocalize(true);
+  try {
+    //provo d'agafar geoxy
+    console.log("intento agafar geoxy");
+    data.coordinates[0] = geoxy.coordinates[0];
+    data.coordinates[1] = geoxy.coordinates[1];
+    console.log("geoxy agafat");
+  } catch {
+    //no fem res
+    console.log("No hi ha geoxy");
+  }
+  console.log(
+    "geolocation data:" + data.coordinates[0] + ", " + data.coordinates[1]
+  );
+
+  communicator.zoomToCoordinates(data.coordinates[0], data.coordinates[1], 30);
+  //cleanContainers();
+  result_container.innerHTML = `geolocaiton: coordinates -> x: ${data.coordinates[0]}, y: ${data.coordinates[1]}`;
+});
+
+var containerMessages = document.getElementById("messages");
+
+//event onZoomchange
+communicator.on("onZoomChange", function (data) {
+  console.log("onZoomChange event", data);
+  cleanContainers();
+  //communicator.Geolocalize(true);
+  //containerMessages.innerHTML = `Zoom aplicat: ${data}`;
+});
+
+//event loaded
+communicator.on("loaded", function (data) {
+  // communicator.Geolocalize(true);
+
+  communicator.setCustomColors({
+    geom_stroke_color: "rgb(19, 39, 99,0.5)",
+    geom_fill_color: "rgb(19, 39, 99,0.5)",
+    geom_stroke_width: 1,
+    geom_shape: "circle",
+    geom_radius: 100,
+  });
+
+  console.log("loaded event", data);
 });
 
+//zoom to extent
+if (btZoomToExtent) {
+  btZoomToExtent.addEventListener("click", function () {
+    cleanContainers();
+    //communicator.Geolocalize(true);
+    communicator.zoomToExtent();
+  });
+}
+
+//zoom to coordinates
+if (btZoomToCoordinates) {
+  btZoomToCoordinates.addEventListener("click", function (data) {
+    cleanContainers();
+    //   communicator.Geolocalize(true);
+    geoxy = data;
+    console.log(
+      "zoomToCoordinate data:" +
+        data.coordinates[0] +
+        ", " +
+        data.coordinates[1]
+    );
+    communicator.zoomToCoordinates(
+      data.coordinates[0],
+      data.coordinates[1],
+      30
+    );
+  });
+}
+
 //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 === "wms") {
+    dataToRender = JSON.stringify(data.data);
+  }
+  containerMessages.innerText = dataToRender;
+  console.log( "Info: " + dataToRender);
+
+  let options = {
+    'geom': `POINT(${clickedCoordinates[0]} ${clickedCoordinates[1]})`,
+    'zoom':{
+      'type':'level',
+      'zoomLevel':18
+          }
+  }
+  console.log(options);
+  communicator.Highlight(options)
+
+
+});*/
+
+/*infoFromCoordinates('wms','Arc',null,'json); */
+
+//NEW AGAFA els elements de una capa i els mostra
+//Mostrar dades de la capa
+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
+      : "json";
+    communicator.getElementsFromLayer(selected_layer, limit, format);
+  });
+}
+
+//Layer elements list
+communicator.on("layerElements", function (data) {
+  console.log("layerElements received", data);
+  var dataToRender = data.data;
+  var contenedor = document.getElementById("contenedor");
+  //mostro el contenidor amb un fade
+  contenedor.style.display = "block";
+  //contenedor.fade(1000);
+  //depending on requested format, data.data can be an string (xml) or a JSON
+  console.log(
+    typeof dataToRender === "object"
+      ? JSON.stringify(dataToRender)
+      : dataToRender
+  );
+
+  //codi xavi Javascript
+  var dades = JSON.stringify(dataToRender);
+  var json = jQuery.parseJSON(dades);
+  var id;
+  var dadesx = "";
+
+  //entro a 1- bucle
+  for (let i in json) {
+    //entro a 2n Bucle
+    for (let j in json[i]) {
+      if (json[i][j].hasOwnProperty("id")) {
+        id = json[i][j].id;
+        console.log("id:" + id);
+        dadesx = dadesx + "<h4>" + id + "</h4>";
+      }
+      if (json[i][j].hasOwnProperty("properties")) {
+        //entro a 3r Bucle
+        var htmlgeoXY = [];
+        for (let k in json[i][j]) {
+          for (let x in json[i][j][k]) {
+            if (json[i][j][k].hasOwnProperty("Codi_Obra")) {
+              dato = json[i][j][k].Codi_Obra;
+              console.log("Codi Obra:" + dato);
+              dadesx = dadesx + "<span>Codi Obra:" + dato + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Nom_Obra")) {
+              dato2 = json[i][j][k].Nom_Obra;
+              console.log("Nom Obra:" + dato2);
+              dadesx = dadesx + "<span>Nom Obra:" + dato2 + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Longitud")) {
+              dato3 = json[i][j][k].Longitud;
+              console.log(dato3);
+              dadesx = dadesx + "<span>Longitud:" + dato3 + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Cost_Obra")) {
+              dato7 = json[i][j][k].Cost_Obra;
+              console.log(dato7);
+              dadesx = dadesx + "<span>Cost Obra:" + dato7 + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Estat_Obra")) {
+              dato8 = json[i][j][k].Estat_Obra;
+              console.log(dato8);
+              dadesx = dadesx + "<span>Estat Obra:" + dato8 + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Any")) {
+              dato9 = json[i][j][k].Any;
+              console.log(dato9);
+              dadesx = dadesx + "<span>Estat Obra:" + dato9 + "</span><br>";
+            }
+
+            if (json[i][j][k].hasOwnProperty("X")) {
+              dato4 = json[i][j][k].X;
+              console.log("x: " + dato4);
+              htmlgeoXY[0] = dato4;
+
+              //dadesx= dadesx +"<span>x: " + dato4 + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Y")) {
+              dato5 = json[i][j][k].Y;
+              console.log("y: " + dato5);
+              htmlgeoXY[1] = dato5;
+
+              // dadesx= dadesx +"<span>y: " + dato5 + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Pem")) {
+              dato6 = json[i][j][k].Pem;
+              console.log("dato6: " + dato6);
+              htmlgeoXY[1] = dato6;
+              dadesx = dadesx + "<span>PEM:" + dato6 + "</span><BR>";
+              //provo de crear un buto parametritzat per a fer el zoom a la coordenada que toqui
+              console.log("Dades a inserir a name: " + id);
+              dadesx =
+                dadesx +
+                "<button name='" +
+                id +
+                "' class='fitxa' onclick='anaraxy(" +
+                dato4 +
+                "," +
+                dato5 +
+                ")'>Visualitzar el punt: " +
+                id +
+                "</button><BR>"; //monto el buto per anar punt de mostreig
+
+              //dadesx= dadesx + "<button id='btZoomToCoordinates' name='btZoomToCoordinates' value= "+ geoXY[0] + "," +geoXY[1] + "><img id='img' src='./img/diana.png'></button><br>"
+            }
+            break;
+            //console.log("Objecte k: "+ k);
+          }
+        }
+      }
+    }
+  }
+
+  document.getElementById("contenedor").innerHTML = dadesx;
 });
+communicator.on("info", function (data) {
+  console.log("layerElements received", data);
+  var dataToRender = data.data;
+  //depending on requested format, data.data can be an string (xml) or a JSON
+  console.log(
+    typeof dataToRender === "object"
+      ? JSON.stringify(dataToRender)
+      : dataToRender
+  );
+
+  //codi xavi Javascript
+  var dades = JSON.stringify(dataToRender);
+  var json = jQuery.parseJSON(dades);
+  var id;
+  var dadesx = "";
+
+  //entro a 1- bucle
+  for (let i in json) {
+    //entro a 2n Bucle
+    for (let j in json[i]) {
+      if (json[i][j].hasOwnProperty("id")) {
+        id = json[i][j].id;
+        console.log("id:" + id);
+        dadesx = dadesx + "<h4>" + id + "</h4>";
+      }
+      if (json[i][j].hasOwnProperty("properties")) {
+        //entro a 3r Bucle
+        var htmlgeoXY = [];
+        for (let k in json[i][j]) {
+          for (let x in json[i][j][k]) {
+            if (json[i][j][k].hasOwnProperty("Codi Obra")) {
+              dato = json[i][j][k].codiObra;
+              console.log("Codi Obra:" + dato);
+              dadesx = dadesx + "<span>Codi Obra:" + dato + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Any")) {
+              dato2 = json[i][j][k].any;
+              console.log("Any:" + dato2);
+              dadesx = dadesx + "<span>Any:" + dato2 + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Longitud")) {
+              dato3 = json[i][j][k].Longitud;
+              console.log(dato3);
+              htmlgeoXY[0] = dato3;
+
+              dadesx = dadesx + "<span>Longitud: " + dato3 + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("X")) {
+              dato4 = json[i][j][k].X;
+              console.log("x: " + dato4);
+              htmlgeoXY[0] = dato4;
+
+              dadesx = dadesx + "<span>x: " + dato4 + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Y")) {
+              dato5 = json[i][j][k].Y;
+              console.log("y: " + dato5);
+              htmlgeoXY[1] = dato5;
+
+              dadesx = dadesx + "<span>y: " + dato5 + "</span><br>";
+            }
+            if (json[i][j][k].hasOwnProperty("Pem")) {
+              dato6 = json[i][j][k].PEM;
+              console.log("dato6: " + dato6);
+              htmlgeoXY[1] = dato6;
+              dadesx = dadesx + "<span>PEM:" + dato6 + "</span><BR>";
+              //provo de crear un buto parametritzat per a fer el zoom a la coordenada que toqui
+              console.log("Dades a inserir a name: " + id);
+              dadesx =
+                dadesx +
+                "<button name='" +
+                id +
+                "' class='fitxa' onclick='anaraxy(" +
+                dato4 +
+                "," +
+                dato5 +
+                ")'>Visualitzar el punt: " +
+                id +
+                "</button><BR>"; //monto el buto per anar punt de mostreig
+
+              //dadesx= dadesx + "<button id='btZoomToCoordinates' name='btZoomToCoordinates' value= "+ geoXY[0] + "," +geoXY[1] + "><img id='img' src='./img/diana.png'></button><br>"
+            }
+            break;
+            //console.log("Objecte k: "+ k);
+          }
+        }
+      }
+    }
+  }
+
+  document.getElementById("contenedor").innerHTML = dadesx;
+});
+
+function anaraxy(x, y) {
+  console.log("Entro a funcio de anar a X,Y");
+  communicator.Geolocalize(false);
+  communicator.zoomToCoordinates(x, y, 18);
+
+  let options = {
+    geom: `POINT(${x} ${y})`,
+    zoom: {
+      type: "level",
+      zoomLevel: 18,
+    },
+  };
+  var contenedor = document.getElementById("contenedor");
+  contenedor.style.display = "none";
+  console.log("Amago el panell un cop fet el zoom");
+  console.log(options);
+  communicator.Highlight(options);
+
+  //geoxy.coordinates[0]= x;
+  //geoxy.coordinates[1]= y;
+  console.log("dades xy funcio anar a X,Y: " + x + "," + y);
+}

package/examples/vidromap/index.php

@@ -14,7 +14,7 @@
 
       <div id="sessionToken"></div>
       <div>
-        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.eyJleHAiOjE2NTU4ODI0OTgsImF1ZCI6ImViZTY4YjcyYTJhYWQ3ZDUwZGM4NDI2NDhiZTE1Y2M4YmQyODU4ZmQiLCJkYXRhIjp7Inpvb20iOjksImJhY2tncm91bmQiOiJDYXJ0b0RCTGlnaHQiLCJzcmlkIjpudWxsLCJleHRlbnQiOm51bGwsImdlb3NlcnZpY2UiOiJRR0lTIiwibmFtZSI6IlBVTlRTTU9TVFJFSUcyIiwicHJldmlldyI6dHJ1ZSwiYXBpIjoiaHR0cHM6XC9cL2FwaS52aWRyb3NvZnR3YXJlLmNvbVwvIiwidHlwZSI6InZpZHJvbWFwIiwidG9rZW4iOiI3ODBkMTEwZWM1ZDc2ZDVjMTY1ZmYwNjA2MTA5ODFmMSIsInNob3dfbGF5ZXJzIjoiUFVOVFNNT1NUUkVJRyIsImlkIjoxOTEsImxvZ28iOiJodHRwczpcL1wvd3d3LnZpZHJvc29mdHdhcmUuY29tXC9sb2dvc1wvVklEUk8uc3ZnIn19.O4g8CSHm4JrfnpFk9632M7zBbO3MIz0xJ0RFRqD1BYabjlmsNF6odauTBi0OkNsvruGgbH4LOGfhv1-3GGyW7HgXga8QHnTNl8Zvx7IX5Rmgrah7MD0MLUWkAVnZEBgPGiat3LoMjp7LAMJz1UY5lFL9BYOQhe6qjusWJTvQ11Z-AO7ePVnvyn050653Lcf9L4QWUy5UNCE0WRJLNQBtoROg1OGcABsOfvuCx7iN6EBjlRZLYWPj570z4T4zNTZz9SloL6JYJsGSvOPn0BYtqAom4XsS_Alpm3h51Vw_DQh32vkVu1v-Vesm28M_a-HsyMq7x4ZQMbhy4hMgf7qOeUvJiD_Uxp8dlU-aL4XtByI1Yrb6MXcZD2m5BzAYaYLuY01jctRQvjaqSNqQajfYPybvmk-kvPpvYS-Qqhfyi2UIn5pOhqokM_eI5cU1LroyguLX1PVFDoLP2E1lsgg29muxDef5VFV7LkGxLEVDvh2SAiJn2TpyPYKjccoB3Kr6H2t4yfoL24j5wiGxnsGWE-DEdLt4ME2OmrjoEQ2mHxAVyuykkwU2gKpLwSnAvWzaQ8JIhHvOtL4Ff-UL2C34XZBA8_aKP3Oqz7Mj7ZQVomiaASVbPdjCpkMiHmdvuR3fOXSXyDKkOrr3mgfyrjSgjnmDDEaD7H8imS3nBpqJkUw"></iframe>
+        Paste your code here:<br> <textarea name="code" id="code" rows="10" cols="100" placeholder="">
        </textarea> 
       </div>
       <div>

package/package.json

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