Merge pull request #5 from mapcomponents/feature/demos_optimierung

Feature/demos optimierung
mapcomponents · Jul 14, 2023 · a7eac7d · a7eac7d
2 parents 65414aa + 9064f22
commit a7eac7d
Show file tree

Hide file tree

Showing 6 changed files with 711 additions and 577 deletions.
diff --git a/package.json b/package.json
@@ -18,11 +18,12 @@
     "@fontsource/roboto": "^4.5.1",
     "@mapbox/mapbox-gl-draw": "^1.2.0",
     "@mapbox/mapbox-gl-sync-move": "^0.3.0",
-    "@mapcomponents/react-maplibre": "^0.1.61",
+    "@mapcomponents/react-maplibre": "^0.1.84",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "5.0.0",
+    "@mui/styles": "^5.13.2",
     "@nivo/core": "^0.69.0",
     "@nivo/line": "^0.69.1",
     "@testing-library/jest-dom": "^5.11.4",

diff --git a/src/components/MlDeckGlTerrainLayer/MlDeckGlTerrainLayer.js b/src/components/MlDeckGlTerrainLayer/MlDeckGlTerrainLayer.js
@@ -1,19 +1,12 @@
-import React, { useContext, useRef, useEffect, useState, useCallback } from "react";
-import { MapContext } from "@mapcomponents/react-maplibre";
-
-import { MlBasicComponent } from "@mapcomponents/react-maplibre";
-import Button from "@material-ui/core/Button";
-
+import React from "react";
 import { MapboxLayer } from "@deck.gl/mapbox";
 import { TerrainLayer } from "@deck.gl/geo-layers";
+import { MlBasicComponent } from "@mapcomponents/react-maplibre";
 
 /**
  * MlDeckGlTerrainLayer adds kepler.gl layer to the maplibre-gl instance.
  */
 const MlDeckGlTerrainLayer = () => {
-  const mapContext = useContext(MapContext);
-  const [showLayer, setShowLayer] = useState(true);
-  const showLayerRef = useRef(true);
   const layerName = "deckgl-terrain-layer";
 
   const ELEVATION_DECODER = {
@@ -49,37 +42,11 @@ const MlDeckGlTerrainLayer = () => {
       }),
       "water-name-lakeline"
     );
-    //    setTimeout(() => {
-    //      map.setZoom(13);
-    //      map.setPitch(45);
-    //      map.setCenter({ lng: 11.647776401389137, lat: 46.48726512556033 });
-    //      rotateCamera(0);
-    //    }, 500);
   };
 
-  useEffect(() => {
-    if (!mapContext.map) return;
-
-    // toggle layer visibility by changing the layout object's visibility property
-    if (showLayer) {
-      showLayerRef.current = true;
-      mapContext.map.setLayoutProperty(layerName, "visibility", "visible");
-    } else {
-      showLayerRef.current = false;
-      mapContext.map.setLayoutProperty(layerName, "visibility", "none");
-    }
-  }, [showLayer]);
-
   return (
     <>
       <MlBasicComponent cleanup={cleanup} mapIsReady={mapIsReady}></MlBasicComponent>
-      <Button
-        color="primary"
-        variant={showLayer ? "contained" : "outlined"}
-        onClick={() => setShowLayer(!showLayer)}
-      >
-        Terrain Layer
-      </Button>
     </>
   );
 };

diff --git a/src/components/MlDeckGlTerrainLayer/MlDeckGlTerrainLayer.stories.js b/src/components/MlDeckGlTerrainLayer/MlDeckGlTerrainLayer.stories.js
@@ -1,11 +1,44 @@
 import React, { useState } from "react";
