@vidro/map-handler 1.1.3 → 1.1.15

package/examples/full/tester.js

@@ -43,7 +43,6 @@ var btDebug = document.querySelector("#btDebug");
 var btAddGeoJSONFromGiswater = document.querySelector(
   "#btAddGeoJSONFromGiswater"
 );
-var btCenterToCoordinates = document.querySelector("#btCenterToCoordinates");
 //override layer properties
 var overrideLayerProperties = document.querySelector(
   "#overrideLayerProperties"
@@ -62,40 +61,6 @@ var geom_radius = document.querySelector("#geom_radius");
 var btSetColors = document.querySelector("#btSetColors");
 var btGetElementsFromLayer = document.querySelector("#btGetElementsFromLayer");
 var btGetToc = document.querySelector("#btGetToc");
-var btChangeBackground = document.querySelector("#btChangeBackground");
-var newBackground = document.querySelector("#newBackground");
-//vector layer create
-var btAddVectorLayer = document.querySelector("#btAddVectorLayer");
-var vectorLayerName = document.querySelector("#vectorLayerName");
-var btRemoveVectorLayer = document.querySelector("#btRemoveVectorLayer");
-
-var btMeasureDistance = document.querySelector("#btMeasureDistance");
-var btMeasureArea = document.querySelector("#btMeasureArea");
-var btCancelMeasure = document.querySelector("#btCancelMeasure");
-
-var btDrawGeometryInLayer = document.querySelector("#btDrawGeometryInLayer");
-var geomAstext = document.querySelector("#geomAstext");
-var geomLabel = document.querySelector("#geomLabel");
-var layerToDraw = document.querySelector("#layerToDraw");
-var uuid = document.querySelector("#uuid");
-var btRemoveGeometryInLayer = document.querySelector(
-  "#btRemoveGeometryInLayer"
-);
-var fillcolor = document.querySelector("#fillcolor");
-var strokecolor = document.querySelector("#strokecolor");
-var radius = document.querySelector("#radius");
-var strokeWidth = document.querySelector("#strokeWidth");
-var font = document.querySelector("#font");
-var fontSize = document.querySelector("#fontSize");
-var fontStrokeColor = document.querySelector("#fontStrokeColor");
-var fontFillColor = document.querySelector("#fontFillColor");
-var fontStrokeWidth = document.querySelector("#fontStrokeWidth");
-var labelPlacement = document.querySelector("#labelPlacementfont");
-var fontSize = document.querySelector("#fontSize");
-var labelBaseline = document.querySelector("#labelBaseline");
-var labelAlign = document.querySelector("#labelAlign");
-var display = document.querySelector("#display");
-var maxReso = document.querySelector("#maxReso");
 
 var geoJSONName = null; //geoJSON file name
 var geoJSONContent = null; // geojson file content
@@ -129,18 +94,6 @@ communicator.on("geomAdded", function (data) {
 
 communicator.on("loaded", function (data) {
   console.log("loaded", data);
-  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: 200,
-    measure_fill_color: "rgba(222,218,125,0.63)",
-    measure_stroke_color: "rgba(255,0,0,1)",
-  });
-});
-communicator.on("capabilities", function (data) {
-  console.log("capabilities", data);
 });
 
 communicator.on("layers", function (data) {
@@ -170,8 +123,6 @@ communicator.on("coordinates", function (data) {
   cleanContainers();
   clickedCoordinates = [data.coordinates[0], data.coordinates[1]];
   Result_container.innerHTML = `Clicked coordinates -> x: ${data.coordinates[0]}, y: ${data.coordinates[1]}`;
-  if (geomAstext)
-    geomAstext.value = `POINT(${data.coordinates[0]} ${data.coordinates[1]})`;
 });
 
 communicator.on("activeLayer", function (data) {
@@ -240,12 +191,6 @@ communicator.on("availableWMSLayers", function (data) {
   console.log("availableWMSLayers", data);
   fillLayersSelect(data);
 });
-communicator.on("MeasureEnd", function (data) {
-  console.log("MeasureEnd", data);
-
-});
-
-
 
 function fillLayersSelect(options) {
   console.log("fillLayersSelect", options);
@@ -317,16 +262,6 @@ if (btZoomToCoordinates) {
   });
 }
 
-if (btCenterToCoordinates) {
-  btCenterToCoordinates.addEventListener("click", function () {
-    if (clickedCoordinates) {
-      communicator.centerMap(clickedCoordinates);
-    } else {
-      console.warn("No coordinates provided");
-      Error_container.innerHTML = "No coordinates provided";
-    }
-  });
-}
 if (btAddPoint) {
   btAddPoint.addEventListener("click", function () {
     communicator.AddGeom("Point");
@@ -414,45 +349,13 @@ if (btGetToc) {
     communicator.getToc();
   });
 }
-if (btChangeBackground) {
-  btChangeBackground.addEventListener("click", function (evt) {
-    if (newBackground.value) {
-      console.log("btChangeBackground", newBackground.value);
-      communicator.changeBackground(newBackground.value);
-    } else {
-      console.warn("no active layer");
-    }
-  });
-}
-
-//************* Vector layers create and delete */
-
-if (btAddVectorLayer) {
-  btAddVectorLayer.addEventListener("click", function (evt) {
-    if (vectorLayerName.value) {
-      console.log("btAddVectorLayer", vectorLayerName.value);
 
-      communicator.toggleLayer(vectorLayerName.value, {
-        gutter: gutter ? gutter.value : 5,
-        transparent: toggleTransparentLayer.checked,
-        layerType: "vector",
-      });
-      if (layerToDraw) layerToDraw.value = vectorLayerName.value;
-    } else {
-      console.warn("no vector layer name");
-    }
-  });
-}
-if (btRemoveVectorLayer) {
-  btRemoveVectorLayer.addEventListener("click", function (evt) {
-    if (vectorLayerName.value) {
-      console.log("btRemoveVectorLayer", vectorLayerName.value);
-      //communicator.changeBackground(newBackground.value);
-    } else {
-      console.warn("no vector layer name");
-    }
-  });
-}
+/*
+overrideLayerProperties
+gutter
+toggleTransparentLayer
+toggleSingleTile
+containerOverride*/
 
 //**********************************************************
 //**************            END LAYERS      ****************
@@ -475,7 +378,9 @@ if (btWMSInfo) {
     communicator.infoFromCoordinates(
       "wms",
       document.getElementById("layers").value,
-      5,
+      hitTolerance.value == "" || hitTolerance.value == null
+        ? 5
+        : parseInt(hitTolerance.value),
       document.getElementById("formatWMS").value
     );
   });
@@ -576,6 +481,9 @@ if (btAddGeoJSON) {
       console.log("using geoJSON file");
       geoToSend = geoJSONContent;
     }
+    var fillcolor = document.querySelector("#fillcolor");
+    var strokecolor = document.querySelector("#strokecolor");
+
     //Check JSON
     try {
       let options = {
@@ -738,76 +646,3 @@ if (btGetElementsFromLayer) {
 //**********************************************************
 //**************        END WMS TABLE       ****************
 //**********************************************************
-if (btDrawGeometryInLayer) {
-  btDrawGeometryInLayer.addEventListener("click", function () {
-    let geomAstext = document.getElementById("geomAstext").value;
-    let geomLabel = document.getElementById("geomLabel").value;
-    let layerToDraw = document.getElementById("layerToDraw").value;
-    let uuid = document.getElementById("uuid").value
-      ? document.getElementById("uuid").value
-      : Math.floor(Math.random() * 100);
-
-    let style = {
-      geom_stroke_color: strokecolor.value ? strokecolor.value : null,
-      geom_fill_color: fillcolor.value ? fillcolor.value : null,
-      geom_radius: radius.value ? Number(radius.value) : null,
-      geom_stroke_width: strokeWidth.value ? Number(strokeWidth.value) : null,
-      font: font.value ? font.value : "arial",
-      fontSize: fontSize.value ? fontSize.value : 12,
-      fontStrokeColor: fontStrokeColor ? fontStrokeColor.value : null,
-      fontFillColor: fontFillColor ? fontFillColor.value : null,
-      fontStrokeWidth: fontStrokeWidth ? fontStrokeWidth.value : null,
-      placement: labelPlacement ? labelPlacement.value : null,
-      baseline: labelBaseline ? labelBaseline.value : null,
-      align: labelAlign ? labelAlign.value : null,
-      maxReso: maxReso ? maxReso.value : null,
-      display: display ? display.value : null,
-    };
-
-    communicator.drawGeometryInLayer(
-      uuid,
-      layerToDraw,
-      geomAstext,
-      geomLabel,
-      style
-    );
-  });
-}
-if (btRemoveGeometryInLayer) {
-  btRemoveGeometryInLayer.addEventListener("click", function () {
-    let layer = document.getElementById("layerToDraw").value;
-    let uuid = document.getElementById("uuid").value
-      ? document.getElementById("uuid").value
-      : Math.floor(Math.random() * 100);
-
-    communicator.removeGeometryFromLayer(uuid, layer);
-  });
-  btRemoveGeometryInLayer;
-}
-
-//**********************************************************
-//**************           MEASURE          ****************
-//**********************************************************
-if (btMeasureDistance) {
-  btMeasureDistance.addEventListener("click", function () {
-    console.log("Button measureDistance clicked");
-    communicator.initMeasure('line','Clica para empezar a medir','Clica para continuar midiendo','Clica para continuar midiendo');
-
-  });
-}
-if (btMeasureArea) {
-  btMeasureArea.addEventListener("click", function () {
-    console.log("Button btMeasureArea clicked");
-    communicator.initMeasure('area','Clica para empezar a medir','Clica para continuar midiendo','Clica para continuar midiendo');
-  });
-}
-if (btCancelMeasure) {
-  btCancelMeasure.addEventListener("click", function () {
-    console.log("Button btCancelMeasure clicked");
-    communicator.cancelMeasure();
-  });
-}
-
-
-
-

package/examples/serverLess/dist/index.23420cfa.js

@@ -442,95 +442,92 @@ id) /*: string*/
 }
 
 },{}],"2X3X1":[function(require,module,exports) {
-require("axios");
-require("@vidro/map-handler");
-var _xml2jsonLight = require("xml2json-light");
+var _axios = require("axios");
 var _parcelHelpers = require("@parcel/transformer-js/lib/esmodule-helpers.js");
+var _axiosDefault = _parcelHelpers.interopDefault(_axios);
+var _vidroMapHandler = require("@vidro/map-handler");
+var _xml2jsonLight = require("xml2json-light");
 var _xml2jsonLightDefault = _parcelHelpers.interopDefault(_xml2jsonLight);
 // 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 apiUrl = "https://bmaps.bgeo.es/api/";
+const user = "test@bgeo.es";
+const pwd = "test.12345";
+const customLogo = "https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_2x_r2.png";
 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);
+// 1. Get BMAPS user token
+_axiosDefault.default.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
+  _axiosDefault.default.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 _vidroMapHandler.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";
+      }
+    });
+  }).catch(function (error) {
+    console.log(error);
+  });
+}).catch(function (error) {
+  console.log(error);
 });
