@vidro/map-handler 1.3.2 → 1.3.3

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

@@ -1,185 +0,0 @@
-"use client";
-import { createContext, useContext, useState, useEffect } from "react";
-import { useAuth } from "./auth";
-import {
-  setMapId as setMapIdCookie,
-  getMapId as getMapIdCookie,
-  removeMapId as removeMapIdCookie,
-} from "@/shared/cookies";
-const MapsContext = createContext({});
-
-export const MapsProvider = ({ children }) => {
-  const { apiUrl, token } = useAuth();
-  const [map, setMap] = useState(null);
-  const [mapId, setMapId] = useState(null);
-
-  const [mapError, setMapError] = useState(null);
-  const [mapReady, setMapReady] = useState(false);
-
-  const [sessionToken, setSessionToken] = useState(null);
-  const [currentMapAction, setCurrentMapAction] = useState(null);
-  const [clickedCoordinates, setClickedCoordinates] = useState(null);
-  const [bboxCoordinates, setBboxcoordinates] = useState(null);
-  const [zoomLevel, setZoomLevel] = useState(null);
-  const [mapScale, setMapScale] = useState(null);
-  const [mapResolution, setMapResolution] = useState(null);
-  const [srid, setSrid] = useState(null);
-
-  //geolocations
-  const [geolocalizing, setGeolocalizing] = useState(false);
-  const [geolocalizingstatus, setGeolocalizingStatus] = useState(null);
-  const [userGeoPosition, setUserGeoPosition] = useState(null);
-
-  //measure
-  const [measureStatus, setMeasureStatus] = useState(null);
-
-  //layers
-  const [displayedLayers, setDisplayedLayers] = useState([]);
-  const [activeLayer, setActiveLayer] = useState(null);
-  const [mapLayers, setMapLayers] = useState(null);
-
-  const [infoLayerSource, setInfoLayerSource] = useState([]); //layer from info is received
-
-  //filters
-  const [configuredFilters, setConfiguredFilters] = useState(null); //backoffice configured filters
-  const [mapFilters, setMapfilters] = useState(null);
-  const [filtersApplied, setFiltersApplied] = useState(false);
-  const [activeFilters, setActiveFilters] = useState([]);
-
-  //tools
-  const [selectedTool, setSelectedTool] = useState(null);
-
-  useEffect(() => {
-    if (!token) return;
-    (async () => {
-      if (!getMapIdCookie()) {
-        console.log("No map if cookie found");
-
-        return;
-      }
-      console.log("Map id cookie found, getting map...");
-      try {
-        await GetMap(getMapIdCookie());
-      } catch (error) {
-        console.error("Error getting map from cookie", error);
-        return;
-      }
-    })();
-  }, [token]);
-
-  const GetMap = async (id) => {
-    let url = `${apiUrl}map/${id}`;
-
-    try {
-      const response = await fetch(url, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-      });
-      const data = await response.json();
-      console.log("GetMap", data);
-      setMapId(id);
-      setMapError(false);
-      setSessionToken(data.message.sessionToken);
-      setMap(
-        `${data.message.iframe}?sessionToken=${data.message.sessionToken}`
-      );
-      //store map id in cookie, to avoid losing it on page refresh
-      setMapIdCookie(id);
-
-      return;
-    } catch (error) {
-      console.error("Error fetching map:", error);
-      setSessionToken(null);
-      setMap(null);
-      setMapId(null);
-      removeMapIdCookie();
-
-      throw error;
-    }
-  };
-
-  const GetMapInfo = async (id) => {
-    let url = `${apiUrl}map/detail/${id}`;
-
-    try {
-      const response = await fetch(url, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-      });
-      const data = await response.json();
-      console.log("GetMapInfo", data);
-      console.log("Layers", data.message.layers);
-      setMapLayers(data.message.layers);
-      setConfiguredFilters(data.message.layerFilters);
-      return;
-    } catch (error) {
-      console.error("Error fetching map info:", error);
-
-      setMapLayers(null);
-      throw error;
-    }
-  };
-  return (
-    <MapsContext.Provider
-      value={{
-        mapId,
-        setMapId,
-        GetMap,
-        map,
-        sessionToken,
-        mapError,
-        mapReady,
-        setMapReady,
-        displayedLayers,
-        setDisplayedLayers,
-        activeLayer,
-        setActiveLayer,
-        currentMapAction,
-        setCurrentMapAction,
-        mapFilters,
-        setMapfilters,
-        activeFilters,
-        setActiveFilters,
-        configuredFilters,
-        infoLayerSource,
-        setInfoLayerSource,
-        clickedCoordinates,
-        setClickedCoordinates,
-        bboxCoordinates,
-        setBboxcoordinates,
-        srid,
-        setSrid,
-        geolocalizing,
-        setGeolocalizing,
-        geolocalizingstatus,
-        setGeolocalizingStatus,
-        userGeoPosition,
-        measureStatus,
-        setMeasureStatus,
-        selectedTool,
-        setSelectedTool,
-        filtersApplied,
-        setFiltersApplied,
-        zoomLevel,
-        setZoomLevel,
-        mapScale,
-        setMapScale,
-        setSessionToken,
-        mapLayers,
-        GetMapInfo,
-        mapResolution,
-        setMapResolution,
-      }}
-    >
-      {children}
-    </MapsContext.Provider>
-  );
-};
-
-export const useMaps = () => useContext(MapsContext);

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

