@mapcomponents/react-maplibre 0.1.9 → 0.1.13

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -21,6 +21,7 @@ const MlGeoJsonLayer = (props) => {
   const mapRef = useRef(null);
   const initializedRef = useRef(false);
   const transitionInProgressRef = useRef(false);
+  const transitionTimeoutRef = useRef(undefined);
   const currentTransitionStepRef = useRef(false);
   const transitionGeojsonDataRef = useRef([]);
   const transitionGeojsonCommonDataRef = useRef([]);
@@ -33,6 +34,9 @@ const MlGeoJsonLayer = (props) => {
     let _componentId = componentId.current;
     return () => {
       // This is the cleanup function, it is called when this react component is removed from react-dom
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+      }
       if (mapRef.current) {
         mapRef.current.cleanup(_componentId);
 
@@ -43,11 +47,17 @@ const MlGeoJsonLayer = (props) => {
 
   useEffect(() => {
     if (!mapRef.current || !initializedRef.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
+
+    for (var key in props.layout) {
+      mapContext.getMap(props.mapId).setLayoutProperty(layerId.current, key, props.layout[key]);
+    }
+  }, [props.layout, mapContext, props.mapId]);
+
+  useEffect(() => {
+    if (!mapRef.current || !initializedRef.current) return;
 
     for (var key in props.paint) {
-      mapContext.getMap(props.mapId).setPaintProperty(componentId.current, key, props.paint[key]);
+      mapContext.getMap(props.mapId).setPaintProperty(layerId.current, key, props.paint[key]);
     }
   }, [props.paint, mapContext, props.mapId]);
 
@@ -63,7 +73,8 @@ const MlGeoJsonLayer = (props) => {
         msPerStep,
         currentTransitionStepRef,
         mapRef.current,
-        componentId.current
+        componentId.current,
+        transitionTimeoutRef
       );
     },
     [props]
@@ -130,6 +141,7 @@ const MlGeoJsonLayer = (props) => {
             "line-color": "rgb(100,200,100)",
             "line-width": 10,
           },
+          layout: props.layout || {},
         },
         props.insertBeforeLayer,
         componentId.current
@@ -153,9 +165,7 @@ const MlGeoJsonLayer = (props) => {
         typeof props.geojson.geometry !== "undefined"
       ) {
         transitionToGeojson(props.geojson);
-        setTimeout(() => {
-          oldGeojsonRef.current = props.geojson;
-        }, props.transitionTime / 2);
+        oldGeojsonRef.current = props.geojson;
       }
     }
   }, [mapContext.mapIds, mapContext, props, transitionToGeojson]);
