@mapcomponents/react-maplibre 0.1.62 → 0.1.64

package/src/components/MlSketchTool/LayerList/LayerListItem.tsx

@@ -0,0 +1,109 @@
+import { Checkbox, IconButton, ListItem, ListItemIcon, ListItemText } from '@mui/material';
+import TuneIcon from '@mui/icons-material/Tune';
+import React, { useMemo, useState } from 'react';
+import getDefaulLayerTypeByGeometry from '../../../components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry';
+import getDefaultPaintPropsByType from '../../../components/MlGeoJsonLayer/util/getDefaultPaintPropsByType';
+import LayerPropertyForm from './LayerPropertyForm';
+
+type Props = {
+	layerComponent: JSX.Element;
+	visible: boolean;
+	configurable: boolean;
+	type?: 'background' | 'background-labels' | 'layer' | 'wms-layer' | 'vector-tile-layer';
+	name: string;
+	description?: string;
+	additionalButtons?: JSX.Element;
+};
+
+function LayerListItem({
+	layerComponent,
+	visible = true,
+	type = 'layer',
+	name,
+	description,
+	configurable,
+}: Props) {
+	const [localVisible, setLocalVisible] = useState(true);
+	const [paintPropsFormVisible, setPaintPropsFormVisible] = useState(false);
+	const [paintProps, setPaintProps] = useState(
+		layerComponent?.props?.paint ||
+			getDefaultPaintPropsByType(
+				layerComponent?.props?.type || getDefaulLayerTypeByGeometry(layerComponent.props.geojson)
+			)
+	);
+
+	const _visible = useMemo(() => {
+		if (!visible) {
+			return false;
+		}
+		return localVisible;
+	}, [visible, localVisible]);
+
+	const _layerComponent = useMemo(() => {
+		if (type === 'layer') {
+			return React.cloneElement(layerComponent, {
+				layout: {
+					visibility: _visible ? 'visible' : 'none',
+				},
+				paint: paintProps,
+			});
+		}
+		return <></>;
+	}, [type, layerComponent, paintProps, _visible]);
+
+	const layerType = useMemo(() => {
+		if (type === 'layer') {
+			if (layerComponent.props.type) {
+				return layerComponent.props.type;
+			}
+			if (layerComponent.props.geojson) {
+				return getDefaulLayerTypeByGeometry(layerComponent.props.geojson);
+			}
+		}
+
+		return undefined;
+	}, [layerComponent]);
+
+	return (
+		<>
+			<ListItem
+				secondaryAction={
+					configurable ? (
+						<IconButton
+							edge="end"
+							aria-label="comments"
+							onClick={() => {
+								setPaintPropsFormVisible((current) => {
+									return !current;
+								});
+							}}
+						>
+							<TuneIcon />
+						</IconButton>
+					) : undefined
+				}
+			>
+				<ListItemIcon>
+					<Checkbox
+						disabled={!visible}
+						checked={localVisible}
+						onClick={() => {
+							setLocalVisible((val) => !val);
+						}}
+					/>
+				</ListItemIcon>
+				<ListItemText primary={name} secondary={description} />
+				{_layerComponent}
+			</ListItem>
+			{configurable && paintPropsFormVisible && (
+				<LayerPropertyForm
+					paintProps={paintProps}
+					setPaintProps={setPaintProps}
+					layerType={layerType}
+				/>
+			)}
+		</>
+	);
+}
+
+export default LayerListItem;

package/src/components/MlSketchTool/LayerList/LayerPropertyForm.tsx