@@ -1,358 +0,0 @@
-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;
-    console.log("messages - Filters", filters);
-    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 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);
-  };
-
-  //***** PRINT ******/
-
-  const startPrint = (options) => {
-    communicator.startPrint(options);
-  };
-  const cancelPrint = (options) => {
-    communicator.cancelPrint(options);
-  };
-
-  const print = (options) => {
-    communicator.print(options);
-  };
-  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);
-    communicator.on(MAP_EVENTS.PRINT, 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);
-      communicator.off(MAP_EVENTS.PRINT, 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);
-        communicator.off(MAP_EVENTS.PRINT, 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,
-        print,
-        startPrint,
-        cancelPrint,
-      }}
-    >
-      {children}
-    </MessageContext.Provider>
-  );
-};
-
-export const useMessages = () => useContext(MessageContext);

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

@@ -1,125 +0,0 @@
-"use client";
-import { createContext, useContext, useState, useEffect } from "react";
-import { useMessages } from "./messages";
-import { MAP_EVENTS } from "@/shared/constants";
-import { useMaps } from "./maps";
-import { useAuth } from "./auth";
-
-const PrintsContext = createContext({});
-
-export const PrintsProvider = ({ children }) => {
-  const [paperSize, setPaperSize] = useState("A4");
-  const [paperLayout, setPaperLayout] = useState("landscape");
-  const [printEnabled, setPrintEnabled] = useState(null);
-  const { mapId, displayedLayers, mapScale } = useMaps();
-  const { apiUrl, token } = useAuth();
-  const { startPrint: startPrintMessages, setMessage, message } = useMessages();
-
-  useEffect(() => {
-    if (!message) return;
-
-    switch (message.type) {
-      case MAP_EVENTS.PRINT:
-        console.log("useMapEvents print event", message, message.content);
-        if (message.content?.print === true) {
-          setPrintEnabled(true);
-        } else if (message.content?.print === false) {
-          setPrintEnabled(false);
-        }
-        if (message.content?.file) {
-          sendPrintToApi(message.content.file);
-          setPrintEnabled(false);
-        }
-        setMessage(null);
-        break;
-    }
-  }, [message]);
-
-  const sendPrintToApi = async (file) => {
-    const data = {
-      scale: "1:100",
-      template: "basic",
-      content: file,
-      format: paperSize,
-      layout: paperLayout,
-      displayedLayers,
-    };
-    try {
-      // Create FormData object for the request payload
-      const bodyFormData = new FormData();
-      for (const [key, value] of Object.entries(data)) {
-        bodyFormData.append(key, value);
-      }
-
-      // Set headers dynamically, including Authorization if available
-      const headers = {};
-
-      if (token) {
-        headers.Authorization = `Bearer ${token}`;
-      }
-
-      // Send POST request using fetch
-      const response = await fetch(`${apiUrl}/print/${mapId}`, {
-        method: "POST",
-        headers, // No need to set "Content-Type" for FormData (browser sets it automatically)
-        body: bodyFormData,
-      });
-
-      // Check if the request was successful
-      if (!response.ok) {
-        throw new Error(`Failed to fetch: ${response.statusText}`);
-      }
-
-      // Get the response as a Blob (PDF)
-      const pdfBlob = await response.blob();
-
-      // Create a download link
-      const link = document.createElement("a");
-      link.href = URL.createObjectURL(pdfBlob);
-      link.download = "myprint.pdf"; // Set filename
-      document.body.appendChild(link);
-      link.click(); // Trigger download
-      document.body.removeChild(link);
-
-      return true;
-    } catch (error) {
-      console.error("Error sending print request:", error);
-      return false;
-    }
-  };
-
-  useEffect(() => {
-    if (!paperLayout) return;
-    console.log("set paperLayout", paperLayout);
-  }, [paperLayout]);
-
-  useEffect(() => {
-    if (!paperSize) return;
-    console.log("set paperSize", paperSize);
-  }, [paperSize]);
-
-  const startPrint = () => {
-    console.log("Start print");
-    startPrintMessages({
-      paperLayout: paperLayout ? paperLayout : "landscape",
-      paperSize: paperSize ? paperSize : "A4",
-    });
-  };
-
-  return (
-    <PrintsContext.Provider
-      value={{
-        paperLayout,
-        setPaperLayout,
-        paperSize,
-        setPaperSize,
-        startPrint,
-        printEnabled,
-      }}
-    >
-      {children}
-    </PrintsContext.Provider>
-  );
-};
-
-export const usePrint = () => useContext(PrintsContext);

package/examples/react-next/env.sample

@@ -1,3 +0,0 @@
-NEXT_PUBLIC_APIURL="https://your api url"
-NEXT_PUBLIC_USER="your user"
-NEXT_PUBLIC_PWD="your password"

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

@@ -1,14 +0,0 @@
-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;