@mapcomponents/react-maplibre 0.1.63 → 0.1.65

package/src/{components/MlLayer/MlLayer.stories.js → hooks/useGpx/useGpx.stories.js}

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

package/src/hooks/useGpx/useGpx.tsx

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

@@ -2,22 +2,37 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 
 import useMap, { useMapType } from './useMap';
 
-import { SourceSpecification, LayerSpecification } from 'maplibre-gl';
+import {
+	SourceSpecification,
+	LayerSpecification,
+	MapMouseEvent,
+	GeoJSONFeature,
+	Style,
+	MapEventType,
+	Map
+} from 'maplibre-gl';
 
 import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
 
-import { MapLayerMouseEvent } from 'maplibre-gl';
 import { GeoJSONObject } from '@turf/turf';
 
+type getLayerType = Style['getLayer'];
+
 type useLayerType = {
 	map: MapLibreGlWrapper | undefined;
-	layer: LayerSpecification;
+	layer: ReturnType<getLayerType> | undefined;
 	layerId: string;
 	componentId: string;
 	mapHook: useMapType;
 };
 
-interface useLayerProps {
+export type MapEventHandler = (
+	ev: MapMouseEvent & {
+		features?: GeoJSONFeature[] | undefined;
+	} & Record<string, unknown>
+) => void;
+
+export interface useLayerProps {
 	mapId?: string;
 	layerId?: string;
 	idPrefix?: string;
@@ -26,9 +41,9 @@ interface useLayerProps {
 	geojson?: GeoJSONObject;
 	source?: SourceSpecification | string;
 	options: Partial<LayerSpecification>;
-	onHover?: MapLayerMouseEvent;
-	onClick?: MapLayerMouseEvent;
-	onLeave?: MapLayerMouseEvent;
+	onHover?: (ev: MapEventType & unknown) => Map | void;
+	onClick?: (ev: MapEventType & unknown) => Map | void;
+	onLeave?: (ev: MapEventType & unknown) => Map | void;
 }
 
 const legalLayerTypes = [
@@ -53,7 +68,7 @@ function useLayer(props: useLayerProps): useLayerType {
 	const layerPaintConfRef = useRef<string>('');
 	const layerLayoutConfRef = useRef<string>('');
 
-	const [layer, setLayer] = useState<any>();
+	const [layer, setLayer] = useState<ReturnType<getLayerType>>();
 
 	const initializedRef = useRef<boolean>(false);
 	const layerId = useRef(
@@ -75,6 +90,9 @@ function useLayer(props: useLayerProps): useLayerType {
 				return;
 			}
 		}
+		if(typeof props.options.type === 'undefined'){
+			return;
+		}
 
 		initializedRef.current = true;
 
@@ -95,7 +113,7 @@ function useLayer(props: useLayerProps): useLayerType {
 					  }
 					: {}),
 				id: layerId.current,
-			},
+			} as LayerSpecification,
 			props.insertBeforeLayer
 				? props.insertBeforeLayer
 				: props.insertBeforeFirstSymbolLayer
@@ -104,7 +122,7 @@ function useLayer(props: useLayerProps): useLayerType {
 			mapHook.componentId
 		);
 
-		setLayer(mapHook.map.map.getLayer(layerId.current));
+		setLayer(() => mapHook.map?.map.getLayer(layerId.current));
 
 		if (typeof props.onHover !== 'undefined') {
 			mapHook.map.on('mousemove', layerId.current, props.onHover, mapHook.componentId);
@@ -209,4 +227,8 @@ function useLayer(props: useLayerProps): useLayerType {
 	};
 }
 
+useLayer.defaultProps = {
+
+}
+
 export default useLayer;

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

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

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

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

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

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

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

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

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

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

package/src/{components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.stories.js → hooks/useLayerHoverPopup/useLayerHoverPopup.stories.js}

@@ -1,21 +1,19 @@
 import React from "react";
 
-import MlWmsFeatureInfoPopup from "./MlWmsFeatureInfoPopup";
+import useLayerHoverPopup from "./useLayerHoverPopup";
 
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-	title: "MapComponents/MlWmsFeatureInfoPopup",
-	component: MlWmsFeatureInfoPopup,
+	title: "MapComponents/useLayerHoverPopup",
+	component: useLayerHoverPopup,
 	argTypes: {
-		url: {},
-		layer: {},
 	},
 	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
-const Template = (args) => <MlWmsFeatureInfoPopup />;
+const Template = () => <useLayerHoverPopup />;
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};

