@mapcomponents/react-maplibre 0.1.63 → 0.1.64

package/src/components/MlLayerSwipe/MlLayerSwipe.tsx

@@ -1,16 +1,11 @@
-import React, {
-	useContext,
-	useCallback,
-	useRef,
-	useEffect,
-	useState,
-} from "react";
+import React, { useContext, useCallback, useRef, useEffect, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import syncMove from "@mapbox/mapbox-gl-sync-move";
-import "./style.css";
-import MapContext from "../../contexts/MapContext";
+import syncMove from '@mapbox/mapbox-gl-sync-move';
+import './style.css';
+import MapContext from '../../contexts/MapContext';
 
-interface MlLayerSwipeProps {
+export interface MlLayerSwipeProps {
 	/**
 	 * Id of the first MapLibre instance.
 	 */
@@ -19,6 +14,10 @@ interface MlLayerSwipeProps {
 	 * Id of the second MapLibre instance.
 	 */
 	map2Id: string;
+	/**
+	 * object (React.CSSProperties) that is added to the button default style
+	 */
+	buttonStyle: React.CSSProperties | undefined;
 }
 
 /**
@@ -45,33 +44,28 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
 	}, [mapContext, props.map1Id, props.map2Id]);
 
 	const cleanup = () => {
-			syncCleanupFunctionRef.current();
+		syncCleanupFunctionRef.current();
 	};
 
 	const onMove = useCallback(
 		(e) => {
 			if (!mapExists()) return;
 
-			let bounds = mapContext.maps[props.map1Id]
-				.getCanvas()
-				.getBoundingClientRect();
+			const bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
 			let clientX =
 				e.clientX ||
-				(typeof e.touches !== "undefined" && typeof e.touches[0] !== "undefined"
+				(typeof e.touches !== 'undefined' && typeof e.touches[0] !== 'undefined'
 					? e.touches[0].clientX
 					: 0);
 
 			clientX -= bounds.x;
-			let swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
+			const swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
 
 			if (swipeXRef.current !== swipeX_tmp) {
 				setSwipeX(swipeX_tmp);
 				swipeXRef.current = swipeX_tmp;
 
-				var clipA =
-					"rect(0, " +
-					(swipeXRef.current * bounds.width) / 100 +
-					"px, 999em, 0)";
+				const clipA = 'rect(0, ' + (swipeXRef.current * bounds.width) / 100 + 'px, 999em, 0)';
 
 				mapContext.maps[props.map2Id].getContainer().style.clip = clipA;
 			}
@@ -96,46 +90,47 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
 		});
 	}, [mapContext.mapIds, mapContext, props, onMove, mapExists]);
 
-	const onDown = (e: any) => {
-		if (e.touches) {
-			document.addEventListener("touchmove", onMove);
-			document.addEventListener("touchend", onTouchEnd);
+	const onDown = (e: React.MouseEvent | React.TouchEvent) => {
+		if (e.nativeEvent instanceof TouchEvent) {
+			document.addEventListener('touchmove', onMove);
+			document.addEventListener('touchend', onTouchEnd);
 		} else {
-			document.addEventListener("mousemove", onMove);
-			document.addEventListener("mouseup", onMouseUp);
+			document.addEventListener('mousemove', onMove);
+			document.addEventListener('mouseup', onMouseUp);
 		}
 	};
 
 	const onTouchEnd = () => {
-		document.removeEventListener("touchmove", onMove);
-		document.removeEventListener("touchend", onTouchEnd);
+		document.removeEventListener('touchmove', onMove);
+		document.removeEventListener('touchend', onTouchEnd);
 	};
 
 	const onMouseUp = () => {
-		document.removeEventListener("mousemove", onMove);
-		document.removeEventListener("mouseup", onMouseUp);
+		document.removeEventListener('mousemove', onMove);
+		document.removeEventListener('mouseup', onMouseUp);
 	};
 
 	return (
 		<div
 			style={{
-				position: "absolute",
-				left: swipeX + "%",
-				top: "50%",
-				borderRadius: "50%",
-				width: "100px",
-				height: "100px",
-				background: "#0066ff",
-				border: "3px solid #eaebf1",
-				cursor: "pointer",
-				zIndex: "110",
-				marginLeft: "-50px",
-				marginTop: "-50px",
-				textAlign: "center",
-				lineHeight: "91px",
-				fontSize: "2em",
-				color: "#fafafa",
-				userSelect: "none",
+				position: 'absolute',
+				left: swipeX + '%',
+				top: '50%',
+				borderRadius: '50%',
+				width: '100px',
+				height: '100px',
+				background: '#0066ff',
+				border: '3px solid #eaebf1',
+				cursor: 'pointer',
+				zIndex: '110',
+				marginLeft: '-50px',
+				marginTop: '-50px',
+				textAlign: 'center',
+				lineHeight: '91px',
+				fontSize: '2em',
+				color: '#fafafa',
+				userSelect: 'none',
+				...props.buttonStyle,
 			}}
 			onTouchStart={onDown}
 			onMouseDown={onDown}
@@ -143,4 +138,8 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
 	);
 };
 
+MlLayerSwipe.defaultProps = {
+	buttonStyle: {},
+};
+
 export default MlLayerSwipe;

package/src/components/MlLayerSwitcher/MlLayerSwitcher.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlLayerSwitcher/components/LayerBox.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { css } from "@emotion/css";
-import { Box } from "@mui/system";
-import ImageLoader from "../../../ui_components/ImageLoader";
-import useMapState from "../../../hooks/useMapState";
+import React from 'react';
+import { css } from '@emotion/css';
+import { Box } from '@mui/system';
+import ImageLoader from '../../../ui_components/ImageLoader';
+import useMapState from '../../../hooks/useMapState';
 
 /**
  * @component
@@ -20,7 +20,7 @@ const LayerBox = (props) => {
 			matchLayerIds: props.layerId,
 		},
 	});
-	const width = "40px";
+	const width = '40px';
 
 	const defaultClass = css`
 		& img:hover {
@@ -34,22 +34,25 @@ const LayerBox = (props) => {
 				className={defaultClass}
 				sx={{
 					width,
-					height: "53px",
-					justifyContent: "center",
+					height: '53px',
+					justifyContent: 'center',
 					py: 0.25,
-					px: "1rem",
-					cursor: "pointer",
+					px: '1rem',
+					cursor: 'pointer',
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'stretch',
 				}}
 				onClick={() => {
 					props?.handleLayerBoxClick?.(props.layerId);
 				}}
 			>
 				<ImageLoader
-					style={{
-						border: "2px solid " + (layers?.[0]?.visible ? "#64c864" : "#fd720f"),
-						borderRadius: "8px",
-						height: "40px",
-						width: "40px",
+					sx={{
+						border: '2px solid ' + (layers?.[0]?.visible ? '#64c864' : '#fd720f'),
+						borderRadius: '8px',
+						height: '40px',
+						width: '40px',
 					}}
 					src={props.thumbnail}
 				/>
@@ -57,11 +60,11 @@ const LayerBox = (props) => {
 				<div
 					className="mllayerswitcher-layer-text"
 					style={{
-						textAlign: "center",
-						color: "rgb(112, 117, 122)",
-						fontFamily: "Roboto, Arial",
+						textAlign: 'center',
+						color: 'rgb(112, 117, 122)',
+						fontFamily: 'Roboto, Arial',
 						width,
-						fontSize: "0.60rem",
+						fontSize: '0.60rem',
 					}}
 				>
 					{props.label}

package/src/components/MlMarker/MlMarker.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlMeasureTool/MlMeasureTool.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlNavigationCompass/MlNavigationCompass.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlNavigationTools/MlNavigationTools.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlScaleReference/MlScaleReference.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlShareMapState/MlShareMapState.meta_.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlSketchTool/MlSketchTool.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": [],
   "category": "",
-  "type": "component",
-  "price": 0
+  "type": "component"
 }

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.meta.json

@@ -10,6 +10,5 @@
   },
   "tags": ["Map add-on"],
   "category": "add-ons",
-  "type": "component",
-  "price": 5000
+  "type": "component"
 }

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.stories.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react';
+import MlSpatialElevationProfile from './MlSpatialElevationProfile';
+import MlGpxViewer from '../MlGpxViewer/MlGpxViewer';
+import InfoIcon from '@mui/icons-material/Info';
+import useGpx, { MetadataType } from '../../hooks/useGpx/useGpx';
+import FileCopy from '@mui/icons-material/FileCopy';
+import Dropzone from '../../ui_components/Dropzone';
+import UploadButton from '../../ui_components/UploadButton';
+import MetadataDrawer from '../MlGpxViewer/util/MetadataDrawer';
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import IconButton from '@mui/material/IconButton';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import TopToolbar from '../../ui_components/TopToolbar';
+import useMap from '../../hooks/useMap';
+import MlGpxViewerInstructions from '../MlGpxViewer/util/MlGpxViewerInstructions';
+import { Button } from '@mui/material';
+import MlGpxDemoLoader from '../MlGpxViewer/util/MlGpxDemoLoader';
+
+const storyoptions = {
+	title: 'MapComponents/MlSpatialElevationProfile',
+	component: MlSpatialElevationProfile,
+	argTypes: {
+		options: {
+			control: {
+				type: 'object',
+			},
+		},
+	},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = () => {
+	const [gpxData, setGpxData] = useState<string | undefined>();
+	const parsedGpx = useGpx({ data: gpxData });
+	const mediaIsMobile = useMediaQuery('(max-width:900px)');
+	const [demoLoaderOpen, setDemoLoaderOpen] = useState(false);
+	const [guide, setGuide] = useState(false);
+	const [metadataDrawerOpen, setMetadataDrawerOpen] = useState(false);
+	const [metadata, setMetadata] = useState<MetadataType[]>([]);
+	const mapHook = useMap({ mapId: 'map_1' });
+
+	const handleClick1 = () => {
+		setDemoLoaderOpen(!demoLoaderOpen);
+	};
+
+	const handleClick2 = () => {
+		setGuide(true);
+		setTimeout(() => {
+			setGuide(false);
+		}, 9000);
+	};
+	useEffect(() => {
+		if (!mapHook.map) return;
+		if (mapHook.map.map.getPitch() != 60) {
+			mapHook.map.map.setPitch(60);
+		}
+	}, [mapHook.map]);
+
+	return (
+		<>
+			<TopToolbar>
+				<MlGpxViewerInstructions open={guide} />
+				<Button variant="contained" onClick={handleClick2} sx={{ marginRight: '10px' }}>
+					Guide me through
+				</Button>
+				<Button variant="contained" onClick={handleClick1}>
+					Demo Mode
+				</Button>
+			</TopToolbar>
+			<MlGpxDemoLoader open={demoLoaderOpen} setOpen={setDemoLoaderOpen} setGpx={setGpxData} />
+
+			<div
+				style={{
+					position: 'fixed',
+					right: '5px',
+					bottom: mediaIsMobile ? '40px' : '25px',
+					display: 'flex',
+					flexDirection: 'column',
+					gap: '5px',
+					zIndex: 1000,
+				}}
+			>
+				<UploadButton
+					setData={setGpxData}
+					buttonComponent={
+						<IconButton
+							style={{
+								backgroundColor: 'rgba(255,255,255,1)',
+							}}
+							size="large"
+						>
+							<FileCopy />
+						</IconButton>
+					}
+				/>
+				<IconButton
+					onClick={() => {
+						setMetadataDrawerOpen((prevState) => !prevState);
+					}}
+					style={{
+						backgroundColor: 'rgba(255,255,255,1)',
+					}}
+					size="large"
+				>
+					<InfoIcon />
+				</IconButton>
+			</div>
+			<MetadataDrawer metadata={metadata} open={metadataDrawerOpen} />
+			<Dropzone setData={(data) => setGpxData(data)} />
+			<MlGpxViewer
+				gpxData={gpxData}
+				onParseGpxData={(parsedGpx) => setMetadata(parsedGpx.metadata ? parsedGpx.metadata : [])}
+			/>
+			<MlSpatialElevationProfile geojson={parsedGpx.geojson} />
+		</>
+	);
+};
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.test.js

@@ -2,8 +2,37 @@ import { layerRemovalTest, sourceRemovalTest } from "../../util";
 
 import MlSpatialElevationProfile from "./MlSpatialElevationProfile";
 import { uuid_regex } from "../../setupTests";
+const sampleGeojson = {
+	"type": "FeatureCollection",
+	"features": [
+			{
+					"type": "Feature",
+					"properties": {
+							"name": "Rundwanderung auf dem Wiedweg zwischen Seelbach und Oberlahr",
+							"desc": "Diese Rundtour gibt mir viele historische Einblicke und zeigt mir einzigartige und mir bisher verborgene Kultur- und Naturschönheiten. Eine rundum spannende und erlebnisreiche Tour.",
+							"type": "hikingTourTrail"
+					},
+					"geometry": {
+							"type": "LineString",
+							"coordinates": [
+									[
+											7.526536,
+											50.647383,
+											267.71535
+									],
+									[
+											7.526617,
+											50.647247,
+											267.83347
+									],
+							]
+					}
+			}
+	]
+}
 
-const testComponent = <MlSpatialElevationProfile />;
+// eslint-disable-next-line react/react-in-jsx-scope
+const testComponent = <MlSpatialElevationProfile geojson={sampleGeojson} />;
 
 layerRemovalTest(
 	"<MlSpatialElevationProfile />",

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.tsx

@@ -0,0 +1,143 @@
+import React, { useRef, useMemo } from 'react';
+import { featureCollection } from '@turf/helpers';
+import { Feature, FeatureCollection } from '@turf/turf';
+import { v4 as uuidv4 } from 'uuid';
+import useSource from '../../hooks/useSource';
+import useLayer from '../../hooks/useLayer';
+import getElevationData from './util/getElevationData';
+import { Coordinates, DataDrivenPropertyValueSpecification } from 'maplibre-gl';
+
+const defaultFillExtrusionColor: (string | number | string[])[] = [
+	'interpolate',
+	['linear'],
+	['get', 'height'],
+	0,
+	'rgba(0, 0, 255, 0)',
+	0.1,
+	'royalblue',
+	0.3,
+	'cyan',
+	0.5,
+	'lime',
+	0.7,
+	'yellow',
+	1,
+	'yellow',
+];
+/**
+ * MlSpatialElevationProfile returns a Button that will add a standard OSM tile layer to the maplibre-gl instance.
+ *
+ * @component
+ */
+
+interface geojson {
+	features: Feature | FeatureCollection | undefined;
+}
+
+export interface MlSpatialElevationProfileProps {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * GeoJSON data that is supposed to be rendered by this component.
+	 */
+	//geojson: {features: Feature | FeatureCollection | undefined };
+	geojson: geojson | FeatureCollection | undefined;
+	/**
+	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
+	 */
+	idPrefix?: string;
+	/**
+	 * Number describes the factor of the height of the elevation
+	 */
+	elevationFactor?: number;
+	/**
+	 * The layerId of an existing layer this layer should be rendered visually beneath
+	 * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
+	 */
+	insertBeforeLayer?: string;
+}
+
+const MlSpatialElevationProfile = (props: MlSpatialElevationProfileProps) => {
+	const sourceName = useRef('elevationprofile-' + uuidv4());
+	const layerName = useRef('elevationprofile-layer-' + uuidv4());
+	const elevationFactor =
+		props.elevationFactor || MlSpatialElevationProfile.defaultProps.elevationFactor;
+
+	const _geojsonInfo = useMemo(() => {
+		if (!props?.geojson?.features) return;
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		const line = props.geojson.features?.find((element: Feature) => {
+			return element.geometry.type === 'LineString';
+		});
+
+		if (!line || !line.geometry) return;
+
+		const heights = line.geometry.coordinates.map((coordinate: Coordinates) => {
+			return coordinate[2];
+		});
+
+		const min = Math.min(...heights);
+
+		let max = Math.max(...heights) - min;
+
+		max = max === 0 ? 1 : max;
+
+		return { max, min, line };
+	}, [props.geojson]);
+
+	const _fillExtrusionColor: (string | number | string[])[] = useMemo(() => {
+		if (!_geojsonInfo) return defaultFillExtrusionColor;
+
+		return [
+			'interpolate',
+			['linear'],
+			['get', 'height'],
+			0,
+			'rgb(0,255,55)',
+			_geojsonInfo.max * elevationFactor,
+			'rgb(255,0,0)',
+		];
+	}, [_geojsonInfo, props.elevationFactor]);
+
+	const _geojson = useMemo(() => {
+		if (!props.geojson?.features || !_geojsonInfo) return;
+
+		const newData = getElevationData(_geojsonInfo, elevationFactor);
+		return newData;
+	}, [_geojsonInfo, elevationFactor]);
+
+	useSource({
+		mapId: props.mapId,
+		sourceId: sourceName.current,
+		source: {
+			type: 'geojson',
+			data: _geojson || featureCollection([]),
+		},
+	});
+
+	useLayer({
+		layerId: layerName.current,
+		source: sourceName.current,
+
+		options: {
+			type: 'fill-extrusion',
+			paint: {
+				'fill-extrusion-height': ['get', 'height'],
+				'fill-extrusion-opacity': 0.9,
+				'fill-extrusion-color': (_fillExtrusionColor || defaultFillExtrusionColor) as (DataDrivenPropertyValueSpecification<string>),
+			},
+		},
+		insertBeforeLayer: props.insertBeforeLayer,
+	});
+
+	return <></>;
+};
+
+MlSpatialElevationProfile.defaultProps = {
+	elevationFactor: 1,
+};
+
+export default MlSpatialElevationProfile;