@mapcomponents/react-maplibre 0.1.62 → 0.1.63

package/src/components/MlGeoJsonLayer/assets/sample_2.json

@@ -1,22 +1,142 @@
 {
-  "type": "Feature",
-  "properties": {},
-  "geometry": {
-    "type": "LineString",
-    "coordinates": [
-      [7.0635223388671875, 50.71385204707258],
-      [7.06146240234375, 50.709721458354075],
-      [7.063865661621094, 50.70298129536074],
-      [7.064552307128906, 50.69906720767511],
-      [7.059059143066406, 50.69428287906098],
-      [7.05596923828125, 50.68797551838366],
-      [7.0580291748046875, 50.680797145321655],
-      [7.062835693359375, 50.67514068397085],
-      [7.060432434082031, 50.6686131506577],
-      [7.051849365234375, 50.659255436656736],
-      [7.044639587402344, 50.6512019574539],
-      [7.0484161376953125, 50.64271166020676],
-      [7.0566558837890625, 50.63748609931014]
-    ]
-  }
+	"type": "FeatureCollection",
+	"features": [
+		{
+			"id": "af85dc8aa961efd66cfcf74213b7ef57",
+			"type": "Feature",
+			"properties": { "name": "Mauspfad" },
+			"geometry": {
+				"coordinates": [
+					[7.100862609363844, 50.7344404792787],
+					[7.100561470141059, 50.73464673993831],
+					[7.100435651698547, 50.73473812095355],
+					[7.1003510852035845, 50.73478772771537],
+					[7.100264456112427, 50.73485561056759],
+					[7.100087072734084, 50.734958740096886],
+					[7.099971567278942, 50.73501487379605],
+					[7.09977149532881, 50.735103643229735],
+					[7.099688991431805, 50.7351166975437]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "7498f72ced719c8385232abc8e5c5df8",
+			"type": "Feature",
+			"properties": { "name": "Windeckstraße" },
+			"geometry": {
+				"coordinates": [
+					[7.0985272716624195, 50.73420515798543],
+					[7.097871372036735, 50.73446815229278],
+					[7.097802428041831, 50.73450471192254],
+					[7.097748390856651, 50.73456485834811]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "70dd65167a084220c36e4d7a345610f0",
+			"type": "Feature",
+			"properties": { "name": "Münsterplatz" },
+			"geometry": {
+				"coordinates": [
+					[7.09894081766015, 50.73432444924248],
+					[7.098486102002624, 50.734163776827444],
+					[7.098957555660746, 50.73453808973156]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "1f6aead42b46810c75898899823be3b2",
+			"type": "Feature",
+			"properties": { "name": "Poststraße" },
+			"geometry": {
+				"coordinates": [
+					[7.098527916107116, 50.73420653271353],
+					[7.098053194441377, 50.733712281883356],
+					[7.0978593731692, 50.73351315777262],
+					[7.0975330642553445, 50.7331307848207],
+					[7.097445985132765, 50.73302944371906]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "5cf9f0c4a8faf5abe1ddb87e1a6ffb39",
+			"type": "Feature",
+			"properties": { "name": "Münsterplatz" },
+			"geometry": {
+				"coordinates": [
+					[7.099941299919607, 50.73368573357055],
+					[7.099819174531035, 50.73374711589318],
+					[7.099592883371059, 50.73406084651026],
+					[7.098939153351864, 50.734320013695765],
+					[7.09900021604534, 50.73444050321487],
+					[7.098964296814302, 50.73454735215134],
+					[7.099327081054895, 50.734774689503496],
+					[7.0994384306740415, 50.73483834376472],
+					[7.099686332909442, 50.735125016962115],
+					[7.099847969462104, 50.73530006466575]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "d3317ba30229f1abd8bfb1b91264a366",
+			"type": "Feature",
+			"properties": { "name": "In der Sürst" },
+			"geometry": {
+				"coordinates": [
+					[7.099398298122509, 50.7338345667178],
+					[7.099134563357126, 50.73366617816262],
+					[7.09898418827251, 50.73359735831775],
+					[7.098873142055368, 50.733547573686366],
+					[7.098732020821615, 50.73351828858421],
+					[7.09853537647993, 50.7334963247454],
+					[7.0981860435900614, 50.733547573686366],
+					[7.0979315626756545, 50.7335944298116]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "b493531ab87539db3b5b70b397a9391f",
+			"type": "Feature",
+			"properties": { "name": "Remiglustraße" },
+			"geometry": {
+				"coordinates": [
+					[7.101445198112543, 50.735019714263245],
+					[7.101169850280485, 50.734715034478285],
+					[7.100892127092777, 50.7344711021496],
+					[7.100591732624622, 50.73421281947634],
+					[7.100295116692507, 50.73395333960934],
+					[7.099399601108104, 50.73383376315303]
+				],
+				"type": "LineString"
+			}
+		},
+		{
+			"id": "52212dad7a1cc396e34cb6d89c40bdd8",
+			"type": "Feature",
+			"properties": { "name": "Münsterplatz" },
+			"geometry": {
+				"coordinates": [
+					[7.100582376610475, 50.73329792502423],
+					[7.10032965928491, 50.733507640237804],
+					[7.100032014435698, 50.73363915607925],
+					[7.09986353621963, 50.73369958215281],
+					[7.099672594239564, 50.733728017925586],
+					[7.099588355131516, 50.73373512686561],
+					[7.099397436366161, 50.733829782653686],
+					[7.099276521129809, 50.73390228483311],
+					[7.099158787873421, 50.73396471717578],
+					[7.098942413240309, 50.73405131673837],
+					[7.098811952064125, 50.73409562342968],
+					[7.098519209913093, 50.734202362104526]
+				],
+				"type": "LineString"
+			}
+		}
+	]
 }

package/src/components/MlGeoJsonLayer/story_utils/MlGeoJsonLayer.lineStyler.js

@@ -0,0 +1,189 @@
+import React, {  useEffect, useState, useMemo } from 'react';
+import Sidebar from '../../../ui_components/Sidebar';
+import {
+	Select,
+	Typography,
+	Slider,
+	Stack,
+	FormControl,
+	MenuItem,
+	Checkbox,
+	ListItemText,
+} from '@mui/material';
+import { ColorPicker } from 'mui-color';
+import MlGeoJsonLayer from '../MlGeoJsonLayer';
+import useMap from '../../../hooks/useMap';
+
+const streetNames = [
+	'Show all',
+	'In der Sürst',
+	'Münsterplatz',
+	'Poststraße',
+	'Mauspfad',
+	'Remiglustraße',
+	'Windeckstraße',
+];
+const marks = [
+	{
+		value: 0,
+		label: '0%',
+	},
+	{
+		value: 0.25,
+		label: '25%',
+	},
+	{
+		value: 0.5,
+		label: '50%',
+	},
+	{
+		value: 0.75,
+		label: '75%',
+	},
+	{
+		value: 1,
+		label: '100%',
+	},
+];
+const widthMarks = [
+	{
+		value: 0,
+		label: '0',
+	},
+	{
+		value: 5,
+		label: '5',
+	},
+	{
+		value: 10,
+		label: '10',
+	},
+];
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+	PaperProps: {
+		style: {
+			maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+			width: 250,
+		},
+	},
+};
+
+const LineStyler = (props) => {
+	const [color, setColor] = useState('#2485C1');
+	const [opacity, setOpacity] = useState(0.8);
+	const [featuresToShow, setFeaturesToShow] = useState(['Show all']);
+	const [lineWidth, setLineWidth] = useState(5);
+
+	const storyGeoJson = useMemo(() => {
+		if (featuresToShow[0] === 'Show all') {
+			return props.geojson;
+		}
+		return {
+			type: 'FeatureCollection',
+			features: props.geojson.features.filter((item) => {
+				for (var i = 0; i < featuresToShow.length; i++) {
+					if (item.properties.name === featuresToShow[i]) {
+						return item;
+					}
+				}
+			}),
+		};
+	}, [featuresToShow, props.geojson]);
+
+	const mapHook = useMap({ mapId: "map_1", waitForLayer: "Linestring" });
+
+	const handleChange = (event) => {
+		const {
+			target: { value },
+		} = event;
+		setFeaturesToShow(
+			// On autofill we get a stringified value.
+			typeof value === 'string' ? value.split(',') : value
+		);
+		console.log(featuresToShow);
+	};
+
+	const handleColorChange = (e) => {
+		setColor(`#${e.hex}`);
+	};
+
+	useEffect(() => {
+		mapHook.map?.map.setCenter([7.099301807798469, 50.734214410085684]);
+		mapHook.map?.map.setZoom(16.5);
+	}, [mapHook.map]);
+
+	return (
+		<>
+			<Sidebar>
+				<Stack paddingTop={5} spacing={3} direction="column" sx={{ mb: 1 }} alignItems="left">
+					<Typography>Feature to show:</Typography>
+
+					<FormControl>
+						<Select
+							id="demo-multiple-checkbox"
+							multiple
+							native={false}
+							value={featuresToShow}
+							onChange={handleChange}
+							renderValue={(selected) => selected.join(', ')}
+							MenuProps={MenuProps}
+						>
+							{streetNames?.map((name) => (
+								<MenuItem key={name} value={name}>
+									<Checkbox checked={featuresToShow.indexOf(name || 'Show All') > -1} />
+									<ListItemText primary={name} />
+								</MenuItem>
+							))}
+						</Select>
+					</FormControl>
+
+					<Typography>Display color:</Typography>
+					<ColorPicker value={color} onChange={handleColorChange} />
+
+					<Typography>Opacity:</Typography>
+					<Slider
+						value={opacity}
+						aria-label="Default"
+						max={1}
+						min={0}
+						step={0.1}
+						marks={marks}
+						onChange={(e) => {
+							setOpacity(e.target.value);
+						}}
+					/>
+					<Typography paddingTop={4}>Stroke:</Typography>
+					<Slider
+						value={lineWidth}
+						aria-label="Default"
+						max={10}
+						min={0}
+						step={1}
+						marks={widthMarks}
+						onChange={(e) => {
+							setLineWidth(e.target.value);
+						}}
+					/>
+				</Stack>
+			</Sidebar>
+
+			<MlGeoJsonLayer
+				geojson={storyGeoJson}
+				layerId={'Linestring'}
+				type="line"
+				defaultPaintOverrides={{
+					line: {
+						'line-color': color,
+						'line-opacity': opacity,
+						'line-width': lineWidth,
+					},
+				}}
+			/>
+		</>
+	);
+};
+
+export default LineStyler;

package/src/components/MlGeoJsonLayer/story_utils/MlGeoJsonLayer.polygonStyler.js

@@ -0,0 +1,188 @@
+import React, {  useState, useMemo } from 'react';
+import Sidebar from '../../../ui_components/Sidebar';
+import { Select, Typography, Slider, Stack, MenuItem, FormControl } from '@mui/material';
+import { ColorPicker } from 'mui-color';
+import MlGeoJsonLayer from '../MlGeoJsonLayer';
+
+/*
+const FeatureNames = () => {
+	const names = ['Show all', 'Hofgarten', 'Stadtgarten', 'Opernplatz', 'Keiserplatz'];
+	return names.map((item) => {
+		console.log(item);
+		return (
+			<>
+				<MenuItem key={item} value={`"${item}"`}>
+					{item}
+				</MenuItem>
+			</>
+		);
+	});
+};
+*/
+
+const marks = [
+	{
+		value: 0,
+		label: '0%',
+	},
+	{
+		value: 0.25,
+		label: '25%',
+	},
+	{
+		value: 0.5,
+		label: '50%',
+	},
+	{
+		value: 0.75,
+		label: '75%',
+	},
+	{
+		value: 1,
+		label: '100%',
+	},
+];
+
+const widthMarks = [
+	{
+		value: 0,
+		label: '0',
+	},
+	{
+		value: 5,
+		label: '5',
+	},
+	{
+		value: 10,
+		label: '10',
+	},
+];
+
+const PolygonStyler = (props) => {
+	const [color, setColor] = useState('#2485C1');
+	const [opacity, setOpacity] = useState(0.8);
+	const [featureToShow, setFeatureToShow] = useState('Show all');
+	const [geomType, setGeomType] = useState('fill');
+	const [lineWidth, setLineWidth] = useState(6);
+
+	const storyGeoJson = useMemo(() => {
+		if (featureToShow === 'Show all') {
+			return props.geojson;
+		}
+		return {
+			type: 'FeatureCollection',
+			features: props.geojson.features.filter((item) => item.properties.name === featureToShow),
+		};
+	}, [featureToShow, props.geojson]);
+
+	const handleColorChange = (e) => {
+		setColor(`#${e.hex}`);
+	};
+
+	return (
+		<>
+			<Sidebar>
+				<Stack paddingTop={5} spacing={3} direction="column" sx={{ mb: 1 }} alignItems="left">
+					<FormControl>
+						<Typography>Geometry type:</Typography>
+						<Select
+							value={geomType}
+							onChange={(e) => {
+								setGeomType(e.target.value);
+								console.log(e.target.value);
+							}}
+						>
+							<MenuItem value={'fill'} key={1}>
+								fill
+							</MenuItem>
+							<MenuItem value={'circle'} key={2}>
+								circle
+							</MenuItem>
+							<MenuItem value={'line'} key={3}>
+								line
+							</MenuItem>
+						</Select>
+					</FormControl>
+					<Typography>Feature to show:</Typography>
+					<FormControl>
+						<Select
+							value={featureToShow}
+							onChange={(e) => {
+								setFeatureToShow(e.target.value);
+								console.log(e.target.value);
+							}}
+						>
+							<MenuItem value={'Show all'} key={1}>
+								Show all
+							</MenuItem>
+							<MenuItem value={'Hofgarten'} key={2}>
+								Hofgarten
+							</MenuItem>
+							<MenuItem value={'Stadtgarten'} key={3}>
+								Stadtgarten
+							</MenuItem>
+							<MenuItem value={'Opernplatz'} key={4}>
+								Opernplatz
+							</MenuItem>
+							<MenuItem value={'Keiserplatz'} key={5}>
+								Keiserplatz
+							</MenuItem>
+						</Select>
+					</FormControl>
+					<Typography>Display color:</Typography>
+					<ColorPicker value={color} onChange={handleColorChange} />
+
+					<Typography>Opacity:</Typography>
+					<Slider
+						defaultValue={1}
+						aria-label="Default"
+						value={opacity}
+						max={1}
+						min={0}
+						step={0.01}
+						marks={marks}
+						onChange={(e) => {
+							setOpacity(e.target.value);
+							console.log(e);
+						}}
+					/>
+					<Typography paddingTop={4}>Stroke:</Typography>
+					<Slider
+						value={lineWidth}
+						aria-label="Default"
+						max={10}
+						min={0}
+						step={1}
+						marks={widthMarks}
+						onChange={(e) => {
+							setLineWidth(e.target.value);
+						}}
+						disabled={geomType !== 'line'}
+					/>
+				</Stack>
+			</Sidebar>
+
+			<MlGeoJsonLayer
+				geojson={storyGeoJson}
+				defaultPaintOverrides={{
+					fill: {
+						'fill-color': color,
+						'fill-opacity': opacity,
+					},
+					circle: {
+						'circle-color': color,
+						'circle-opacity': opacity,
+					},
+					line: {
+						'line-color': color,
+						'line-opacity': opacity,
+						'line-width': lineWidth,
+					},
+				}}
+				type={geomType}
+			/>
+		</>
+	);
+};
+
+export default PolygonStyler;

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

@@ -0,0 +1,43 @@
+import { ColorPicker } from 'mui-color';
+import React from 'react';
+import { paintPropsType } from './LayerPropertyForm';
+
+type Props = {
+	key: string;
+	value: string;
+	propKey: string;
+	setPaintProps: (
+		paintProps: paintPropsType | ((current: paintPropsType) => paintPropsType)
+	) => void;
+};
+
+export default function PaintPropsColorPicker({ propKey, value, setPaintProps }: Props) {
+	return (
+		<ColorPicker
+			value={value}
+			onChange={(value: any) => {
+				setPaintProps((current: paintPropsType): paintPropsType => {
+					if (!value?.rgb?.[0]) {
+						return current;
+					}
+
+					const newProps = {
+						...current,
+						[propKey]:
+							'rgba(' +
+							value.rgb[0] +
+							',' +
+							value.rgb[1] +
+							',' +
+							value.rgb[2] +
+							',' +
+							value.alpha +
+							')',
+					};
+
+					return newProps;
+				});
+			}}
+		/>
+	);
+}

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

@@ -0,0 +1,12 @@
+import { List } from '@mui/material';
+import React from 'react';
+
+type Props = {
+	children: JSX.Element;
+};
+
+function LayerList({ children }: Props) {
+	return <List>{children}</List>;
+}
+
+export default LayerList;

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;