@mapcomponents/react-maplibre 0.1.63 → 0.1.64

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

@@ -1,20 +1,19 @@
 import React from "react";
 
-import MlCenterPosition from "./MlCenterPosition";
+import useGpx from "./useGpx";
 
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-	title: "MapComponents/MlCenterPosition",
-	component: MlCenterPosition,
+	title: "MapComponents/useGpx",
+	component: useGpx,
 	argTypes: {
 	},
 	decorators: mapContextDecorator,
-	parameters: { docs: { source: { type: 'code' } } }
 };
 export default storyoptions;
 
-const Template = (args) => <MlCenterPosition />;
+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/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/hooks/useLayerHoverPopup/useLayerHoverPopup.stories.js

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

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

package/src/setupTests.js

@@ -1,10 +1,10 @@
-import React, { useContext } from "react";
-import "jest-enzyme";
-import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+/* eslint-disable no-undef */
+import 'jest-enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
-import { mount, configure } from "enzyme";
+import { configure } from 'enzyme';
 
-var uuid_regex = "[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}";
+var uuid_regex = '[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}';
 export { uuid_regex };
 
 // MapLibre-gl mockup
@@ -13,30 +13,35 @@ var mockMapLibreMethods = {
 	off: jest.fn(),
 	addControl: jest.fn(),
 	removeControl: jest.fn(),
+	fitBounds: jest.fn(),
 	hasControl: jest.fn(() => true),
-	getCanvas: () => document.createElement("canvas"),
+	getCanvas: () => document.createElement('canvas'),
 	getContainer: () => ({
 		style: {},
 	}),
 };
 export { mockMapLibreMethods };
 
-jest.mock("maplibre-gl/dist/maplibre-gl", () => {
-	const originalModule = jest.requireActual("maplibre-gl/dist/maplibre-gl");
+jest.mock('maplibre-gl/dist/maplibre-gl', () => {
+	const originalModule = jest.requireActual('maplibre-gl/dist/maplibre-gl');
 
 	return {
 		...originalModule,
 		GeolocateControl: jest.fn(),
 		Map: function () {
+			// eslint-disable-next-line @typescript-eslint/no-this-alias
 			var self = this;
 			this.layers = [];
 			this.sources = [];
+			this.style = { sourceCaches: {} };
 
 			let styleFunctions = {
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
 				addSource: (id, source) => {
-					if (typeof id.id !== "undefined") {
+					if (typeof id.id !== 'undefined') {
 						self.sources.push(id);
-					} else if (typeof id !== "undefined") {
+						self.style.sourceCaches[id] = {};
+					} else if (typeof id !== 'undefined') {
 						self.sources.push(id);
 					}
 				},
@@ -50,15 +55,13 @@ jest.mock("maplibre-gl/dist/maplibre-gl", () => {
 					const sourcePosition = self.sources.indexOf(id);
 					if (sourcePosition !== -1) {
 						self.sources.splice(sourcePosition, 1);
+						delete self.style.sourceCaches[id];
 					}
 				},
 				addLayer: (layer) => {
-					if (typeof layer.id !== "undefined") {
+					if (typeof layer.id !== 'undefined') {
 						self.layers.push(layer.id);
-						if (
-							typeof layer.source !== "undefined" &&
-							typeof layer.source === "object"
-						) {
+						if (typeof layer.source !== 'undefined' && typeof layer.source === 'object') {
 							self.sources.push(layer.id);
 						}
 					}