@mapcomponents/react-maplibre 0.1.13 → 0.1.17

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.js

@@ -7,7 +7,9 @@ import { MapContext } from "@mapcomponents/react-core";
 
 import sample_geojson_1 from "./assets/sample_1.json";
 import sample_geojson_2 from "./assets/sample_2.json";
+import sample_polygon_geojson_1 from "./assets/sample_polygon_1.json";
 
+console.log(sample_polygon_geojson_1);
 const storyoptions = {
   title: "MapComponents/MlGeoJsonLayer",
   component: MlGeoJsonLayer,
@@ -20,6 +22,13 @@ const storyoptions = {
 export default storyoptions;
 
 const Template = (props) => {
+  return (
+    <>
+      <MlGeoJsonLayer {...props} />
+    </>
+  );
+};
+const LinestringTransitionTemplate = (props) => {
   const mapContext = useContext(MapContext);
   const [geojson, setGeojson] = useState(sample_geojson_1);
   const initializedRef = useRef(false);
@@ -28,9 +37,7 @@ const Template = (props) => {
     if (!mapContext.getMap() || initializedRef.current) return;
 
     initializedRef.current = true;
-    mapContext
-      .getMap()
-      .setCenter({ lng: 7.137609868988648, lat: 50.74746799549129 });
+    mapContext.getMap().setCenter({ lng: 7.137609868988648, lat: 50.74746799549129 });
     mapContext.getMap().setZoom(9.5);
 
     setTimeout(() => {
@@ -45,6 +52,13 @@ const Template = (props) => {
   );
 };
 
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};
+export const LinestringExample = LinestringTransitionTemplate.bind({});
+LinestringExample.parameters = {};
+LinestringExample.args = {};
+
+export const PolygonExample = Template.bind({});
+PolygonExample.parameters = {};
+PolygonExample.args = {
+  type: "line",
+  geojson: sample_polygon_geojson_1,
+};

package/src/components/MlGeoJsonLayer/assets/sample_polygon_1.json

@@ -0,0 +1,33 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "coordinates": [
+          [
+            [7.08646747303149, 50.74485058672653],
+            [7.084287513691095, 50.74371917250187],
+            [7.084437772332876, 50.743610683782215],
+            [7.084640903561933, 50.743721758552354],
+            [7.085805654941254, 50.74293993704128],
+            [7.087023278906713, 50.74218320888983],
+            [7.087791368229503, 50.74258090834434],
+            [7.088796806075749, 50.743261830692745],
+            [7.089275088452752, 50.743701110992674],
+            [7.088087117762917, 50.74409411011173],
+            [7.087662548338368, 50.743784963165815],
+            [7.087184330538875, 50.7440368518605],
+            [7.087233860417484, 50.744077781245316],
+            [7.08714938625954, 50.744122118772154],
+            [7.087057544749172, 50.74427276821896],
+            [7.087104984084277, 50.744509715654885],
+            [7.08646747303149, 50.74485058672653]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}

package/src/components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry.js

@@ -0,0 +1,25 @@
+const mapGeometryTypesToLayerTypes = {
+  Position: "circle",
+  Point: "circle",
+  MultiPoint: "circle",
+  LineString: "line",
+  MultiLineString: "line",
+  Polygon: "fill",
+  MultiPolygon: "fill",
+  GeometryCollection: "circle",
+};
+
+const getDefaulLayerTypeByGeometry = (geojson) => {
+  if (geojson?.type === "Feature") {
+    return mapGeometryTypesToLayerTypes?.[geojson?.geometry?.type]
+      ? mapGeometryTypesToLayerTypes[geojson.geometry.type]
+      : "circle";
+  }
+  if (geojson?.type === "FeatureCollection") {
+    if (geojson.features.length) {
+      return getDefaulLayerTypeByGeometry(geojson.features[0]);
+    }
+    return "circle";
+  }
+};
+export default getDefaulLayerTypeByGeometry;

package/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.js

@@ -0,0 +1,22 @@
+const getDefaultPaintPropsByType = (type) => {
+  switch (type) {
+    case "fill":
+      return {
+        "fill-color": "rgba(10,240,256,0.6)",
+      };
+    case "line":
+      return {
+        "line-color": "rgb(100,200,100)",
+        "line-width": 5,
+      };
+    case "circle":
+    default:
+      return {
+        "circle-color": "#44aaaa",
+        "circle-stroke-color": "#fff",
+        "circle-stroke-width": 2,
+      };
+  }
+};
+
+export default getDefaultPaintPropsByType;

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js

@@ -1,34 +1,18 @@
-import React, { useRef, useCallback, useEffect, useContext } from "react";
+import React, { useRef, useCallback, useEffect } from "react";
 
-import { v4 as uuidv4 } from "uuid";
-import { MapContext } from "@mapcomponents/react-core";
+import useMap from "../../hooks/useMap";
 
 const MlImageMarkerLayer = (props) => {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapRef = useRef(null);
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlImageMarkerLayer-") + uuidv4());
-  const mapContext = useContext(MapContext);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+
   const layerInitializedRef = useRef(false);
-  const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
   const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
-  const layerId = useRef(props.layerId || componentId.current);
-
-  useEffect(() => {
-    let _componentId = componentId.current;
-    return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-
-        mapRef.current = null;
-      }
-    };
-  }, []);
+  const layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
 
   useEffect(() => {
     if (
-      !mapRef.current ||
-      (mapRef.current && !mapContext.getMap(props.mapId).getLayer(layerId.current)) ||
+      !mapHook.mapIsReady ||
+      (mapHook.map && !mapHook.map.getLayer(layerId.current)) ||
       !props.options
     )
       return;
@@ -38,19 +22,15 @@ const MlImageMarkerLayer = (props) => {
 
     if (props.options.layout) {
       for (key in props.options.layout) {
-        mapContext
-          .getMap(props.mapId)
-          .setLayoutProperty(layerId.current, key, props.options.layout[key]);
+        mapHook.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
       }
     }
     if (props.options.paint) {
       for (key in props.options.paint) {
-        mapContext
-          .getMap(props.mapId)
-          .setPaintProperty(layerId.current, key, props.options.paint[key]);
+        mapHook.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
       }
     }
-  }, [props.options, layerId.current, mapContext, props.mapId]);
+  }, [props.options, layerId.current, props.mapId]);
 
   const addLayer = useCallback(() => {
     let tmpOptions = {
@@ -59,50 +39,35 @@ const MlImageMarkerLayer = (props) => {
       ...props.options,
     };
     tmpOptions.layout["icon-image"] = imageIdRef.current;
-    mapRef.current.addLayer(
-      tmpOptions,
-      props.insertBeforeLayer,
-      componentId.current
-    );
-  }, [props]);
+    mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
+  }, [props, mapHook.mapIsReady, mapHook.map]);
 
   useEffect(() => {
-    if (
-      !props.options ||
-      !mapContext.mapExists(props.mapId) ||
-      layerInitializedRef.current
-    )
-      return;
-
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-    mapRef.current = mapContext.getMap(props.mapId);
+    if (!props.options || !mapHook.mapIsReady || layerInitializedRef.current) return;
 
     layerInitializedRef.current = true;
 
-    console.log(props.imgSrc);
     if (props.imgSrc) {
-      mapRef.current.loadImage(props.imgSrc, function (error, image) {
+      mapHook.map.loadImage(props.imgSrc, function (error, image) {
         if (error) throw error;
-        mapRef.current.addImage(imageIdRef.current, image, componentId.current);
+        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
       });
     }
+
     addLayer();
-  }, [mapContext.mapIds, mapContext, props, addLayer]);
+  }, [mapHook.mapIsReady, mapHook.map, addLayer, props]);
 
   useEffect(() => {
     if (
-      !mapRef.current ||
-      (mapRef.current && !mapContext.getMap(props.mapId).getLayer(layerId.current)) ||
+      !mapHook.mapIsReady ||
+      (mapHook.map && !mapHook.map.getLayer(layerId.current)) ||
       !props.options
     ) {
       return;
     }
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
 
-    mapRef.current.getSource(layerId.current).setData(props.options.source.data);
-  }, [props.options.source.data, mapContext, props]);
+    mapHook.map.getSource(layerId.current).setData(props.options.source.data);
+  }, [props.options.source.data, props]);
 
   return <></>;
 };