-import TopToolbar from "../../ui_components/TopToolbar";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
-import { Button, Slider, Typography } from "@mui/material";
-import { useCameraFollowPath, MlGeoJsonLayer } from "@mapcomponents/react-maplibre";
+import {
+  Button,
+  MenuItem,
+  Slider,
+  Typography,
+  createTheme,
+  ThemeProvider,
+} from "@mui/material";
+import {
+  TopToolbar,
+  Sidebar,
+  useCameraFollowPath,
+  MlGeoJsonLayer,
+} from "@mapcomponents/react-maplibre";
 
 import MlDeckGlTerrainLayer from "./MlDeckGlTerrainLayer";
 
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#009EE0",
+    },
+    secondary: { main: "#747577" },
+    text: {
+      primary: "#000",
+      contrast: "#fff",
+    },
+  },
+  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#fff",
+        },
+      },
+    },
+  },
+});
+
 const storyoptions = {
   title: "MapComponents/MlDeckGlTerrainLayer",
   component: MlDeckGlTerrainLayer,
@@ -63,7 +96,7 @@ const Template = (args) => {
   const [state, setState] = useState({
     pause: true,
     zoom: 11,
-    speed: 10,
+    speed: 20,
     pitch: 60,
   });
 
@@ -75,16 +108,15 @@ const Template = (args) => {
     speed: state.speed,
   });
 
-  const [showComponent, setShowComponent] = useState(true);
+  const [showRoute, setShowRoute] = useState(true);
+  const [showLayer, setShowLayer] = useState(true);
+  const [openSidebar, setOpenSidebar] = useState(true);
 
   return (
     <>
-      <TopToolbar>
-        <MlDeckGlTerrainLayer />
-        <Button onClick={() => setShowComponent(!showComponent)}>
-          {showComponent ? "Route ausblenden" : "Route einblenden"}
-        </Button>
-        {showComponent ? (
+      <ThemeProvider theme={theme}>
+        {showLayer ? <MlDeckGlTerrainLayer /> : null}
+        {showRoute ? (
           <MlGeoJsonLayer
             geojson={routeJson}
             type="line"
@@ -94,104 +126,145 @@ const Template = (args) => {
             }}
           />
         ) : null}
-        <Button
-          disabled={!state.pause}
-          onClick={() =>
-            setState((current) => {
-              return { ...current, pause: false };
-            })
-          }
-        >
-          Start
-        </Button>
-        <Button
-          disabled={state.pause}
-          onClick={() =>
-            setState((current) => {
-              return { ...current, pause: true };
-            })
+        <TopToolbar
+          buttons={
+            <>
+              <Button
+                variant={showLayer ? "contained" : "outlined"}
+                onClick={() => setShowLayer(!showLayer)}
+                sx={{
+                  marginRight: { xs: "0px", sm: "10px" },
+                  marginBottom: { xs: "5px", sm: "00px" },
+                }}
+              >
+                Terrain Layer
+              </Button>
+              <Button
+                variant={openSidebar ? "contained" : "outlined"}
+                onClick={() => setOpenSidebar(!openSidebar)}
+                sx={{ marginRight: { xs: "0px", sm: "10px" } }}
+              >
+                Camera Settings
+              </Button>
+            </>
           }
-        >
-          Pause
-        </Button>
-        <Button
-          onClick={() => {
-            CameraFollowPath.reset();
-            setState((current) => {
-              return { ...current, pause: true, pitch: 60, zoom: 13, speed: 10 };
-            });
-          }}
-        >
-          Reset
-        </Button>
-        <Typography
-          id="discrete-slider"
-          style={{ color: "#121212", marginLeft: "10px", marginRight: "10px" }}
-        >
-          Zoom:
-        </Typography>
-        <Slider
-          value={state.zoom}
-          onChange={(ev, value) => {
-            setState((current) => {
-              return { ...current, zoom: value };
-            });
-          }}
-          getAriaValueText={(value) => value}
-          aria-labelledby="discrete-slider"
-          //valueLabelDisplay="auto"
-          step={1}
-          marks={marks}
-          min={8}
-          max={13}
-          sx={{
-            marginTop: "20px",
-            paddingBottom: "20px",
-            marginRight: "10px",
-            maxWidth: "200px",
-          }}
         />
-        <Typography
-          id="discrete-slider2"
-          style={{ color: "#121212", marginLeft: "10px", marginRight: "10px" }}
+        <Sidebar
+          open={openSidebar}
+          setOpen={setOpenSidebar}
+          name={"Camera Settings"}
         >
-          Speed:
-        </Typography>
-        <Slider
-          value={state.speed}
-          onChange={(ev, value) => {
-            setState((current) => {
-              return { ...current, speed: value };
-            });
-          }}
-          getAriaValueText={(value) => value}
-          aria-labelledby="discrete-slider2"
-          //valueLabelDisplay="auto"
-          step={1}
-          marks
-          min={1}
-          max={20}
-          sx={{
-            marginRight: "10px",
-            maxWidth: "200px",
-          }}
-        />
-        <Button
-          onClick={() => {
-            if (state.pitch === 0) {
+          <MenuItem onClick={() => setShowRoute(!showRoute)}>
+            <Typography>
+              {showRoute ? "Route ausblenden" : "Route einblenden"}
+            </Typography>
+          </MenuItem>
+
+          <MenuItem
+            disabled={!state.pause}
+            onClick={() =>
               setState((current) => {
-                return { ...current, pitch: 60 };
-              });
-            } else {
+                return { ...current, pause: false };
+              })
+            }
+          >
+            <Typography>Start</Typography>
+          </MenuItem>
+          <MenuItem
+            disabled={state.pause}
+            onClick={() =>
               setState((current) => {
-                return { ...current, pitch: 0 };
-              });
+                return { ...current, pause: true };
+              })
             }
-          }}
-        >
-          {state.pitch === 0 ? "3D" : "2D"}
-        </Button>
-      </TopToolbar>
+          >
+            <Typography>Pause</Typography>
+          </MenuItem>
+          <MenuItem
+            onClick={() => {
+              setState((current) => {
+                return { ...current, pause: true, pitch: 60, zoom: 11, speed: 20 };
+              });
+              setTimeout(() => {
+                CameraFollowPath.reset();
+              }, 50);
+            }}
+          >
+            <Typography>Reset</Typography>
+          </MenuItem>
+          <MenuItem>
+            <Typography
+              id="discrete-slider"
+              style={{ color: "#121212", marginLeft: "10px", marginRight: "10px" }}
+            >
+              Zoom:
+            </Typography>
+            <Slider
+              value={state.zoom}
+              onChange={(ev, value) => {
+                setState((current) => {
+                  return { ...current, zoom: value };
+                });
+              }}
+              getAriaValueText={(value) => value}
+              aria-labelledby="discrete-slider"
+              //valueLabelDisplay="auto"
+              step={1}
+              marks={marks}
+              min={8}
+              max={13}
+              sx={{
+                marginTop: "20px",
+                paddingBottom: "20px",
+                marginRight: "10px",
+                maxWidth: "200px",
+              }}
+            />
+          </MenuItem>
+          <MenuItem>
+            <Typography
+              id="discrete-slider2"
+              style={{ color: "#121212", marginLeft: "10px", marginRight: "10px" }}
+            >
+              Speed:
+            </Typography>
+            <Slider
+              value={state.speed}
+              onChange={(ev, value) => {
+                setState((current) => {
+                  return { ...current, speed: value };
+                });
+              }}
+              getAriaValueText={(value) => value}
+              aria-labelledby="discrete-slider2"
+              //valueLabelDisplay="auto"
+              step={5}
+              marks
+              min={1}
+              max={60}
+              sx={{
+                marginRight: "10px",
+                maxWidth: "200px",
+              }}
+            />
+          </MenuItem>
+          <MenuItem
+            onClick={() => {
+              if (state.pitch === 0) {
+                setState((current) => {
+                  return { ...current, pitch: 60 };
+                });
+              } else {
+                setState((current) => {
+                  return { ...current, pitch: 0 };
+                });
+              }
+            }}
+          >
+            {state.pitch === 0 ? "3D" : "2D"}
+          </MenuItem>
+        </Sidebar>
+      </ThemeProvider>
     </>
   );
 };