@vidro/map-handler 1.2.177 → 1.2.179

package/examples/react-next/contexts/messages.js

@@ -0,0 +1,345 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { MAP_EVENTS } from "@/shared/constants";
+
+const MessageContext = createContext({});
+
+export const MessageProvider = ({ children }) => {
+  const [events, setEvents] = useState(false);
+  const [communicator, setCommunicator] = useState(false);
+  const [message, setMessage] = useState(null);
+  const [messageQueue, setMessageQueue] = useState([]);
+
+  useEffect(() => {
+    if (!communicator) return;
+    console.log("MapHandler is ready for use");
+  }, [communicator]);
+
+  const start = async (sessionToken) => {
+    const { Communicator } = await import("@vidro/map-handler");
+    const _communicator = new Communicator({ sessionToken });
+    setCommunicator(_communicator);
+  };
+
+  const reloadLayers = () => {
+    if (!communicator) return;
+    communicator.reloadDisplayedLayers();
+  };
+
+  const ZoomIn = () => {
+    console.log("ZoomIn");
+    if (!communicator) return;
+    console.log("ZoomIn 2");
+    communicator.ZoomIn();
+  };
+
+  const zoomToExtent = () => {
+    if (!communicator) return;
+    communicator.zoomToExtent();
+  };
+
+  const ZoomOut = () => {
+    if (!communicator) return;
+    communicator.ZoomOut();
+  };
+
+  const Clear = () => {
+    if (!communicator) return;
+    communicator.clear();
+  };
+
+  const Info = (type = "geojson", layer, format = "json") => {
+    const hitTolerance = 5;
+    communicator.infoFromCoordinates(type, layer, hitTolerance, format);
+  };
+
+  const Geolocalize = (what) => {
+    if (!communicator) return;
+    communicator.Geolocalize(what);
+  };
+
+  const Filters = (filters) => {
+    if (!communicator) return;
+    communicator.setFilters(filters);
+  };
+
+  const RemoveElementFromMap = (id, layer) => {
+    communicator.RemoveGeometry(id, layer);
+  };
+
+  const CancelAddGeom = () => {
+    if (!communicator) return;
+    console.log("CancelAddGeom");
+    communicator.CancelAddGeom();
+  };
+
+  const Highlight = (item, center, animate, id, style, zoom = null) => {
+    if (!communicator) return;
+    console.log("Highlight", { item, center, animate, id, style, zoom });
+    let options = {
+      geom: item.geom,
+      zoom,
+      center,
+      animate,
+      data: item,
+      style,
+    };
+    communicator.Highlight(options);
+  };
+
+  const RemoveGeometriesByProperty = (layer, property, value) => {
+    if (!communicator) return;
+    communicator.RemoveGeometriesByProperty(layer, property, value);
+  };
+
+  const UpdateGeometriesByProperty = (layer, property, value, style) => {
+    if (!communicator) return;
+    console.log("UpdateGeometriesByProperty", {
+      layer,
+      property,
+      value,
+      style,
+    });
+    communicator.UpdateGeometriesByProperty(layer, property, value, style);
+  };
+
+  const DrawGeometries = (geoms) => {
+    if (!communicator) return;
+    console.log("DrawGeometries", geoms);
+    communicator.DrawGeometries(geoms);
+  };
+
+  const DrawGeometry = (geom, featureId, style) => {
+    if (!communicator) return;
+    console.log("DrawGeometry", { geom, featureId, style });
+    communicator.DrawGeometries([{ geom, style, featureId, id: featureId }]);
+  };
+
+  const ToggleLayer = (layer, properties) => {
+    if (!communicator) return;
+    communicator.toggleLayer(layer, properties);
+  };
+
+  const doSetActiveLayer = (name) => {
+    if (!communicator) return;
+    console.log("doSetActiveLayer", { name });
+    communicator.setActiveLayer(name);
+  };
+
+  const removeLayer = (name) => {
+    if (!communicator) return;
+    console.log("removeLayer", { name });
+    communicator.removeLayer(name);
+  };
+
+  const startDrawPolygon = () => {
+    const options = {
+      texts: {
+        start: t({
+          id: "COMMON.COMMON.CLICK_TO_START_DRAWING",
+        }),
+        continue: t({
+          id: "COMMON.COMMON.CLICK_TO_CONTINUE_DRAWING_POLYGON",
+        }),
+      },
+      style: {
+        fill: "rgb(249, 34, 34,0.3)",
+        stroke: "rgb(249, 34, 34)",
+      },
+      drawOnEnd: false,
+      showConfirm: false,
+    };
+    communicator.AddGeom("Polygon", options);
+  };
+
+  const BBoxForClicks = (size) => {
+    if (!communicator) return;
+    communicator.setBboxSize(size);
+  };
+
+  const cancelMeasure = () => {
+    if (!communicator) return;
+    communicator.cancelMeasure();
+  };
+
+  const initMeasure = (type, startMsg, continueMsg) => {
+    if (!communicator) return;
+    communicator.cancelMeasure();
+    communicator.initMeasure(type, startMsg, continueMsg);
+  };
+
+  const zoomToCoordinates = (coordinates, zoomLevel) => {
+    if (!communicator) return;
+    communicator.zoomToCoordinates(coordinates[0], coordinates[1], zoomLevel);
+  };
+
+  const zoomToGeometry = (geom, limits) => {
+    if (!communicator) return;
+    communicator.zoomToGeometry(geom, limits);
+  };
+
+  const centerMap = (coordinates) => {
+    if (!communicator) return;
+    communicator.CenterMap(coordinates[0], coordinates[1]);
+  };
+
+  const drawPoint = ({ drawOnEnd = false, showConfirm = false }) => {
+    if (!communicator) return;
+    communicator.AddGeom("Point", { drawOnEnd, showConfirm: true });
+  };
+
+  const addIcon = (icon, coordinates) => {
+    communicator.addIcon({ icon, coordinates });
+  };
+
+  const 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(
+          ", "
+        )}`
+      );
+      return;
+    }
+    if (!communicator) return;
+    console.log("zoomToScale", { scale });
+    communicator.zoomToScale(scale);
+  };
+
+  const onMapEvent = (data) => {
+    console.log(`onMapEvent`, { type: data.type, data });
+    setMessageQueue((prevQueue) => [...prevQueue, data]);
+  };
+
+  useEffect(() => {
+    if (message) return;
+    if (messageQueue.length === 0) {
+      return;
+    }
+    setMessage(messageQueue[0]);
+    setMessageQueue((prevQueue) => {
+      return prevQueue.slice(1);
+    });
+  }, [messageQueue, message]);
+
+  useEffect(() => {
+    if (!communicator) return;
+    communicator.on(MAP_EVENTS.ZOOM_CHANGE, onMapEvent);
+    communicator.on(MAP_EVENTS.LOADED, onMapEvent);
+    communicator.on(MAP_EVENTS.CAPABILITIES, onMapEvent);
+    communicator.on(MAP_EVENTS.ERROR, onMapEvent);
+    communicator.on(MAP_EVENTS.GEOLOCATION, onMapEvent);
+    communicator.on(MAP_EVENTS.END_MEASURE, onMapEvent);
+    communicator.on(MAP_EVENTS.START_MEASURE, onMapEvent);
+    communicator.on(MAP_EVENTS.UNLOADED, onMapEvent);
+    communicator.on(MAP_EVENTS.COORDINATES, onMapEvent);
+    communicator.on(MAP_EVENTS.CENTER_CHANGE, onMapEvent);
+    communicator.on(MAP_EVENTS.ACTIVE_LAYER, onMapEvent);
+    communicator.on(MAP_EVENTS.WMS_LAYERS, onMapEvent);
+    communicator.on(MAP_EVENTS.STATUS, onMapEvent);
+    communicator.on(MAP_EVENTS.INFO, onMapEvent);
+    communicator.on(MAP_EVENTS.GEOM_ADDED, onMapEvent);
+    communicator.on(MAP_EVENTS.LAYERS, onMapEvent);
+    communicator.on(MAP_EVENTS.VERSION, onMapEvent);
+    communicator.on(MAP_EVENTS.SCREENSHOT, onMapEvent);
+    return () => {
+      if (!communicator) return;
+      communicator.off(MAP_EVENTS.ZOOM_CHANGE, onMapEvent);
+      communicator.off(MAP_EVENTS.LOADED, onMapEvent);
+      communicator.off(MAP_EVENTS.CAPABILITIES, onMapEvent);
+      communicator.off(MAP_EVENTS.ERROR, onMapEvent);
+      communicator.off(MAP_EVENTS.GEOLOCATION, onMapEvent);
+      communicator.off(MAP_EVENTS.END_MEASURE, onMapEvent);
+      communicator.off(MAP_EVENTS.START_MEASURE, onMapEvent);
+      communicator.off(MAP_EVENTS.UNLOADED, onMapEvent);
+      communicator.off(MAP_EVENTS.COORDINATES, onMapEvent);
+      communicator.off(MAP_EVENTS.CENTER_CHANGE, onMapEvent);
+      communicator.off(MAP_EVENTS.ACTIVE_LAYER, onMapEvent);
+      communicator.off(MAP_EVENTS.WMS_LAYERS, onMapEvent);
+      communicator.off(MAP_EVENTS.STATUS, onMapEvent);
+      communicator.off(MAP_EVENTS.INFO, onMapEvent);
+      communicator.off(MAP_EVENTS.LAYERS, onMapEvent);
+      communicator.off(MAP_EVENTS.VERSION, onMapEvent);
+      communicator.off(MAP_EVENTS.SCREENSHOT, onMapEvent);
+      setCommunicator(null);
+    };
+  }, [communicator, events]);
+
+  useEffect(() => {
+    // Clean up
+    return function cleanup() {
+      if (communicator) {
+        communicator.off(MAP_EVENTS.ZOOM_CHANGE, onMapEvent);
+        communicator.off(MAP_EVENTS.LOADED, onMapEvent);
+        communicator.off(MAP_EVENTS.CAPABILITIES, onMapEvent);
+        communicator.off(MAP_EVENTS.ERROR, onMapEvent);
+        communicator.off(MAP_EVENTS.GEOLOCATION, onMapEvent);
+        communicator.off(MAP_EVENTS.END_MEASURE, onMapEvent);
+        communicator.off(MAP_EVENTS.START_MEASURE, onMapEvent);
+        communicator.off(MAP_EVENTS.UNLOADED, onMapEvent);
+        communicator.off(MAP_EVENTS.COORDINATES, onMapEvent);
+        communicator.off(MAP_EVENTS.CENTER_CHANGE, onMapEvent);
+        communicator.off(MAP_EVENTS.ACTIVE_LAYER, onMapEvent);
+        communicator.off(MAP_EVENTS.WMS_LAYERS, onMapEvent);
+        communicator.off(MAP_EVENTS.STATUS, onMapEvent);
+        communicator.off(MAP_EVENTS.INFO, onMapEvent);
+        communicator.off(MAP_EVENTS.VERSION, onMapEvent);
+      }
+      setMessage(null);
+      setEvents(false);
+    };
+  }, []);
+
+  return (
+    <MessageContext.Provider
+      value={{
+        communicator,
+        start,
+        ZoomIn,
+        ZoomOut,
+        zoomToExtent,
+        DrawGeometry,
+        DrawGeometries,
+
+        startDrawPolygon,
+        CancelAddGeom,
+        Clear,
+        Info,
+        RemoveElementFromMap,
+        Highlight,
+        RemoveGeometriesByProperty,
+        UpdateGeometriesByProperty,
+        ToggleLayer,
+        message,
+        setMessage,
+        Filters,
+        reloadLayers,
+        BBoxForClicks,
+        cancelMeasure,
+        initMeasure,
+        removeLayer,
+        Geolocalize,
+        zoomToCoordinates,
+        zoomToGeometry,
+        centerMap,
+        drawPoint,
+        addIcon,
+        zoomToScale,
+      }}
+    >
+      {children}
+    </MessageContext.Provider>
+  );
+};
+
+export const useMessages = () => useContext(MessageContext);

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

@@ -0,0 +1,14 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends("next/core-web-vitals")];
+
+export default eslintConfig;

package/examples/react-next/hooks/useMapEvents.js

@@ -0,0 +1,209 @@
+"use client";
+import { useEffect, useState } from "react";
+import Logger from "@/shared/logger";
+import { useIntl } from "react-intl";
+import { toast } from "react-toastify";
+import { ERRORS, MAP_EVENTS, PLUGINS } from "@/shared/constants";
+import { useMessages } from "@/contexts/messages";
+import { useMaps } from "@/contexts/maps";
+import { storeMapCookie, readMapCookie } from "@/shared/cookies";
+
+const logger = new Logger("Hooks - useMapEvents");
+const useMapEvents = (setShowInfo) => {
+  const {
+    doInfo,
+    setTiledReady,
+    setMapReady,
+    setDisplayedLayers,
+    setCurrentMapAction,
+    displayedLayers,
+    setZoomLevel,
+    mapInfo,
+    mapReady,
+    AddLayerToPreselectedLayers,
+    mapScale,
+    setMapScale,
+  } = useMaps();
+  const { message, setMessage, zoomToCoordinates } = useMessages();
+  const [cookieCoordinates, setCookieCoordindates] = useState(null);
+  const [cookieZoom, setCookieZoom] = useState(null);
+  const [cookieToc, setCookieToc] = useState(null);
+
+  useEffect(() => {
+    if (!cookieCoordinates) return;
+    if (!cookieZoom) return;
+    try {
+      logger.log("Cookie zoom", { cookieZoom, cookieCoordinates });
+      zoomToCoordinates(JSON.parse(cookieCoordinates), cookieZoom);
+    } catch (e) {
+      logger.error("error parsing coordinates", e);
+    }
+  }, [cookieCoordinates, cookieZoom]);
+
+  useEffect(() => {
+    if (!mapInfo) return;
+    if (mapInfo?.layers.length === 0) return;
+    logger.log("Cookie layers", { mapInfo, cookieToc });
+    if (!cookieToc || cookieToc === "undefined") return;
+    try {
+      const tocLayers = JSON.parse(cookieToc);
+      logger.log("Cookie layers", tocLayers);
+      tocLayers.forEach((element) => {
+        logger.log("Cookie layers adding", element);
+        //find layer in project layers
+        const lay = mapInfo.layers.find((ly) => ly.qgis_name === element);
+        //render layer
+        AddLayerToPreselectedLayers(lay.id);
+      });
+    } catch (e) {
+      logger.error("error parsing cookieToc", e);
+    }
+  }, [cookieToc, mapInfo]);
+
+  useEffect(() => {
+    if (!message) return;
+    if (!mapReady) return;
+    if (!mapInfo) return;
+
+    switch (message.type) {
+      case MAP_EVENTS.ZOOM_CHANGE:
+        //store in cookie zoom level
+        if (mapInfo.zoomcookie) {
+          storeMapCookie(`${mapInfo.id}_zoom`, message.zoom);
+          setZoomLevel(message.zoom);
+        }
+        setMapScale(message?.meta?.scale);
+        setMessage(null);
+        break;
+      case MAP_EVENTS.CENTER_CHANGE:
+        if (mapInfo.zoomcookie) {
+          storeMapCookie(
+            `${mapInfo.id}_center`,
+            JSON.stringify(message.coordinates)
+          );
+        }
+        setMessage(null);
+        break;
+      default:
+        setMessage(null);
+        break;
+    }
+  }, [message, cookieCoordinates, cookieZoom, mapReady, mapInfo]);
+
+  useEffect(() => {
+    if (!message) return;
+    switch (message.type) {
+      case MAP_EVENTS.VERSION:
+        //ToDo
+        break;
+      case MAP_EVENTS.LOADED:
+        if (message.what === "map") {
+          logger.log("Map loaded and ready");
+          //use cookie for zoom and position only if map is configured with zoomcookie
+          if (mapInfo.zoomcookie) {
+            setCookieCoordindates(readMapCookie(`${mapInfo.id}_center`));
+            setCookieZoom(readMapCookie(`${mapInfo.id}_zoom`));
+          }
+          //use cookie for toc layers configured with tocusecookie
+          if (mapInfo.tocusecookie) {
+            setCookieToc(readMapCookie(`${mapInfo.id}_toc`));
+          }
+          setMapReady(true);
+        } else if (message.what === "tiled") {
+          logger.log("Tiled loaded");
+          setTiledReady(true);
+        }
+        if (message.what === "layer") {
+          if (mapInfo.tocusecookie) {
+            if (cookieToc && cookieToc !== "undefined") {
+              let currentCookie = JSON.parse(cookieToc);
+              if (!currentCookie.find((l) => l === message.layer)) {
+                logger.log("Store layer in TOC cookie", message.layer);
+                currentCookie.push(message.layer);
+                storeMapCookie(
+                  `${mapInfo.id}_toc`,
+                  JSON.stringify(currentCookie)
+                );
+              }
+            } else {
+              logger.log("Store layer in TOC cookie", message.layer);
+              storeMapCookie(
+                `${mapInfo.id}_toc`,
+                JSON.stringify([message.layer])
+              );
+            }
+          }
+        }
+        setMessage(null);
+        break;
+      case MAP_EVENTS.UNLOADED:
+        if (message.what === "tiled") {
+          logger.log("Tiled unloaded");
+          setTiledReady(false);
+        }
+        setMessage(null);
+        break;
+      case MAP_EVENTS.LAYERS:
+        logger.log("MapComponent displayed layers", message.layers);
+        if (!message.layers) returns;
+        //check if is already displayed
+        setDisplayedLayers(message.layers);
+        setMessage(null);
+        break;
+      case MAP_EVENTS.GEOM_ADDED:
+        logger.log("GeomAdded", message);
+        setCurrentMapAction(null);
+        if (message?.geom_astext === null) {
+          setMessage(null);
+          return;
+        }
+        /************************************************************************************
+         *****************                      INFO                *************************
+         ***********************************************************************************/
+        (async () => {
+          /*
+          try {
+         const { data, error } = await doInfo(
+              message.geom_astext,
+              message.srid,
+              currentElementType.name
+            );
+
+            logger.log("GeomAdded info", { data, error });
+            if (error) {
+              return { error: error };
+            }
+          } catch (err) {
+            // Handle errors
+            logger.error("Error occurred:", err);
+          } finally {
+            // Clean up or perform additional actions
+            setMessage(null);
+            // setCurrentMapAction(null);
+          }*/
+        })();
+        break;
+
+      /************************************************************************************
+       *****************                    END INFO              *************************
+       ***********************************************************************************/
+
+      /************************************************************************************
+       *****************               CLICKED COORDINATES        *************************
+       ***********************************************************************************/
+
+      /*** MAP_EVENTS.COORDINATES handled in contexts/info
+        
+      /************************************************************************************
+       *****************             END CLICKED COORDINATES      *************************
+       ***********************************************************************************/
+
+      default:
+        setMessage(null);
+        break;
+    }
+  }, [message, displayedLayers]);
+
+  return {};
+};
+export default useMapEvents;

package/examples/react-next/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;

package/examples/react-next/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "react-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@vidro/map-handler": "^1.2.178",
+    "next": "15.1.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.6",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
+  }
+}

package/examples/react-next/pages/_app.js

@@ -0,0 +1,5 @@
+import "@/styles/globals.css";
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

package/examples/react-next/pages/_document.js

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}