@vidro/map-handler 1.2.12 → 1.2.19

package/examples/react-next/components/MapInfo.js

@@ -0,0 +1,36 @@
+import { useMaps } from "@/contexts/maps";
+import useMapEvents from "@/hooks/useMapEvents";
+const MapInfo = () => {
+  useMapEvents();
+  const {
+    zoomLevel,
+    mapScale,
+    clickedCoordinates,
+    map,
+    displayedLayers,
+    mapResolution,
+  } = useMaps();
+  if (!map) return null;
+  return (
+    <div className="absolute bg-white/60 right-0 p-5">
+      <div className="flex flex-col gap-1 text-xs">
+        <div>Zoom level: {zoomLevel}</div>
+        <div>Map scale: {mapScale}</div>
+        <div>Map resolution: {mapResolution}</div>
+        <div>Clicked coordinates: {clickedCoordinates}</div>
+      </div>
+      <div className="bg-black/20 p-5 text-left mt-2">
+        <span>Displayed Layers:</span>
+
+        {displayedLayers && displayedLayers.length > 0 && (
+          <div className="mt-1 flex flex-col gap-1 text-xs">
+            {displayedLayers.map((layer) => (
+              <div key={`lay_${layer}`}> - {layer}</div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default MapInfo;

package/examples/react-next/components/MapLayers.js

@@ -0,0 +1,60 @@
+import { useAuth } from "@/contexts/auth";
+import { useMaps } from "@/contexts/maps";
+import { useMessages } from "@/contexts/messages";
+import { useEffect, useState } from "react";
+
+const MapLayers = () => {
+  const { GetMapInfo, mapId, mapLayers, setActiveLayer } = useMaps();
+  const { ToggleLayer } = useMessages();
+  const { logged } = useAuth();
+  const [selectedLayer, setSelectedLayer] = useState("-1");
+
+  useEffect(() => {
+    if (!mapId) return;
+    GetMapInfo(mapId);
+  }, [mapId]);
+
+  if (!logged) return null;
+  if (!mapId) return null;
+  return (
+    <>
+      <div>
+        {mapLayers && mapLayers.length === 0 && <div>No layers available</div>}
+
+        <div className="m-2 flex gap-2">
+          <label className="block text-sm font-medium text-gray-700 pt-2">
+            Layers
+          </label>
+          {mapLayers && mapLayers.length > 0 && (
+            <select
+              className="border border-gray-300 rounded-md p-2 w-60"
+              onChange={(e) => setSelectedLayer(e.target.value)}
+              value={selectedLayer}
+            >
+              <option value="-1">Select layer...</option>
+              {mapLayers.map((ele) => (
+                <option key={ele.id} value={ele.qgis_name}>
+                  {ele.qgis_name} - {ele.alias}
+                </option>
+              ))}
+            </select>
+          )}
+
+          <button
+            onClick={(e) => {
+              console.log("Toggle layer", selectedLayer);
+              setActiveLayer(selectedLayer);
+              ToggleLayer(selectedLayer);
+            }}
+            disabled={selectedLayer === "-1"}
+            className="border border-gray-300 bg-black text-white rounded-md p-2 mt-1 text-xs"
+          >
+            Toggle layer
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MapLayers;

package/examples/react-next/components/MapList.js

@@ -0,0 +1,43 @@
+import { useAuth } from "@/contexts/auth";
+import { useMaps } from "@/contexts/maps";
+import { useState } from "react";
+
+const MapList = () => {
+  const { GetMap } = useMaps();
+  const { projects, logged } = useAuth();
+  const [selectedMap, setSelectedMap] = useState("-1");
+  if (!logged) return null;
+  return (
+    <div>
+      <div className="m-2 flex gap-2">
+        <label className="block text-sm font-medium text-gray-700 pt-2">
+          Maps
+        </label>
+        <select
+          className="border border-gray-300 rounded-md p-2  w-32"
+          onChange={(e) => setSelectedMap(e.target.value)}
+          value={selectedMap}
+        >
+          <option value="-1">Select a map</option>
+          {projects.map((projectId) => (
+            <option key={projectId} value={projectId}>
+              {projectId}
+            </option>
+          ))}
+        </select>
+
+        <button
+          onClick={(e) => {
+            GetMap(selectedMap);
+          }}
+          disabled={selectedMap === "-1"}
+          className="border border-gray-300 bg-black text-white rounded-md p-2 mt-1 text-xs"
+        >
+          Load map
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MapList;

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

@@ -0,0 +1,101 @@
+"use client";
+import { createContext, useContext, useState } from "react";
+import { useRouter } from "next/navigation";
+
+const AuthContext = createContext({});
+
+export const AuthProvider = ({ children }) => {
+  const [apiUrl, setApiUrl] = useState(
+    process.env.NEXT_PUBLIC_APIURL ? process.env.NEXT_PUBLIC_APIURL : ""
+  );
+  const [logged, setLogged] = useState(null);
+  const [token, setToken] = useState(null);
+  const [userId, setUserId] = useState(null);
+  const [projects, setProjects] = useState([]);
+  const router = useRouter();
+
+  const resetAuthState = () => {
+    setLogged(false);
+    setToken(null);
+    setUserId(null);
+    setProjects([]);
+  };
+
+  const login = async (email, password) => {
+    try {
+      const response = await fetch(`${apiUrl}letsgo`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ user: email, pwd: password }),
+      });
+
+      const data = await response.json();
+      console.log("login", data);
+
+      if (!response.ok) {
+        return { error: true, message: data.message || "Login failed" };
+      }
+
+      setToken(data.message.token);
+      setUserId(data.message.id);
+
+      setLogged(true);
+      setProjects(data.message.maps);
+    } catch (error) {
+      console.error("Login error:", error);
+      return { error: true, message: "An unexpected error occurred" };
+    }
+
+    return { error: false };
+  };
+
+  const logout = async () => {
+    console.log("logout", token);
+    try {
+      const response = await fetch(`${apiUrl}logout`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      const data = await response.json();
+      console.log("logout", data);
+
+      if (!response.ok) {
+        return { error: true, message: data.message || "Logout failed" };
+      }
+
+      // Reset auth state and remove token cookie
+      resetAuthState();
+      router.push("/");
+
+      return { error: false };
+    } catch (error) {
+      console.error("Logout error:", error);
+      return { error: true, message: "An unexpected error occurred" };
+    }
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        logged,
+        token,
+        login,
+        logout,
+        userId,
+        projects,
+        apiUrl,
+        setApiUrl,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);

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

@@ -0,0 +1,158 @@
+"use client";
+import { createContext, useContext, useState, useEffect } from "react";
+import { useAuth } from "./auth";
+
+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);
+
+  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}`
+      );
+      return;
+    } catch (error) {
+      console.error("Error fetching map:", error);
+      setSessionToken(null);
+      setMap(null);
+      setMapId(null);
+      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);