@vidro/map-handler 1.2.10 → 1.2.19

package/examples/react-next/shared/constants.js

@@ -0,0 +1,47 @@
+export const INFO_EVENTS = {
+  NO_RESULTS: "no results",
+  NO_LAYER: "no layer",
+  INVALID_GEOMETRY: "invalid geometry",
+  ZOOM_OVERFLOW: "zoomlevel overflow",
+  NO_GEOJSON_RESULTS: "no geojson results",
+};
+export const COMMON = {
+  START: "start",
+  REJECT: "reject",
+};
+export const GEOLOCATION_EVENTS = {
+  ERROR: "geolocation error",
+  GEOLOCATING: "localizing",
+  GEOLOCATED: "localized",
+  ERROR_USER_DENIED: "user denied geolocation",
+};
+
+export const MEASURING_EVENTS = {
+  MEASURING: "measuring",
+  MEASURE_END: "measured",
+};
+
+export const MAP_EVENTS = {
+  INFO: "info",
+  COORDINATES: "coordinates",
+  GET_TOC: "getToc",
+  ZOOM_CHANGE: "onZoomChange",
+  CENTER_CHANGE: "onCenterChange",
+  LOADED: "loaded",
+  ERROR: "error",
+  AVAILABLE_WMS_LAYERS: "availableWMSLayers",
+  CAPABILITIES: "capabilities",
+  GISWATER_FILTERS_APPLIED: "GiswaterFiltersApplied",
+  GEOLOCATION: "geolocation",
+  END_MEASURE: "MeasureEnd",
+  START_MEASURE: "MeasureStart",
+  UNLOADED: "unloaded",
+  CENTER_CHANGE: "onCenterChange",
+  ACTIVE_LAYER: "activeLayer",
+  WMS_LAYERS: "availableWMSLayers",
+  STATUS: "status",
+  GEOM_ADDED: "geomAdded",
+  LAYERS: "layers",
+  VERSION: "version",
+  SCREENSHOT: "screenshot",
+};

package/examples/react-next/styles/globals.css

@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Update tailwind to hide input type number arrows */
+@layer base {
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  color: #666666;
+  min-height: 100vh;
+  background-color: white;
+}

package/examples/react-next/tailwind.config.mjs

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+};

package/helpers.md

@@ -0,0 +1,45 @@
+##### Image to ArrayBuffer
+
+
+>Helper function to fetch image as ArrayBuffer
+
+```
+const fetchImageAsArrayBuffer = async (path) => {
+    try {
+      const response = await fetch(path); // Fetch the image from the path
+      const buffer = await response.arrayBuffer(); // Convert response to ArrayBuffer
+      return buffer; // Return the binary data
+    } catch (error) {
+      console.error("Error fetching image:", error);
+      throw error;
+    }
+  };
+```
+
+>Helper function to set image as ArrayBuffer with vanilla js
+
+
+```
+// Simulate a call to Dropbox or other service that can
+// return an image as an ArrayBuffer.
+var xhr = new XMLHttpRequest();
+
+// Use JSFiddle logo as a sample image to avoid complicating
+// this example with cross-domain issues.
+xhr.open( "GET", "http://fiddle.jshell.net/img/logo.png", true );
+
+// Ask for the result as an ArrayBuffer.
+xhr.responseType = "arraybuffer";
+
+xhr.onload = function( e ) {
+    // Obtain a blob: URL for the image data.
+    var arrayBufferView = new Uint8Array( this.response );
+    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
+    var urlCreator = window.URL || window.webkitURL;
+    var imageUrl = urlCreator.createObjectURL( blob );
+    var img = document.querySelector( "#photo" );
+    img.src = imageUrl;
+};
+
+xhr.send();
+```

package/package.json

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

package/src/index.js

@@ -1,5 +1,6 @@
 import { EventEmitter } from "events";
 import { iframeCommunicator } from "./shared/iframe-communicator";
