@mapcomponents/react-maplibre 0.1.60 → 0.1.62

package/src/hooks/useCameraFollowPath/useCameraFollowPath.stories.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import useCameraFollowPath from './useCameraFollowPath';
+import TopToolbar from '../../ui_components/TopToolbar';
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import { Button, Slider, Typography } from '@mui/material';
+import MlGeoJsonLayer from '../../components/MlGeoJsonLayer/MlGeoJsonLayer';
+import { Feature } from '@turf/turf';
+
+const storyoptions = {
+	title: 'Hooks/useCameraFollowPath',
+	component: useCameraFollowPath,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const routeJson: Feature = {
+	type: 'Feature',
+	properties: {},
+	geometry: {
+		type: 'LineString',
+		coordinates: [
+			[7.10942788610961, 50.708209240168],
+			[7.10966149846967, 50.7088867160122],
+			[7.10910082880551, 50.7108256986007],
+			[7.10856352037736, 50.7126945974813],
+			[7.1083532692533, 50.7142598002937],
+			[7.10814301812924, 50.7160118929942],
+			[7.10793276700518, 50.7169463424345],
+			[7.10776923835314, 50.7176004570426],
+			[7.10713848498096, 50.718838602551],
+			[7.10699831756492, 50.7199599418793],
+			[7.106900786313568, 50.72118132611057],
+		],
+	},
+};
+
+const marks = [
+	{
+		value: 15,
+		label: '15',
+	},
+	{
+		value: 16,
+		label: '16',
+	},
+	{
+		value: 17,
+		label: '17',
+	},
+	{
+		value: 18,
+		label: '18',
+	},
+	{
+		value: 19,
+		label: '19',
+	},
+	{
+		value: 20,
+		label: '20',
+	},
+];
+
+const Template = () => {
+	const [state, setState] = useState({ pause: true, zoom: 18, speed: 1, pitch: 60 });
+
+	const CameraFollowPath = useCameraFollowPath({
+		route: routeJson,
+		pause: state.pause,
+		pitch: state.pitch,
+		zoom: state.zoom,
+		speed: state.speed,
+	});
+
+	const [showComponent, setShowComponent] = useState(true);
+
+	return (
+		<>
+			<TopToolbar>
+				<Button onClick={() => setShowComponent(!showComponent)}>
+					{showComponent ? 'Route ausblenden' : 'Route einblenden'}
+				</Button>
+				{showComponent ? (
+					<MlGeoJsonLayer
+						geojson={routeJson}
+						type="line"
+						paint={{
+							'line-width': 2,
+							'line-color': 'blue',
+						}}
+					/>
+				) : null}
+				<Button
+					disabled={!state.pause}
+					onClick={() =>
+						setState((current) => {
+							return { ...current, pause: false };
+						})
+					}
+				>
+					Start
+				</Button>
+				<Button
+					disabled={state.pause}
+					onClick={() =>
+						setState((current) => {
+							return { ...current, pause: true };
+						})
+					}
+				>
+					Pause
+				</Button>
+				<Button
+					onClick={() => {
+						CameraFollowPath.reset();
+						setState((current) => {
+							return { ...current, pause: true, pitch: 60, zoom: 18, speed: 1 };
+						});
+					}}
+				>
+					Reset
+				</Button>
+				<Typography
+					id="discrete-slider"
+					style={{ color: '#121212', marginLeft: '10px', marginRight: '10px' }}
+				>
+					Zoom:
+				</Typography>
+				<Slider
+					value={state.zoom}
+					onChange={(ev, value) => {
+						setState((current) => {
+							return { ...current, zoom: Number(value) };
+						});
+					}}
+					getAriaValueText={(value) => value.toString()}
+					aria-labelledby="discrete-slider"
+					//valueLabelDisplay="auto"
+					step={1}
+					marks={marks}
+					min={15}
+					max={20}
+					sx={{
+						marginTop: '20px',
+						paddingBottom: '20px',
+						marginRight: '10px',
+						maxWidth: '200px',
+					}}
+				/>
+				<Typography
+					id="discrete-slider2"
+					style={{ color: '#121212', marginLeft: '10px', marginRight: '10px' }}
+				>
+					Speed:
+				</Typography>
+				<Slider
+					value={state.speed}
+					onChange={(ev, value) => {
+						setState((current) => {
+							return { ...current, speed: Number(value) };
+						});
+					}}
+					getAriaValueText={(value) => value.toString()}
+					aria-labelledby="discrete-slider2"
+					//valueLabelDisplay="auto"
+					step={0.1}
+					marks
+					min={0.1}
+					max={2}
+					sx={{
+						marginRight: '10px',
+						maxWidth: '200px',
+					}}
+				/>
+				<Button
+					onClick={() => {
+						if (state.pitch === 0) {
+							setState((current) => {
+								return { ...current, pitch: 60 };
+							});
+						} else {
+							setState((current) => {
+								return { ...current, pitch: 0 };
+							});
+						}
+					}}
+				>
+					{state.pitch === 0 ? '3D' : '2D'}
+				</Button>
+			</TopToolbar>
+		</>
+	);
+};
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};

