@mapcomponents/react-maplibre 0.1.69 → 0.1.70

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

@@ -1,117 +0,0 @@
-import React, { useContext, useState } from "react";
-import { mount, configure } from "enzyme";
-import { waitFor } from "@testing-library/react";
-import MapContext, { MapComponentsProvider } from "../../contexts/MapContext";
-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);
-	const mapContext = useContext(MapContext);
-
-	return (
-		<>
-			<MapLibreMap />
-
-			{layerVisible && (
-				<MlLayer
-					options={{
-						source: {
-							type: "geojson",
-							data: {},
-						},
-					}}
-				/>
-			)}
-
-			<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>
-			<div className="sources_json">
-				{mapContext.map && refreshTrigger && JSON.stringify(mapContext.map.sources)}
-			</div>
-		</>
-	);
-};
-
-const createWrapper = () =>
-	mount(
-		<MapComponentsProvider>
-			<MlLayerTestComponent />
-		</MapComponentsProvider>
-	);
-
-describe("<MlLayer>", () => {
-	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(
-			new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
-		).toEqual(true);
-	});
-
-	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(
-			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(
-			new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
-		).toEqual(false);
-	});
-
-	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(
-			new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
-		).toEqual(true);
-	});
-
-	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(
-			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(
-			new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
-		).toEqual(false);
-	});
-});

package/src/components/MlLayer/MlLayer.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-
-import useLayer from "../../hooks/useLayer";
-import { Feature, FeatureCollection } from "@turf/turf";
-
-interface MlLayerProps {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId?: string;
-	/**
-	 * The layerId of an existing layer this layer should be rendered visually beneath
-	 * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
-	 */
-	insertBeforeLayer?: string;
-	/**
-	 * Id of the layer that will be added by this component to the maplibre-gl instance
-	 */
-	layerId?: string;
-	/**
-	 * Javascript object that is passed the addLayer command as first parameter.
-	 */
-	options?: any;
-	/**
-	 * GeoJSON data that is supposed to be rendered by this component.
-	 */
-	geojson?: Feature | FeatureCollection | undefined;
-}
-
-/**
- * Basic layer component that create a layer in a MapLibre-gl instance and keeps it updated according to it attribute configuration.
- * 
- * @category Map components 
- */
-const MlLayer = (props: MlLayerProps) => {
-	useLayer({
-		idPrefix: 'MlLayer-',
-		layerId: props.layerId,
-		mapId: props.mapId,
-		geojson: props.geojson,
-		options: {
-			type: "background",
-			paint: {
-				"background-color": "rgba(0,0,0,0)",
-			},
-			...props.options,
-		},
-		insertBeforeLayer: props.insertBeforeLayer,
-	});
-
-	return <></>;
-};
-
-export default MlLayer;

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

@@ -1 +0,0 @@
-Darstellung verschiedener Karten, in Form einer verschiebbaren Lupe

package/src/components/MlLayerMagnify/MlLayerMagnify.doc.en.md

@@ -1 +0,0 @@
-Display of different kinds of maps in form of a moveable mgnifying glass. 

package/src/components/MlLayerMagnify/MlLayerMagnify.meta.json

@@ -1,14 +0,0 @@
-{
-  "name": "MlLayerMagnify",
-  "title": "Map magnifier",
-  "description": "Hides a part of a map that is superimposed on another MapLibre map.",
-  "i18n": {
-    "de": {
-      "title": "Kartenlupe",
-      "description": "Kartenlupe blendet einen Teil einer, von zwei übereinanderliegenden, MapLibre Karten aus."
-    }
-  },
-  "tags": ["Map add-on"],
-  "category": "add-ons",
-  "type": "component"
-}

package/src/components/MlLayerMagnify/MlLayerMagnify.stories.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-
-import MlLayerMagnify from './MlLayerMagnify';
-import MlWmsLayer from '../MlWmsLayer/MlWmsLayer';
-
-import multiMapContextDecorator from '../../decorators/MultiMapContextDecorator';
-
-const storyoptions = {
-	title: 'MapComponents/MlLayerMagnify',
-	component: MlLayerMagnify,
-	argTypes: {},
-	decorators: multiMapContextDecorator,
-};
-export default storyoptions;
-
-interface TemplateProps {
-	wmsLayerMapId: string;
-	magnifierRadius: number;
-}
-
-const Template = (args: TemplateProps) => (
-	<>
-		<MlWmsLayer
-			url="https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme"
-			urlParameters={{
-				layers: 'nw_uraufnahme_rw',
-			}}
-			sourceOptions={{
-				minzoom: 13,
-				maxzoom: 20,
-			}}
-			mapId={args.wmsLayerMapId}
-			
-		/>
-		<MlLayerMagnify map1Id="map_1" map2Id="map_2" magnifierStyle={{border:'2px solid grey'}} magnifierRadius={args.magnifierRadius} />
-	</>
-);
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {
-	wmsLayerMapId: 'map_2',
-	magnifierRadius: 200,
-};

