@mapcomponents/react-maplibre 0.1.69 → 0.1.71

package/src/hooks/useGpx/useGpx.stories.js

@@ -1,20 +0,0 @@
-import React from "react";
-
-import useGpx from "./useGpx";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-
-const storyoptions = {
-	title: "Hooks/useGpx",
-	component: useGpx,
-	argTypes: {
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = () => <useGpx />;
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};

package/src/hooks/useGpx/useGpx.tsx

@@ -1,70 +0,0 @@
-import { useState, useEffect } from 'react';
-import toGeoJSON from './lib/gpxConverter';
-import { FeatureCollection } from '@turf/turf';
-
-interface useGpxProps {
-	/**
-	 * a string containing GPX data that is supposed to be parsed and converted to GeoJSON by this hook
-	 */
-	data?: string;
-}
-
-export interface MetadataType {
-	title: string;
-	value: string;
-	id: number;
-}
-
-/**
- * useGpx hook converts GPX data to GeoJSON
- *
- */
-const useGpx = (props: useGpxProps) => {
-	const [geojson, setGeojson] = useState<FeatureCollection | undefined>();
-	const [metadata, setMetadata] = useState<MetadataType[]>([]);
-
-	const parseGpx = (gpxAsString: string) => {
-		try {
-			setMetadata([]);
-			const domParser = new DOMParser();
-			const gpxDoc = domParser.parseFromString(gpxAsString, 'application/xml');
-			const metadata = gpxDoc.querySelector('metadata');
-			metadata?.childNodes.forEach((node: Element) => {
-				let value = node.textContent;
-				const title = node.nodeName;
-
-				if (node.nodeName === 'link') {
-					value = node.getAttribute('href');
-				}
-				if (value?.trim().length) {
-					const metaDataEntry = {
-						title: title,
-						value: value,
-						id: new Date().getTime(),
-					};
-					setMetadata((prevState) => [...prevState, metaDataEntry]);
-				}
-			});
-			const data = toGeoJSON.gpx(gpxDoc);
-			setGeojson(data as FeatureCollection);
-		} catch (e) {
-			console.log(e);
-		}
-	};
-
-	useEffect(() => {
-		if (!props.data) return;
-
-		parseGpx(props.data);
-	}, [props.data]);
-
-	return {
-		geojson,
-		metadata,
-	};
-};
-
-useGpx.defaultProps = {
-	data: undefined,
-};
-export default useGpx;

package/src/hooks/useLayer.test.js

@@ -1,205 +0,0 @@
-import React, { useContext, useState } from "react";
-import { mount, configure } from "enzyme";
-import MapContext, { MapComponentsProvider } from "../contexts/MapContext";
-import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-import { waitFor } from "@testing-library/react";
-import { mockMapLibreMethods } from "../setupTests";
-
-import useLayer from "./useLayer";
-
-const UseLayerTestComponent = (props) => {
-	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-	useLayer({
-		mapId: props.mapId,
-		layerId: props.layerId || "TestComponent",
-		geojson: props.geojson,
-		options: {
-			paint: props.paint,
-			layout: props.layout || {},
-			type: props.type,
-			...props.options,
-		},
-		insertBeforeLayer: props.insertBeforeLayer,
-		onHover: props.onHover,
-		onClick: props.onClick,
-		onLeave: props.onLeave,
-	});
-
-	return <></>;
-};
-
-const TestComponent = (props) => {
-	const [includeComponent, setIncludeComponent] = useState(true);
-	const [testType, setTestType] = useState('line');
-
-	return (
-		<>
-			<button
-				className="change_testType"
-				onClick={() => {
-					setTestType('circle');
-				}}
-			>
-				change type
-			</button>
-			<button
-				className="toggle_includeComponent"
-				onClick={() => {
-					setIncludeComponent(!includeComponent);
-				}}
-			>
-				toggle
-			</button>
-			{includeComponent && <UseLayerTestComponent {...props} type={testType} />}
-			<MapLibreMap />
-		</>
-	);
-};
-
-describe("useLayer hook", () => {
-	it("should register 1 event listener 'hover' to the maplibre instance", async () => {
-		var testAttributes = {
-			onHover: () => {},
-		};
-
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<TestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		// MapLibreGlWrapper now subscribes to 4 events events on its own
-		// useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
-		await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
-	});
-	it("should deregister 1 event listener 'hover' to the maplibre instance", async () => {
-		var testAttributes = {
-			onHover: () => {},
-		};
-
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<TestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		wrapper.find(".toggle_includeComponent").simulate("click");
-
-		// useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
-		await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
-	});
-	it("should register 1 event listener 'leave' to the maplibre instance", async () => {
-		var testAttributes = {
-			onLeave: () => {},
-		};
-
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<TestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		// MapLibreGlWrapper now subscribes to 4 events events on its own
-		// useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
-		await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
-	});
-	it("should deregister 1 event listener 'leave' to the maplibre instance", async () => {
-		var testAttributes = {
-			onLeave: () => {},
-		};
-
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<TestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		wrapper.find(".toggle_includeComponent").simulate("click");
-
-		// useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
-		await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
-	});
-
-
-	it("should register 1 event listener 'click' to the maplibre instance", async () => {
-		var testAttributes = {
-			onClick: () => {},
-		};
-
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<TestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		// MapLibreGlWrapper now subscribes to 4 events events on its own
-		// useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
-		await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
-	});
-	it("should deregister 1 event listener 'click' to the maplibre instance", async () => {
-		var testAttributes = {
-			onClick: () => {},
-		};
-
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<TestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		wrapper.find(".toggle_includeComponent").simulate("click");
-
-		// useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
-		await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
-	});
-
-	// if props.type is changed during runtime the hook needs to remove existing additions to the maplibre instance and reinitialize its representation in the maplibre instance
-	it("should deregister 1 event listener 'hover' to the maplibre instance if type is changed during component runtime", async () => {
-		var testAttributes = {
-			onHover: () => {},
-		};
-
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<TestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		wrapper.find(".change_testType").simulate("click");
-
-		// useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
-		await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
-	});
-	it("should deregister 1 event listener 'hover' to the maplibre instance if type is changed during component runtime", async () => {
-		var testAttributes = {
-			onHover: () => {},
-		};
-
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<TestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		wrapper.find(".change_testType").simulate("click");
-
-		// useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
-		await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
-	});
-	it("should deregister 1 event listener 'click' to the maplibre instance if type is changed during component runtime", async () => {
-		var testAttributes = {
-			onClick: () => {},
-		};
-
-		const wrapper = mount(
-			<MapComponentsProvider>
-				<TestComponent {...testAttributes} />
-			</MapComponentsProvider>
-		);
-
-		wrapper.find(".change_testType").simulate("click");
-
-		// useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
-		await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
-	});
-});

package/src/hooks/useLayer.ts

@@ -1,234 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-
-import useMap, { useMapType } from './useMap';
-
-import {
-	SourceSpecification,
-	LayerSpecification,
-	MapMouseEvent,
-	GeoJSONFeature,
-	Style,
-	MapEventType,
-	Map
-} from 'maplibre-gl';
-
-import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
-
-import { GeoJSONObject } from '@turf/turf';
-
-type getLayerType = Style['getLayer'];
-
-type useLayerType = {
-	map: MapLibreGlWrapper | undefined;
-	layer: ReturnType<getLayerType> | undefined;
-	layerId: string;
-	componentId: string;
-	mapHook: useMapType;
-};
-
-export type MapEventHandler = (
-	ev: MapMouseEvent & {
-		features?: GeoJSONFeature[] | undefined;
-	} & Record<string, unknown>
-) => void;
-
-export interface useLayerProps {
-	mapId?: string;
-	layerId?: string;
-	idPrefix?: string;
-	insertBeforeLayer?: string;
-	insertBeforeFirstSymbolLayer?: boolean;
-	geojson?: GeoJSONObject;
-	source?: SourceSpecification | string;
-	options: Partial<LayerSpecification>;
-	onHover?: (ev: MapEventType & unknown) => Map | void;
-	onClick?: (ev: MapEventType & unknown) => Map | void;
-	onLeave?: (ev: MapEventType & unknown) => Map | void;
-}
-
-const legalLayerTypes = [
-	'fill',
-	'line',
-	'symbol',
-	'circle',
-	'heatmap',
-	'fill-extrusion',
-	'raster',
-	'hillshade',
-	'background',
-];
-
-function useLayer(props: useLayerProps): useLayerType {
-	const mapHook = useMap({
-		mapId: props.mapId,
-		waitForLayer: props.insertBeforeLayer,
-	});
-
-	const layerTypeRef = useRef<string>('');
-	const layerPaintConfRef = useRef<string>('');
-	const layerLayoutConfRef = useRef<string>('');
-
-	const [layer, setLayer] = useState<ReturnType<getLayerType>>();
-
-	const initializedRef = useRef<boolean>(false);
-	const layerId = useRef(
-		props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId
-	);
-
-	const createLayer = useCallback(() => {
-		if (!mapHook.map) return;
-
-		if (mapHook.map.map.getLayer(layerId.current)) {
-			mapHook.cleanup();
-		}
-		if (mapHook.map.map.getSource(layerId.current)) {
-			mapHook.map.map.removeSource(layerId.current);
-		}
-
-		if (typeof props.source === 'string') {
-			if (props.source === '' || !mapHook.map.map.getSource(props.source)) {
-				return;
-			}
-		}
-		if(typeof props.options.type === 'undefined'){
-			return;
-		}
-
-		initializedRef.current = true;
-
-		mapHook.map.addLayer(
-			{
-				...props.options,
-				...(props.geojson && !props.source
-					? {
-							source: {
-								type: 'geojson',
-								data: props.geojson,
-							},
-					  }
-					: {}),
-				...(props.source
-					? {
-							source: props.source,
-					  }
-					: {}),
-				id: layerId.current,
-			} as LayerSpecification,
-			props.insertBeforeLayer
-				? props.insertBeforeLayer
-				: props.insertBeforeFirstSymbolLayer
-				? mapHook.map.firstSymbolLayer
-				: undefined,
-			mapHook.componentId
-		);
-
-		setLayer(() => mapHook.map?.map.getLayer(layerId.current));
-
-		if (typeof props.onHover !== 'undefined') {
-			mapHook.map.on('mousemove', layerId.current, props.onHover, mapHook.componentId);
-		}
-
-		if (typeof props.onClick !== 'undefined') {
-			mapHook.map.on('click', layerId.current, props.onClick, mapHook.componentId);
-		}
-
-		if (typeof props.onLeave !== 'undefined') {
-			mapHook.map.on('mouseleave', layerId.current, props.onLeave, mapHook.componentId);
-		}
-
-		// recreate layer if style has changed
-		mapHook.map.on(
-			'styledata',
-			() => {
-				if (initializedRef.current && !mapHook.map?.map.getLayer(layerId.current)) {
-					console.log('Recreate Layer');
-					createLayer();
-				}
-			},
-			mapHook.componentId
-		);
-
-		layerPaintConfRef.current = JSON.stringify(props.options?.paint);
-		layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
-		layerTypeRef.current = props.options.type as LayerSpecification['type'];
-	}, [props, mapHook.map]);
-
-	useEffect(() => {
-		if (!mapHook.map) return;
-
-		if (
-			initializedRef.current &&
-			(legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) === -1 ||
-				(legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) !== -1 &&
-					props.options.type === layerTypeRef.current))
-		) {
-			return;
-		}
-
-		createLayer();
-	}, [mapHook.map, props.options, createLayer]);
-
-	useEffect(() => {
-		if (!initializedRef.current || !mapHook.map?.map?.getSource(layerId.current)) return;
-
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		//@ts-ignore setData only exists on GeoJsonSource
-		mapHook.map.map.getSource(layerId.current)?.setData?.(props.geojson);
-	}, [props.geojson, mapHook.map, props.options.type]);
-
-	useEffect(() => {
-		if (
-			!mapHook.map ||
-			!mapHook.map?.map?.getLayer?.(layerId.current) ||
-			!initializedRef.current ||
-			props.options.type !== layerTypeRef.current
-		)
-			return;
-
-		let key;
-
-		const layoutString = JSON.stringify(props.options.layout);
-		if (props.options.layout && layoutString !== layerLayoutConfRef.current) {
-			const oldLayout = JSON.parse(layerLayoutConfRef.current);
-
-			for (key in props.options.layout) {
-				if (props.options.layout?.[key] && props.options.layout[key] !== oldLayout[key]) {
-					mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
-				}
-			}
-			layerLayoutConfRef.current = layoutString;
-		}
-
-		const paintString = JSON.stringify(props.options.paint);
-		if (paintString !== layerPaintConfRef.current) {
-			const oldPaint = JSON.parse(layerPaintConfRef.current);
-			for (key in props.options.paint) {
-				if (props.options.paint?.[key] && props.options.paint[key] !== oldPaint[key]) {
-					mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
-				}
-			}
-			layerPaintConfRef.current = paintString;
-		}
-	}, [props.options, mapHook.map]);
-
-	useEffect(() => {
-		return () => {
-			initializedRef.current = false;
-			mapHook.cleanup();
-		};
-	}, []);
-
-	return {
-		map: mapHook.map,
-		layer: layer,
-		layerId: layerId.current,
-		componentId: mapHook.componentId,
-		mapHook: mapHook,
-	};
-}
-
-useLayer.defaultProps = {
-
-}
-
-export default useLayer;

