@mapcomponents/react-maplibre 0.1.9 → 0.1.13

package/src/decorators/EmptyMapContextDecorator.js

@@ -4,16 +4,21 @@ import { MapComponentsProvider } from "@mapcomponents/react-core";
 import { LoadingOverlayProvider } from "../ui_components/LoadingOverlayContext";
 import LoadingOverlay from "../ui_components/LoadingOverlay";
 import "./style.css";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
+const theme = createTheme({});
 
 const decorators = [
   (Story) => (
-    <MapComponentsProvider>
-      <LoadingOverlayProvider>
-        <LoadingOverlay></LoadingOverlay>
+    <ThemeProvider theme={theme}>
+      <MapComponentsProvider>
+        <LoadingOverlayProvider>
+          <LoadingOverlay></LoadingOverlay>
 
-        <Story />
-      </LoadingOverlayProvider>
-    </MapComponentsProvider>
+          <Story />
+        </LoadingOverlayProvider>
+      </MapComponentsProvider>
+    </ThemeProvider>
   ),
 ];
 

package/src/decorators/MapContext3DDecorator.js

@@ -3,30 +3,35 @@ import React from "react";
 import { MapComponentsProvider } from "@mapcomponents/react-core";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 import "./style.css";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
+const theme = createTheme({});
 
 const decorators = [
   (Story) => (
     <div className="fullscreen_map">
-      <MapComponentsProvider>
-        <Story />
-        <MapLibreMap
-          options={{
-            //style: "mapbox://styles/mapbox/light-v10",
-            //center: [-87.62712, 41.89033],
-            zoom: 14.5,
-            //pitch: 45,
-            //style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-            style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
-            //center: [8.607, 53.1409349],
-            //          zoom: 13,
-            center: [7.0851268, 50.73884],
-            //          maxBounds: [
-            //            [1.40625, 43.452919],
-            //            [17.797852, 55.973798],
-            //          ],
-          }}
-        />
-      </MapComponentsProvider>
+      <ThemeProvider theme={theme}>
+        <MapComponentsProvider>
+          <Story />
+          <MapLibreMap
+            options={{
+              //style: "mapbox://styles/mapbox/light-v10",
+              //center: [-87.62712, 41.89033],
+              zoom: 14.5,
+              //pitch: 45,
+              //style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+              style: "https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
+              //center: [8.607, 53.1409349],
+              //          zoom: 13,
+              center: [7.0851268, 50.73884],
+              //          maxBounds: [
+              //            [1.40625, 43.452919],
+              //            [17.797852, 55.973798],
+              //          ],
+            }}
+          />
+        </MapComponentsProvider>
+      </ThemeProvider>
     </div>
   ),
 ];

package/src/decorators/MapContextDashboardDecorator.js

@@ -1,18 +1,18 @@
 import React from "react";
 
 import { MapComponentsProvider } from "@mapcomponents/react-core";
-import { LoadingOverlayProvider } from "../ui_components/LoadingOverlayContext";
-import LoadingOverlay from "../ui_components/LoadingOverlay";
 import "./style.css";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
+const theme = createTheme({});
 
 const decorators = [
   (Story) => (
-    <MapComponentsProvider>
-      <LoadingOverlayProvider>
-        <LoadingOverlay></LoadingOverlay>
+    <ThemeProvider theme={theme}>
+      <MapComponentsProvider>
         <Story />
-      </LoadingOverlayProvider>
-    </MapComponentsProvider>
+      </MapComponentsProvider>
+    </ThemeProvider>
   ),
 ];
 

package/src/decorators/MapContextDecorator.js

@@ -2,17 +2,16 @@ import React from "react";
 
 import { MapComponentsProvider } from "@mapcomponents/react-core";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-import { LoadingOverlayProvider } from "../ui_components/LoadingOverlayContext";
-import LoadingOverlay from "../ui_components/LoadingOverlay";
 import "./style.css";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