@@ -174,8 +184,16 @@ MlGeoJsonLayer.propTypes = {
    */
   type: PropTypes.string,
   /**
-   * Paint object, that is passed to the addLayer call.
-   * Possible propsdepend on the layer type.
+   * Layout property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+   */
+  layout: PropTypes.object,
+  /**
+   * Paint property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.meta.json

@@ -1,6 +1,6 @@
 {
   "name": "MlGeoJsonLayer",
-  "title": "GeoJSON level",
+  "title": "GeoJSON layer",
   "description": "",
   "i18n": {
     "de": {

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

@@ -8,13 +8,14 @@ const _showNextTransitionSegment = function (
   transitionGeojsonDataRef,
   transitionGeojsonCommonDataRef,
   currentTransitionStepRef,
-  msPerStep
+  msPerStep,
+  transitionTimeoutRef
 ) {
   if (
     typeof map.getSource(layerId) === "undefined" ||
     !transitionInProgressRef.current
   ) {
-    setTimeout(() => _showNextTransitionSegment(...arguments), msPerStep);
+    transitionTimeoutRef.current = setTimeout(() => _showNextTransitionSegment(...arguments), msPerStep);
     return;
   }
   if (
@@ -31,6 +32,10 @@ const _showNextTransitionSegment = function (
               .geometry.coordinates,
           ]);
 
+    if (!map?.getSource?.(layerId)) {
+      return;
+    }
+
     map.getSource(layerId).setData(newData);
 
     if (typeof props.onTransitionFrame === "function") {
@@ -42,7 +47,7 @@ const _showNextTransitionSegment = function (
       transitionInProgressRef.current &&
       currentTransitionStepRef.current < transitionGeojsonDataRef.current.length
     ) {
-      setTimeout(() => _showNextTransitionSegment(...arguments), msPerStep);
+      transitionTimeoutRef.current = setTimeout(() => _showNextTransitionSegment(...arguments), msPerStep);
     } else {
       if (typeof props.onTransitionEnd === "function") {
         props.onTransitionEnd(props.geojson);
@@ -62,7 +67,8 @@ const _transitionToGeojson = (
   msPerStep,
   currentTransitionStepRef,
   map,
-  layerId
+  layerId,
+  transitionTimeoutRef
 ) => {
   // create the transition geojson between oldGeojsonRef.current and props.geojson
 
@@ -189,12 +195,12 @@ const _transitionToGeojson = (
     );
     // for some reason turf.lineChunk returns the full lineString as element 0, chunks start at 1
     tmpLinestring = tmpChunks.features[1];
-    for (i = 1; i < srcTransitionSteps; i++) {
+    for (i = 0; i < srcTransitionSteps; i++) {
       transitionGeojsonDataRef.current.push(tmpLinestring);
-      if (typeof tmpChunks.features[i + 1] !== "undefined") {
+      if (typeof tmpChunks.features[i] !== "undefined") {
         tmpLinestring = turf.lineString([
           ...tmpLinestring.geometry.coordinates,
-          ...tmpChunks.features[i + 1].geometry.coordinates,
+          ...tmpChunks.features[i].geometry.coordinates,
         ]);
       } else {
         transitionGeojsonDataRef.current.push(tmpLinestring);
@@ -212,12 +218,12 @@ const _transitionToGeojson = (
     );
     // for some reason turf.lineChunk returns the full lineString as element 0, chunks start at 1
     tmpLinestring = tmpChunks.features[1];
-    for (i = 1; i < targetTransitionSteps; i++) {
+    for (i = 0; i < targetTransitionSteps; i++) {
       transitionGeojsonDataRef.current.push(tmpLinestring);
-      if (typeof tmpChunks.features[i + 1] !== "undefined") {
+      if (typeof tmpChunks.features[i] !== "undefined") {
         tmpLinestring = turf.lineString([
           ...tmpLinestring.geometry.coordinates,
-          ...tmpChunks.features[i + 1].geometry.coordinates,
+          ...tmpChunks.features[i].geometry.coordinates,
         ]);
       } else {
         transitionGeojsonDataRef.current.push(tmpLinestring);
@@ -229,7 +235,7 @@ const _transitionToGeojson = (
 
   currentTransitionStepRef.current = 1;
   transitionInProgressRef.current = true;
-  setTimeout(
+  transitionTimeoutRef.current = setTimeout(
     () =>
       _showNextTransitionSegment(
         props,
@@ -239,7 +245,8 @@ const _transitionToGeojson = (
         transitionGeojsonDataRef,
         transitionGeojsonCommonDataRef,
         currentTransitionStepRef,
-        msPerStep
+        msPerStep,
+        transitionTimeoutRef
       ),
     msPerStep
   );

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js

@@ -6,14 +6,12 @@ import { MapContext } from "@mapcomponents/react-core";
 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 : "MlOsmLayer-") + uuidv4()
-  );
+  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlImageMarkerLayer-") + uuidv4());
   const mapContext = useContext(MapContext);
   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 || "MlImageMarkerLayer-") + idSuffixRef.current);
+  const layerId = useRef(props.layerId || componentId.current);
 
   useEffect(() => {
     let _componentId = componentId.current;
@@ -82,6 +80,7 @@ const MlImageMarkerLayer = (props) => {
 
     layerInitializedRef.current = true;
 
+    console.log(props.imgSrc);
     if (props.imgSrc) {
       mapRef.current.loadImage(props.imgSrc, function (error, image) {
         if (error) throw error;

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.test.js

@@ -1,20 +1,19 @@
 import { layerRemovalTest, sourceRemovalTest } from "../../util";
+import { uuid_regex } from "../../setupTests";
 
 import MlImageMarkerLayer from "./MlImageMarkerLayer";
 
-const testComponent = (
-  <MlImageMarkerLayer options={{ source: {} }} imgSrc="testImage" />
-);
+const testComponent = <MlImageMarkerLayer options={{ source: {} }} imgSrc="testImage" />;
 
 layerRemovalTest(
   "<MlImageMarkerLayer />",
   testComponent,
-  /^.*\"MlImageMarkerLayer\-[0-9]*\".*$/,
-  "MlImageMarkerLayer-{unix-timestamp}"
+  new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
+  "MlImageMarkerLayer-{uuid}"
 );
 sourceRemovalTest(
   "<MlImageMarkerLayer />",
   testComponent,
-  /^.*\"MlImageMarkerLayer\-[0-9]*\".*$/,
-  "MlImageMarkerLayer-{unix-timestamp}"
+  new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
+  "MlImageMarkerLayer-{uuid}"
 );

package/src/components/MlLayer/MlLayer.js

@@ -12,7 +12,7 @@ const MlLayer = (props) => {
     (props.layerId ? props.layerId : "MlLayer-") + uuidv4()
   );
   const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
-  const layerId = (props.layerId || "MlLayer-") + idSuffixRef.current;
+  const layerId = useRef(props.layerId || componentId.current);
   const layerPaintConfRef = useRef(undefined);
   const layerLayoutConfRef = useRef(undefined);
 
@@ -65,7 +65,7 @@ const MlLayer = (props) => {
       layerInitializedRef.current = true;
       mapRef.current.addLayer(
         {
-          id: layerId,
+          id: layerId.current,
           type: "background",
           paint: {
             "background-color": "rgba(0,0,0,0)",

package/src/components/MlLayer/MlLayer.test.js

@@ -5,6 +5,8 @@ import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";
 import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 import MlLayer from "./MlLayer";
 
+import { uuid_regex } from "../../setupTests";
+
 const MlLayerTestComponent = (props) => {
   const [layerVisible, setLayerVisible] = useState(true);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
@@ -59,57 +61,57 @@ const createWrapper = () =>
   );
 
 describe("<MlLayer>", () => {
-  it("should add a Layer with the id 'MlLayer-{unix-timestamp}' to the MapLibre instance", async () => {
+  it("should add a Layer with the id 'MlLayer-{uuid}' to the MapLibre instance", async () => {
     const wrapper = createWrapper();
 
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".layers_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
     ).toEqual(true);
   });
 
-  it("should remove a Layer with the id 'MlLayer-{unix-timestamp}' from the MapLibre instance", async () => {
+  it("should remove a Layer with the id 'MlLayer-{uuid}' from the MapLibre instance", async () => {
     const wrapper = createWrapper();
 
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".layers_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
     ).toEqual(true);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".layers_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
     ).toEqual(false);
   });
 
-  it("should add a Source with the id 'MlLayer-{unix-timestamp}' to the MapLibre instance", async () => {
+  it("should add a Source with the id 'MlLayer-{uuid}' to the MapLibre instance", async () => {
     const wrapper = createWrapper();
 
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".sources_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
     ).toEqual(true);
   });
 
-  it("should remove a Source with the id 'MlLayer-{unix-timestamp}' from the MapLibre instance", async () => {
+  it("should remove a Source with the id 'MlLayer-{uuid}' from the MapLibre instance", async () => {
     const wrapper = createWrapper();
 
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".sources_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
     ).toEqual(true);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".sources_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
     ).toEqual(false);
   });
 });

package/src/components/MlLayerMagnify/MlLayerMagnify.js

@@ -29,7 +29,7 @@ const MlLayerMagnify = (props) => {
     if (!props.map1Id || !props.map2Id) {
       return false;
     }
-    if (!mapContext.mapExists(props.map1Id) || !mapContext.mapExists(props.map2Id)) {
+    if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
       return false;
     }
 
@@ -100,8 +100,8 @@ const MlLayerMagnify = (props) => {
 
     syncMoveInitializedRef.current = true;
     syncCleanupFunctionRef.current = syncMove(
-      mapContext.getMap(props.map1Id),
-      mapContext.getMap(props.map2Id)
+      mapContext.getMap(props.map1Id).map,
+      mapContext.getMap(props.map2Id).map
     );
 
     if (

package/src/components/MlLayerSwipe/MlLayerSwipe.js

@@ -22,7 +22,7 @@ const MlLayerSwipe = (props) => {
     if (!props.map1Id || !props.map2Id) {
       return false;
     }
-    if (!mapContext.mapExists(props.map1Id) || !mapContext.mapExists(props.map2Id)) {
+    if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
       return false;
     }
 
@@ -53,8 +53,7 @@ const MlLayerSwipe = (props) => {
         setSwipeX(swipeX_tmp);
         swipeXRef.current = swipeX_tmp;
 
-        var clipA =
-          "rect(0, " + (swipeXRef.current * bounds.width) / 100 + "px, 999em, 0)";
+        var clipA = "rect(0, " + (swipeXRef.current * bounds.width) / 100 + "px, 999em, 0)";
 
         mapContext.maps[props.map2Id].getContainer().style.clip = clipA;
       }
@@ -71,8 +70,8 @@ const MlLayerSwipe = (props) => {
 
     initializedRef.current = true;
     syncCleanupFunctionRef.current = syncMove(
-      mapContext.getMap(props.map1Id),
-      mapContext.getMap(props.map2Id)
+      mapContext.getMap(props.map1Id).map,
+      mapContext.getMap(props.map2Id).map
     );
     onMove({ clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2 });
   }, [mapContext.mapIds, mapContext, props, onMove, mapExists]);

package/src/components/MlLayerSwitcher/MlLayerSwitcher.css

@@ -0,0 +1,17 @@
+.mllayerswitcher-layer-box.activeHighlight > .mllayerswitcher-layer-image {
+    border-color:  rgb(181, 215, 238);
+    border-radius: 8px;
+}
+.mllayerswitcher-layer-box.activeHighlight > .mllayerswitcher-layer-text {
+    color:  rgb(181, 215, 238) !important;
+  
+}
+
+.mllayerswitcher-layer-box.active > .mllayerswitcher-layer-image {
+    border-color:  rgb(196, 240, 0);
+    border-radius: 8px;
+}
+.mllayerswitcher-layer-box.active > .mllayerswitcher-layer-text {
+    color:  rgb(252, 0, 0) !important;
+  
+}

package/src/components/MlLayerSwitcher/MlLayerSwitcher.doc.de.md

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

package/src/components/MlLayerSwitcher/MlLayerSwitcher.js

@@ -0,0 +1,223 @@
+//CSS
+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";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent, Typography, Box } from "@mui/material";
+//Internal
+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
+ *
+ *
+ */
+const MlLayerSwitcher = (props) => {
+  const mapContext = useContext(MapContext);
+  const showBaseSources = !!props.baseSourceConfig?.layers?.length;
+  const showDetailLayer = !!props.detailLayerConfig?.layers?.length;
+  const { layers } = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+    filter: {},
+  });
+  const [activeLayers, setActiveLayers] = useState([]);
+  const [activeDetailLayers, setActiveDetailLayers] = useState([]);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    //Set base state to activate only the first layer
+    if (mapContext.map) {
+      const disableAllButFirst = (config, i) => {
+        const layers = getLayerListFromId(config.layerId);
+        const visible = i === 0 ? "visible" : "none";
+
+        layers.forEach((layer) => {
+          if (layer) {
+            changeLayerState(layer, visible);
+          }
+        });
+      };
+
+      props.baseSourceConfig.layers.forEach((config, i) => disableAllButFirst(config, i));
+      props.detailLayerConfig.layers.forEach((config, i) => disableAllButFirst(config, i));
+    }
+    return () => {
+      // This is the cleanup function, it is called when this react component is removed from react-dom
+      // try to remove anything this component has added to the MapLibre-gl instance
+      // e.g.: remove the layer
+      // mapContext.getMap(props.mapId).removeLayer(layerRef.current);
+      // check for the existence of map.style before calling getLayer or getSource
+    };
+  }, [mapContext.map]);
+
+  useEffect(() => {
+    if (mapContext.map?.style?._layers) {
+      let newactiveLayers = [];
+      let newactiveDetailLayers = [];
+      props.baseSourceConfig.layers.forEach((layerConfig) => {
+        const layers = getLayerListFromId(layerConfig.layerId);
+
+        layers.forEach((layer) => {
+          const visibilty = mapContext.map?.getLayoutProperty(layer, "visibility");
+          if (mapContext.map.baseLayers.indexOf(layer) !== -1) {
+            layer = "styleBase";
+          }
+
+          if (newactiveLayers.indexOf(layer) === -1 && visibilty === "visible") {
+            newactiveLayers.push(layer);
+          }
+        });
+      });
+      props.detailLayerConfig.layers.forEach(({ layerId }) => {
+        const visibilty = mapContext.map?.getLayoutProperty(layerId, "visibility");
+        if (newactiveDetailLayers.indexOf(layerId) === -1 && visibilty === "visible") {
+          newactiveDetailLayers.push(layerId);
+        }
+      });
+      setActiveLayers(newactiveLayers);
+
+      setActiveDetailLayers(newactiveDetailLayers);
+    }
+  }, [layers]);
+
+  const getLayerListFromId = (id) => {
+    return id === "styleBase" ? mapContext?.map.baseLayers : [id];
+  };
+
+  const handleDetailLayerBoxClick = (layerId) => {
+    const cfg = props.detailLayerConfig.layers.find((e) => e.layerId === layerId);
+    if (cfg.linkedTo) {
+      handleLayerBoxClick(cfg.linkedTo);
+    }
+    const nextVisiblityClickedLayer =
+      mapContext?.map.getLayer(layerId)?.getLayoutProperty("visibility") === "visible"
+        ? "none"
+        : "visible";
+    changeLayerState(layerId, nextVisiblityClickedLayer);
+  };
+
+  const handleLayerBoxClick = (id) => {
+    let layers = getLayerListFromId(id);
+    const nextVisiblityClickedLayer =
+      mapContext?.map.getLayer(layers[0])?.getLayoutProperty("visibility") === "visible"
+        ? "none"
+        : "visible";
+
+    props.baseSourceConfig.layers.forEach((config, i) => {
+      let layers = getLayerListFromId(config.layerId);
+      let visible = "none";
+      if (config.layerId === id) {
+        visible = nextVisiblityClickedLayer;
+      }
+
+      //To avoid disabling all base layers we activate the first one
+      if (nextVisiblityClickedLayer === "none" && i === 0) {
+        visible = "visible";
+      }
+      layers.forEach((layer) => {
+        if (layer) {
+          changeLayerState(layer, visible);
+        }
+      });
+    });
+  };
+
+  const changeLayerState = (layer, visible = "none") => {
+    mapContext.map?.setLayoutProperty(layer, "visibility", visible);
+  };
+
+  return (
+    <>
+      <Card sx={{ zIndex: 101, position: "absolute", minWidth: "200px" }}>
+        <CardContent>
+          {showBaseSources && (
+            <Box sx={{ minHeight: "150px" }}>
+              <Typography variant="h6">{t(props.baseSourceConfig.label || "Map type")}</Typography>
+              <Divider />
+              <Box sx={{ display: "flex", paddingTop: "1rem" }}>
+                {props.baseSourceConfig.layers.map(({ src, label, layerId }) => {
+                  return (
+                    <LayerBox
+                      mapId={props.mapId}
+                      key={layerId}
+                      activeLayers={activeLayers}
+                      label={t(label)}
+                      layerId={layerId}
+                      thumbnail={src}
+                      handleLayerBoxClick={() => {
+                        handleLayerBoxClick(layerId);
+                      }}
+                    />
+                  );
+                })}
+              </Box>
+            </Box>
+          )}
+          {showDetailLayer && (
+            <Box sx={{ minHeight: "150px" }}>
+              <Typography variant="h6">{t("Map details")}</Typography>
+              <Divider />
+              <Box sx={{ display: "flex", paddingTop: "1rem" }}>
+                {props.detailLayerConfig.layers.map(({ src, label, layerId }) => {
+                  return (
+                    <LayerBox
+                      mapId={props.mapId}
+                      activeLayers={activeDetailLayers}
+                      label={t(label)}
+                      layerId={layerId}
+                      key={layerId}
+                      thumbnail={src}
+                      handleLayerBoxClick={() => {
+                        handleDetailLayerBoxClick(layerId);
+                      }}
+                    />
+                  );
+                })}
+              </Box>
+            </Box>
+          )}
+        </CardContent>{" "}
+      </Card>
+    </>
+  );
+};
+
+MlLayerSwitcher.propTypes = {
+  baseSourceConfig: PropTypes.shape({
+    label: PropTypes.string,
+    layers: PropTypes.arrayOf(
+      PropTypes.shape({
+        layerId: PropTypes.string.isRequired,
+        src: PropTypes.string,
+        label: PropTypes.string.isRequired,
+      })
+    ),
+  }),
+  detailLayerConfig: PropTypes.shape({
+    label: PropTypes.string,
+    layers: PropTypes.arrayOf(
+      PropTypes.shape({
+        layerId: PropTypes.string.isRequired,
+        src: PropTypes.string,
+        label: PropTypes.string.isRequired,
+        linkedTo: PropTypes.string,
+      })
+    ),
+  }),
+  mapId: PropTypes.string,
+};
+
+export default MlLayerSwitcher;

package/src/components/MlLayerSwitcher/MlLayerSwitcher.meta_.json

@@ -0,0 +1,15 @@
+{
+  "name": "MlLayerSwitcher",
+  "title": "Layer switcher",
+  "description": "",
+  "i18n": {
+    "de": {
+      "title": "Ebenen wechsler",
+      "description": ""
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component",
+  "price": 0
+}