@mapcomponents/react-maplibre 0.1.14 → 0.1.18

package/src/components/MlShareMapState/MlShareMapState.stories.js

@@ -2,6 +2,7 @@ import React, { useState} from "react";
 
 import MlShareMapState from "./MlShareMapState";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
+import MlLayer from "../MlLayer/MlLayer";
 
 const storyoptions = {
   title: "MapComponents/MlShareMapState",
@@ -12,7 +13,8 @@ const storyoptions = {
 export default storyoptions;
 
 const Template = (args) => {
-  const [watchState, setWatchState] = useState(true);
+  const [watchState, setWatchState] = useState(false);
+  const [testLayerVisible, setTestLayerVisible] = useState(true);
 
   return (
     <>
@@ -20,9 +22,27 @@ const Template = (args) => {
         style={{ zIndex: "1000", position: "absolute" }}
         onClick={() => setWatchState(!watchState)}
       >
-        watch map state {watchState?1:0}
+        watch map state {watchState ? 1 : 0}
+      </button>
+      <button
+        style={{ zIndex: "1000", position: "absolute" }}
+        onClick={() => setTestLayerVisible(!testLayerVisible)}
+      >
+        visibility {testLayerVisible ? 1 : 0}
       </button>
       <MlShareMapState active={watchState} />
+      <MlLayer
+        layerId={"MlLayer-testLayer"}
+        options={{ layout: { visibility: testLayerVisible ? "visible" : "none" } }}
+      />
+      <MlLayer
+        layerId={"MlLayer-testLayer2"}
+        options={{ layout: { visibility: testLayerVisible ? "visible" : "none" } }}
+      />
+      <MlLayer
+        layerId={"MlLayer-testLayer3"}
+        options={{ layout: { visibility: testLayerVisible ? "visible" : "none" } }}
+      />
     </>
   );
 };

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.js

@@ -5,9 +5,7 @@ import MlGPXViewer from "../MlGPXViewer/MlGPXViewer";
 
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 import GeoJsonProvider from "../MlGPXViewer/util/GeoJsonProvider";
-import Button from "@mui/material/Button";
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import InfoIcon from "@mui/icons-material/Info";
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import IconButton from "@mui/material/IconButton";
 import useMediaQuery from "@mui/material/useMediaQuery";
 

package/src/components/MlUseMapDebugger/MlUseMapDebugger.js

@@ -1,11 +1,7 @@
-import React, { useRef, useState } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 
-import { Drawer, IconButton } from "@mui/material";
-import CodeIcon from "@mui/icons-material/Code";
-
 import useMapState from "../../hooks/useMapState";
-import { render } from "@testing-library/react";
 
 /**
  * Renders a collapsable top-drawer containing live map debug information
@@ -30,8 +26,6 @@ const MlUseMapDebugger = (props) => {
   });
   const renderCounter = useRef(0);
   renderCounter.current = renderCounter.current + 1;
-  const [debuggerOpen, setDebuggerOpen] = useState(true);
-  //const [maxHeight /*setMaxHeight*/] = useState("50%");
 
   return (
     <>

package/src/components/MlWmsLoader/MlWmsLoader.js

@@ -155,10 +155,6 @@ const MlWmsLoader = (props) => {
     };
   }, [getFeatureInfoUrl]);
 
-  const clearState = () => {
-    setLayers([]);
-  };
-
   useEffect(() => {
     if (!capabilities?.Service) return;
 

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,38 @@ 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;
+
+    //check if insertBeforeLayer exists
+    if (props.waitForLayer) {
+      let layerFound = false;
+
+      mapState?.layers?.forEach((layer) => {
+        if (layer.id === props.waitForLayer) {
+          layerFound = true;
+        }
+      });
+      if (!layerFound) {
+        return;
+      }
+    }
     // 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

@@ -15,8 +15,6 @@ function useMapState(props) {
   const initializedRef = useRef(false);
   const mapRef = useRef(undefined);
 
-  const [center, setCenter] = useState(undefined);
-
   const [viewport, setViewport] = useState(undefined);
   const viewportRef = useRef(undefined);
 
@@ -25,7 +23,6 @@ function useMapState(props) {
   //const mapRef = useRef(props.map);
   const componentId = useRef(uuidv4());
 
-
   /**
    * returns the element if it matches the defined filter criteria
    * to be used as filter function on the layers array
@@ -34,11 +31,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 +55,7 @@ function useMapState(props) {
       layersRef.current = _layerStateString;
       setLayers(_layerState);
     }
-  },[layerIdFilter]);
+  }, [layerIdFilter]);
 
   useEffect(() => {
     let _componentId = componentId.current;
@@ -79,16 +76,6 @@ function useMapState(props) {
     initializedRef.current = true;
     mapRef.current = mapContext.getMap(props.mapId);
 
-    /*
-    mapRef.current.on(
-      "move",
-      () => {
-        setCenter(mapRef.current.getCenter());
-      },
-      componentId.current
-    );
-    */
-
     if (props?.watch?.viewport) {
       setViewport(mapRef.current.wrapper.viewportState);
 
@@ -97,7 +84,6 @@ function useMapState(props) {
         () => {
           if (viewportRef.current !== mapRef.current?.wrapper.viewportStateString) {
             setViewport(mapRef.current?.wrapper.viewportState);
-            setCenter(mapRef.current?.wrapper.viewportState?.center);
           }
         },
         componentId.current

package/src/hooks/useWms.js

@@ -1,13 +1,8 @@
-import { useContext, useState, useEffect, useRef } from "react";
-import { v4 as uuidv4 } from "uuid";
+import { useState, useEffect } from "react";
 import WMSCapabilities from "wms-capabilities";
-import { MapContext } from "@mapcomponents/react-core";
 
 function useWms(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 initializedRef = useRef(false);
-
   const [getFeatureInfoUrl, setGetFeatureInfoUrl] = useState(undefined);
   const [url, setUrl] = useState(props.url);
   const [wmsUrl, setWmsUrl] = useState("");
@@ -93,4 +88,4 @@ useWms.defaultProps = {
   },
 };
 
-export default useWms;
+export default useWms;

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";
@@ -20,3 +21,4 @@ export { default as GeoJsonContext } from "./components/MlGPXViewer/util/GeoJson
 export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile";
 
 export { default as useMapState } from "./hooks/useMapState";
+export { default as useMap } from "./hooks/useMap";

package/src/ui_components/ImageLoader.js

@@ -45,7 +45,12 @@ const ImageLoader = (props) => {
 
   const ReadyImage = () => {
     return (
-      <img className={props.className} style={{ ...boxStyle, ...props.style }} src={props.src} />
+      <img
+        className={props.className}
+        style={{ ...boxStyle, ...props.style }}
+        src={props.src}
+        alt={props.alt || ""}
+      />
     );
   };
   const ErrorImage = () => {
@@ -62,9 +67,9 @@ const ImageLoader = (props) => {
         return <ReadyImage />;
       case "error":
         return <ErrorImage />;
+      default:
+        return <LoadingImage />;
     }
-
-    return <LoadingImage />;
   };
 
   return <>{renderImage(state)}</>;

package/src/ui_components/Sidebar.js

@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import { useTheme, styled } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
 import Drawer from "@mui/material/Drawer";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";

package/src/ui_components/TopToolbar.js

@@ -1,9 +1,7 @@
 import React from "react";
-import makeStyles from "@mui/styles/makeStyles";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 
-
 export default function TopToolbar(props) {
   return (
     <div