@mapcomponents/react-maplibre 0.1.63 → 0.1.64

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

@@ -1,19 +1,38 @@
-import { layerRemovalTest, sourceRemovalTest } from "../../util";
-import { uuid_regex } from "../../setupTests";
+import { layerRemovalTest, sourceRemovalTest } from '../../util';
+import { uuid_regex } from '../../setupTests';
 
-import MlImageMarkerLayer from "./MlImageMarkerLayer";
+import MlImageMarkerLayer from './MlImageMarkerLayer';
 
-const testComponent = <MlImageMarkerLayer options={{ source: {} }} />;
+const testComponent = (
+	// eslint-disable-next-line react/react-in-jsx-scope
+	<MlImageMarkerLayer
+		options={{
+			source: {
+				type: 'geojson',
+				data: {
+					type: 'Feature',
+					properties: {
+						id: 'test',
+					},
+					geometry: {
+						type: 'Point',
+						coordinates: [7.0847929969609424, 50.73855193187643],
+					},
+				},
+			},
+		}}
+	/>
+);
 
 layerRemovalTest(
-	"<MlImageMarkerLayer />",
+	'<MlImageMarkerLayer />',
 	testComponent,
 	new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
-	"MlImageMarkerLayer-{uuid}"
+	'MlImageMarkerLayer-{uuid}'
 );
 sourceRemovalTest(
-	"<MlImageMarkerLayer />",
+	'<MlImageMarkerLayer />',
 	testComponent,
 	new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
-	"MlImageMarkerLayer-{uuid}"
+	'MlImageMarkerLayer-{uuid}'
 );

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.tsx

@@ -1,9 +1,13 @@
-import React, { useRef, useCallback, useEffect } from "react";
+import React, { useRef, useEffect, useState } from 'react';
 
-import { GeoJSONSource } from "maplibre-gl";
-import useMap, { useMapType } from "../../hooks/useMap";
+import { v4 as uuidv4 } from 'uuid';
 
