Migration to map libre

src/frontend/src/components/MapComponent/OpenLayersComponent/AsyncPopup/AsyncPopup.tsx → .trash/frontend_OpenLayersComponent/OpenLayersComponent/AsyncPopup/AsyncPopup.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { renderToString } from 'react-dom/server';
-import Overlay from 'ol/Overlay';
-import { getCenter } from 'ol/extent';
-import './asyncpopup.scss';
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import { renderToString } from "react-dom/server";
+import Overlay from "ol/Overlay";
+import { getCenter } from "ol/extent";
+import "./asyncpopup.scss";
 
 type asyncPopupPropType = {
   map: any;
@@ -23,7 +23,7 @@ function hasKey(obj, key) {
   return Object.keys(obj).some((item) => item === key);
 }
 
-const layerIds = ['code'];
+const layerIds = ["code"];
 
 const AsyncPopup = ({
   map,
@@ -34,24 +34,24 @@ const AsyncPopup = ({
   onPopupClose,
   closePopup = false,
   loading = false,
-  showOnHover = 'click',
-  primaryKey = 'uid',
-  popupId = 'popupx',
+  showOnHover = "click",
+  primaryKey = "uid",
+  popupId = "popupx",
   className,
 }: asyncPopupPropType) => {
   const popupRef = useRef<any>(null);
   const popupCloserRef = useRef<any>(null);
   const [coordinates, setCoordinates] = useState<any>(null);
   const [overlay, setOverlay] = useState<any>(null);
   const [properties, setProperties] = useState(null);
-  const [popupHTML, setPopupHTML] = useState<HTMLBodyElement | string>('');
+  const [popupHTML, setPopupHTML] = useState<HTMLBodyElement | string>("");
 
   // add overlay to popupRef
   useEffect(() => {
     if (!map || !popupRef.current) return;
     const overlayInstance = new Overlay({
       element: popupRef.current,
-      positioning: 'center-center',
+      positioning: "center-center",
       id: popupId,
       autoPan: {
         animation: {
@@ -66,7 +66,7 @@ const AsyncPopup = ({
   const closePopupFn = useCallback(() => {
     if (!popupCloserRef.current || !overlay) return;
     overlay.setPosition(undefined);
-    setPopupHTML('');
+    setPopupHTML("");
     setProperties(null);
     if (popupCloserRef?.current instanceof HTMLElement) {
       popupCloserRef.current.blur();
@@ -86,18 +86,18 @@ const AsyncPopup = ({
       if (popupRef.current && !popupRef?.current?.contains(event.target)) {
         // alert('You clicked outside of me!');
         overlay.setPosition(undefined);
-        setPopupHTML('');
+        setPopupHTML("");
         setProperties(null);
         if (popupCloserRef?.current instanceof HTMLElement) {
           popupCloserRef?.current.blur();
         }
       }
     }
     // Bind the event listener
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
       // Unbind the event listener on clean up
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [overlay]);
   // get properties and coordinates of feature
@@ -107,7 +107,7 @@ const AsyncPopup = ({
 
     map.on(showOnHover, (evt) => {
       overlay.setPosition(undefined);
-      setPopupHTML('');
+      setPopupHTML("");
       setProperties(null);
       if (popupCloserRef?.current instanceof HTMLElement) {
         popupCloserRef.current?.blur();
@@ -127,7 +127,8 @@ const AsyncPopup = ({
       const { [primaryKey]: primaryKeyValue } = featureProperties;
       if (
         layerIds.includes(primaryKeyValue) ||
-        (hasKey(featureProperties, primaryKey) && featureProperties?.[primaryKey])
+        (hasKey(featureProperties, primaryKey) &&
+          featureProperties?.[primaryKey])
       ) {
         setProperties(featureProperties);
         setCoordinates(coordinate);
@@ -143,7 +144,7 @@ const AsyncPopup = ({
   useEffect(() => {
     if (!map || !properties) return;
     const { layerId } = properties;
-    if (layerIds.includes(layerId) || hasKey(properties, 'layer')) {
+    if (layerIds.includes(layerId) || hasKey(properties, "layer")) {
       fetchPopupData(properties);
     }
     // eslint-disable-next-line

src/frontend/src/components/MapComponent/OpenLayersComponent/AsyncPopup/asyncpopup.scss → .trash/frontend_OpenLayersComponent/OpenLayersComponent/AsyncPopup/asyncpopup.scss

@@ -11,7 +11,7 @@
 .ol-popup:before {
   top: 100%;
   border: solid transparent;
-  content: ' ';
+  content: " ";
   height: 0;
   width: 0;
   position: absolute;

src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/LayerSwitchMenu.tsx → .trash/frontend_OpenLayersComponent/OpenLayersComponent/LayerSwitcher/LayerSwitchMenu.tsx

@@ -1,20 +1,20 @@
-import React, { useEffect, useState } from 'react';
-import osmImg from '@/assets/images/osmLayer.png';
-import satelliteImg from '@/assets/images/satelliteLayer.png';
-import { useAppSelector } from '@/types/reduxTypes';
-import { useLocation } from 'react-router-dom';
+import React, { useEffect, useState } from "react";
+import osmImg from "@/assets/images/osmLayer.png";
+import satelliteImg from "@/assets/images/satelliteLayer.png";
+import { useAppSelector } from "@/types/reduxTypes";
+import { useLocation } from "react-router-dom";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
   DropdownMenuPortal,
-} from '@/components/common/Dropdown';
-import { Tooltip } from '@mui/material';
+} from "@/components/common/Dropdown";
+import { Tooltip } from "@mui/material";
 
 export const layerIcons = {
   Satellite: satelliteImg,
   OSM: osmImg,
-  'TMS Layer': satelliteImg,
+  "TMS Layer": satelliteImg,
 };
 
 type layerCardPropType = {
@@ -23,31 +23,37 @@ type layerCardPropType = {
   active: boolean;
 };
 
-const LayerCard = ({ layer, changeBaseLayerHandler, active }: layerCardPropType) => {
+const LayerCard = ({
+  layer,
+  changeBaseLayerHandler,
+  active,
+}: layerCardPropType) => {
   return (
     <li
       className={`fmtm-flex fmtm-justify-center fmtm-items-center fmtm-flex-col fmtm-cursor-pointer fmtm-group/layer`}
       onClick={() => changeBaseLayerHandler(layer)}
       onKeyDown={() => changeBaseLayerHandler(layer)}
     >
-      {layer === 'None' ? (
+      {layer === "None" ? (
         <div
           className={`fmtm-w-[3rem] fmtm-duration-200 fmtm-h-[3rem] fmtm-rounded-md group-hover/layer:fmtm-border-primaryRed fmtm-border-[2px] ${
-            active ? '!fmtm-border-primaryRed' : 'fmtm-border-grey-100'
+            active ? "!fmtm-border-primaryRed" : "fmtm-border-grey-100"
           }`}
         ></div>
       ) : (
         <img
           className={`group-hover/layer:fmtm-border-primaryRed fmtm-w-[3rem] fmtm-h-[3rem] fmtm-border-[2px] fmtm-bg-contain fmtm-rounded-md ${
-            active ? '!fmtm-border-primaryRed fmtm-duration-200' : 'fmtm-border-grey-100'
+            active
+              ? "!fmtm-border-primaryRed fmtm-duration-200"
+              : "fmtm-border-grey-100"
           }`}
           src={layerIcons[layer] ? layerIcons[layer] : satelliteImg}
           alt={`${layer} Layer`}
         />
       )}
       <p
         className={`fmtm-body-sm fmtm-flex fmtm-justify-center group-hover/layer:fmtm-text-primaryRed fmtm-duration-200 ${
-          active ? 'fmtm-text-primaryRed' : ''
+          active ? "fmtm-text-primaryRed" : ""
         }`}
       >
         {layer}
@@ -56,41 +62,52 @@ const LayerCard = ({ layer, changeBaseLayerHandler, active }: layerCardPropType)
   );
 };
 
-const LayerSwitchMenu = ({ map, pmTileLayerUrl = null }: { map: any; pmTileLayerUrl?: any }) => {
+const LayerSwitchMenu = ({
+  map,
+  pmTileLayerUrl = null,
+}: {
+  map: any;
+  pmTileLayerUrl?: any;
+}) => {
   const { pathname } = useLocation();
-  const [baseLayers, setBaseLayers] = useState<string[]>(['OSM', 'Satellite', 'None']);
+  const [baseLayers, setBaseLayers] = useState<string[]>([
+    "OSM",
+    "Satellite",
+    "None",
+  ]);
   const [hasPMTile, setHasPMTile] = useState(false);
-  const [activeLayer, setActiveLayer] = useState('OSM');
-  const [activeTileLayer, setActiveTileLayer] = useState('');
+  const [activeLayer, setActiveLayer] = useState("OSM");
+  const [activeTileLayer, setActiveTileLayer] = useState("");
   const [isLayerMenuOpen, setIsLayerMenuOpen] = useState(false);
   const projectInfo = useAppSelector((state) => state.project.projectInfo);
 
   useEffect(() => {
     if (
       !projectInfo?.custom_tms_url ||
-      !pathname.includes('project') ||
-      baseLayers.includes('TMS Layer') ||
+      !pathname.includes("project") ||
+      baseLayers.includes("TMS Layer") ||
       !map ||
       baseLayers?.length === 0
     )
       return;
-    setBaseLayers((prev) => [...prev, 'TMS Layer']);
+    setBaseLayers((prev) => [...prev, "TMS Layer"]);
   }, [projectInfo, pathname, map]);
 
   useEffect(() => {
-    if (!pmTileLayerUrl || baseLayers.includes('Custom')) return;
+    if (!pmTileLayerUrl || baseLayers.includes("Custom")) return;
     setHasPMTile(true);
-    setActiveTileLayer('Custom');
+    setActiveTileLayer("Custom");
   }, [pmTileLayerUrl]);
 
   const changeBaseLayer = (baseLayerTitle: string) => {
     const allLayers = map.getLayers();
     const filteredBaseLayers: Record<string, any> = allLayers.array_.find(
-      (layer) => layer?.values_?.title == 'Base maps',
+      (layer) => layer?.values_?.title == "Base maps",
     );
-    const baseLayersCollection: Record<string, any>[] = filteredBaseLayers?.values_?.layers.array_;
+    const baseLayersCollection: Record<string, any>[] =
+      filteredBaseLayers?.values_?.layers.array_;
     baseLayersCollection
-      ?.filter((bLayer) => bLayer?.values_?.title !== 'Custom')
+      ?.filter((bLayer) => bLayer?.values_?.title !== "Custom")
       ?.forEach((baseLayer) => {
         if (baseLayer?.values_?.title === baseLayerTitle) {
           baseLayer.setVisible(true);
@@ -104,30 +121,43 @@ const LayerSwitchMenu = ({ map, pmTileLayerUrl = null }: { map: any; pmTileLayer
   const toggleTileLayer = (layerTitle: string) => {
     const allLayers = map.getLayers();
     const filteredBaseLayers: Record<string, any> = allLayers.array_.find(
-      (layer) => layer?.values_?.title == 'Base maps',
+      (layer) => layer?.values_?.title == "Base maps",
     );
-    const baseLayersCollection: Record<string, any>[] = filteredBaseLayers?.values_?.layers.array_;
+    const baseLayersCollection: Record<string, any>[] =
+      filteredBaseLayers?.values_?.layers.array_;
 
-    const tileLayer = baseLayersCollection?.find((baseLayer) => baseLayer?.values_?.title === layerTitle);
+    const tileLayer = baseLayersCollection?.find(
+      (baseLayer) => baseLayer?.values_?.title === layerTitle,
+    );
     if (tileLayer) {
       const isLayerVisible = tileLayer.getVisible();
       tileLayer.setVisible(!isLayerVisible);
-      setActiveTileLayer(!isLayerVisible ? layerTitle : '');
+      setActiveTileLayer(!isLayerVisible ? layerTitle : "");
     }
   };
 
   return (
     <div className="fmtm-w-6 fmtm-h-6 fmtm-max-w-6 fmtm-max-h-6">
-      <DropdownMenu modal={false} onOpenChange={(status) => setIsLayerMenuOpen(status)}>
+      <DropdownMenu
+        modal={false}
+        onOpenChange={(status) => setIsLayerMenuOpen(status)}
+      >
         <DropdownMenuTrigger className="fmtm-outline-none">
-          <Tooltip title="Base Maps" placement={isLayerMenuOpen ? 'bottom' : 'left'} arrow>
+          <Tooltip
+            title="Base Maps"
+            placement={isLayerMenuOpen ? "bottom" : "left"}
+            arrow
+          >
             <div
               style={{
-                backgroundImage: activeLayer === 'None' ? 'none' : `url(${layerIcons[activeLayer] || satelliteImg})`,
-                backgroundColor: 'white',
+                backgroundImage:
+                  activeLayer === "None"
+                    ? "none"
+                    : `url(${layerIcons[activeLayer] || satelliteImg})`,
+                backgroundColor: "white",
               }}
               className={`fmtm-relative fmtm-group fmtm-order-4 fmtm-w-6 fmtm-h-6 fmtm-max-w-6 fmtm-max-h-6 fmtm-cursor-pointer fmtm-bg-contain ${
-                activeLayer === 'None' ? '!fmtm-border-primaryRed' : ''
+                activeLayer === "None" ? "!fmtm-border-primaryRed" : ""
               }`}
             ></div>
           </Tooltip>
@@ -160,8 +190,8 @@ const LayerSwitchMenu = ({ map, pmTileLayerUrl = null }: { map: any; pmTileLayer
                     <LayerCard
                       key="Custom"
                       layer="Custom"
-                      changeBaseLayerHandler={() => toggleTileLayer('Custom')}
-                      active={'Custom' === activeTileLayer}
+                      changeBaseLayerHandler={() => toggleTileLayer("Custom")}
+                      active={"Custom" === activeTileLayer}
                     />
                   </div>
                 </div>