@mapcomponents/react-maplibre 0.1.11 → 0.1.15

package/src/hooks/useMap.js

@@ -1,23 +1,28 @@
 import { useContext, useState, useEffect, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { MapContext } from "@mapcomponents/react-core";
+import useMapState from "./useMapState";
 
 function useMap(props) {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   const mapContext = useContext(MapContext);
 
+  const mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+  });
+
   const initializedRef = useRef(false);
   const mapRef = useRef(undefined);
 
-  const [center, setCenter] = useState(undefined);
-  const [layerIds, setLayerIds] = useState(undefined);
-  const layerIdsRef = useRef(undefined);
-
-  const [layers, setLayers] = useState(undefined);
-  const layersRef = useRef(undefined);
-  //const mapRef = useRef(props.map);
   const componentId = useRef(uuidv4());
 
+  const [mapIsReady, setMapIsReady] = useState(undefined);
+
   useEffect(() => {
     let _componentId = componentId.current;
 
@@ -27,72 +32,41 @@ function useMap(props) {
         mapRef.current = undefined;
       }
       initializedRef.current = false;
+      setMapIsReady(false);
     };
   }, []);
 
-  const buildLayerObjects = (layers) => {
-    let res = {};
-    Object.keys(layers).forEach((layerId) => {
-      if (mapRef.current.baseLayers.indexOf(layerId) === -1) {
-        res[layerId] = {
-          //filter: layers[layerId].filter,
-          id: layers[layerId].id,
-          //layout: layers[layerId].layout,
-          //maxzoom: layers[layerId].maxzoom,
-          //metadata: layers[layerId].metadata,
-          //minzoom: layers[layerId].minzoom,
-          paint: layers[layerId].paint,
-          //source: layers[layerId].source,
-          //sourceLayer: layers[layerId].sourceLayer,
-          type: layers[layerId].type,
-          visibility: layers[layerId].visibility,
-        };
-      }
-    });
-    return res;
-  };
-
   useEffect(() => {
     if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+
+    console.log("initialize useMap hook");
+    //check if insertBeforeLayer exists
+    if (props.waitForLayer) {
+      let layerFound = false;
+
+      mapState?.layers?.forEach((layer) => {
+        console.log(layer.id + " " + props.waitForLayer);
+        if (layer.id === props.waitForLayer) {
+          layerFound = true;
+        }
+      });
+      if (!layerFound) {
+        return;
+      }
+    }
+    console.log("done initialize useMap hook");
     // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
     initializedRef.current = true;
     mapRef.current = mapContext.getMap(props.mapId);
-
-    setLayerIds([...mapRef.current.style._order]);
-    mapRef.current.on(
-      "idle",
-      () => {
-        if (JSON.stringify(mapRef.current.style._order) !== layerIdsRef.current) {
-          let layerIds = [...mapRef.current.style._order];
-          layerIdsRef.current = JSON.stringify(layerIds);
-          setLayerIds(layerIds);
-        }
-
-        let layerStates = buildLayerObjects(mapRef.current.style._layers);
-        let layerStatesString = JSON.stringify(layerStates);
-        if (layerStatesString !== layersRef.current) {
-          layersRef.current = layerStatesString;
-          setLayers(layerStates);
-        }
-      },
-      componentId.current
-    );
-
-    setCenter(mapRef.current.getCenter());
-    mapRef.current.on(
-      "move",
-      () => {
-        setCenter(mapRef.current.getCenter());
-      },
-      componentId.current
-    );
-  }, [mapContext.mapIds, mapContext, props.mapId]);
+    setMapIsReady(true);
+  }, [mapContext.mapIds, mapState.layers, mapContext, props.mapId]);
 
   return {
-    layers,
-    layerIds,
-    center,
+    map: mapRef.current,
+    mapIsReady,
+    componentId: componentId.current,
+    layers: mapState.layers,
   };
 }
 

package/src/hooks/useMapState.js

@@ -34,11 +34,11 @@ function useMapState(props) {
    */
   const layerIdFilter = useCallback(
     (layer) => {
-      if (!props.filter.includeBaseLayers && layer.baseLayer) {
+      if (!props?.filter?.includeBaseLayers && layer.baseLayer) {
         return false;
       }
 
-      if (typeof props.filter.matchLayerIds !== "undefined") {
+      if (typeof props.filter?.matchLayerIds !== "undefined") {
         if (props.filter.matchLayerIds instanceof RegExp) {
           return props.filter.matchLayerIds.test(layer.id);
         } else {
@@ -58,7 +58,7 @@ function useMapState(props) {
       layersRef.current = _layerStateString;
       setLayers(_layerState);
     }
-  },[layerIdFilter]);
+  }, [layerIdFilter]);
 
   useEffect(() => {
     let _componentId = componentId.current;

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/index.js

@@ -1,6 +1,7 @@
 export { default as MapLibreMap } from "./components/MapLibreMap/MapLibreMap";
 export { default as MlComponentTemplate } from "./components/MlComponentTemplate/MlComponentTemplate";
 export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLayer/MlFillExtrusionLayer";
+export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";
 export { default as MlCreatePdfButton } from "./components/MlCreatePdfButton/MlCreatePdfButton";
 export { default as MlGeoJsonLayer } from "./components/MlGeoJsonLayer/MlGeoJsonLayer";
 export { default as MlImageMarkerLayer } from "./components/MlImageMarkerLayer/MlImageMarkerLayer";
@@ -17,5 +18,7 @@ export { default as MlLayerSwipe } from "./components/MlLayerSwipe/MlLayerSwipe"
 export { default as MlGPXViewer } from "./components/MlGPXViewer/MlGPXViewer";
 export { default as GeoJsonProvider } from "./components/MlGPXViewer/util/GeoJsonProvider";
 export { default as GeoJsonContext } from "./components/MlGPXViewer/util/GeoJsonContext";
+export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile";
 
 export { default as useMapState } from "./hooks/useMapState";
+export { default as useMap } from "./hooks/useMap";

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>

package/coverage/lcov-report/components/MlLayer/index.html

@@ -1,111 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for components/MlLayer</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../../prettify.css" />
-    <link rel="stylesheet" href="../../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> components/MlLayer</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">86.48% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>32/37</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">75% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>21/28</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>5/5</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">86.11% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>31/36</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-    </div>
-    <div class='status-line high'></div>
-    <div class="pad1">
-<table class="coverage-summary">
-<thead>
-<tr>
-   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-</tr>
-</thead>
-<tbody><tr>
-	<td class="file high" data-value="MlLayer.js"><a href="MlLayer.js.html">MlLayer.js</a></td>
-	<td data-value="86.48" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 86%"></div><div class="cover-empty" style="width: 14%"></div></div>
-	</td>
-	<td data-value="86.48" class="pct high">86.48%</td>
-	<td data-value="37" class="abs high">32/37</td>
-	<td data-value="75" class="pct medium">75%</td>
-	<td data-value="28" class="abs medium">21/28</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="5" class="abs high">5/5</td>
-	<td data-value="86.11" class="pct high">86.11%</td>
-	<td data-value="36" class="abs high">31/36</td>
-	</tr>
-
-</tbody>
-</table>
-</div>
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Wed Dec 01 2021 11:10:48 GMT+0000 (Coordinated Universal Time)
-            </div>
-        </div>
-        <script src="../../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../../sorter.js"></script>
-        <script src="../../block-navigation.js"></script>
-    </body>
-</html>
-