@mapcomponents/react-maplibre 0.1.69 → 0.1.70

package/src/components/MlLayerSwipe/MlLayerSwipe.test.js

@@ -1,86 +0,0 @@
-import MlLayerSwipe from "./MlLayerSwipe";
-
-import React, { useContext, useState } from "react";
-import { mount } from "enzyme";
-import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
-import MapLibreMap from "./../MapLibreMap/MapLibreMap";
-import syncMove from "@mapbox/mapbox-gl-sync-move";
-// Mapbox sync-move mockup
-var mockSyncMoveMethods = {
-	cleanup: jest.fn(),
-};
-
-jest.mock("@mapbox/mapbox-gl-sync-move", () => {
-	const originalModule = jest.requireActual("@mapbox/mapbox-gl-sync-move");
-	return {
-		__esModule: true,
-		...originalModule,
-		default: () => mockSyncMoveMethods.cleanup,
-	};
-});
-
-const syncMoveObj = {
-	syncMove: syncMove,
-};
-
-const TestComponent = (props) => {
-	const [layerVisible, setLayerVisible] = useState(true);
-	const [refreshTrigger, setRefreshTrigger] = useState(0);
-	const mapContext = useContext(MapContext);
-
-	return (
-		<>
-			<MapLibreMap mapId="map_1" />
-			<MapLibreMap mapId="map_2" />
-
-			{layerVisible && <MlLayerSwipe map1Id="map_1" map2Id="map_2" />}
-
-			<button
-				className="toggle_layer_visible"
-				onClick={() => {
-					setLayerVisible(!layerVisible);
-				}}
-			>
-				toggle layer visible
-			</button>
-			<button
-				className="trigger_refresh"
-				onClick={() => {
-					setRefreshTrigger(refreshTrigger + 1);
-				}}
-			>
-				refresh
-			</button>
-			<div className="layers_json">
-				{mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.layers)}
-			</div>
-		</>
-	);
-};
-
-const createWrapper = () =>
-	mount(
-		<MapComponentsProvider>
-			<TestComponent />
-		</MapComponentsProvider>
-	);
-
-describe("<MlLayerSwipe/>", () => {
-	//it("should add a MlLayerSwipe Component to that calls syncMaps with both available MapLibre instances once", async () => {
-	//	const spy = jest.spyOn(syncMoveObj, "syncMove");
-	//	const wrapper = createWrapper(TestComponent);
-
-	//	expect(spy).toHaveBeenCalledTimes(1);
-	//});
-
-	it("should call the syncMaps cleanup function once when it is removed from reactDOM", async () => {
-		const wrapper = createWrapper(TestComponent);
-
-		//expect(syncMove).toHaveBeenCalledTimes(1);
-
-		wrapper.find(".toggle_layer_visible").simulate("click");
-
-		//TODO: Fix cleanup test
-		expect(mockSyncMoveMethods.cleanup).toHaveBeenCalledTimes(1);
-	});
-});

package/src/components/MlLayerSwipe/MlLayerSwipe.tsx