package/src/hooks/useCameraFollowPath/useCameraFollowPath.tsx

@@ -0,0 +1,192 @@
+import { useEffect, useCallback, useRef } from 'react';
+
+import * as turf from '@turf/turf';
+import useMap from '../useMap';
+import { LngLatBoundsLike, LngLatLike } from 'maplibre-gl';
+
+interface useCameraFollowPathProps {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * Id of an existing layer in the mapLibre instance to help specify the layer order
+	 * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+	 */
+	insertBeforeLayer?: string;
+	/* pause is an useRef const and is triggerd in the storie */
+	pause?: boolean;
+	/* zoom is an useRef const and is triggerd in the storie */
+	zoom?: number;
+	/* pitch is an useRef const and is triggerd in the storie */
+	pitch?: number;
+	/* speed is an useRef const and is triggerd in the storie */
+	speed?: number;
+	/* kmPerStep is an useRef const */
+	kmPerStep?: number;
+	/* route is a json file, which is defined loaded in the storie */
+	route?: any;
+	/* stepDuration is a const */
+	stepDuration?: number;
+	/* timeoutId is an useRef const */
+	timeoutId?: number;
+}
+export type { useCameraFollowPathProps };
+
+/**
+ * Component template
+ *
+ */
+const useCameraFollowPath = (props: useCameraFollowPathProps) => {
+	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+	// without the requirement of adding it to the dependency list (ignore the false eslint exhaustive deps warning)
+	const initializedRef = useRef(false);
+	const pause = useRef<boolean | undefined>(props.pause);
+	const zoom = useRef<number | undefined>(props.zoom);
+	const pitch = useRef<number | undefined>(props.pitch);
+	const step = useRef(1);
+	const speed = useRef<number | undefined>(props.speed);
+	const timeoutId = useRef();
+
+	const kmPerStep = props.kmPerStep || 0.01;
+	const routeDistance = turf.lineDistance(props.route);
+	const stepDuration = props.stepDuration || 70;
+
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+
+	useEffect(() => {
+		pause.current = props.pause;
+		if (!pause.current) {
+			play();
+		}
+	}, [props.pause]);
+	useEffect(() => {
+		if (!mapHook.map) return;
+		zoom.current = props.zoom;
+		if (typeof zoom.current !== 'undefined' && mapHook.map.map.getZoom() !== zoom.current) {
+			mapHook.map.map.setZoom(zoom.current);
+		}
+	}, [mapHook.map, props.zoom]);
+	useEffect(() => {
+		if (!mapHook.map) return;
+		pitch.current = props.pitch;
+		if (typeof pitch.current !== 'undefined' && pitch.current !== mapHook.map.map.getPitch()) {
+			mapHook.map.map.setPitch(pitch.current);
+		}
+	}, [mapHook.map, props.pitch]);
+	useEffect(() => {
+		speed.current = props.speed;
+	}, [props.speed]);
+
+	const disableInteractivity = useCallback(() => {
+		if (!mapHook.map) return;
+		mapHook.map.map['scrollZoom'].disable();
+		mapHook.map.map['boxZoom'].disable();
+		mapHook.map.map['dragRotate'].disable();
+		mapHook.map.map['dragPan'].disable();
+		mapHook.map.map['keyboard'].disable();
+		mapHook.map.map['doubleClickZoom'].disable();
+		mapHook.map.map['touchZoomRotate'].disable();
+	}, [mapHook.map]);
+	const enableInteractivity = useCallback(() => {
+		if (!mapHook.map) return;
+		mapHook.map.map['scrollZoom'].enable();
+		mapHook.map.map['boxZoom'].enable();
+		mapHook.map.map['dragRotate'].enable();
+		mapHook.map.map['dragPan'].enable();
+		mapHook.map.map['keyboard'].enable();
+		mapHook.map.map['doubleClickZoom'].enable();
+		mapHook.map.map['touchZoomRotate'].enable();
+	}, [mapHook.map]);
+
+	function centerRoute() {
+		if (!mapHook.map || !props.route) return;
+		const bbox = turf.bbox(props.route);
+		let bounds: LngLatBoundsLike;
+		if (bbox && bbox.length > 3) {
+			bounds = [
+				[bbox[0], bbox[1]],
+				[bbox[2], bbox[3]],
+			];
+			mapHook.map.map.fitBounds(bounds, { padding: 100 });
+		}
+	}
+	function play() {
+		if (!mapHook.map) return;
+
+		if (!pause.current) {
+			disableInteractivity();
+			if (typeof zoom.current !== 'undefined' && mapHook.map.map.getZoom() !== zoom.current) {
+				mapHook.map.map.setZoom(zoom.current);
+			}
+
+			const alongRoutelati: number[] = turf.along(props.route, step.current * kmPerStep).geometry
+				.coordinates;
+
+			if (step.current * kmPerStep < routeDistance) {
+				mapHook.map.map.easeTo({
+					center: alongRoutelati as LngLatLike,
+					bearing: turf.bearing(
+						turf.point([mapHook.map.map.getCenter().lng, mapHook.map.map.getCenter().lat]),
+						turf.point(alongRoutelati)
+					),
+					duration: stepDuration,
+					essential: true,
+				});
+				if (typeof speed.current !== 'undefined') {
+					step.current = step.current + speed.current;
+				} else {
+					step.current++;
+				}
+				console.log('PAN MOVE');
+				setTimeout(() => {
+					play();
+				}, 100);
+			} else {
+				mapHook.map.map.setPitch(0);
+				centerRoute();
+				enableInteractivity();
+				console.log('ENABLE CONTROLS');
+				step.current = 1;
+			}
+		} else {
+			enableInteractivity();
+		}
+	}
+
+	function reset() {
+		if (!mapHook.map) return;
+		centerRoute();
+		enableInteractivity();
+		step.current = 1;
+	}
+
+	useEffect(() => {
+		if (!mapHook.map || initializedRef.current) return;
+		initializedRef.current = true;
+		centerRoute();
+	}, [mapHook.map]);
+
+	useEffect(() => {
+		return () => {
+			if (timeoutId.current) {
+				clearTimeout(timeoutId.current);
+			}
+		};
+	}, []);
+
+	return {
+		play: play,
+		reset: reset,
+	};
+};
+
+useCameraFollowPath.defaultProps = {
+	mapId: undefined,
+	zoom: 18,
+};
+
+export default useCameraFollowPath;