package/src/hooks/useLayerEvent.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { useEffect } from 'react';
-import useMapState from './useMapState';
-import useMap from './useMap';
-
-const touchEquivalents = {
-	mousedown: 'touchstart',
-	mouseup: 'touchend',
-	mousemove: 'touchmove',
-};
-const touchEquivalentsKeys = Object.keys(touchEquivalents);
-function useLayerEvent(props) {
-	const mapState = useMapState({ mapId: props.mapId, watch: { layers: true } });
-	const mapHook = useMap({ mapId: props.mapId });
-
-	useEffect(() => {
-		if (!mapHook.map) return true;
-		if (typeof props.condition !== 'undefined' && props.condition === false) return;
-		//console.log('useLayerEvent');
-		//console.log(mapState);
-
-		if (mapHook.map.map.getLayer(props.layerId)) {
-			//console.log("layer avail");
-			var _event = props.event;
-			var _layerId = props.layerId;
-			var _eventHandler = props.eventHandler;
-
-			//console.log(_event);
-			mapHook.map.on(_event, _layerId, _eventHandler, mapHook.componentId);
-			if (props?.addTouchEvents === true) {
-				if (touchEquivalentsKeys.indexOf(_event) !== -1) {
-					mapHook.map.on(touchEquivalents[_event], _layerId, _eventHandler, mapHook.componentId);
-				}
-			}
-			return () => {
-				mapHook.map.off(_event, _layerId, _eventHandler);
-				if (props?.addTouchEvents === true) {
-					if (touchEquivalentsKeys.indexOf(_event) !== -1) {
-						mapHook.map.off(touchEquivalents[_event], _layerId, _eventHandler, mapHook.componentId);
-					}
-				}
-			};
-		}
-	}, [props, mapState, mapHook.map]);
-
-	return {};
-}
-
-export default useLayerEvent;