@@ -1,145 +0,0 @@
-import React, { useContext, useCallback, useRef, useEffect, useState } from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import syncMove from '@mapbox/mapbox-gl-sync-move';
-import './style.css';
-import MapContext, { MapContextType } from '../../contexts/MapContext';
-
-export interface MlLayerSwipeProps {
-	/**
-	 * Id of the first MapLibre instance.
-	 */
-	map1Id: string;
-	/**
-	 * Id of the second MapLibre instance.
-	 */
-	map2Id: string;
-	/**
-	 * object (React.CSSProperties) that is added to the button default style
-	 */
-	buttonStyle: React.CSSProperties | undefined;
-}
-
-/**
- *	creates a split view of 2 synchronised maplibre instances
- */
-const MlLayerSwipe = (props: MlLayerSwipeProps) => {
-	const mapContext: MapContextType = useContext(MapContext);
-	const initializedRef = useRef(false);
-
-	const [swipeX, setSwipeX] = useState(50);
-	const swipeXRef = useRef(0);
-
-	const syncCleanupFunctionRef = useRef(() => {});
-
-	const mapExists = useCallback(() => {
-		if (!props.map1Id || !props.map2Id) {
-			return false;
-		}
-		if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
-			return false;
-		}
-
-		return true;
-	}, [mapContext, props.map1Id, props.map2Id]);
-
-	const cleanup = () => {
-		syncCleanupFunctionRef.current();
-	};
-
-	const onMove = useCallback(
-		(e:(TouchEvent & MouseEvent)) => {
-			if (!mapExists()) return;
-
-			const bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
-			let clientX =
-				e.clientX ||
-				(typeof e.touches !== 'undefined' && typeof e.touches[0] !== 'undefined'
-					? e.touches[0].clientX
-					: 0);
-
-			clientX -= bounds.x;
-			const swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
-
-			if (swipeXRef.current !== swipeX_tmp) {
-				setSwipeX(swipeX_tmp);
-				swipeXRef.current = swipeX_tmp;
-
-				const clipA = 'rect(0, ' + (swipeXRef.current * bounds.width) / 100 + 'px, 999em, 0)';
-
-				mapContext.maps[props.map2Id].getContainer().style.clip = clipA;
-			}
-		},
-		[mapContext, mapExists, props.map1Id, props.map2Id]
-	);
-
-	useEffect(() => {
-		return cleanup;
-	}, []);
-
-	useEffect(() => {
-		if (!mapExists() || initializedRef.current) return;
-
-		initializedRef.current = true;
-		syncCleanupFunctionRef.current = syncMove(
-			mapContext.getMap(props.map1Id).map,
-			mapContext.getMap(props.map2Id).map
-		);
-		onMove({
-			clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2,
-		} as (TouchEvent & MouseEvent));
-	}, [mapContext.mapIds, mapContext, props, onMove, mapExists]);
-
-	const onDown = (e: React.MouseEvent | React.TouchEvent) => {
-		if (e.nativeEvent instanceof TouchEvent) {
-			document.addEventListener('touchmove', onMove);
-			document.addEventListener('touchend', onTouchEnd);
-		} else {
-			document.addEventListener('mousemove', onMove);
-			document.addEventListener('mouseup', onMouseUp);
-		}
-	};
-
-	const onTouchEnd = () => {
-		document.removeEventListener('touchmove', onMove);
-		document.removeEventListener('touchend', onTouchEnd);
-	};
-
-	const onMouseUp = () => {
-		document.removeEventListener('mousemove', onMove);
-		document.removeEventListener('mouseup', onMouseUp);
-	};
-
-	return (
-		<div
-			style={{
-				position: 'absolute',
-				left: swipeX + '%',
-				top: '50%',
-				borderRadius: '50%',
-				width: '100px',
-				height: '100px',
-				background: '#0066ff',
-				border: '3px solid #eaebf1',
-				cursor: 'pointer',
-				zIndex: '110',
-				marginLeft: '-50px',
-				marginTop: '-50px',
-				textAlign: 'center',
-				lineHeight: '91px',
-				fontSize: '2em',
-				color: '#fafafa',
-				userSelect: 'none',
-				...props.buttonStyle,
-			}}
-			onTouchStart={onDown}
-			onMouseDown={onDown}
-		></div>
-	);
-};
-
-MlLayerSwipe.defaultProps = {
-	buttonStyle: {},
-};
-
-export default MlLayerSwipe;

package/src/components/MlLayerSwipe/style.css

@@ -1,48 +0,0 @@
-.mapboxgl-compare {
-  background-color:#fff;
-  position:absolute;
-  width:2px;
-  height:100%;
-  z-index:110;
-  top: 0;
-  margin-left:0;
-  left:0;
-}
-.mapboxgl-compare .compare-swiper-vertical {
-  z-index:120;
-  background-color:#3887be;
-  box-shadow:inset 0 0 0 2px #fff;
-  display:inline-block;
-  border-radius:50%;
-  position:absolute;
-  width:60px;
-  height:60px;
-  top:50%;
-  left:-30px;
-  margin:-30px 1px 0;
-  color: #fff;
-  cursor:ew-resize;
-	background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+);
-  }
-
-.mapboxgl-compare-horizontal {
-  position:relative;
-  width:100%;
-  height:2px;
-}
-.mapboxgl-compare .compare-swiper-horizontal {
-  background-color:#3887be;
-  box-shadow:inset 0 0 0 2px #fff;
-  display:inline-block;
-  border-radius:50%;
-  position:absolute;
-  width:60px;
-  height:60px;
-  top:50%;
-  left:50%;
-  margin:-30px 1px 0;
-  color: #fff;
-  cursor:ns-resize;
-  background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+);
-  transform: rotate(90deg)
-}

package/src/components/MlLayerSwitcher/MlLayerSwitcher.css

@@ -1,17 +0,0 @@
-.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

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

package/src/components/MlLayerSwitcher/MlLayerSwitcher.js

@@ -1,217 +0,0 @@
-import "./MlLayerSwitcher.css";
-//External
-import React, { 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 "../../contexts/MapContext";
-import LayerBox from "./components/LayerBox";
-import Divider from "@mui/material/Divider";
-import useMapState from "../../hooks/useMapState";
-/**
- * @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

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

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

@@ -1,103 +0,0 @@
-import React 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";
-
-const storyoptions = {
-	title: "MapComponents/MlLayerSwitcher",
-	component: MlLayerSwitcher,
-	argTypes: {
-		url: {},
-		layer: {},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-const Template = (args) => {
-	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={sample_geojson_1}
-				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

@@ -1,26 +0,0 @@
-{
-  "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

@@ -1,22 +0,0 @@
-{
-  "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]
-    ]
-  }
-}