package/src/components/MlLayer/MlLayer.js

@@ -2,16 +2,23 @@ import React, { useRef, useEffect, useContext } from "react";
 
 import { v4 as uuidv4 } from "uuid";
 import { MapContext } from "@mapcomponents/react-core";
+import useMapState from "../../hooks/useMapState";
 
 const MlLayer = (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 layerInitializedRef = useRef(false);
   const mapRef = useRef(null);
-  const componentId = useRef(
-    (props.layerId ? props.layerId : "MlLayer-") + uuidv4()
-  );
-  const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
+  const componentId = useRef((props.layerId ? props.layerId : "MlLayer-") + uuidv4());
   const layerId = useRef(props.layerId || componentId.current);
   const layerPaintConfRef = useRef(undefined);
   const layerLayoutConfRef = useRef(undefined);
@@ -60,6 +67,20 @@ const MlLayer = (props) => {
     // the MapLibre-gl instance (mapContext.map) is accessible here
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
 
+    //check if insertBeforeLayer exists
+    if (props.insertBeforeLayer) {
+      let layerFound = false;
+
+      mapState?.layers?.forEach((layer) => {
+        if (layer.id === props.insertBeforeLayer) {
+          layerFound = true;
+        }
+      });
+      if (!layerFound) {
+        return;
+      }
+    }
+
     mapRef.current = mapContext.getMap(props.mapId);
     if (mapRef.current) {
       layerInitializedRef.current = true;
@@ -78,7 +99,7 @@ const MlLayer = (props) => {
       layerPaintConfRef.current = JSON.stringify(props.options?.paint);
       layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
     }
-  }, [mapContext.mapIds, mapContext, props, layerId]);
+  }, [mapContext.mapIds, mapContext, props, mapState.layers]);
 
   return <></>;
 };

