@mapcomponents/react-maplibre 0.1.60 → 0.1.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.60",
+  "version": "0.1.61",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",
@@ -29,6 +29,7 @@
     "@mui/styles": "^5.5.3",
     "@turf/turf": "^6.5.0",
     "d3": "^7.4.4",
+    "deck.gl": "^8.8.13",
     "jspdf": "^2.5.1",
     "maplibre-gl": "^2.1.7",
     "react-i18next": "^11.14.3",

package/scripts/build-catalogue-meta.js

@@ -4,7 +4,7 @@ const fs = require("fs");
 let options = {};
 let mc_meta = {};
 
-glob("src/components/**/*.meta.json", options, function (er, files) {
+glob("src/**/**/*.meta.json", options, function (er, files) {
   console.log(files);
 
   for (var i = 0, len = files.length; i < len; i++) {

package/src/components/MlCreatePdfForm/lib/PdfForm.tsx

@@ -40,10 +40,10 @@ interface PdfFormProps {
 	 * Id of the target MapLibre instance in mapContext
 	 */
 	mapId?: string;
-	onCreatePdf?: (options:createPdfResolverParams) => createPdfResolverParams;
+	onCreatePdf?: (options: createPdfResolverParams) => createPdfResolverParams;
 }
 
-export default function PdfForm(props:PdfFormProps) {
+export default function PdfForm(props: PdfFormProps) {
 	const pdfContext = useContext(PdfContext);
 	const mapHook = useMap({
 		// eslint-disable-next-line react/prop-types

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

@@ -0,0 +1,4 @@
+# Kamerafahrt entlang eines Pfades
+
+Das Component akzeptiert einen Array bestehend aus Koordinaten und fährt diese Strecke mit der Kamera ab.
+Einstellungsmöglichkeiten für Geschwindigkeit, Initiale Zoomstufe und End-Zoomstufe sind ebenfalls vorhanden.

package/src/hooks/useCameraFollowPath/useCameraFollowPath.doc.en.md

@@ -0,0 +1 @@
+This Component accepts an array consisting of coordinates and travels this route with the camera. Options for speed, initial zoom level and final zoom level are also available.

package/src/hooks/useCameraFollowPath/useCameraFollowPath.meta.json

@@ -0,0 +1,15 @@
+{
+	"name": "useCameraFollowPath",
+	"title": "Move camera along linestring",
+	"description": "",
+	"i18n": {
+		"de": {
+			"title": "Kamerafahrt entlang eines Linestrings",
+			"description": ""
+		}
+	},
+	"tags": [],
+	"category": "",
+	"type": "component",
+	"price": 1000
+}

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/index.ts

@@ -36,6 +36,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";