Layer on table can be selected by LayersSidebar

Author: jannik brack

multi_tab/src/App.tsx

@@ -8,7 +8,7 @@ import Box from "@mui/material/Box";
 import {useState} from "react";
 
 function App() {
-    const [openSidebar, setOpenSidebar] = useState(false);
+    const [openSidebar, setOpenSidebar] = useState(true);
     const ghPagesUrl = 'https://mapcomponents.github.io/react-map-components-maplibre/';
     const logoUrl = ghPagesUrl + 'assets/WG-MapComponents-Logo_rgb.svg';
 

multi_tab/src/components/DataTableManager.jsx

@@ -10,7 +10,9 @@ export default function DataTableManager() {
     const [visibleIDs, setVisibleIDs] = useState([]);
     const [selected, setSelected] = useState();
     const [selectedLayer, setSelectedLayer] = useState("all");
-    const [tableSplit, setTableSplit] = useState(true);
+    const [tableSplit, setTableSplit] = useState(false);
+    const [parksVisible, setParksVisible] = useState(true);
+    const [restaurantsVisible, setRestaurantsVisible] = useState(true);
     /*const [showOnlyVisibleObjects, setShowOnlyVisibleObjects] = useState(true);*/
 
     useEffect(() => {
@@ -23,6 +25,21 @@ export default function DataTableManager() {
                         break;
                     case "selectedFromLayerManager":
                         setSelected(message.selected);
+                        break;
+                    case"visibleLayers":
+                        console.log(message);
+                        setParksVisible(message.parksShown);
+                        setRestaurantsVisible(message.restaurantsShown);
+                        setSelectedLayer(
+                            message.parksShown && message.restaurantsShown
+                                ? 'all'
+                                : message.restaurantsShown
+                                    ? 'restaurant'
+                                    : message.parksShown
+                                        ? 'park'
+                                        : ''
+                        );
+
                         break;
                     default:
                         console.warn(`Unhandled message type: ${type}`);

multi_tab/src/components/LayerManager.jsx

@@ -1,4 +1,4 @@
-import {LayerList, Sidebar, useMap,} from "@mapcomponents/react-maplibre";
+import {LayerList, Sidebar, useMap, useMapState,} from "@mapcomponents/react-maplibre";
 import ParkLayer from "./Layers/ParkLayer.tsx";
 import {useContext, useEffect, useState} from "react";
 import {sendMessageToServiceWorker} from "../js/sendMessageToSW";
@@ -57,6 +57,12 @@ export default function LayerManager(props) {
 
     const data = useContext(DataContext);
 
+    const mapState = useMapState({
+        watch:{
+            layers: true
+        },
+    })
+
 
     useEffect(() => {
         if ('serviceWorker' in navigator) {
@@ -73,7 +79,7 @@ export default function LayerManager(props) {
                 navigator.serviceWorker.removeEventListener('message', handleMessage);
             };
         }
-    }, [setSelected]);
+    }, []);
 
     useEffect(() => {
         if (!mapHook.map || !selected) return;
@@ -124,21 +130,16 @@ export default function LayerManager(props) {
     }, [mapHook.map]);
 
     useEffect(() => {
-        console.log("test")
         if (!mapHook.map) return;
 
-        console.log({
-            parksShown: mapHook.map.getLayer('parks').visibility === "visible",
-            restaurantsShown: mapHook.map.getLayer('restaurants').visibility === "visible",
-        })
         sendMessageToServiceWorker({
             type: "visibleLayers",
             message: {
                 parksShown: mapHook.map.getLayer('parks').visibility === "visible",
                 restaurantsShown: mapHook.map.getLayer('restaurants').visibility === "visible",
             }
         })
-    }, [mapHook.map.style._layers.parks.visibility === "visible"]);
+    }, [mapState.layers]);
     return (
         <>
             <Sidebar open={props.openSidebar} setOpen={props.setOpenSidebar} name={"Layers"} >

multi_tab/src/components/UI_Components/DataTable.jsx

@@ -9,7 +9,7 @@ const createObjectList = (data, visibleIDs, selectedLayer) => {
     return Object.values(data).flatMap(value =>
         value.features.filter(feature => {
             const isVisible = visibleIDs.length === 0 || visibleIDs.includes(feature.id);
-            const isCorrectLayer = selectedLayer === "all" || feature.properties.amenity === selectedLayer;
+            const isCorrectLayer = (selectedLayer === "all" || feature.properties.amenity === selectedLayer);
             return isVisible && isCorrectLayer;
         })
     );