package/src/components/MlLayerMagnify/MlLayerMagnify.test.tsx

@@ -1,83 +0,0 @@
-import MlLayerMagnify from './MlLayerMagnify';
-
-import React, { useContext, useState } from 'react';
-import { mount } from 'enzyme';
-import MapContext, { MapComponentsProvider } from '../../contexts/MapContext';
-import MapLibreMap from './../MapLibreMap/MapLibreMap';
-// we need to import this explicitly, because otherwise it gets mixed up with cypress expect
-import { expect } from '@jest/globals';
-// Mapbox sync-move mockup
-const 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 TestComponent = () => {
-	const [layerVisible, setLayerVisible] = useState(true);
-	const [refreshTrigger, setRefreshTrigger] = useState(0);
-	const mapContext = useContext(MapContext);
-
-	return (
-		<>
-			<MapLibreMap mapId="map_1" />
-			<MapLibreMap mapId="map_2" />
-
-			{layerVisible && <MlLayerMagnify 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('<MlLayerMagnify/>', () => {
-	//it("should add a MlLayerMagnify 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();
-
-		//expect(syncMove).toHaveBeenCalledTimes(1);
-
-		wrapper.find('.toggle_layer_visible').simulate('click');
-
-		//TODO: Fix cleanup test
-		expect(mockSyncMoveMethods.cleanup).toHaveBeenCalledTimes(1);
-	});
-});

package/src/components/MlLayerMagnify/MlLayerMagnify.tsx

@@ -1,220 +0,0 @@
-import React, { useContext, useCallback, useRef, useEffect, useState, useMemo } 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 MlLayerMagnifyProps {
-	/**
-	 * Id of the first MapLibre instance
-	 */
-	map1Id: string;
-	/**
-	 * Id of the second MapLibre instance
-	 */
-	map2Id: string;
-	/**
-	 * Size of the "magnifier"-circle
-	 */
-	magnifierRadius?: number;
-	/**
-	 * object (React.CSSProperties) that is added to the magnifier default style
-	 */
-	magnifierStyle: React.CSSProperties | undefined;
-}
-
-/**
- *
- * Hides the MapLibreMap referenced by props.map2Id except for the "magnifier"-circle that reveals
- * the map and can be dragged around on top of the MapLibreMap referenced by props.map1Id
- */
-const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
-	const mapContext: MapContextType = useContext(MapContext);
-	const syncMoveInitializedRef = useRef(false);
-	const syncCleanupFunctionRef = useRef(() => {});
-
-	const [swipeX, setSwipeX] = useState(50);
-	const swipeXRef = useRef(50);
-	const [swipeY, setSwipeY] = useState(50);
-	const swipeYRef = useRef(50);
-
-	const magnifierRadius = useMemo(() => {
-		return props.magnifierRadius || 200;
-	}, [props.magnifierRadius]);
-
-	const mapExists = useCallback(() => {
-		if (!props.map1Id || !props.map2Id) {
-			return false;
-		}
-		if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
-			return false;
-		}
-
-		return true;
-	}, [props, mapContext]);
-
-	const onResize = useRef(() => {
-		if (!mapExists()) return;
-
-		onMove({
-			clientX: swipeXRef.current,
-			clientY: swipeYRef.current,
-		} as (TouchEvent & MouseEvent));
-	});
-
-	useEffect(() => {
-		window.addEventListener('resize', onResize.current);
-		const _onResize = onResize.current;
-
-		return () => {
-			window.removeEventListener('resize', _onResize);
-			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);
-			let clientY =
-				e?.clientY ||
-				(typeof e.touches !== 'undefined' && typeof e.touches[0] !== 'undefined'
-					? e.touches[0].clientY
-					: 0);
-
-			clientX -= bounds.x;
-			clientY -= bounds.y;
-			const swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
-			const swipeY_tmp = parseFloat(((clientY / bounds.height) * 100).toFixed(2));
-
-			if (swipeXRef.current !== swipeX_tmp || swipeYRef.current !== swipeY_tmp) {
-				setSwipeX(swipeX_tmp);
-				swipeXRef.current = swipeX_tmp;
-				setSwipeY(swipeY_tmp);
-				swipeYRef.current = swipeY_tmp;
-
-				mapContext.maps[props.map2Id].getContainer().style.clipPath =
-					`circle(${magnifierRadius}px at ` +
-					(swipeXRef.current * bounds.width) / 100 +
-					'px ' +
-					(swipeYRef.current * bounds.height) / 100 +
-					'px)';
-			}
-		},
-		[mapContext, mapExists, props, magnifierRadius]
-	);
-
-	useEffect(() => {
-		if (!mapExists() || syncMoveInitializedRef.current) return;
-
-		syncMoveInitializedRef.current = true;
-		syncCleanupFunctionRef.current = syncMove(
-			mapContext.getMap(props.map1Id).map,
-			mapContext.getMap(props.map2Id).map
-		);
-
-		onMove({
-			clientX: swipeXRef.current,
-			clientY: swipeYRef.current,
-		} as (TouchEvent & MouseEvent));
-		/*
-		automatically adjust radius for small screens
-		if (
-			mapContext.maps[props.map1Id].getCanvas().clientWidth >
-				mapContext.maps[props.map1Id].getCanvas().clientHeight &&
-			magnifierRadius * 2 >
-				mapContext.maps[props.map1Id].getCanvas().clientHeight
-		) {
-			magnifierRadius = Math.floor(
-				mapContext.maps[props.map1Id].getCanvas().clientHeight / 2
-			);
-			setMagnifierRadius(magnifierRadius);
-		}
-
-		if (
-			mapContext.maps[props.map1Id].getCanvas().clientHeight >
-				mapContext.maps[props.map1Id].getCanvas().clientWidth &&
-			magnifierRadius * 2 >
-				mapContext.maps[props.map1Id].getCanvas().clientWidth
-		) {
-			magnifierRadius = Math.floor(
-				mapContext.maps[props.map1Id].getCanvas().clientWidth / 2
-			);
-			setMagnifierRadius(magnifierRadius);
-		}
-		*/
-
-		onMove({
-			clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2,
-			clientY: mapContext.maps[props.map1Id].getCanvas().clientHeight / 2,
-		} as (TouchEvent & MouseEvent));
-	}, [mapContext.mapIds, mapContext, mapExists, props, onMove]);
-
-	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);
-	};
-
-	const onWheel = (e: React.WheelEvent) => {
-		const evCopy = new WheelEvent(e.type, e as unknown as WheelEventInit);
-		mapContext.map?.map.getCanvas().dispatchEvent(evCopy);
-	};
-
-	return (
-		<div
-			style={{
-				position: 'absolute',
-				left: swipeX + '%',
-				top: swipeY + '%',
-				borderRadius: '50%',
-				width: magnifierRadius * 2 - 2 + 'px',
-				height: magnifierRadius * 2 - 2 + 'px',
-				background: 'rgba(0,0,0,0)',
-				border: '2px solid #fafafa',
-				boxShadow: '1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)',
-				cursor: 'pointer',
-				zIndex: '110',
-				marginLeft: magnifierRadius * -1 - 1 + 'px',
-				marginTop: magnifierRadius * -1 - 1 + 'px',
-				textAlign: 'center',
-				lineHeight: '91px',
-				fontSize: '2em',
-				color: '#fafafa',
-				userSelect: 'none',
-				...props.magnifierStyle,
-			}}
-			onTouchStart={onDown}
-			onMouseDown={onDown}
-			onWheel={onWheel}
-		></div>
-	);
-};
-
-MlLayerMagnify.defaultProps = {
-	magnifierRadius: 200,
-	magnifierStyle: {},
-};
-
-export default MlLayerMagnify;

