@mapcomponents/react-maplibre 0.1.69 → 0.1.70

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

@@ -1,109 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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<HTMLInputElement>) => {
-									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

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

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

@@ -1,14 +0,0 @@
-{
-  "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.tsx

@@ -1,26 +0,0 @@
-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 = () => (
-	<>
-		<Sidebar sx={{ maxWidth: '25vw' }}>
-			<MlSketchTool />
-		</Sidebar>
-	</>
-);
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};

package/src/components/MlSketchTool/MlSketchTool.tsx

@@ -1,271 +0,0 @@
-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';
-
-export 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.doc.de.md

@@ -1 +0,0 @@
-Upload und Darstellung von GPX Tracks inkl. Höhenprofil

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.doc.en.md

@@ -1 +0,0 @@
-Upload and presentation of GPX tracks included elevation profile.

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

@@ -1,14 +0,0 @@
-{
-  "name": "MlSpatialElevationProfile",
-  "title": "3D height profile",
-  "description": "Draws a level, out of the building outline and the height, extrudes 3D Objects as buildings.",
-  "i18n": {
-    "de": {
-      "title": "3D Höhenprofil",
-      "description": "Zeichnet eine Ebene mit einfach, aus den Gebäudeumrissen und anhand der Höhen, extrudierten 3D Objekten als Gebäude."
-    }
-  },
-  "tags": ["Map add-on"],
-  "category": "add-ons",
-  "type": "component"
-}

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

@@ -1,121 +0,0 @@
-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 (
-		<>
-				<MlGpxViewerInstructions open={guide} />
-			<TopToolbar appBarStyle={{ zIndex: 500 }}>
-				<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: '11px',
-					bottom: mediaIsMobile ? '230px' : '145px',
-					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 = {};