-interface MlImageMarkerLayerProps {
+import useLayer from '../../hooks/useLayer';
+import useMap from '../../hooks/useMap';
+import { SymbolLayerSpecification } from 'maplibre-gl';
+import { Feature, FeatureCollection } from '@turf/turf';
+
+export interface MlImageMarkerLayerProps {
 	/**
 	 * Id of the target MapLibre instance in mapContext
 	 */
@@ -28,7 +32,11 @@ interface MlImageMarkerLayerProps {
 	/**
 	 * Javascript object that is passed the addLayer command as first parameter.
 	 */
-	options?: any;
+	options?: {
+		source?: { type?: string | undefined; data: Feature | FeatureCollection | undefined };
+		layout?: SymbolLayerSpecification['layout'];
+		paint?: SymbolLayerSpecification['paint'];
+	};
 }
 
 const MlImageMarkerLayer = (props: MlImageMarkerLayerProps) => {
@@ -37,38 +45,27 @@ const MlImageMarkerLayer = (props: MlImageMarkerLayerProps) => {
 		waitForLayer: props.insertBeforeLayer,
 	});
 
-	const initializedRef = useRef(false);
-	const recreationInProgress = useRef(false);
-	const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
-	const layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
-
-	// effect to sync Layer paint & layout properties
-	useEffect(() => {
-		if (
-			!mapHook.map ||
-			(mapHook.map && !mapHook.map.map.getLayer(layerId.current)) ||
-			!props.options
-		)
-			return;
-
-		var key;
-
-		if (props.options.layout) {
-			for (key in props.options.layout) {
-				mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
-			}
-		}
-		if (props.options.paint) {
-			for (key in props.options.paint) {
-				mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
-			}
-		}
-	}, [props.options, layerId.current, props.mapId]);
+	const [imageId, setImageId] = useState<string>();
+	const imageIdRef = useRef(props.imageId || 'img_' + uuidv4());
+	const layerId = useRef(props.layerId || 'MlImageMarkerLayer-' + mapHook.componentId);
+
+	useLayer({
+		geojson: props.options?.source?.data,
+		layerId: layerId.current,
+		options: {
+			type: 'symbol',
+			layout: {
+				...props.options?.layout,
+				'icon-image': imageId || imageIdRef.current,
+			},
+			paint: {
+				...props.options?.paint,
+			},
+		},
+	});
 
-	const createImage = (mapHook: useMapType, props: MlImageMarkerLayerProps, callback: Function) => {
+	const createImage = (mapHook: ReturnType<typeof useMap>, props: MlImageMarkerLayerProps) => {
 		if (!mapHook.map) {
-			initializedRef.current = false;
-
 			return;
 		}
 
@@ -78,96 +75,25 @@ const MlImageMarkerLayer = (props: MlImageMarkerLayerProps) => {
 
 				if (!mapHook.map || mapHook.map.map.hasImage(imageIdRef.current)) return;
 
-				mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
+				mapHook.map.addImage(
+					imageIdRef.current,
+					image as unknown as ImageData,
+					mapHook.componentId
+				);
 
-				if (typeof callback === "function") {
-					callback();
-				}
+				setImageId(imageIdRef.current);
 			});
-		} else {
-			if (typeof callback === "function") {
-				callback();
-			}
-		}
-	};
-
-	const createLayer = (
-		mapHook: useMapType,
-		props: MlImageMarkerLayerProps,
-		createMapLibreElements: Function
-	) => {
-		if (!props.options || !mapHook.map || mapHook.map?.map.getLayer(layerId.current)) return;
-
-		let tmpOptions = {
-			id: layerId.current,
-			layout: {},
-			...props.options,
-		};
-		tmpOptions.layout["icon-image"] = imageIdRef.current;
-		mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
-
-		// recreate layer if map style.json has changed
-		mapHook.map.on(
-			"styledata",
-			() => {
-				if (
-					initializedRef.current &&
-					!mapHook.map?.map.getLayer(layerId.current) &&
-					!recreationInProgress.current
-				) {
-					initializedRef.current = false;
-					recreationInProgress.current = true;
-					console.log("Recreate Layer " + layerId.current);
-					createMapLibreElements();
-				}
-			},
-			mapHook.componentId
-		);
-
-		if (recreationInProgress.current) {
-			recreationInProgress.current = false;
 		}
 	};
 
-	const createMapLibreElements = useCallback(() => {
-		if (!mapHook.map || initializedRef.current || mapHook.map?.map.getLayer(layerId.current))
-			return;
-
-		initializedRef.current = true;
-
-		if (recreationInProgress.current) {
-			mapHook.cleanup();
-		}
+	useEffect(() => {
+		if (!mapHook.map) return;
 
 		if (props.imgSrc) {
-			createImage(mapHook, props, () => {
-				createLayer(mapHook, props, createMapLibreElements);
-			});
-		} else {
-			createLayer(mapHook, props, createMapLibreElements);
+			createImage(mapHook, props);
 		}
 	}, [props, mapHook]);
 
-	useEffect(() => {
-		if (initializedRef.current) return;
-
-		createMapLibreElements();
-	}, [createMapLibreElements]);
-
-	useEffect(() => {
-		if (
-			!mapHook.map ||
-			(mapHook.map && !mapHook.map.map.getLayer(layerId.current)) ||
-			!props.options
-		) {
-			return;
-		}
-
-		(mapHook.map.map.getSource(layerId.current) as GeoJSONSource).setData(
-			props.options.source.data
-		);
-	}, [props.options.source.data, props]);
-
 	return <></>;
 };
 

package/src/components/MlLayer/MlLayer.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

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

@@ -10,6 +10,5 @@
   },
   "tags": ["Map add-on"],
   "category": "add-ons",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

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

@@ -0,0 +1,44 @@
+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.js → MlLayerMagnify.test.tsx}

