@vidro/map-handler 1.2.179 → 1.2.180

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

@@ -1,40 +1,161 @@
+import { useAuth } from "@/contexts/auth";
 import { useMaps } from "@/contexts/maps";
 import { useMessages } from "@/contexts/messages";
+import { useEffect, useState } from "react";
 
 const MapButtons = () => {
-  const { map } = useMaps();
-  const { ZoomIn, ZoomOut, zoomToExtent } = useMessages();
+  const { logged } = useAuth();
+  const { map, mapReady, clickedCoordinates } = useMaps();
+  const {
+    ZoomIn,
+    ZoomOut,
+    zoomToExtent,
+    drawPoint,
+    Clear,
+    Highlight,
+    centerMap,
+  } = useMessages();
+  if (!logged) return null;
   return (
-    <div>
-      <button
-        onClick={(e) => {
-          console.log("Zoom +");
-          ZoomIn();
-        }}
-        disabled={!map}
-        className="border border-gray-300 bg-black text-white rounded-md p-2"
-      >
-        Zoom +
-      </button>
-      <button
-        onClick={(e) => {
-          console.log("Zoom -");
-          ZoomOut();
-        }}
-        className="border border-gray-300 bg-black text-white rounded-md p-2"
-      >
-        Zoom -
-      </button>
-      <button
-        onClick={(e) => {
-          console.log("Zoom to extent");
-          zoomToExtent();
+    <>
+      {!mapReady && <div>Waiting map...</div>}
+      {mapReady && (
+        <div className="flex gap-1 text-xs">
+          <button
+            onClick={(e) => {
+              console.log("Zoom +");
+              ZoomIn();
+            }}
+            disabled={!map}
+            className="border border-gray-300 bg-black text-white rounded-md p-2"
+          >
+            Zoom +
+          </button>
+          <button
+            onClick={(e) => {
+              console.log("Zoom -");
+              ZoomOut();
+            }}
+            className="border border-gray-300 bg-black text-white rounded-md p-2"
+          >
+            Zoom -
+          </button>
+          <button
+            onClick={(e) => {
+              console.log("Zoom to extent");
+              zoomToExtent();
+            }}
+            className="border border-gray-300 bg-black text-white rounded-md p-2"
+          >
+            Zoom to extent
+          </button>
+          <button
+            onClick={(e) => {
+              console.log("Draw point");
+              drawPoint({});
+            }}
+            className="border border-gray-300 bg-black text-white rounded-md p-2"
+          >
+            Add point
+          </button>
+          <button
+            onClick={(e) => {
+              console.log("Clear");
+              Clear();
+            }}
+            className="border border-gray-300 bg-black text-white rounded-md p-2"
+          >
+            Clear
+          </button>
+          <button
+            onClick={(e) => {
+              console.log("Highlight clickedCoordinates", clickedCoordinates);
+              Highlight(
+                {
+                  feature_type: "HIGHLIGHT",
+                  geom: `POINT(${clickedCoordinates[0]} ${clickedCoordinates[1]})`,
+                },
+                2,
+                {
+                  duration: 1500,
+                  repeat: true,
+                },
+                0,
+                null
+              );
+            }}
+            disabled={!clickedCoordinates}
+            className="border border-gray-300 bg-black text-white rounded-md p-2"
+          >
+            Highlight clicked coordinates
+          </button>
+          <button
+            onClick={(e) => {
+              console.log("Highlight clickedCoordinates", clickedCoordinates);
+              centerMap(clickedCoordinates);
+            }}
+            disabled={!clickedCoordinates}
+            className="border border-gray-300 bg-black text-white rounded-md p-2"
+          >
+            Center map to clicked coordinates
+          </button>
+          <ZoomToScaleButton />
+        </div>
+      )}
+    </>
+  );
+};
+export default MapButtons;
+
+const ZoomToScaleButton = () => {
+  const { zoomToScale } = useMessages();
+  const { mapScale } = useMaps();
+  const scales = [
+    { id: "1:100", val: "1:100", label: "1:100" },
+    { id: "1:200", val: "1:200", label: "1:200" },
+    { id: "1:500", val: "1:500", label: "1:500" },
+    { id: "1:1000", val: "1:1000", label: "1:1000" },
+    { id: "1:2000", val: "1:2000", label: "1:2000" },
+    { id: "1:5000", val: "1:5000", label: "1:5000" },
+    { id: "1:10000", val: "1:10000", label: "1:10000" },
+    { id: "1:50000", val: "1:50000", label: "1:50000" },
+  ];
+
+  const [actualValue, setActualValue] = useState(mapScale ? mapScale : "-1");
+  useEffect(() => {
+    if (!mapScale) return;
+    const scale = scales.find((s) => s.val === mapScale);
+    if (scale) {
+      setActualValue(scale.val);
+    } else {
+      setActualValue("-1");
+    }
+    console.log("mapScale", mapScale, scale);
+  }, [mapScale]);
+  return (
+    <div className="mx-2 pt-2">
+      <label>Zoom to scale:</label>
+      <select
+        value={actualValue}
+        onChange={(e) => {
+          const newVal = !isNaN(e.target.value)
+            ? Number(e.target.value)
+            : e.target.value;
+          setActualValue(newVal);
+          zoomToScale(newVal);
         }}
-        className="border border-gray-300 bg-black text-white rounded-md p-2"
       >
-        Zoom to extent
-      </button>
+        <option key={`opt_select_scale`} value="-1">
+          Select scale...
+        </option>
+        {scales.map((opt, index) => {
+          return (
+            <option key={`opt_${index}`} value={opt.val}>
+              {opt.label}
+            </option>
+          );
+        })}
+      </select>
     </div>
   );
 };
-export default MapButtons;

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

@@ -0,0 +1,120 @@
+import { useAuth } from "@/contexts/auth";
+import { useMaps } from "@/contexts/maps";
+import { useMessages } from "@/contexts/messages";
+import { useEffect, useState } from "react";
+
+const MapFilters = () => {
+  const {
+    configuredFilters,
+    mapId,
+    filters,
+    activeFilters,
+
+    activeLayer,
+    mapLayers,
+  } = useMaps();
+  const { Filters } = useMessages();
+  const { logged } = useAuth();
+  const [currentFilter, setCurrentFilter] = useState("");
+  const [filterValue, setFilterValue] = useState("");
+  useEffect(() => {
+    if (!configuredFilters) return;
+    console.log("MapFilters configuredFilters", configuredFilters);
+  }, [configuredFilters]);
+
+  useEffect(() => {
+    if (!activeFilters) return;
+    console.log("MapFilters activeFilters", activeFilters);
+  }, [activeFilters]);
+
+  useEffect(() => {
+    if (!filters) return;
+    console.log("MapFilters filters", filters);
+  }, [filters]);
+
+  const applyFilter = () => {
+    if (!activeLayer) {
+      console.log("No active layer");
+      return;
+    }
+    console.log("Apply filter", {
+      currentFilter,
+      filterValue,
+      activeLayer,
+    });
+    //find layer info
+    const lay = mapLayers.find((l) => l.qgis_name === activeLayer);
+    console.log("Layer info", lay);
+    //format filter for mapComponent digest
+    const filter = [
+      {
+        layer_id: lay.id,
+        layer_name: lay.qgis_name,
+        filters: [
+          [
+            {
+              name: currentFilter,
+              condition: "=", //default condition - you can get condition from configuredFilters
+              value: filterValue,
+              value2: null,
+              layer_id: lay.id,
+              mapId: mapId,
+            },
+          ],
+        ],
+      },
+    ];
+    Filters(filter);
+    console.log("Filter", filter);
+  };
+
+  if (!logged) return null;
+  if (!mapId) return null;
+  return (
+    <>
+      <div>
+        {configuredFilters && configuredFilters.length === 0 && (
+          <div>No filters available</div>
+        )}
+
+        <div className="m-2 flex gap-2">
+          <label className="block text-sm font-medium text-gray-700 pt-2">
+            Filters
+          </label>
+          {configuredFilters && configuredFilters.length > 0 && (
+            <select
+              className="border border-gray-300 rounded-md p-2 w-60"
+              onChange={(e) => setCurrentFilter(e.target.value)}
+              value={currentFilter}
+            >
+              <option value="-1">Select filter...</option>
+              {configuredFilters.map((ele) => (
+                <option key={ele.id} value={ele.name}>
+                  {ele.name}
+                </option>
+              ))}
+            </select>
+          )}
+          <input
+            type="text"
+            value={filterValue}
+            onChange={(e) => setFilterValue(e.target.value)}
+            className="border border-gray-300 rounded-md p-2 w-60"
+          />
+          <button
+            onClick={(e) => {
+              console.log("Apply filter");
+              applyFilter();
+            }}
+            disabled={filterValue === "" || currentFilter === "-1"}
+            className="border border-gray-300 bg-black text-white rounded-md p-2 mt-1 text-xs"
+          >
+            Apply filter
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MapFilters;

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

@@ -5,7 +5,9 @@ import { useRouter } from "next/navigation";
 const AuthContext = createContext({});
 
 export const AuthProvider = ({ children }) => {
-  const [apiUrl, setApiUrl] = useState("");
+  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);

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

@@ -1,28 +1,24 @@
 "use client";
 import { createContext, useContext, useState, useEffect } from "react";
-
-import MapService from "@/shared/maps-service";
 import { useAuth } from "./auth";
 
 const MapsContext = createContext({});
 
 export const MapsProvider = ({ children }) => {
   const { apiUrl, token } = useAuth();
-  const [loading, setLoading] = useState(true);
   const [map, setMap] = useState(null);
   const [mapId, setMapId] = useState(null);
-  const [mapToken, setMaptoken] = useState(null);
-  const [mapInfo, setMapInfo] = useState(null);
+
   const [mapError, setMapError] = useState(null);
   const [mapReady, setMapReady] = useState(false);
-  const [tiledReady, setTiledReady] = useState(false);
-  const [componentUrl, setComponentUrl] = useState(null);
+
   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
@@ -36,9 +32,7 @@ export const MapsProvider = ({ children }) => {
   //layers
   const [displayedLayers, setDisplayedLayers] = useState([]);
   const [activeLayer, setActiveLayer] = useState(null);
-  const [layerLabels, setLayerLabels] = useState([]); //layer list to be displayed on UI
-  //preselected layers - shortcut to displayed layers (the pills)
-  const [preselectedLayers, setPreselectedLayers] = useState([]);
+  const [mapLayers, setMapLayers] = useState(null);
 
   const [infoLayerSource, setInfoLayerSource] = useState([]); //layer from info is received
 
@@ -64,24 +58,46 @@ export const MapsProvider = ({ children }) => {
       });
       const data = await response.json();
       console.log("GetMap", data);
-
+      setMapId(id);
       setMapError(false);
-      setSessionToken(data.message.essionToken);
+      setSessionToken(data.message.sessionToken);
       setMap(
         `${data.message.iframe}?sessionToken=${data.message.sessionToken}`
       );
-      setComponentUrl(data.iframe);
       return;
     } catch (error) {
       console.error("Error fetching map:", error);
       setSessionToken(null);
       setMap(null);
-      setComponentUrl(null);
-      setMaptoken(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={{
@@ -89,7 +105,6 @@ export const MapsProvider = ({ children }) => {
         setMapId,
         GetMap,
         map,
-        mapInfo,
         sessionToken,
         mapError,
         mapReady,
@@ -129,6 +144,10 @@ export const MapsProvider = ({ children }) => {
         mapScale,
         setMapScale,
         setSessionToken,
+        mapLayers,
+        GetMapInfo,
+        mapResolution,
+        setMapResolution,
       }}
     >
       {children}

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

@@ -59,6 +59,7 @@ export const MessageProvider = ({ children }) => {
 
   const Filters = (filters) => {
     if (!communicator) return;
+    console.log("messages - Filters", filters);
     communicator.setFilters(filters);
   };
 
@@ -119,12 +120,6 @@ export const MessageProvider = ({ children }) => {
     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 });

package/examples/react-next/env.sample

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