+
 class Communicator extends EventEmitter {
   constructor(data) {
     super();
@@ -15,19 +16,25 @@ class Communicator extends EventEmitter {
     this.sessionToken = data.sessionToken;
   }
 
+  removeListener(event, listener) {
+    super.removeListener(event, listener);
+  }
   onMessageReceived = (e) => {
     switch (e.data.type) {
       case "onZoomChange":
-        this.emitEvent("onZoomChange", e.data.zoom, e.data.domId);
+        this.emitEvent("onZoomChange", e.data, e.data.domId);
+        break;
+      case "onCenterChange":
+        this.emitEvent("onCenterChange", e.data, e.data.domId);
         break;
       case "geomAdded":
-        this.emitEvent("geomAdded", e.data.geom_astext, e.data.domId);
+        this.emitEvent("geomAdded", e.data, e.data.domId);
         break;
       case "layers":
-        this.emitEvent("layers", e.data.layers, e.data.domId);
+        this.emitEvent("layers", e.data, e.data.domId);
         break;
       case "geoJSONlayers":
-        this.emitEvent("geoJSONlayers", e.data.layers, e.data.domId);
+        this.emitEvent("geoJSONlayers", e.data, e.data.domId);
         break;
       case "info":
         this.emitEvent("info", e.data, e.data.domId);
@@ -82,6 +89,22 @@ class Communicator extends EventEmitter {
       case "status":
         this.emitEvent("status", e.data, e.data.domId);
         break;
+      case "MeasureEnd":
+        this.emitEvent("MeasureEnd", e.data, e.data.domId);
+        break;
+      case "queue":
+        this.emitEvent("queue", e.data, e.data.domId);
+        break;
+      case "version":
+        this.emitEvent("version", e.data, e.data.domId);
+        break;
+      case "hover":
+        this.emitEvent("hover", e.data, e.data.domId);
+        break;
+      case "screenshot":
+        this.emitEvent("screenshot", e.data, e.data.domId);
+        break;
+
       //case "getLegend": this.emitEvent("getLegend", e.data,e.data.domId); break;
     }
   };
@@ -107,37 +130,74 @@ class Communicator extends EventEmitter {
     });
   };
 
-  AddGeom = (geomtype) => {
+  AddGeom = (geomtype, options) => {
     this.com.sendMessageToMap({
       type: "AddGeom",
       geom: geomtype,
+      texts: options?.texts,
+      style: options?.style,
+      drawOnEnd: options?.drawOnEnd,
+      showConfirm: options?.showConfirm,
       sessionToken: this.sessionToken,
     });
   };
 
+  CancelAddGeom = (s) => {
+    this.com.sendMessageToMap({
+      type: "CancelAddGeom",
+    });
+  };
+
+  loadMultipleLayers = (layers) => {
+    if (typeof layers !== "undefined") {
+      this.com.sendMessageToMap({
+        type: "loadMultipleLayers",
+        layers: layers,
+      });
+    } else {
+      this.emit("error", { error: "no layers" });
+    }
+  };
+
+  toggleGroup = (layers) => {
+    this.com.sendMessageToMap({
+      type: "toggleGroup",
+      layers,
+    });
+  };
+
   toggleLayer = (layer, properties) => {
     if (typeof properties === "undefined") {
       properties = {
         gutter: null,
         transparent: null,
         singletile: null,
+        zIndex: null,
       };
     }
 
     if (properties.singletile !== null) {
       if (typeof properties.singletile !== "boolean") {
         properties.singletile = null;
-        this.emit("error", { error: "singleTile must be a Boolean" });
+        this.emit("error", {
+          error: "singletile must be a Boolean",
+          type: "error",
+        });
       }
     }
-    if (properties.gutter !== "" && properties.gutter !== null) {
+    if (
+      properties.gutter !== "" &&
+      properties.gutter !== null &&
+      !properties.singletile
+    ) {
       if (isNaN(parseInt(properties.gutter))) {
         properties.gutter = null;
-        this.emit("error", { error: "Gutter must be a number" });
+        this.emit("error", { type: "error", error: "Gutter must be a number" });
       }
       if (properties.singletile) {
         properties.gutter = null;
         this.emit("error", {
+          type: "error",
           error:
             "Gutter can only be user with multitile layers; set singletile to false",
         });
@@ -147,7 +207,10 @@ class Communicator extends EventEmitter {
     if (properties.transparent !== null) {
       if (typeof properties.transparent !== "boolean") {
         properties.transparent = null;
-        this.emit("error", { error: "transparent must be a Boolean" });
+        this.emit("error", {
+          type: "error",
+          error: "transparent must be a Boolean",
+        });
       }
     }
     this.com.sendMessageToMap({
@@ -159,9 +222,27 @@ class Communicator extends EventEmitter {
       transparent: properties.transparent,
       singletile: properties.singletile,
       sessionToken: this.sessionToken,
+      zIndex: !isNaN(parseInt(properties.zIndex))
+        ? parseInt(properties.zIndex)
+        : null,
+    });
+  };
+
+  removeLayer = (layer) => {
+    this.com.sendMessageToMap({
+      type: "removeLayer",
+      layer: layer,
+      sessionToken: this.sessionToken,
     });
   };
 
+  displayLayer = (layer) => {
+    this.com.sendMessageToMap({
+      type: "displayLayer",
+      layer: layer,
+      sessionToken: this.sessionToken,
+    });
+  };
   setActiveLayer = (layer) => {
     this.com.sendMessageToMap({
       type: "setActiveLayer",
@@ -177,6 +258,22 @@ class Communicator extends EventEmitter {
     });
   };
 
+  bringLayerToTop = (layer) => {
+    this.com.sendMessageToMap({
+      type: "bringLayerToTop",
+      layer: layer,
+      sessionToken: this.sessionToken,
+    });
+  };
+
+  bringLayerToBottom = (layer) => {
+    this.com.sendMessageToMap({
+      type: "bringLayerToBottom",
+      layer: layer,
+      sessionToken: this.sessionToken,
+    });
+  };
+
   loadWMSAvailableLayers = () => {
     this.com.sendMessageToMap({
       type: "loadWMSAvailableLayers",
@@ -196,11 +293,69 @@ class Communicator extends EventEmitter {
       type: "highlight",
       geom: options.geom,
       zoom: options.zoom,
+      metadata: options?.data,
+      center: options?.center !== undefined ? options.center : false,
+      animate: options?.animate,
+      style: options?.style,
       sessionToken: this.sessionToken,
     });
   };
 
-  DrawGeometry = (geom, styles, name) => {
+  DrawGeometries = (geoms) => {
+    if (typeof geoms !== "undefined") {
+      this.com.sendMessageToMap({
+        type: "DrawGeometries",
+        geoms: geoms,
+      });
+    } else {
+      this.emit("error", { type: "error", error: "no geoms" });
+    }
+  };
+
+  RemoveGeometriesByProperty = (layer, property, value) => {
+    if (
+      typeof layer !== "undefined" &&
+      typeof property !== "undefined" &&
+      typeof value !== "undefined"
+    ) {
+      this.com.sendMessageToMap({
+        type: "RemoveGeometriesByProperty",
+        layer,
+        property,
+        value,
+      });
+    } else {
+      this.emit("error", {
+        type: "error",
+        error: "no layer, property or value",
+      });
+    }
+  };
+
+  UpdateGeometriesByProperty = (layer, property, value, style) => {
+    if (
+      typeof layer !== "undefined" &&
+      typeof property !== "undefined" &&
+      typeof style !== "undefined" &&
+      typeof value !== "undefined"
+    ) {
+      this.com.sendMessageToMap({
+        type: "UpdateGeometriesByProperty",
+        layer,
+        property,
+        value,
+        style,
+      });
+    } else {
+      this.emit("error", {
+        type: "error",
+        error: "no layer, property or value",
+      });
+    }
+  };
+
+  DrawGeometry = (geom, styles, name, id) => {
+    console.warn("DrawGeometry is deprecated. Use DrawGeometries");
     const sty = {
       stroke_color: styles.stroke_color ? styles.stroke_color : null,
       fill_color: styles.fill_color ? styles.fill_color : null,
@@ -212,7 +367,7 @@ class Communicator extends EventEmitter {
       //text
       font_color: styles.font_color ? styles.font_color : null,
       font: styles.font ? styles.font : null,
-      fontSize: styles.fontSize ? styles.fontSize : null,
+      font_size: styles.font_size ? styles.font_size : null,
       placement: styles.placement ? styles.placement : null,
       fontFillColor: styles.fontFillColor ? styles.fontFillColor : null,
       fontStrokeColor: styles.fontStrokeColor ? styles.fontStrokeColor : null,
@@ -220,6 +375,7 @@ class Communicator extends EventEmitter {
       baseline: styles.baseline ? styles.baseline : null,
       align: styles.align ? styles.align : null,
       display: styles.display ? styles.display : null,
+      offsetY: styles.offsetY ? styles.offsetY : null,
     };
 
     this.com.sendMessageToMap({
@@ -227,10 +383,25 @@ class Communicator extends EventEmitter {
       geom: geom,
       style: sty,
       name: name ? name : "highlight",
+      id: id ? id : Math.floor(Math.random() * 1000) + 1,
       sessionToken: this.sessionToken,
     });
   };
 
+  RemoveGeometry = (id, layer = null) => {
+    const _id = typeof id == "undefined" ? null : id;
+    if (!_id) {
+      console.error("No element id");
+      this.emit("error", { type: "error", error: "No element id" });
+      return;
+    }
+    this.com.sendMessageToMap({
+      type: "removeGeometry",
+      layer,
+      id: _id,
+    });
+  };
+
   zoomToExtent = () => {
     this.com.sendMessageToMap({
       type: "zoomToExtent",
@@ -238,6 +409,37 @@ class Communicator extends EventEmitter {
     });
   };
 
+  zoomToScale = (scale) => {
+    const allowedScales = [
+      "1:100",
+      "1:200",
+      "1:400",
+      "1:500",
+      "1:1000",
+      "1:2000",
+      "1:5000",
+      "1:10000",
+      "1:50000",
+    ];
+
+    if (!allowedScales.includes(scale)) {
+      console.error(
+        `Invalid scale: ${scale}. Allowed values are: ${allowedScales.join(
+          ", "
+        )}`
+      );
+      this.emit("error", {
+        type: "error",
+        error: `Invalid scale: ${scale}`,
+      });
+      return;
+    }
+    this.com.sendMessageToMap({
+      type: "zoomToScale",
+      sessionToken: this.sessionToken,
+      scale: scale,
+    });
+  };
   zoomToCoordinates = (lat, lon, zoomLevel) => {
     if (!isNaN(parseInt(zoomLevel))) {
       this.com.sendMessageToMap({
@@ -249,6 +451,15 @@ class Communicator extends EventEmitter {
     }
   };
 
+  zoomToGeometry = (geom, limits) => {
+    this.com.sendMessageToMap({
+      type: "zoomToGeometry",
+      sessionToken: this.sessionToken,
+      geom,
+      limits,
+    });
+  };
+
   infoFromCoordinates = (type, layer, hitTolerance, format) => {
     const _layer = typeof layer == "undefined" ? null : layer;
     const _hitTolerance =
@@ -294,10 +505,11 @@ class Communicator extends EventEmitter {
     });
   };
 
-  Geolocalize = (toggle) => {
+  Geolocalize = (toggle, options) => {
     this.com.sendMessageToMap({
       type: "Geolocalize",
       toggle: toggle,
+      options: options,
       sessionToken: this.sessionToken,
     });
   };
@@ -305,7 +517,7 @@ class Communicator extends EventEmitter {
   /* deprecated since v1.1.19 */
   toggleGiswaterTiled = (toggle, tiled) => {
     this.com.sendMessageToMap({
-      type: "toggleGiswaterTiled",
+      type: "toggleTiled",
       toggle: toggle,
       tiled: tiled,
       sessionToken: this.sessionToken,
@@ -362,7 +574,7 @@ class Communicator extends EventEmitter {
         sessionToken: this.sessionToken,
       });
     } else {
-      this.emit("error", { error: "No geoJSON data" });
+      this.emit("error", { type: "error", error: "No geoJSON data" });
       return;
     }
   };
@@ -382,7 +594,7 @@ class Communicator extends EventEmitter {
         sessionToken: this.sessionToken,
       });
     } else {
-      this.emit("error", { error: "No geoJSON data" });
+      this.emit("error", { type: "error", error: "No geoJSON data" });
       return;
     }
   };
@@ -397,7 +609,10 @@ class Communicator extends EventEmitter {
         try {
           filtersJson = JSON.parse(filters);
         } catch (e) {
-          this.emit("error", { error: "Filters is not a valid JSON" });
+          this.emit("error", {
+            type: "error",
+            error: "Filters is not a valid JSON",
+          });
           return;
         }
       }
@@ -408,7 +623,7 @@ class Communicator extends EventEmitter {
         sessionToken: this.sessionToken,
       });
     } else {
-      this.emit("error", { error: "No filters" });
+      this.emit("error", { type: "error", error: "No filters" });
       return;
     }
   };
@@ -423,18 +638,30 @@ class Communicator extends EventEmitter {
         try {
           filtersJson = JSON.parse(filters);
         } catch (e) {
-          this.emit("error", { error: "Filters is not a valid JSON" });
+          this.emit("error", {
+            type: "error",
+            error: "Filters is not a valid JSON",
+          });
           return;
         }
       }
+      const isValid = filtersJson.every((item) => Array.isArray(item.filters));
 
+      // isValid will be true if all elements have "filters" property that is an array
+      if (!isValid) {
+        this.emit("error", {
+          type: "error",
+          error: "Filters is not a valid JSON - missing filters array",
+        });
+        return;
+      }
       return this.com.sendMessageToMap({
         type: "setFilters",
         filters: filtersJson,
         sessionToken: this.sessionToken,
       });
     } else {
-      this.emit("error", { error: "No filters" });
+      this.emit("error", { type: "error", error: "No filters" });
       return;
     }
   };
@@ -447,7 +674,7 @@ class Communicator extends EventEmitter {
         sessionToken: this.sessionToken,
       });
     } else {
-      this.emit("error", { error: "No layer_name" });
+      this.emit("error", { type: "error", error: "No layer_name" });
       return;
     }
   };
@@ -551,6 +778,64 @@ class Communicator extends EventEmitter {
       sessionToken: this.sessionToken,
     });
   };
+
+  setBboxSize = (bbox) => {
+    if (!isNaN(parseInt(bbox))) {
+      this.com.sendMessageToMap({
+        type: "setBoundingBoxSize",
+        bbox: bbox,
+        sessionToken: this.sessionToken,
+      });
+    } else {
+      console.error("bbox is not a integer");
+    }
+  };
+  addIcon = ({ icon, coordinates }) => {
+    // Validate icon
+    if (!(icon instanceof ArrayBuffer)) {
+      this.emit("error", {
+        type: "error",
+        error: "Invalid icon: Expected an ArrayBuffer.",
+      });
+    }
+
+    // Validate coordinates
+    if (!Array.isArray(coordinates)) {
+      this.emit("error", {
+        type: "error",
+        error: "Invalid coordinates: Expected an array [longitude, latitude].",
+      });
+    }
+
+    // Ensure coordinates contain exactly two numeric values
+    if (
+      coordinates.length !== 2 ||
+      typeof coordinates[0] !== "number" ||
+      typeof coordinates[1] !== "number"
+    ) {
+      this.emit("error", {
+        type: "error",
+        error:
+          "Invalid coordinates: Expected an array with two numeric values [longitude, latitude].",
+      });
+    }
+
+    // Send the message to the map
+    this.com.sendMessageToMap({
+      type: "AddIcon",
+      icon,
+      coordinates,
+      sessionToken: this.sessionToken,
+    });
+  };
+
+  screenshot = (options) => {
+    this.com.sendMessageToMap({
+      type: "screenshot",
+      options,
+      sessionToken: this.sessionToken,
+    });
+  };
 }
 
 export { Communicator };