@mapcomponents/react-maplibre 0.1.62 → 0.1.64

package/src/components/MlGpxViewer/util/MlGpxViewerInstructions.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import Instructions from '../../../util/Instructions';
+
+const bubbleBottomRightStyle = {
+	bubbleRight: '-120px',
+	bubbleBottom: '-120px',
+	textMarginTop: '70px',
+	textMarginLeft: '120px',
+	iconTransform: 'rotate(180deg)',
+	iconMarginLeft: '200px',
+	zIndex: 200
+};
+
+const steps = [
+		{
+			duration: 3000,
+			props: {
+				...bubbleBottomRightStyle,
+				iconMarginTop: '43px',
+							},
+			content: (
+				<>
+					You can load your <br />
+					own GPX file <br /> here
+				</>
+			),
+		},
+		{
+			duration: 3000,
+			props: {
+				...bubbleBottomRightStyle,
+				iconMarginTop: '68px',
+			},
+			content: (
+				<>
+					You can see more <br /> information about <br />
+					the track <br />
+					here
+				</>
+			),
+		},
+		{
+			duration: 3000,
+			props: {
+				bubbleLeft: '-40px',
+				bubbleTop: '-150px',
+				textMarginTop: '230px',
+				textMarginLeft: '75px',
+				iconTransform: 'rotate(90deg)',
+				iconMarginTop: '-135px',
+				iconMarginLeft: '280px',
+				zIndex: 400
+			},
+			content: (
+				<>
+					In demo mode we <br /> provide you some <br /> GPX tracks <br /> to load.
+				</>
+			),
+		},
+	];
+export default function MlGpxViewerInstructions(props: { open: boolean}) {
+	
+	return (
+		<>
+			<Instructions steps={steps} open={props.open} />
+		</>
+	);
+}

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.meta_.json

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

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import MlImageMarkerLayer from './MlImageMarkerLayer';
+
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+
+const storyoptions = {
+	title: 'MapComponents/MlImageMarkerLayer',
+	component: MlImageMarkerLayer,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = () => (
+	<MlImageMarkerLayer
+		options={{
+			source: {
+				type: 'geojson',
+				data: {
+					type: 'Feature',
+					geometry: {
+						type: 'Point',
+						coordinates: [7.0847929969609424, 50.73855193187643],
+					},
+					properties: { id: 'test' },
+				},
+			},
+			layout: {
+				'icon-allow-overlap': true,
+				'icon-size': 0.14,
+				'icon-offset': [0, -180],
+			},
+		}}
+		imgSrc={'/assets/wg-marker.png'}
+	/>
+);
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};

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);