@vidro/map-handler 1.3.1 → 1.3.3

package/examples/taigua/main.js

@@ -1,490 +0,0 @@
-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
-
-//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");
-});
-
-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.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);
-});
-
-//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("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/tester.css

@@ -1,74 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-body{
-  background-color: ghostwhite;
-  color: lightslategrey;
-  font-family: Hack, monospace;
-  padding: 20px;
-}
-
-#sessionToken{
-  display: none;
-}
-
-#iframes-container{
-  display: flex;
-  justify-content: space-between;
-  gap: 25px;
-  margin: 25px 0;
-}
-
-iframe{
-  background-color: white;
-  border-radius: 5px;
-  overflow: hidden;
-  border: none;
-  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);
-}
-
-iframe[name=map-frame]{
-  padding: 10px;
-}
-
-pre{
-  overflow: scroll;
-  
-}
-.error{
-  color: red;
-  font-weight: bold;
-}
-.hide{
-  display: none;
-}
-.form{
-  margin: 20px;
-
-}
-.form div{
-  padding: 10px;
-
-}
-
-#Error_container{
-  color: red;
-  font-weight: bold;
-}
-#Result_container{
-  color: blue;
-  font-size: 10px;
-}
-
-small{
-  color: #ccc;
-
-
-}
-
-
-
-
-
-

package/examples/vidromap/index.js

@@ -1,20 +0,0 @@
-
-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;
-		}
-	});
-}