package/src/components/MlLayerMagnify/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/MlLayerSwipe/MlLayerSwipe.doc.de.md

@@ -1 +0,0 @@
-Verschiebbare Darstellung verschiedener Karten

package/src/components/MlLayerSwipe/MlLayerSwipe.doc.en.md

@@ -1 +0,0 @@
-Moveable display of different kinds of maps.

package/src/components/MlLayerSwipe/MlLayerSwipe.meta.json

@@ -1,14 +0,0 @@
-{
-  "name": "MlLayerSwipe",
-  "title": "Map curtain",
-  "description": "Map curtain hides an area of the top one of two overlaying MapLibre maps.",
-  "i18n": {
-    "de": {
-      "title": "Kartenvorhang",
-      "description": "Kartenvorhangs blendet einen Teil einer, von zwei übereinanderliegenden, MapLibre Karten aus."
-    }
-  },
-  "tags": ["Map add-on"],
-  "category": "add-ons",
-  "type": "component"
-}

package/src/components/MlLayerSwipe/MlLayerSwipe.stories.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import MlLayerSwipe from './MlLayerSwipe';
-import MlWmsLayer from '../MlWmsLayer/MlWmsLayer';
-
-import multiMapContextDecorator from '../../decorators/MultiMapContextDecorator';
-
-const storyoptions = {
-	title: 'MapComponents/MlLayerSwipe',
-	component: MlLayerSwipe,
-	argTypes: {},
-	decorators: multiMapContextDecorator,
-};
-
-export default storyoptions;
-const Template = () => (
-	<>
-		<MlWmsLayer
-			url="https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme"
-			urlParameters={{
-				layers: 'nw_uraufnahme_rw',
-			}}
-			sourceOptions={{
-				minzoom: 13,
-				maxzoom: 20,
-			}}
-			mapId="map_2"
-		/>
-		<MlLayerSwipe map1Id="map_1" map2Id="map_2" />
-	</>
-);
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};
-//