package/src/hooks/useExportMap/lib.ts

@@ -1,8 +1,7 @@
-import { LngLatLike, Map } from '!maplibre-gl';
+import { Map } from '!maplibre-gl';
 import jsPDF from 'jspdf';
 import MapLibreGlWrapper from '../../components/MapLibreMap/lib/MapLibreGlWrapper';
 
-import * as turf from '@turf/turf';
 import { BBox } from '@turf/turf';
 
 interface createExportOptions {
@@ -59,54 +58,26 @@ const createExport = (options: createExportOptions) => {
 		style: style,
 	});
 
-	let _previewGeojson = turf.bboxPolygon([
-		options.bbox[0],
-		options.bbox[1],
-		options.bbox[2],
-		options.bbox[3],
-	]);
-	_previewGeojson = turf.transformRotate(_previewGeojson, options.bearing);
-
-	// use original unrotated bbox and bearing 0 to calculate the correct zoom value as the function always adds a padding if used on the rotated feature coordinates
 	const bboxCamera = renderMap._cameraForBoxAndBearing(
 		[options.bboxUnrotated[0], options.bboxUnrotated[1]],
 		[options.bboxUnrotated[2], options.bboxUnrotated[3]],
-		0
-	);
-	const geometryCamera = renderMap._cameraForBoxAndBearing(
-		_previewGeojson.geometry.coordinates[0][0] as LngLatLike,
-		_previewGeojson.geometry.coordinates[0][2] as LngLatLike,
-		options.bearing
+		options.bearing+options.map.map.getBearing()
 	);