-*/
 // DOM handlers
 closeInfo.addEventListener("click", evt => {
   infoContainer.style.display = "none";
@@ -549,7 +546,7 @@ const parseWMSInfo = data => {
   }
 };
 
-},{"axios":"7rA65","@vidro/map-handler":"4YjT0","xml2json-light":"4Mf7p","@parcel/transformer-js/lib/esmodule-helpers.js":"5gA8y"}],"7rA65":[function(require,module,exports) {
+},{"axios":"7rA65","@parcel/transformer-js/lib/esmodule-helpers.js":"5gA8y","@vidro/map-handler":"4YjT0","xml2json-light":"4Mf7p"}],"7rA65":[function(require,module,exports) {
 module.exports = require('./lib/axios');
 },{"./lib/axios":"4qfhW"}],"4qfhW":[function(require,module,exports) {
 'use strict';
@@ -2294,6 +2291,48 @@ module.exports = function isAxiosError(payload) {
   return (typeof payload === 'object') && (payload.isAxiosError === true);
 };
 
+},{}],"5gA8y":[function(require,module,exports) {
+"use strict";
+
+exports.interopDefault = function (a) {
+  return a && a.__esModule ? a : {
+    default: a
+  };
+};
+
+exports.defineInteropFlag = function (a) {
+  Object.defineProperty(a, '__esModule', {
+    value: true
+  });
+};
+
+exports.exportAll = function (source, dest) {
+  Object.keys(source).forEach(function (key) {
+    if (key === 'default' || key === '__esModule') {
+      return;
+    } // Skip duplicate re-exports when they have the same value.
+
+
+    if (key in dest && dest[key] === source[key]) {
+      return;
+    }
+
+    Object.defineProperty(dest, key, {
+      enumerable: true,
+      get: function () {
+        return source[key];
+      }
+    });
+  });
+  return dest;
+};
+
+exports.export = function (dest, destName, get) {
+  Object.defineProperty(dest, destName, {
+    enumerable: true,
+    get: get
+  });
+};
 },{}],"4YjT0":[function(require,module,exports) {
 var define;
 !(function (e, t) {
@@ -2929,48 +2968,6 @@ function replaceAttributes(xmlStr) {
     return xmlStr;
 }
 
-},{}],"5gA8y":[function(require,module,exports) {
-"use strict";
-
-exports.interopDefault = function (a) {
-  return a && a.__esModule ? a : {
-    default: a
-  };
-};
-
-exports.defineInteropFlag = function (a) {
-  Object.defineProperty(a, '__esModule', {
-    value: true
-  });
-};
-
-exports.exportAll = function (source, dest) {
-  Object.keys(source).forEach(function (key) {
-    if (key === 'default' || key === '__esModule') {
-      return;
-    } // Skip duplicate re-exports when they have the same value.
-
-
-    if (key in dest && dest[key] === source[key]) {
-      return;
-    }
-
-    Object.defineProperty(dest, key, {
-      enumerable: true,
-      get: function () {
-        return source[key];
-      }
-    });
-  });
-  return dest;
-};
-
-exports.export = function (dest, destName, get) {
-  Object.defineProperty(dest, destName, {
-    enumerable: true,
-    get: get
-  });
-};
-},{}]},["1sDb8","2X3X1"], "2X3X1", "parcelRequire2eac")
+},{}]},["1sDb8","2X3X1"], "2X3X1", "parcelRequire917b")
 
 //# sourceMappingURL=index.23420cfa.js.map