package/src/hooks/useLayerHoverPopup/useLayerHoverPopup.tsx

@@ -0,0 +1,82 @@
+import React, { useRef, useEffect } from 'react';
+import useMap from '../../hooks/useMap';
+import {
+	GeoJSONFeature,
+	Popup,
+	MapEventType,
+} from 'maplibre-gl';
+
+interface useLayerHoverPopupProps {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * Id of an existing layer in the mapLibre instance this event will be registered to
+	 */
+	layerId?: string;
+	getPopupContent: (feature: GeoJSONFeature) => string;
+}
+
+/**
+ * useLayerHoverPopup hook registers a mouseenter event to display feature properties in a MapLibre popup if a feature on the configured layer is hovered
+ *
+ */
+const useLayerHoverPopup = (props: useLayerHoverPopupProps) => {
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.layerId,
+	});
+	const popup = useRef(
+		new Popup({
+			closeButton: false,
+			closeOnClick: true,
+		})
+	);
+
+	useEffect(() => {
+		if (!mapHook.map || !props.layerId) return;
+		mapHook.map.on(
+			'mouseenter',
+			props.layerId,
+			(
+				e: MapEventType & {
+					features?: GeoJSONFeature[] | undefined;
+					lngLat: { lng: number; lat: number };
+				}
+			) => {
+				if (!mapHook.map) return;
+				// Change the cursor style as a UI indicator.
+
+				const coordinates = e?.features?.[0].geometry.coordinates.slice();
+				//const description = e.features[0].properties.desc;
+				let content = '';
+				if (e?.features?.[0] && typeof props.getPopupContent === 'function') {
+					content = props.getPopupContent(e.features[0]);
+				}
+
+				if (coordinates?.[0]) {
+					// Ensure that if the map is zoomed out such that multiple
+					// copies of the feature are visible, the popup appears
+					// over the copy being pointed to.
+					while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+						coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+					}
+
+					// Populate the popup and set its coordinates
+
+					// based on the feature found.
+					popup.current.setLngLat(coordinates).setHTML(content).addTo(mapHook.map.map);
+				}
+			},
+			mapHook.componentId
+		);
+	}, [mapHook.map]);
+
+	return <></>;
+};
+
+useLayerHoverPopup.defaultProps = {
+	mapId: undefined,
+};
+export default useLayerHoverPopup;

package/src/hooks/useMap.test.tsx

@@ -0,0 +1,48 @@
+import React, {  useState } from 'react';
+import { mount } from 'enzyme';
+import  { MapComponentsProvider } from '../contexts/MapContext';
+import MapLibreMap from '../components/MapLibreMap/MapLibreMap';
+
+import useMap from './useMap';
+
+const UseMapTestComponent = () => {
+	const mapHook = useMap();
+
+	return <>{mapHook.map && 'Map is ready'}</>;
+};
+
+const TestComponent = () => {
+	const [includeComponent, setIncludeComponent] = useState(true);
+
+	return (
+		<>
+			<button
+				className="toggle_includeComponent"
+				onClick={() => {
+					setIncludeComponent(!includeComponent);
+				}}
+			>
+				toggle
+			</button>
+			<div className="useMapContainer">
+				{includeComponent && <UseMapTestComponent />}
+			</div>
+			<MapLibreMap />
+		</>
+	);
+};
+
+describe('useMap hook', () => {
+	it("should retrieve a MapLibre instance even if no attributes are passed", async () => {
+		const wrapper = mount(
+			<MapComponentsProvider>
+				<TestComponent />
+			</MapComponentsProvider>
+		);
+
+		
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		expect(wrapper.find('.useMapContainer').text()).toEqual("Map is ready");
+	});
+});