package/src/hooks/useLayerFilter/useLayerFilter.doc.de.md

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

package/src/hooks/useLayerFilter/useLayerFilter.meta_.json

@@ -1,14 +0,0 @@
-{
-  "name": "useLayerFilter",
-  "title": "",
-  "description": "",
-  "i18n": {
-    "de": {
-      "title": "",
-      "description": ""
-    }
-  },
-  "tags": [],
-  "category": "",
-  "type": "component"
-}

package/src/hooks/useLayerFilter/useLayerFilter.stories.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import useLayerFilter from './useLayerFilter';
-
-import mapContextDecorator from '../../decorators/MapContextDecorator';
-import MlGeoJsonLayer from '../../components/MlGeoJsonLayer/MlGeoJsonLayer';
-import sample from '../../components/MlGeoJsonLayer/assets/sample_2.json';
-import { FeatureCollection } from '@turf/turf';
-
-const storyoptions = {
-	title: 'hooks/useLayerFilter',
-	component: useLayerFilter,
-	argTypes: {},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args: { filter_name: string }) => {
-	useLayerFilter({ layerId: 'filter_test', filter: ['==', 'name', args.filter_name] });
-	return <MlGeoJsonLayer layerId="filter_test" geojson={sample as FeatureCollection} />;
-};
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {
-	filter_name: 'Mauspfad',
-};
-ExampleConfig.argTypes = {
-	filter_name: {
-		options: [
-			'Mauspfad',
-			'Windeckstraße',
-			'Münsterplatz',
-			'Postrstraße',
-			'In der Sürst',
-			'Remiglustraße',
-		],
-		control: { type: 'radio' },
-	},
-};

