@mapcomponents/react-maplibre 0.1.12 → 0.1.13

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -34,11 +34,10 @@ 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 (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
       }
       if (mapRef.current) {
-
         mapRef.current.cleanup(_componentId);
 
         mapRef.current = null;
@@ -48,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]);
 
@@ -136,6 +141,7 @@ const MlGeoJsonLayer = (props) => {
             "line-color": "rgb(100,200,100)",
             "line-width": 10,
           },
+          layout: props.layout || {},
         },
         props.insertBeforeLayer,
         componentId.current
@@ -178,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/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
+}

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

@@ -0,0 +1,106 @@
+import React, { useState, useContext, useRef, useEffect } from "react";
+import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
+import MlLayerSwitcher from "./MlLayerSwitcher";
+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",
+  component: MlLayerSwitcher,
+  argTypes: {
+    url: {},
+    layer: {},
+  },
+  decorators: mapContextDecorator,
+};
+export default storyoptions;
+const layerId = "nw_uraufnahme_rw";
+const Template = (args) => {
+  const [geojson, setGeojson] = useState(sample_geojson_1);
+  return (
+    <>
+      <MlWmsLayer
+        url={args.url}
+        urlParameters={{ layers: args.layer }}
+        sourceOptions={args.sourceOptions}
+        layerId="historic"
+        visible={args.layerVisible}
+      />
+      <MlWmsLayer
+        url={args.url2}
+        urlParameters={{ layers: args.layer2 }}
+        sourceOptions={args.sourceOptions}
+        layerId={args.layer2}
+        visible={args.layer2Visible}
+      />
+      <MlGeoJsonLayer
+        type="line"
+        layout={{ visibility: args.geojsonLayerVisible ? "visible" : "none" }}
+        geojson={geojson}
+        layerId="geojson1"
+      />
+      <MlGeoJsonLayer
+        type="line"
+        layout={{ visibility: args.geojson2LayerVisible ? "visible" : "none" }}
+        geojson={sample_geojson_2}
+        layerId="geojson2"
+      />
+      <MlLayerSwitcher
+        baseSourceConfig={{
+          active: args.baseSourcesActive,
+          layers: args.layers,
+        }}
+        detailLayerConfig={args.detailLayerConfig}
+      />
+      ;
+    </>
+  );
+};
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {
+  url: "https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme",
+  layer: "nw_uraufnahme_rw",
+  layerVisible: true,
+  url2: "https://www.wms.nrw.de/geobasis/wms_nw_dop",
+  layer2: "WMS_NW_DOP",
+  layer2Visible: false,
+  geojsonLayerVisible: true,
+  geojson2LayerVisible: true,
+  sourceOptions: {
+    minzoom: 13,
+    maxzoom: 20,
+  },
+  baseSourcesActive: true,
+  layers: [
+    {
+      label: "Historic",
+      layerId: "historic",
+      src: "assets/historic.png",
+    },
+    {
+      label: "Straßenkarte",
+      layerId: "styleBase",
+      src: "assets/osm.png",
+    },
+    {
+      label: "DOP",
+      layerId: "WMS_NW_DOP",
+      src: "assets/dop.png",
+    },
+  ],
+  detailLayerConfig: {
+    layers: [
+      {
+        label: "GeoJson 1",
+        layerId: "geojson1",
+        src: "assets/historic.png",
+        active: true,
+      },
+    ],
+  },
+};

package/src/components/MlLayerSwitcher/assets/sample_1.json

@@ -0,0 +1,26 @@
+{
+  "type": "Feature",
+  "properties": {},
+  "geometry": {
+    "type": "LineString",
+    "coordinates": [
+      [7.1074676513671875, 50.74340774029213],
+      [7.0992279052734375, 50.756441089372665],
+      [7.079315185546874, 50.764693667025014],
+      [7.045669555664062, 50.77945780529241],
+      [7.030563354492187, 50.79161300845443],
+      [7.0291900634765625, 50.80940599750376],
+      [7.0236968994140625, 50.820685846099174],
+      [7.0085906982421875, 50.825891011253546],
+      [6.9879913330078125, 50.826758482363275],
+      [6.97906494140625, 50.835432306955276],
+      [6.9824981689453125, 50.84583876895451],
+      [6.9962310791015625, 50.85147463352982],
+      [7.012023925781249, 50.85710981721644],
+      [7.021636962890625, 50.86664473085768],
+      [7.0367431640625, 50.872278081520406],
+      [7.0477294921875, 50.877044231111014],
+      [7.052536010742187, 50.88397594225127]
+    ]
+  }
+}

package/src/components/MlLayerSwitcher/assets/sample_2.json

@@ -0,0 +1,22 @@
+{
+  "type": "Feature",
+  "properties": {},
+  "geometry": {
+    "type": "LineString",
+    "coordinates": [
+      [7.0635223388671875, 50.71385204707258],
+      [7.06146240234375, 50.709721458354075],
+      [7.063865661621094, 50.70298129536074],
+      [7.064552307128906, 50.69906720767511],
+      [7.059059143066406, 50.69428287906098],
+      [7.05596923828125, 50.68797551838366],
+      [7.0580291748046875, 50.680797145321655],
+      [7.062835693359375, 50.67514068397085],
+      [7.060432434082031, 50.6686131506577],
+      [7.051849365234375, 50.659255436656736],
+      [7.044639587402344, 50.6512019574539],
+      [7.0484161376953125, 50.64271166020676],
+      [7.0566558837890625, 50.63748609931014]
+    ]
+  }
+}