package/src/hooks/useMap.ts

@@ -12,16 +12,16 @@ type useMapType = {
 	cleanup: () => void;
 };
 
-function useMap(props: { mapId?: string; waitForLayer?: string }): useMapType {
+function useMap(props?: { mapId?: string; waitForLayer?: string }): useMapType {
 	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
 	const mapContext: MapContextType = useContext(MapContext);
 	const [map, setMap] = useState<MapLibreGlWrapper>();
 
 	const mapState = useMapState({
-		mapId: props.mapId,
+		mapId: props?.mapId,
 		watch: {
 			viewport: false,
-			layers: props.waitForLayer ? true : false,
+			layers: props?.waitForLayer ? true : false,
 			sources: false,
 		},
 		filter: {
@@ -53,15 +53,15 @@ function useMap(props: { mapId?: string; waitForLayer?: string }): useMapType {
 	}, []);
 
 	useEffect(() => {
-		if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+		if (!mapContext.mapExists(props?.mapId) || initializedRef.current) return;
 
 		// check if waitForLayer (string, layer id of the layer this hook is supposed to wait for)
 		// exists as layer in the MapLibre instance
-		if (props.waitForLayer) {
+		if (props?.waitForLayer) {
 			let layerFound = false;
 
 			mapState?.layers?.forEach((layer: any) => {
-				if (layer.id === props.waitForLayer) {
+				if (layer.id === props?.waitForLayer) {
 					layerFound = true;
 				}
 			});
@@ -72,10 +72,10 @@ function useMap(props: { mapId?: string; waitForLayer?: string }): useMapType {
 		// the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
 		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
 		initializedRef.current = true;
-		mapRef.current = mapContext.getMap(props.mapId);
+		mapRef.current = mapContext.getMap(props?.mapId);
 		setMap(mapRef.current);
 		setMapIsReady(true);
-	}, [mapContext.mapIds, mapState.layers, mapContext, props.waitForLayer, props.mapId]);
+	}, [mapContext.mapIds, mapState.layers, mapContext, props]);
 
 	return {
 		map: map,

package/src/hooks/useSource.ts

@@ -1,11 +1,11 @@
 import { useEffect, useRef, useCallback, useState } from "react";
 import useMap, { useMapType } from "./useMap";
 import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
-import { SourceSpecification } from "maplibre-gl";
+import { Source, SourceSpecification } from "maplibre-gl";
 
 type useSourceType = {
 	map: MapLibreGlWrapper | undefined;
-	source: SourceSpecification;
+	source: Source | undefined;
 	componentId: string;
 	mapHook: useMapType;
 };
@@ -22,7 +22,7 @@ function useSource(props: useSourceProps): useSourceType {
 	});
 
 	const initializedRef = useRef<boolean>(false);
-	const [source, setSource] = useState<any>();
+	const [source, setSource] = useState<Source>();
 	const sourceId = useRef(
 		props.sourceId || (props.idPrefix ? props.idPrefix : "Source-") + mapHook.componentId
 	);
@@ -37,7 +37,7 @@ function useSource(props: useSourceProps): useSourceType {
 
 		mapHook.map?.addSource(sourceId.current, {
 			...props.source,
-		});
+		}, mapHook.componentId);
 
 		setSource(mapHook.map.map.getSource(sourceId.current));
 	}, [props, mapHook.map]);

package/src/hooks/{useWms.js → useWms.ts}

@@ -1,13 +1,26 @@
 import { useState, useEffect } from "react";
-import WMSCapabilities from "wms-capabilities";
+import WMSCapabilities, { WMSCapabilitiesJSON } from "wms-capabilities";
 
-function useWms(props) {
+export interface useWmsProps{
+	url?:string;
+	urlParameters?:{[key: string]: string};
+}
+
+export interface useWmsReturnType{
+		capabilities:WMSCapabilitiesJSON | null | undefined;
+		getFeatureInfoUrl:string | undefined;
+		wmsUrl:string | undefined;
+		error:string | undefined;
+		setUrl:(value:string|undefined) => void;
+}
+
+function useWms(props:useWmsProps):useWmsReturnType {
 	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-	const [getFeatureInfoUrl, setGetFeatureInfoUrl] = useState(undefined);
+	const [getFeatureInfoUrl, setGetFeatureInfoUrl] = useState<string>();
 	const [url, setUrl] = useState(props.url);
 	const [wmsUrl, setWmsUrl] = useState("");
-	const [capabilities, setCapabilities] = useState(undefined);
-	const [error, setError] = useState(undefined);
+	const [capabilities, setCapabilities] = useState<WMSCapabilitiesJSON | null | undefined>();
+	const [error, setError] = useState();
 
 	const clearState = () => {
 		setGetFeatureInfoUrl(undefined);
@@ -29,16 +42,16 @@ function useWms(props) {
 			_propsUrlParams = url.split("?");
 			_wmsUrl = _propsUrlParams[0];
 		}
-		let _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
+		const _urlParamsFromUrl = new URLSearchParams(_propsUrlParams?.[1]);
 
-		let urlParamsObj = {
+		const urlParamsObj = {
 			...Object.fromEntries(_urlParamsFromUrl),
 			...props.urlParameters,
 		};
 		// create URLSearchParams object to assemble the URL Parameters
-		let urlParams = new URLSearchParams(urlParamsObj);
+		const urlParams = new URLSearchParams(urlParamsObj);
 
-		let urlParamsStr =
+		const urlParamsStr =
 			decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
 
 		fetch(_wmsUrl + "?" + urlParamsStr)
@@ -49,8 +62,8 @@ function useWms(props) {
 					return res.text();
 				}
 			})
-			.then((data) => {
-				setCapabilities(new WMSCapabilities(data).toJSON());
+			.then((data:string) => {
+				setCapabilities(new WMSCapabilities(data, window.DOMParser).toJSON());
 			})
 			.catch((error) => {
 				//reset local state

package/src/index.ts

@@ -22,11 +22,11 @@ export { default as MlLayerSwipe } from "./components/MlLayerSwipe/MlLayerSwipe"
 export { default as MlTransitionGeoJsonLayer } from "./components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer";
 export { default as MlMarker } from "./components/MlMarker/MlMarker";
 
-export { default as MlGPXViewer } from "./components/MlGPXViewer/MlGPXViewer";
-export { default as GeoJsonProvider } from "./components/MlGPXViewer/util/GeoJsonProvider";
-export { default as GeoJsonContext } from "./components/MlGPXViewer/util/GeoJsonContext";
+export { default as MlGpxViewer } from "./components/MlGpxViewer/MlGpxViewer";
+export { default as GeoJsonProvider } from "./components/MlGpxViewer/util/GeoJsonProvider";
+export { default as GeoJsonContext } from "./components/MlGpxViewer/util/GeoJsonContext";
 
-export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile.js";
+export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile";
 
 export { default as MlOsmLayer } from "./components/MlOsmLayer/MlOsmLayer.js";
 export { default as MlBasicComponent } from "./components/MlBasicComponent.js";
@@ -34,7 +34,7 @@ export { default as MlBasicComponent } from "./components/MlBasicComponent.js";
 export { default as useLayer } from "./hooks/useLayer";
 export { default as useMapState } from "./hooks/useMapState";
 export { default as useMap } from "./hooks/useMap";
-export { default as useWms } from "./hooks/useWms.js";
+export { default as useWms } from "./hooks/useWms";
 export { default as useSource } from "./hooks/useSource";
 export { default as useExportMap } from "./hooks/useExportMap";
 export { default as useCameraFollowPath } from "./hooks/useCameraFollowPath/useCameraFollowPath";