package/src/hooks/useLayerFilter/useLayerFilter.ts

@@ -1,33 +0,0 @@
-import { useEffect } from 'react';
-import useMap from '../useMap';
-import { FilterSpecification } from 'maplibre-gl';
-
-export interface UseLayerFilterProps {
-	mapId?: string;
-	layerId?: string;
-	filter?: FilterSpecification;
-}
-
-function useLayerFilter(props: UseLayerFilterProps) {
-	const mapHook = useMap({ mapId: props.mapId });
-
-	useEffect(() => {
-		if (!mapHook.map || !props.layerId || !props.filter) return;
-
-		if (mapHook.map.map.getLayer(props.layerId)) {
-			const _layerId = props.layerId;
-
-			mapHook.map.map.setFilter(_layerId, props.filter);
-			return () => {
-				if (mapHook.map) {
-					mapHook.map.map.setFilter(_layerId, null);
-				}
-			};
-		}
-		return;
-	}, [props, mapHook.map]);
-
-	return {};
-}
-
-export default useLayerFilter;

package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.doc.de.md

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

package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.meta_.json

@@ -1,15 +0,0 @@
-{
-  "name": "useLayerHoverPopup",
-  "title": "",
-  "description": "",
-  "i18n": {
-    "de": {
-      "title": "",
-      "description": ""
-    }
-  },
-  "tags": [],
-  "category": "",
-  "type": "component",
-  "price": 0
-}