@@ -0,0 +1,126 @@
+import {
+	CircleLayerSpecification,
+	FillLayerSpecification,
+	LineLayerSpecification,
+} from 'maplibre-gl';
+import React, { useRef } from 'react';
+import ColorPicker from './ColorPicker';
+import { ListItem, Slider, TextField, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+
+export type paintPropsType =
+	| CircleLayerSpecification['paint']
+	| FillLayerSpecification['paint']
+	| LineLayerSpecification['paint'];
+
+type Props = {
+	paintProps: paintPropsType;
+	setPaintProps: (
+		paintProps: paintPropsType | ((current: paintPropsType) => paintPropsType)
+	) => void;
+	layerType: string;
+};
+
+const mapLayerTypeToPaintProps = {
+	circle: ['circle-color'],
+	line: ['line-color', 'line-width', 'line-blur'],
+	fill: ['fill-color'],
+};
+const mapPropKeyToFormInputType = {
+	'line-color': 'colorpicker',
+	'line-width': 'slider',
+	'line-blur': 'slider',
+	'fill-color': 'colorpicker',
+	'circle-color': 'colorpicker',
+};
+const mapPropKeyToFormInputTypeKeys = Object.keys(mapPropKeyToFormInputType);
+
+const inputPropsByPropKey = {
+	'line-blur': {
+		step: 1,
+		min: 1,
+		max: 100,
+	},
+	'line-width': {
+		step: 1,
+		min: 1,
+		max: 100,
+	},
+};
+
+export default function LayerPropertyForm({ paintProps = {}, setPaintProps }: Props) {
+	const key = useRef(Math.round(Math.random() * 10000000000));
+	//const onChange = (event) => {};
+
+	const getFormInputByType = (key: string, value: any) => {
+		if (mapPropKeyToFormInputTypeKeys.indexOf(key) !== -1) {
+			const label = (
+				<Typography id={key + '_label'} gutterBottom>
+					{key}
+				</Typography>
+			);
+			switch (mapPropKeyToFormInputType[key]) {
+				case 'slider':
+					return (
+						<>
+							{label}
+							<Slider
+								{...inputPropsByPropKey[key]}
+								inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
+								value={paintProps[key]}
+								onChange={(ev: Event, value: number, activeThumb) => {
+									if (value) {
+										setPaintProps((current) => ({ ...current, [key]: value }));
+									}
+								}}
+							/>
+						</>
+					);
+					break;
+				case 'numberfield':
+					return (
+						<>
+							{label}
+							<TextField
+								inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
+								value={paintProps[key]}
+								onChange={(ev: React.ChangeEvent) => {
+									if (ev?.target?.value) {
+										setPaintProps((current) => ({ ...current, [key]: parseInt(ev.target.value) }));
+									}
+								}}
+							/>
+						</>
+					);
+					break;
+				case 'colorpicker':
+					return (
+						<>
+							{label}
+							<ColorPicker
+								key={key}
+								value={paintProps[key]}
+								propKey={key}
+								setPaintProps={setPaintProps}
+							/>
+						</>
+					);
+					break;
+			}
+		}
+		return null;
+	};
+
+	return (
+		<>
+			<ListItem
+				sx={{ boxShadow: 'inset 0px 0px 10px rgb(50 50 50 / 10%)', borderRadius: '5px' }}
+				key={key + '_paintPropForm'}
+			>
+				<Box>
+					{Object.keys(paintProps).map((el: string) => getFormInputByType(el, paintProps[el]))}
+				</Box>
+			</ListItem>
+		</>
+	);
+}

package/src/components/MlSketchTool/MlSketchTool.doc.de.md

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

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

@@ -0,0 +1,14 @@
+{
+  "name": "MlSketchTool",
+  "title": "Sketch Tool",
+  "description": "Enables creation and editing of Points LineStrings and Polygons.",
+  "i18n": {
+    "de": {
+      "title": "Zeichenwerkzeug",
+      "description": "Erzeugen und bearbeiten von Geometrien."
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component"
+}

package/src/components/MlSketchTool/MlSketchTool.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import MlSketchTool from './MlSketchTool';
+
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import Sidebar from '../../ui_components/Sidebar';
+
+const storyoptions = {
+	title: 'MapComponents/MlSketchTool',
+	component: MlSketchTool,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = (args) => (
+	<>
+		<Sidebar sx={{ maxWidth: '25vw' }}>
+			<MlSketchTool />
+		</Sidebar>
+	</>
+);
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};

package/src/components/MlSketchTool/MlSketchTool.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useCallback } from 'react';
+import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye';
+import ShowChartIcon from '@mui/icons-material/ShowChart';
+import PentagonIcon from '@mui/icons-material/Pentagon';
+import { Box } from '@mui/system';
+//import useMediaQuery from '@mui/material/useMediaQuery';
+import MlFeatureEditor from '../MlFeatureEditor/MlFeatureEditor';
+import List from '@mui/material/List';
+import EditIcon from '@mui/icons-material/Edit';
+import SettingsIcon from '@mui/icons-material/Settings';
+import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
+import useMap from '../../hooks/useMap';
+import DeleteIcon from '@mui/icons-material/Delete';
+import * as turf from '@turf/turf';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import LayerListItem from './LayerList/LayerListItem';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
+import { Feature } from '@turf/turf';
+import { LngLatLike } from '!maplibre-gl';
+import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
+
+interface MlSketchToolProps {
+	/**
+	 * 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;
+	/**
+	 * Style attribute for the button-style
+	 * https://mui.com/system/getting-started/the-sx-prop/
+	 */
+	buttonStyleOverride?: SxProps;
+}
+
+/**
+ * Component template
+ *
+ */
+
+const MlSketchTool = (props: MlSketchToolProps) => {
+	type SketchStateType = {
+		selectedGeoJson: Feature | undefined;
+		activeGeometryIndex: number;
+		geometries: Feature[];
+		drawMode: string;
+	};
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+	//const mediaIsMobile = useMediaQuery('(max-width:900px)');
+	const [hoveredGeometry, setHoveredGeometry] = useState<Feature>();
+	const [sketchState, setSketchState] = useState<SketchStateType>({
+		activeGeometryIndex: 0,
+		selectedGeoJson: undefined,
+		geometries: [],
+		drawMode: '',
+	});
+
+	const buttonStyle = {
+		...props.buttonStyleOverride,
+	};
+
+	const buttonClickHandler = useCallback(
+		(buttonDrawMode: string) => {
+			console.log(buttonDrawMode);
+			sketchState.drawMode !== buttonDrawMode
+				? setSketchState((_sketchTool) => ({
+						drawMode: buttonDrawMode,
+						geometries: _sketchTool.geometries,
+						activeGeometryIndex: 0,
+						selectedGeoJson: undefined,
+				  }))
+				: setSketchState((_sketchTool) => ({
+						drawMode: '',
+						geometries: _sketchTool.geometries,
+						activeGeometryIndex: 0,
+						selectedGeoJson: undefined,
+				  }));
+		},
+		[sketchState]
+	);
+
+	const removeGeoJson = (geoJson: Feature): void => {
+		setSketchState((_sketchState) => {
+			const tempGeometries = [..._sketchState.geometries];
+			tempGeometries.splice(tempGeometries.indexOf(geoJson), 1);
+
+			return {
+				..._sketchState,
+				geometries: tempGeometries,
+				activeGeometryIndex: _sketchState.activeGeometryIndex - 1,
+			};
+		});
+	};
+
+	return (
+		<>
+			<Box
+				sx={{
+					zIndex: 104,
+				}}
+			>
+				<ButtonGroup>
+					<Tooltip title={'point'}>
+						<IconButton sx={buttonStyle} onClick={() => buttonClickHandler('draw_point')}>
+							<PanoramaFishEyeIcon />
+						</IconButton>
+					</Tooltip>
+					<Tooltip title={'Line'}>
+						<IconButton sx={buttonStyle} onClick={() => buttonClickHandler('draw_line_string')}>
+							<ShowChartIcon />
+						</IconButton>
+					</Tooltip>
+					<Tooltip title={'Polygon'}>
+						<IconButton sx={buttonStyle} onClick={() => buttonClickHandler('custom_polygon')}>
+							<PentagonIcon />
+						</IconButton>
+					</Tooltip>
+				</ButtonGroup>
+			</Box>
+
+			{sketchState.drawMode && (
+				<MlFeatureEditor
+					mode={
+						sketchState.drawMode === 'edit'
+							? sketchState.selectedGeoJson?.geometry?.type === 'LineString'
+								? 'simple_select'
+								: 'custom_select'
+							: sketchState.drawMode
+					}
+					geojson={sketchState.drawMode === 'edit' ? sketchState.selectedGeoJson : undefined}
+					onChange={(feature: object) => {
+						setSketchState((_sketchState) => {
+							const _geometries = [...sketchState.geometries];
+							if (sketchState.drawMode === 'edit' && sketchState.selectedGeoJson) {
+								_geometries[_geometries.indexOf(sketchState.selectedGeoJson)] = feature[0];
+							} else {
+								if (!sketchState.activeGeometryIndex) {
+									const tempFeature = feature[0];
+									tempFeature.properties.id = tempFeature.id;
+
+									_geometries.push(tempFeature);
+								} else {
+									_geometries[sketchState.activeGeometryIndex] = feature[0];
+								}
+							}
+							return {
+								..._sketchState,
+								activeGeometryIndex:
+									_sketchState.drawMode !== 'edit' && feature[0].geometry.type !== 'Point'
+										? _geometries.length - 1
+										: _sketchState.activeGeometryIndex,
+								geometries: _geometries,
+							};
+						});
+					}}
+					onFinish={() => {
+						setSketchState((_sketchState) => ({
+							..._sketchState,
+							drawMode: '',
+							activeGeometryIndex:
+								_sketchState.drawMode !== 'draw_point' ? 0 : _sketchState.activeGeometryIndex,
+							selectedGeoJson:
+								_sketchState.drawMode !== 'draw_point' ? undefined : _sketchState.selectedGeoJson,
+						}));
+					}}
+				/>
+			)}
+
+			<List sx={{ zIndex: 105 }}>
+				{sketchState.geometries.map((el) => (
+					<>
+						<Box key={el.id} sx={{ display: 'flex', flexDirection: 'column' }}>
+							<br />
+							<Box
+								flexDirection={'row'}
+								sx={{
+									'&:hover': {
+										backgroundColor: 'rgb(177, 177, 177, 0.2)',
+									},
+								}}
+								onMouseOver={() => {
+									setHoveredGeometry(el);
+								}}
+								onMouseLeave={() => {
+									setHoveredGeometry(undefined);
+								}}
+							>
+								{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+								{/* @ts-ignore-next-line */}
+								<LayerListItem
+									sx={buttonStyle}
+									visible={true}
+									configurable={true}
+									layerComponent={
+										<MlGeoJsonLayer mapId={props.mapId} geojson={el} layerId={String(el.id)} />
+									}
+									type={'layer'}
+									name={String(el.id)}
+									description={el.geometry.type}
+								>
+									<SettingsIcon />
+								</LayerListItem>
+								<IconButton
+									onClick={() => {
+										mapHook?.map?.map.setCenter(
+											el.geometry.type === 'Point'
+												? (el.geometry.coordinates as LngLatLike)
+												: (turf.centerOfMass(el).geometry.coordinates as LngLatLike)
+										);
+									}}
+								>
+									<GpsFixedIcon />
+								</IconButton>
+								<IconButton
+									sx={buttonStyle}
+									onClick={() => {
+										setSketchState((_sketchState) => ({
+											..._sketchState,
+											selectedGeoJson: el,
+											drawMode: 'edit',
+										}));
+									}}
+								>
+									<EditIcon />
+								</IconButton>
+								<IconButton
+									sx={buttonStyle}
+									onClick={() => {
+										removeGeoJson(el);
+									}}
+								>
+									<DeleteIcon />
+								</IconButton>
+							</Box>
+						</Box>
+					</>
+				))}
+				{hoveredGeometry && (
+					<MlGeoJsonLayer
+						mapId={props.mapId}
+						geojson={{ type: 'FeatureCollection', features: [hoveredGeometry] }}
+						type={'line'}
+						layerId={'highlightBorder'}
+						paint={{
+							'line-color': '#dd9900',
+							'line-opacity': 0.4,
+							'line-width': 10,
+						}}
+					/>
+				)}
+			</List>
+			{sketchState.drawMode === 'edit' && (
+				<Box>Edit {sketchState.selectedGeoJson?.geometry?.type}</Box>
+			)}
+		</>
+	);
+};
+
+MlSketchTool.defaultProps = {
+	mapId: undefined,
+	buttonStyleOverride: {},
+};
+export default MlSketchTool;

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