@vidro/map-handler 1.0.18 → 1.1.0

package/examples/full/tester.js

@@ -43,6 +43,7 @@ var btDebug = document.querySelector("#btDebug");
 var btAddGeoJSONFromGiswater = document.querySelector(
   "#btAddGeoJSONFromGiswater"
 );
+var btCenterToCoordinates = document.querySelector("#btCenterToCoordinates");
 //override layer properties
 var overrideLayerProperties = document.querySelector(
   "#overrideLayerProperties"
@@ -63,6 +64,38 @@ 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
@@ -102,12 +135,13 @@ communicator.on("loaded", function (data) {
     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) {
   console.log("layers received", data);
@@ -136,6 +170,8 @@ 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) {
@@ -204,6 +240,12 @@ 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);
@@ -275,6 +317,16 @@ 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");
@@ -362,23 +414,45 @@ if (btGetToc) {
     communicator.getToc();
   });
 }
-;
-if(btChangeBackground){
+if (btChangeBackground) {
   btChangeBackground.addEventListener("click", function (evt) {
-    if(newBackground.value){
-      console.log("btChangeBackground",newBackground.value);
+    if (newBackground.value) {
+      console.log("btChangeBackground", newBackground.value);
       communicator.changeBackground(newBackground.value);
-    }else{
-      console.warn("no active layer")
+    } 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      ****************
@@ -502,9 +576,6 @@ if (btAddGeoJSON) {
       console.log("using geoJSON file");
       geoToSend = geoJSONContent;
     }
-    var fillcolor = document.querySelector("#fillcolor");
-    var strokecolor = document.querySelector("#strokecolor");
-
     //Check JSON
     try {
       let options = {
@@ -667,3 +738,76 @@ 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/package.json

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