@mapcomponents/react-maplibre 0.1.16 → 0.1.20

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

@@ -2,7 +2,6 @@ import React, { useState} from "react";
 
 import MlShareMapState from "./MlShareMapState";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
-import useMapState from "../../hooks/useMapState";
 import MlLayer from "../MlLayer/MlLayer";
 
 const storyoptions = {
@@ -16,17 +15,6 @@ export default storyoptions;
 const Template = (args) => {
   const [watchState, setWatchState] = useState(false);
   const [testLayerVisible, setTestLayerVisible] = useState(true);
-  const mapState = useMapState({
-      watch : {
-        viewport : false,
-        layers : true,
-        sources : false
-      },
-      filter : {
-        includeBaseLayers : false
-      }
-    }
-  )
 
   return (
     <>
@@ -34,18 +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}
+        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")}}} />
+      <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/MlVectorTileLayer/MlVectorTileLayer.js

@@ -48,7 +48,7 @@ const MlVectorTileLayer = (props) => {
       tiles: [props.url],
       tileSize: 512,
       attribution: "",
-      //...props.sourceOptions,
+      ...props.sourceOptions,
     });
 
     for (let key in props.layers) {

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/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
@@ -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/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