@mapcomponents/react-maplibre 0.1.59 → 0.1.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.59",
+  "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/MlCreatePdfForm.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PdfPreview from './lib/PdfPreview';
 import PdfForm from './lib/PdfForm';
 import { PdfContextProvider } from './lib/PdfContext';
-import { createPdfResolverParams } from '../../hooks/exportMap/lib';
+import { createPdfResolverParams } from '../../hooks/useExportMap/lib';
 import { SxProps } from '@mui/material';
 
 interface MlCreatePdfFormProps {

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

@@ -13,8 +13,8 @@ import {
 } from '@mui/material';
 
 import useMap from '../../../hooks/useMap';
-import exportMap from '../../../hooks/exportMap';
-import { createPdfResolverParams } from '../../../hooks/exportMap/lib';
+import useExportMap from '../../../hooks/useExportMap';
+import { createPdfResolverParams } from '../../../hooks/useExportMap/lib';
 
 import * as turf from '@turf/turf';
 
@@ -40,16 +40,16 @@ 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
 		mapId: props.mapId,
 	});
-	const mapExporter = exportMap({ mapId: props.mapId });
+	const mapExporter = useExportMap({ mapId: props.mapId });
 
 	const createPdfHandler = useCallback(() => {
 		if (

package/src/components/MlVectorTileLayer/MlVectorTileLayer.stories.js

@@ -28,16 +28,22 @@ ExampleConfig.args = {
 	mapId: "map_1",
 	url:
 		"https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf",
-	layers: {
-		landuseLine: {
-			"source-layer": "landuse",
-			layout: {
-				"line-cap": "round",
-				"line-join": "round",
-			},
-			paint: { "line-width": 2, "line-color": "#ff0000" },
+	layers: [
+		{
+			id: "water",
+			type: "fill",
+			"source-layer": "water",
+			layout: {},
+			paint: { "fill-color": "#0905f5", "fill-opacity": 0.5 },
 		},
-	},
+		{
+			id: "buildings",
+			type: "fill",
+			"source-layer": "building",
+			layout: {},
+			paint: { "fill-color": "#717875" },
+		},
+	],
 	sourceOptions: {
 		minzoom: 0,
 		maxzoom: 20,

package/src/components/MlVectorTileLayer/MlVectorTileLayer.test.js

@@ -1,5 +1,5 @@
 import { layerRemovalTest, sourceRemovalTest } from "../../util";
-
+import React from 'react'
 import MlVectorTileLayer from "./MlVectorTileLayer";
 import { uuid_regex } from "../../setupTests";
 
@@ -7,8 +7,9 @@ const testComponent = (
 	<MlVectorTileLayer
 		{...{
 			url: "https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf",
-			layers: {
-				landuseLine: {
+			layers: [
+				{
+					id: "landuseLine",
 					"source-layer": "landuse",
 					layout: {
 						"line-cap": "round",
@@ -16,7 +17,7 @@ const testComponent = (
 					},
 					paint: { "line-width": 1, "line-color": "#ff0000" },
 				},
-			},
+			],
 			sourceOptions: {
 				minzoom: 0,
 				maxzoom: 20,
@@ -28,8 +29,8 @@ const testComponent = (
 layerRemovalTest(
 	"<MlVectorTileLayer />",
 	testComponent,
-	new RegExp('^.*"MlVectorTileLayer-' + uuid_regex + '_landuseLine".*$'),
-	"MlVectorTileLayer-{uuid}_landuseLine"
+	new RegExp('^.*"landuseLine".*$'),
+	'landuseLine'
 );
 sourceRemovalTest(
 	"<MlVectorTileLayer />",

package/src/components/MlVectorTileLayer/MlVectorTileLayer.tsx

@@ -1,14 +1,15 @@
 import React, { useRef, useEffect, useCallback } from "react";
-import useMap from "../../hooks/useMap";
-import PropTypes from "prop-types";
+import useMap from '../../hooks/useMap';
+import { LayerSpecification } from 'maplibre-gl';
+import { VectorSourceSpecification } from 'maplibre-gl';
 
 interface MlVectorTileLayerProps {
 	mapId?: string;
 	insertBeforeLayer?: string;
 	layerId?: string;
-	sourceOptions?: any;
+	sourceOptions?: VectorSourceSpecification;
 	url?: string;
-	layers?: any;
+	layers: LayerSpecification[];
 }
 
 /**
@@ -23,135 +24,116 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
 		waitForLayer: props.insertBeforeLayer,
 	});
 
-	const layerIdsRef = useRef({});
-	const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
+	const layerId = useRef(props.layerId || 'MlVectorTileLayer-' + mapHook.componentId);
 	const layerPaintConfsRef = useRef({});
 	const layerLayoutConfsRef = useRef({});
 	const initializedRef = useRef(false);
 
-	const createLayer = useCallback(() => {
+	const createLayers = useCallback(() => {
 		if (!mapHook.map) return;
 
 		initializedRef.current = true;
 
-		if (mapHook.map.map.getLayer(layerId.current)) {
+		if (mapHook.map.map.getSource(layerId.current)) {
 			mapHook.cleanup();
 		}
 
-		// Add the new layer to the openlayers instance once it is available
+		// Add the new layer to the maplibre instance once it is available
 		mapHook.map.addSource(
 			layerId.current,
 			{
-				type: "vector",
+				type: 'vector',
 				tiles: [props.url],
 				tileSize: 512,
-				attribution: "",
+				attribution: '',
 				...props.sourceOptions,
 			},
 			mapHook.componentId
 		);
 
-		for (let key in props.layers) {
-			let _layerId = layerId.current + "_" + key;
-			layerIdsRef.current[key] = _layerId;
-
+		props.layers.forEach((layer) => {
+			if (!mapHook.map) return;
 			mapHook.map.addLayer(
 				{
-					id: _layerId,
 					source: layerId.current,
-					type: "line",
 					minzoom: 0,
 					maxzoom: 22,
 					layout: {},
 					paint: {
-						"line-opacity": 0.5,
-						"line-color": "rgb(80, 80, 80)",
-						"line-width": 2,
+						'line-opacity': 0.5,
+						'line-color': 'rgb(80, 80, 80)',
+						'line-width': 2,
 					},
-					...props.layers[key],
+					...layer,
 				},
 				props.insertBeforeLayer,
 				mapHook.componentId
 			);
-			layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
-			layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
+			layerPaintConfsRef.current[layer.id] = JSON.stringify(layer.paint);
+			layerLayoutConfsRef.current[layer.id] = JSON.stringify(layer.layout);
 
 			// recreate layer if style has changed
 			mapHook.map.on(
-				"styledata",
+				'styledata',
 				() => {
 					if (initializedRef.current && !mapHook.map?.map.getSource(layerId.current)) {
-						console.log("Recreate Layer " + layerId.current);
-						createLayer();
+						console.log('Recreate Layer ' + layerId.current);
+						createLayers();
 					}
 				},
 				mapHook.componentId
 			);
-		}
+		});
 	}, [mapHook.map, props]);
 
-	useEffect(() => {
-		if (initializedRef.current) return;
-
-		createLayer();
-	}, [createLayer]);
+	const updateLayers = useCallback(() => {
+		if (!initializedRef.current) return;
 
-	useEffect(() => {
-		if (!mapHook.map || !initializedRef.current) return;
-		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
-		for (var key in props.layers) {
-			if (mapHook.map.map.getLayer(layerIdsRef.current[key])) {
+		props.layers.forEach((layer) => {
+			if (!mapHook.map) return;
+			if (mapHook.map.map.getLayer(layer.id)) {
 				// update changed paint property
-				let layerPaintConfString = JSON.stringify(props.layers[key].paint);
-
-				if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
-					for (let paintKey in props.layers[key].paint) {
-						mapHook.map.map.setPaintProperty(
-							layerIdsRef.current[key],
-							paintKey,
-							props.layers[key].paint[paintKey]
-						);
+				const layerPaintConfString = JSON.stringify(layer.paint);
+
+				if (layerPaintConfString !== layerPaintConfsRef.current[layer.id]) {
+					for (const paintKey in layer.paint) {
+						mapHook.map.map.setPaintProperty(layer.id, paintKey, layer.paint[paintKey]);
 					}
 				}
-				layerPaintConfsRef.current[key] = layerPaintConfString;
+				layerPaintConfsRef.current[layer.id] = layerPaintConfString;
 
 				// update changed layout property
-				let layerLayoutConfString = JSON.stringify(props.layers[key].layout);
-
-				if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
-					for (let layoutKey in props.layers[key].layout) {
-						mapHook.map.map.setLayoutProperty(
-							layerIdsRef.current[key],
-							layoutKey,
-							props.layers[key].layout[layoutKey]
-						);
+				const layerLayoutConfString = JSON.stringify(layer.layout);
+
+				if (layerLayoutConfString !== layerLayoutConfsRef.current[layer.id]) {
+					for (const layoutKey in layer.layout) {
+						mapHook.map.map.setLayoutProperty(layer.id, layoutKey, layer.layout[layoutKey]);
 					}
 				}
-				layerLayoutConfsRef.current[key] = layerLayoutConfString;
+				layerLayoutConfsRef.current[layer.id] = layerLayoutConfString;
 			}
-		}
+		});
+	}, [mapHook.map, props.layers]);
+
+	// initial layer creation
+	useEffect(() => {
+		if (initializedRef.current) return;
+		createLayers();
+	}, [createLayers]);
+
+	// if layers get removed or added
+	useEffect(() => {
+		if (!mapHook.map || !initializedRef.current) return;
+		createLayers();
+	}, [props.layers.length, mapHook.map]);
+
+	// on layout/paint update
+	useEffect(() => {
+		if (!mapHook.map || !initializedRef.current) return;
+		updateLayers();
 	}, [props.layers, mapHook.map]);
 
 	return <></>;
 };
 
-MlVectorTileLayer.propTypes = {
-	/**
-	 * Id of the target MapLibre instance in mapContext
-	 */
-	mapId: PropTypes.string,
-	/**
-	 * Options object that will be used as first parameter on the MapLibreGl.addSource call see MapLibre source options documentation.
-	 */
-	sourceOptions: PropTypes.object,
-	/**
-	 * Object that hold layers
-	 */
-	layers: PropTypes.object,
-	/**
-	 * String of the URL of a wms layer
-	 */
-	url: PropTypes.string,
-};
-
 export default MlVectorTileLayer;

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 = {};