@vidro/map-handler 1.3.14 → 2.0.0

package/examples/serverLess/main.js

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

package/examples/serverLess/package.json

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

package/examples/serverLess/readme.md

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

package/examples/simple/index.html

@@ -1,23 +0,0 @@
-<html>
-  <head>
-    <title>Vidro Maps Simple demo</title>
-    <link rel="stylesheet" href="../tester.css"></link>
-    <link rel="icon" type="image/png" href="https://www.vidrosoftware.com/favicon/favicon-32x32.png" sizes="32x32" />
-    <link rel="icon" type="image/png" href="https://www.vidrosoftware.com/favicon/favicon-16x16.png" sizes="16x16" />
-  </head>
-  <body onload="loadMap()">
-      <div>
-      <b>Run</b>
-      <br>
-      <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>
-      </div>
-      <button id="btZoomIn">Zoom In</button>
-      <button id="btZoomOut">Zoom Out</button>
-      <button id="btZoomToExtent">Zoom to extent</button>  
-    <script src="https://unpkg.com/@vidro/map-handler@1.0.0/dist/map-handler.js"></script>
-    <script src="./simple.js"></script>
-  </body>
-</html>

package/examples/simple/simple.js

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

package/examples/taigua/index.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html>
-<meta http-equiv=”Content-Type” content=”text/html"; charset=ISO-8859-1 />
-
-<head>
-    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
-</head>
-<link rel="stylesheet" type="text/css" href="./css/fulla2.css" media="screen" />
-
-<body>
-    <!---Menu Lateral Xavi-->
-
-
-    <div id="contenedor" name="contenedor" class="contenedor">
-        <text></text>
-        <button id="btTanca" name="btTanca">Tancar.</button>
-    </div>
-    <main class="main" style="position: relative;">
-
-        <img class="logo_taigua" src="img/logo.png"> </img>
-        <div id="botonera" style="position: relative;">
-
-            <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="btGeoLocation" name="btGeoLocation"><img id="img" src="./img/geo.png"></button>
-            <button id="btZoomToCoordinates" name="btZoomToCoordinates"><img id="img" src="">ZoomTocoord</button>
-            <button id="btOfi" name="btOfin">Obres Finalitzades.</button>
-            <button id="btOex" charset="UTF-8" name="btOfin">Obres en Execuci&oacute;.</button>
-            <button id="btOpl" name="btOfin">Obres Planificades.</button>
-            <button id="btOtm" name="btOfin">TM_TERRASSA.</button>
-            <button id="btGetElementsFromLayer" class="btGetElementsFromLayer" name="btGetElementsFromLayer">Mostrar
-                Dades</button>
-            <div id="messages"></div>
-            <div id="result_container"></div>
-            <div id="Error_container"></div>
-            <span id="error"></span>
-        </div>
-
-        <iframe id="map-frame" name="map-frame" width="100%" height="100%" allow="geolocation"
-            style="position: relative;"
-            src="https://component.vidrosoftware.com?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"></iframe>
-    </main>
-
-    <!---fins aqui el menu-->
-
-
-
-
-
-</body>
-
-<script src="https://unpkg.com/@vidro/map-handler@1.0.11/dist/map-handler.js"></script>
-<script src="main.js"></script>
-
-</html>