package/src/components/MlLayerSwitcher/MlLayerSwitcher.js

@@ -2,7 +2,6 @@
 import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
-import { css, cx } from '@emotion/css'
 import "./MlLayerSwitcher.css";
 //External
 import { useEffect, useContext, useState } from "react";
@@ -14,7 +13,6 @@ import { MapContext } from "@mapcomponents/react-core";
 import LayerBox from "./components/LayerBox";
 import Divider from "@mui/material/Divider";
 import useMapState from "../../hooks/useMapState";
-import LoadingOverlay from "../../ui_components/LoadingOverlay";
 /**
  * @component
  *

package/src/components/MlLayerSwitcher/MlLayerSwitcher.stories.js

@@ -1,11 +1,10 @@
-import React, { useState, useContext, useRef, useEffect } from "react";
+import React from "react";
 import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
 import MlLayerSwitcher from "./MlLayerSwitcher";
-import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer'
+import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 import sample_geojson_1 from "./assets/sample_1.json";
 import sample_geojson_2 from "./assets/sample_2.json";
-import { Props } from "@storybook/addon-docs/blocks";
 
 const storyoptions = {
   title: "MapComponents/MlLayerSwitcher",
@@ -17,9 +16,7 @@ const storyoptions = {
   decorators: mapContextDecorator,
 };
 export default storyoptions;
-const layerId = "nw_uraufnahme_rw";
 const Template = (args) => {
-  const [geojson, setGeojson] = useState(sample_geojson_1);
   return (
     <>
       <MlWmsLayer
@@ -39,7 +36,7 @@ const Template = (args) => {
       <MlGeoJsonLayer
         type="line"
         layout={{ visibility: args.geojsonLayerVisible ? "visible" : "none" }}
-        geojson={geojson}
+        geojson={sample_geojson_1}
         layerId="geojson1"
       />
       <MlGeoJsonLayer

package/src/components/MlLayerSwitcher/components/LayerBox.js

@@ -1,8 +1,7 @@
-import { React, useEffect, useState } from "react";
-import { css, cx } from "@emotion/css";
+import React from "react";
+import { css } from "@emotion/css";
 import { Box } from "@mui/system";
 import ImageLoader from "../../../ui_components/ImageLoader";
-import { propsToClassKey } from "@mui/styles";
 import useMapState from "../../../hooks/useMapState";
 
 /**
@@ -10,8 +9,6 @@ import useMapState from "../../../hooks/useMapState";
  *
  */
 const LayerBox = (props) => {
-  const [activeClassName, setActiveClassName] = useState("");
-  const [className, setClassName] = useState("mllayerswitcher-layer-box ");
   const { layers } = useMapState({
     mapId: props.mapId,
     watch: {
@@ -23,33 +20,12 @@ const LayerBox = (props) => {
       matchLayerIds: props.layerId,
     },
   });
-  const hoverBorderColor = "#1C62D7"; //Navy Blue
-  const activeBorderColor = "";
   const width = "40px";
 
   const defaultClass = css`
     & img:hover {
     }
   `;
-  const activeClass =
-    defaultClass +
-    `& img {
-        border-color:  rgb(196, 240, 0);
-        border-radius: 8px;
-      }
-    
-      `;
-  const hoverClass = css``;
-
-  useEffect(() => {
-    const isActive = props.activeLayers?.indexOf(props.layerId) !== -1;
-
-    if (isActive) {
-      setClassName(activeClass);
-    } else {
-      setClassName(defaultClass);
-    }
-  }, [props.activeLayers]);
 
   return (
     <>

package/src/components/MlMarker/MlMarker.js

@@ -67,7 +67,6 @@ const MlMarker = (props) => {
   useEffect(() => {
     if (mapRef.current && iframe.current?.contentWindow?.document?.body?.scrollHeight) {
       setTimeout(() => {
-        let mapWidth = mapRef.current._container.clientWidth;
         let mapHeight = mapRef.current._container.clientHeight;
 
         const _pixelPos = mapRef.current.project([props.lng, props.lat]);
@@ -124,6 +123,7 @@ const MlMarker = (props) => {
             ref={iframe}
             sandbox="allow-same-origin allow-popups-to-escape-sandbox"
             frameBorder="0"
+            title={componentId.current}
           ></iframe>
         </Paper>
       )}

package/src/components/MlNavigationTools/MlNavigationTools.js

@@ -29,7 +29,6 @@ const MlNavigationTools = (props) => {
     minHeight: "20px",
     width: mediaIsMobile ? "50px" : "30px",
     height: mediaIsMobile ? "50px" : "30px",
-    color: "#bbb",
     backgroundColor: "#414141",
     borderRadius: "23%",
     //border: "1px solid #bbb",
@@ -38,8 +37,8 @@ const MlNavigationTools = (props) => {
     fontSize: mediaIsMobile ? "1.5em" : "1.2em",
     ":hover": {
       backgroundColor: "#515151",
-      color: "#ececec",
     },
+    color: "#ececec"
   };
 
   useEffect(() => {
@@ -144,7 +143,7 @@ const MlNavigationTools = (props) => {
       <Button sx={buttonStyle} onClick={moveToCurrentLocation} disabled={locationAccessDenied}>
         <GpsFixedIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
       </Button>
-      <MlFollowGps style={buttonStyle}/>
+      <MlFollowGps style={{...(({color, ...rest}) => rest)(buttonStyle)}} />
       <ButtonGroup
         orientation="vertical"
         sx={{
@@ -154,10 +153,10 @@ const MlNavigationTools = (props) => {
           "Button:hover": {border: "none"},
         }}
       >
-        <Button sx={buttonStyle} onClick={zoomIn}>
+        <Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomIn}>
           <ControlPointIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
         </Button>
-        <Button sx={buttonStyle} onClick={zoomOut}>
+        <Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomOut}>
           <RemoveCircleOutlineIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
         </Button>
       </ButtonGroup>

package/src/components/MlShareMapState/MlShareMapState.js

@@ -1,8 +1,9 @@
-import React, { useRef, useEffect, useContext, useState } from "react";
+import React, {useRef, useEffect, useContext, useState} from "react";
 import PropTypes from "prop-types";
 
-import { MapContext } from "@mapcomponents/react-core";
-import { v4 as uuidv4 } from "uuid";
+import {MapContext} from "@mapcomponents/react-core";
+import {v4 as uuidv4} from "uuid";
+import useMapState from "../../hooks/useMapState";
 
 /**
  * TODO: Add short & useful description
@@ -15,11 +16,21 @@ import { v4 as uuidv4 } from "uuid";
 const MlShareMapState = (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 mapRef = useRef(undefined);
   const [map, setMap] = useState(undefined);
   const componentId = useRef((props.idPrefix ? props.idPrefix : "MlShareMapState-") + uuidv4());
+  const [isInitialState, setIsInitialState] = useState(true);
+  const mapState = useMapState({
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false
+    },
+    filter: {
+      includeBaseLayers: false
+    }
+  })
 
   const mapStateRef = useRef({});
 
@@ -49,32 +60,59 @@ const MlShareMapState = (props) => {
     mapRef.current = mapContext.getMap(props.mapId);
     setMap(mapRef.current);
 
-    let currentUrlParams = getCurrentUrlParameters();
+    const currentUrlParams = getCurrentUrlParameters();
     if (currentUrlParams.lat && currentUrlParams.lng) {
       mapStateRef.current.lat = currentUrlParams.lat;
       mapStateRef.current.lng = currentUrlParams.lng;
       mapStateRef.current.zoom = currentUrlParams.zoom;
-      mapRef.current.setCenter([mapStateRef.current.lng, mapStateRef.current.lat]);
       mapRef.current.setZoom(mapStateRef.current.zoom);
     }
   }, [mapContext.mapIds, mapContext, props.mapId, props.active]);
 
   useEffect(() => {
     if (!map) return;
+    if(!mapState.layers) return;
+    if(!isInitialState) return;
+
+    const currentUrlParams = getCurrentUrlParameters()
+
+    if(currentUrlParams.layers) {
+      for (let x in currentUrlParams.layers) {
+        mapRef.current.getLayer(currentUrlParams.layers[x].id).visibility = currentUrlParams.layers[x].visible ? "visible" : "none"
+        mapRef.current.getLayer(currentUrlParams.layers[x].id).type = currentUrlParams.layers[x].type
+      }
+    }
+
+  }, [mapState.layers, props.mapId, props.active])
+
+  useEffect(() => {
+    if (!map) return;
+    if (!mapState.layers) return;
 
     if (props.active) {
+      setIsInitialState(false)
       map.on(
         "moveend",
         () => {
+          let mapLayers = []
+          for (let x in mapState.layers) {
+            mapLayers.push(new URLSearchParams({
+              id: mapState.layers[x].id,
+              type: mapState.layers[x].type,
+              visible: mapState.layers[x].visible
+            }))
+          }
           refreshMapState();
           let urlParams = new URLSearchParams({
             ...getCurrentUrlParameters(),
             ...mapStateRef.current,
+            layers : mapLayers
           });
+
           let currentParams = new URLSearchParams(window.location.search);
           if (urlParams.toString() !== currentParams.toString()) {
             window.history.pushState(
-              { ...mapStateRef.current },
+              {...mapStateRef.current},
               document.title,
               "?" + urlParams.toString()
             );
@@ -88,7 +126,33 @@ const MlShareMapState = (props) => {
   }, [props.active, map]);
 
   const getCurrentUrlParameters = () => {
-    return Object.fromEntries(new URLSearchParams(window.location.search));
+    let parameterObject = Object.fromEntries(new URLSearchParams(window.location.search))
+
+    if(window.location.search.indexOf("layers")!==-1) {
+      let layerParamString = window.location.search.substring(window.location.search.indexOf("layers"))
+      layerParamString = layerParamString.substring(0, (layerParamString.indexOf("&")!==-1) ? layerParamString.indexOf("&") : layerParamString.length)
+      parameterObject = Object.fromEntries(new URLSearchParams(window.location.search.replace(layerParamString, "")))
+      let layerParams = layerParamString.substring(7)
+      layerParams = layerParams.replaceAll("%3D", "=")
+      layerParams = layerParams.replaceAll("%26", "&")
+      layerParams = layerParams.replaceAll("%2C", ",")
+
+      if (layerParams.indexOf(",")) {
+        layerParams = layerParams.split(",")
+      } else {
+        layerParams = [layerParams]
+      }
+
+      for (let x in layerParams) {
+        let layerState = layerParams[x].split("&")
+        layerParams[x] = {}
+        for (let y in layerState) {
+          layerParams[x][layerState[y].split("=")[0]] = layerState[y].split("=")[1]
+        }
+      }
+      parameterObject["layers"] = layerParams
+    }
+    return parameterObject
   };
 
   const refreshMapState = () => {
@@ -99,7 +163,7 @@ const MlShareMapState = (props) => {
 
   window.onpopstate = (event) => {
     if (event.state && event.state.lng && event.state.lat && event.state.zoom) {
-      mapRef.current.easeTo({ zoom: event.state.zoom, center: [event.state.lng, event.state.lat] });
+      mapRef.current.easeTo({zoom: event.state.zoom, center: [event.state.lng, event.state.lat]});
     }
   };
 

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";