+const theme = createTheme({});
 
 const decorators = [
   (Story) => (
     <div className="fullscreen_map">
-      <MapComponentsProvider>
-        <LoadingOverlayProvider>
-          <LoadingOverlay></LoadingOverlay>
-
+      <ThemeProvider theme={theme}>
+        <MapComponentsProvider>
           <Story />
           <MapLibreMap
             options={{
@@ -22,8 +21,8 @@ const decorators = [
             }}
             mapId="map_1"
           />
-        </LoadingOverlayProvider>
-      </MapComponentsProvider>
+        </MapComponentsProvider>
+      </ThemeProvider>
     </div>
   ),
 ];

package/src/decorators/MapContextKlokantechBasicDecorator.js

@@ -2,16 +2,16 @@ import React from "react";
 
 import { MapComponentsProvider } from "@mapcomponents/react-core";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-import { LoadingOverlayProvider } from "../ui_components/LoadingOverlayContext";
-import LoadingOverlay from "../ui_components/LoadingOverlay";
 import "./style.css";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+
+const theme = createTheme({});
 
 const decorators = [
   (Story) => (
     <div className="fullscreen_map">
-      <MapComponentsProvider>
-        <LoadingOverlayProvider>
-          <LoadingOverlay></LoadingOverlay>
+      <ThemeProvider theme={theme}>
+        <MapComponentsProvider>
           <Story />
           <MapLibreMap
             options={{
@@ -19,8 +19,7 @@ const decorators = [
               //center: [-87.62712, 41.89033],
               zoom: 14.5,
               //pitch: 45,
-              style:
-                "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
+              style: "https://wms.wheregroup.com/tileserver/style/klokantech-basic.json",
               //style:"https://wms.wheregroup.com/tileserver/style/osm-liberty.json",
               //center: [8.607, 53.1409349],
               //          zoom: 13,
@@ -31,8 +30,8 @@ const decorators = [
               //          ],
             }}
           />
-        </LoadingOverlayProvider>
-      </MapComponentsProvider>
+        </MapComponentsProvider>
+      </ThemeProvider>
     </div>
   ),
 ];

package/src/decorators/MultiMapContextDecorator.js

@@ -1,24 +1,21 @@
 import React from "react";
 
 import { MapComponentsProvider } from "@mapcomponents/react-core";
-import { LoadingOverlayProvider } from "../ui_components/LoadingOverlayContext";
-import LoadingOverlay from "../ui_components/LoadingOverlay";
 
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 
-import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 import "./style.css";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 const theme = createTheme({});
 
+
 const decorators = [
   (Story) => (
     <div className="fullscreen_map">
       <ThemeProvider theme={theme}>
         <MapComponentsProvider>
-          <LoadingOverlayProvider>
-            <LoadingOverlay></LoadingOverlay>
             <div
               style={{
                 overflow: "hidden",
@@ -69,7 +66,6 @@ const decorators = [
                 />
               </div>
             </div>
-          </LoadingOverlayProvider>
         </MapComponentsProvider>
       </ThemeProvider>
     </div>

package/src/hooks/useMapState.stories.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import useMapState from "./useMapState";
 
@@ -15,6 +15,11 @@ export default storyoptions;
 const Template = (props) => {
   const mapState = useMapState({ ...props });
 
+  useEffect(() => {
+
+  
+  }, [mapState.layers])
+
   return (
     <>
     <div
@@ -110,6 +115,6 @@ NonBaseLayersOnly.args = {
     sources: false,
   },
   filter: {
-    includeBaseLayers: true,
+    includeBaseLayers: false,
   },
 };

package/src/hooks/useWms.js

@@ -25,12 +25,13 @@ function useWms(props) {
     // extract URL parameters from the given URL
     clearState();
     setError(undefined);
-    if (!props.url) return;
+
+    if (!url) return;
 
     let _propsUrlParams;
-    let _wmsUrl = props.url;
-    if (props.url.indexOf("?") !== -1) {
-      _propsUrlParams = props.url.split("?");
+    let _wmsUrl = url;
+    if (url.indexOf("?") !== -1) {
+      _propsUrlParams = url.split("?");
       _wmsUrl = _propsUrlParams[0];
     }
     let _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
@@ -62,7 +63,7 @@ function useWms(props) {
         console.log(error);
         setError(error.message);
       });
-  }, [props.url, props.urlParameters]);
+  }, [url, props.urlParameters]);
 
   useEffect(() => {
     if (!capabilities?.Service) return;
@@ -92,4 +93,4 @@ useWms.defaultProps = {
   },
 };
 
-export default useWms;
+export default useWms;

package/src/i18n.js

@@ -0,0 +1,28 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import english from "./translations/english.js"
+import german from "./translations/german.js"
+
+
+// the translations
+// (tip move them in a JSON file and import them,
+// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
+const resources = { ...english, ...german };
+
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: "de", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+
+    interpolation: {
+      escapeValue: false // react already safes from xss
+    }
+  });
+
+
+
+export default i18n;

package/src/translations/english.js

@@ -0,0 +1,4 @@
+const english = {
+    "en": { "Layer": "Layer" }
+}
+export default english;

package/src/translations/german.js

@@ -0,0 +1,4 @@
+const german = {
+    "de": { "Layer": "Ebene" }
+}
+export default german;

package/src/ui_components/ImageLoader.js

@@ -0,0 +1,73 @@
+
+import { useEffect, useState } from "react"
+import CircularProgress from '@mui/material/CircularProgress';
+
+import ErrorIcon from '@mui/icons-material/Error';
+import { Box } from "@mui/system";
+const ImageLoader = (props) => {
+  const [state, setState] = useState("loading");
+
+  useEffect(() => {
+    if (!props.src) {
+      setState("error");
+      return;
+    }
+    fetch(props.src)
+      .then(({ ok }) => {
+        if (ok) {
+          setState("ready");
+        } else {
+          setState("error");
+        }
+      })
+      .catch((e) => {
+        console.error(e);
+        setState("error");
+      });
+  }, [props.src]);
+
+  const boxStyle = {
+    width: "100%",
+    height: "100%",
+    border: 2,
+    borderRadius: "8px",
+    textAlign: "center",
+    display: "flex",
+  };
+
+  const LoadingImage = () => {
+    return (
+      <Box className={props.className} sx={{ ...boxStyle, ...props.style }}>
+        <CircularProgress />
+      </Box>
+    );
+  };
+
+  const ReadyImage = () => {
+    return (
+      <img className={props.className} style={{ ...boxStyle, ...props.style }} src={props.src} />
+    );
+  };
+  const ErrorImage = () => {
+    return (
+      <Box className={props.className} sx={{ boxStyle, ...props.style }}>
+        <ErrorIcon sx={{ display: "block", margin: "auto" }} />
+      </Box>
+    );
+  };
+
+  const renderImage = (state) => {
+    switch (state) {
+      case "ready":
+        return <ReadyImage />;
+      case "error":
+        return <ErrorImage />;
+    }
+
+    return <LoadingImage />;
+  };
+
+  return <>{renderImage(state)}</>;
+};
+
+export default ImageLoader

package/src/ui_components/Sidebar.js

@@ -1,46 +1,100 @@
-import React from "react";
+import React, {useState} from "react";
+import { useTheme, styled } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
 import Drawer from "@mui/material/Drawer";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import MenuIcon from '@mui/icons-material/Menu';
+import { IconButton } from "@mui/material";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 const useStyles = makeStyles((theme) => ({
   drawer: {
     flexGrow: 1,
-    zIndex: 101,
+    zIndex: 105,
     position: "absolute",
     top: 0,
     left: 0,
     bottom: 0,
     backgroundColor: "#fafafa",
-  },
-  drawerPaper: {
-    position: "static",
     display: "flex",
+    flexDirection: "column",
     alignItems: "stretch",
     alignContent: "stretch",
-    flexDirection: "column",
-    padding: "90px 10px 10px 23px",
+  },
+  drawerPaper: {
+    position: "initial !important",
     boxSizing: "border-box",
-    minWidth: "150px",
+    padding: "40px",
+    visibility: "visible !important",
+    zIndex: "initial !important",
   },
+  drawerHeader: {
+    alignContent: "flex-start",
+    display: "flex",
+  },
+  drawerContent: {},
+}));
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
 }));
 
 export default function Sidebar(props) {
   const classes = useStyles();
+  const mediaIsMobile = useMediaQuery("(max-width:900px)");
+
+  const [drawerOpen, setDrawerOpen] = useState(true);
+
+  const handleDrawerOpen = () => {
+    setDrawerOpen(true);
+  };
+  const handleDrawerClose = () => {
+    setDrawerOpen(false);
+  };
 
   return (
-    <Drawer
-      className={classes.drawer}
-      variant="persistent"
-      anchor="left"
-      open={true}
-      classes={{
-        paper: classes.drawerPaper,
-      }}
-      sx={{
-        ...props.sx,
-      }}
-    >
-      {props.children}
-    </Drawer>
+    <>
+      <IconButton
+        onClick={handleDrawerOpen}
+        style={{
+          zIndex: 101,
+          position: "relative",
+          padding: "20px",
+        }}
+      >
+        <MenuIcon />
+      </IconButton>
+      <Drawer
+        transitionDuration={0}
+        className={classes.drawer}
+        variant="persistent"
+        anchor="left"
+        open={drawerOpen}
+        classes={{
+          paper: classes.drawerPaper,
+        }}
+        sx={{
+          ...props.sx,
+          ...{
+            maxWidth: mediaIsMobile ? "90vw" : "20vw",
+          },
+          ...(drawerOpen ? {} : { left: mediaIsMobile ? "-90vw" : "-20vw" }),
+        }}
+      >
+        <DrawerHeader className={classes.drawerHeader}>
+          <IconButton onClick={handleDrawerClose}>
+            <ChevronLeftIcon
+              style={
+                {
+                  //paddingBottom: "40px",
+                }
+              }
+            />
+          </IconButton>
+        </DrawerHeader>
+        <div style={{ maxWidth: "100%" }}>{props.children}</div>
+      </Drawer>
+    </>
   );
 }

package/src/ui_components/TopToolbar.js

@@ -3,27 +3,27 @@ import makeStyles from "@mui/styles/makeStyles";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-    zIndex: 120,
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-  AppBar: {
-    backgroundColor: "#fafafa",
-    minHeight: "62px",
-  },
-}));
 
 export default function TopToolbar(props) {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <AppBar className={classes.AppBar} position="static">
+    <div
+      style={{
+        flexGrow: 1,
+        zIndex: 120,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+      }}
+    >
+      <AppBar
+        sx={{
+          minHeight: "62px",
+          backgroundColor: "#f1f1f1",
+        }}
+        color="primary"
+        position="static"
+      >
         <Toolbar>{props.children}</Toolbar>
       </AppBar>
     </div>