-	geometryCamera.zoom = bboxCamera.zoom;
 
-	renderMap._fitInternal(geometryCamera);
+	renderMap._fitInternal(bboxCamera);
 	return new Promise<createExportResolverParams>((resolve) => {
-		renderMap.once('idle', function () {
-			if (renderMap.getLayer('pdfPreviewGeojsonOutline')) {
-				renderMap.setLayoutProperty('pdfPreviewGeojsonOutline', 'visibility', 'none');
-			}
-			if (renderMap.getLayer('pdfPreviewGeojson')) {
-				renderMap.setLayoutProperty('pdfPreviewGeojson', 'visibility', 'none');
-			}
-			if (renderMap.getLayer('pdfPreviewGeojsonResizeHandle')) {
-				renderMap.setLayoutProperty('pdfPreviewGeojsonResizeHandle', 'visibility', 'none');
-			}
-			if (renderMap.getLayer('pdfPreviewGeojsonRotationHandle')) {
-				renderMap.setLayoutProperty('pdfPreviewGeojsonRotationHandle', 'visibility', 'none');
-			}
+		console.log('before idle');
 
-			renderMap.once('idle', function () {
-				const params: createExportResolverParams = {
-					...options,
-					renderMap,
-					hiddenContainer,
-					createPdf: (_options?: createJsPdfOptions) =>
-						createJsPdf({ ...options, renderMap, hiddenContainer, ..._options }),
-				};
-
-				resolve(params);
-			});
+		renderMap.once('idle', function () {
+			const params: createExportResolverParams = {
+				...options,
+				renderMap,
+				hiddenContainer,
+				createPdf: (_options?: createJsPdfOptions) =>
+					createJsPdf({ ...options, renderMap, hiddenContainer, ..._options }),
+			};
+
+			resolve(params);
 		});
 	});
 };

package/src/index.ts

@@ -2,6 +2,7 @@ export { default as MapLibreMap } from "./components/MapLibreMap/MapLibreMap";
 export { default as MlComponentTemplate } from "./components/MlComponentTemplate/MlComponentTemplate";
 export { default as MlCreatePdfButton } from "./components/MlCreatePdfButton/MlCreatePdfButton";
 export { default as MlCreatePdfForm } from "./components/MlCreatePdfForm/MlCreatePdfForm";
+export { default as MlPdfPreview } from "./components/MlCreatePdfForm/lib/PdfPreview";
 export { default as MlFeatureEditor } from "./components/MlFeatureEditor/MlFeatureEditor";
 export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLayer/MlFillExtrusionLayer";
 export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";
@@ -36,6 +37,7 @@ export { default as useMap } from "./hooks/useMap";
 export { default as useWms } from "./hooks/useWms.js";
 export { default as useSource } from "./hooks/useSource";
 export { default as useExportMap } from "./hooks/useExportMap";
+export { default as useCameraFollowPath } from "./hooks/useCameraFollowPath/useCameraFollowPath";
 
 export { MapComponentsProvider } from "./contexts/MapContext";
 export { default as MapContext } from "./contexts/MapContext";