@@ -1,17 +1,18 @@
-import MlLayerMagnify from "./MlLayerMagnify";
+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";
-import syncMove from "@mapbox/mapbox-gl-sync-move";
+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
-var mockSyncMoveMethods = {
+const mockSyncMoveMethods = {
 	cleanup: jest.fn(),
 };
 
-jest.mock("@mapbox/mapbox-gl-sync-move", () => {
-	const originalModule = jest.requireActual("@mapbox/mapbox-gl-sync-move");
+jest.mock('@mapbox/mapbox-gl-sync-move', () => {
+	const originalModule = jest.requireActual('@mapbox/mapbox-gl-sync-move');
 	return {
 		__esModule: true,
 		...originalModule,
@@ -19,11 +20,7 @@ jest.mock("@mapbox/mapbox-gl-sync-move", () => {
 	};
 });
 
-const syncMoveObj = {
-	syncMove: syncMove,
-};
-
-const TestComponent = (props) => {
+const TestComponent = () => {
 	const [layerVisible, setLayerVisible] = useState(true);
 	const [refreshTrigger, setRefreshTrigger] = useState(0);
 	const mapContext = useContext(MapContext);
@@ -65,7 +62,7 @@ const createWrapper = () =>
 		</MapComponentsProvider>
 	);
 
-describe("<MlLayerMagnify/>", () => {
+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);
@@ -73,12 +70,12 @@ describe("<MlLayerMagnify/>", () => {
 	//	expect(spy).toHaveBeenCalledTimes(1);
 	//});
 
-	it("should call the syncMaps cleanup function once when it is removed from reactDOM", async () => {
-		const wrapper = createWrapper(TestComponent);
+	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");
+		wrapper.find('.toggle_layer_visible').simulate('click');
 
 		//TODO: Fix cleanup test
 		expect(mockSyncMoveMethods.cleanup).toHaveBeenCalledTimes(1);

package/src/components/MlLayerMagnify/MlLayerMagnify.tsx

@@ -1,17 +1,11 @@
-import React, {
-	useContext,
-	useCallback,
-	useRef,
-	useEffect,
-	useState,
-	useMemo
-} from "react";
+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	from "../../contexts/MapContext";
+import syncMove from '@mapbox/mapbox-gl-sync-move';
+import './style.css';
+import MapContext from '../../contexts/MapContext';
 
-interface MlLayerMagnifyProps {
+export interface MlLayerMagnifyProps {
 	/**
 	 * Id of the first MapLibre instance
 	 */
@@ -24,6 +18,10 @@ interface MlLayerMagnifyProps {
 	 * Size of the "magnifier"-circle
 	 */
 	magnifierRadius?: number;
+	/**
+	 * object (React.CSSProperties) that is added to the magnifier default style
+	 */
+	magnifierStyle: React.CSSProperties | undefined;
 }
 
 /**
@@ -32,7 +30,7 @@ interface MlLayerMagnifyProps {
  * 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 mapContext: MapContextType = useContext(MapContext);
 	const syncMoveInitializedRef = useRef(false);
 	const syncCleanupFunctionRef = useRef(() => {});
 
@@ -43,7 +41,7 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 
 	const magnifierRadius = useMemo(() => {
 		return props.magnifierRadius || 200;
-	},[props.magnifierRadius]);
+	}, [props.magnifierRadius]);
 
 	const mapExists = useCallback(() => {
 		if (!props.map1Id || !props.map2Id) {
@@ -66,11 +64,11 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 	});
 
 	useEffect(() => {
-		window.addEventListener("resize", onResize.current);
-		let _onResize = onResize.current;
+		window.addEventListener('resize', onResize.current);
+		const _onResize = onResize.current;
 
 		return () => {
-			window.removeEventListener("resize", _onResize);
+			window.removeEventListener('resize', _onResize);
 			syncCleanupFunctionRef.current();
 		};
 	}, []);
@@ -79,29 +77,24 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 		(e) => {
 			if (!mapExists()) return;
 
-			let bounds = mapContext.maps[props.map1Id]
-				.getCanvas()
-				.getBoundingClientRect();
+			const bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
 			let clientX =
 				e.clientX ||
-				(typeof e.touches !== "undefined" && typeof e.touches[0] !== "undefined"
+				(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"
+				(typeof e.touches !== 'undefined' && typeof e.touches[0] !== 'undefined'
 					? e.touches[0].clientY
 					: 0);
 
 			clientX -= bounds.x;
 			clientY -= bounds.y;
-			let swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
-			let swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
+			const swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
+			const swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
 
-			if (
-				swipeXRef.current !== swipeX_tmp ||
-				swipeYRef.current !== swipeY_tmp
-			) {
+			if (swipeXRef.current !== swipeX_tmp || swipeYRef.current !== swipeY_tmp) {
 				setSwipeX(swipeX_tmp);
 				swipeXRef.current = swipeX_tmp;
 				setSwipeY(swipeY_tmp);
@@ -110,9 +103,9 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 				mapContext.maps[props.map2Id].getContainer().style.clipPath =
 					`circle(${magnifierRadius}px at ` +
 					(parseFloat(swipeXRef.current) * bounds.width) / 100 +
-					"px " +
+					'px ' +
 					(parseFloat(swipeYRef.current) * bounds.height) / 100 +
-					"px)";
+					'px)';
 			}
 		},
 		[mapContext, mapExists, props, magnifierRadius]
@@ -160,53 +153,53 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 		});
 	}, [mapContext.mapIds, mapContext, mapExists, props, onMove]);
 
-	const onDown = (e:any) => {
-		if (e.touches) {
-			document.addEventListener("touchmove", onMove);
-			document.addEventListener("touchend", onTouchEnd);
+	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);
+			document.addEventListener('mousemove', onMove);
+			document.addEventListener('mouseup', onMouseUp);
 		}
 	};
 
 	const onTouchEnd = () => {
-		document.removeEventListener("touchmove", onMove);
-		document.removeEventListener("touchend", onTouchEnd);
+		document.removeEventListener('touchmove', onMove);
+		document.removeEventListener('touchend', onTouchEnd);
 	};
 
 	const onMouseUp = () => {
-		document.removeEventListener("mousemove", onMove);
-		document.removeEventListener("mouseup", onMouseUp);
+		document.removeEventListener('mousemove', onMove);
+		document.removeEventListener('mouseup', onMouseUp);
 	};
 
-	const onWheel = (e:any) => {
-		let evCopy = new WheelEvent(e.type, e);
+	const onWheel = (e: React.WheelEvent) => {
+		const evCopy = new WheelEvent(e.type, e as unknown as WheelEventInit);
 		mapContext.map.getCanvas().dispatchEvent(evCopy);
 	};
 
 	return (
 		<div
 			style={{
-				position: "absolute",
-				left: swipeX + "%",
-				top: swipeY + "%",
-				borderRadius: "50%",
-				width: magnifierRadius * 2 + 1 + "px",
-				height: magnifierRadius * 2 + 1 + "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",
+				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}
@@ -217,6 +210,7 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 
 MlLayerMagnify.defaultProps = {
 	magnifierRadius: 200,
+	magnifierStyle: {},
 };
 
 export default MlLayerMagnify;

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

@@ -10,6 +10,5 @@
   },
   "tags": ["Map add-on"],
   "category": "add-ons",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

package/src/components/MlLayerSwipe/{MlLayerSwipe.stories.js → MlLayerSwipe.stories.tsx}

@@ -1,26 +1,24 @@
-import React from "react";
+import React from 'react';
 
-import MlLayerSwipe from "./MlLayerSwipe";
-import MlWmsLayer from "../MlWmsLayer/MlWmsLayer";
+import MlLayerSwipe from './MlLayerSwipe';
+import MlWmsLayer from '../MlWmsLayer/MlWmsLayer';
 
-import multiMapContextDecorator from "../../decorators/MultiMapContextDecorator";
+import multiMapContextDecorator from '../../decorators/MultiMapContextDecorator';
 
 const storyoptions = {
-	title: "MapComponents/MlLayerSwipe",
-	name: "MlLayerSwipe",
+	title: 'MapComponents/MlLayerSwipe',
 	component: MlLayerSwipe,
-	argTypes: {
-	},
+	argTypes: {},
 	decorators: multiMapContextDecorator,
 };
-export default storyoptions;
 
-const Template = (args) => (
+export default storyoptions;
+const Template = () => (
 	<>
 		<MlWmsLayer
 			url="https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme"
 			urlParameters={{
-				layers: "nw_uraufnahme_rw",
+				layers: 'nw_uraufnahme_rw',
 			}}
 			sourceOptions={{
 				minzoom: 13,