@mapcomponents/react-maplibre 0.1.67 → 0.1.69

package/src/ui_components/LayerList/LayerList.stories.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from 'react';
+
+import LayerList from './LayerList';
+import LayerListItem from './LayerListItem';
+
+import mapContextDecorator from '../../decorators/EmptyMapDecorator';
+import Sidebar from '../Sidebar';
+import MlGeoJsonLayer from '../../components/MlGeoJsonLayer/MlGeoJsonLayer';
+import sample_geojson_1 from './assets/sample_1.json';
+import sample_geojson_2 from './assets/sample_2.json';
+import LayerListFolder from './LayerListFolder';
+
+import style from './assets/style.json';
+import MlVectorTileLayer from '../../components/MlVectorTileLayer/MlVectorTileLayer';
+import { LayerSpecification } from 'maplibre-gl';
+import { Feature } from '@turf/turf';
+
+const storyoptions = {
+	title: 'UiComponents/LayerList',
+	component: LayerList,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const sidebarSx = {
+	width: { xs: '80%', sm: '60%', md: '350px', lg: '350px' },
+	boxSizing: 'border-box',
+};
+
+const Template = () => {
+	const [layerOneState, setLayerOneState] = useState({ geojson: sample_geojson_1 as Feature });
+	const [layerTwoState, setLayerTwoState] = useState({ geojson: sample_geojson_2 as Feature });
+
+	useEffect(() => {
+		console.log(layerOneState, layerTwoState);
+	}, [layerOneState, layerTwoState]);
+
+	return (
+		<>
+			<Sidebar sx={sidebarSx} drawerPaperProps={{ sx: sidebarSx }}>
+				<LayerList>
+					<LayerListItem
+						layerComponent={<MlGeoJsonLayer {...layerOneState} />}
+						setLayerState={setLayerOneState}
+						visible={true}
+						configurable={false}
+						type="layer"
+						name="GeoJSON Layer"
+					/>
+					<LayerListItem
+						layerComponent={<MlGeoJsonLayer {...layerTwoState} />}
+						setLayerState={setLayerTwoState}
+						visible={true}
+						configurable={true}
+						type="layer"
+						name="configurable GeoJSON Layer"
+						description="A visualization of a GeoJSON LineString"
+					/>
+				</LayerList>
+			</Sidebar>
+		</>
+	);
+};
+export const ExampleConfig = Template.bind({});
+
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};
+
+const FolderTemplate = () => {
+	return (
+		<>
+			<Sidebar sx={sidebarSx} drawerPaperProps={{ sx: sidebarSx }}>
+				<LayerList>
+					<LayerListFolder visible={true} name={'GeoJSON Layers'}>
+						<LayerListItem
+							layerComponent={<MlGeoJsonLayer geojson={sample_geojson_1 as Feature} />}
+							visible={true}
+							configurable={false}
+							type="layer"
+							name="GeoJSON Layer"
+						/>
+						<LayerListItem
+							layerComponent={<MlGeoJsonLayer geojson={sample_geojson_2 as Feature} />}
+							visible={true}
+							configurable={true}
+							type="layer"
+							name="GeoJSON Layer 2"
+							description="A visualization of a GeoJSON LineString"
+						/>
+					</LayerListFolder>
+				</LayerList>
+			</Sidebar>
+		</>
+	);
+};
+export const FolderExample = FolderTemplate.bind({});
+
+FolderExample.parameters = {};
+FolderExample.args = {};
+
+const VectortileTemplate = () => {
+	const [layerState, setLayerState] = useState({
+		layerId: 'openmaptiles',
+		sourceOptions: {
+			type: 'vector' as const,
+			tiles: ['https://wms.wheregroup.com/tileserver/tile/world-0-14/{z}/{x}/{y}.pbf'],
+		},
+		layers: [...style.layers] as LayerSpecification[],
+	});
+
+	useEffect(() => {
+		console.log(layerState);
+	},[layerState])
+
+	return (
+		<>
+			<Sidebar sx={sidebarSx} drawerPaperProps={{ sx: sidebarSx }}>
+				<LayerList>
+					<LayerListItem
+						layerComponent={<MlVectorTileLayer {...layerState} />}
+						setLayerState={setLayerState}
+						visible={true}
+						configurable={false}
+						type="layer"
+						name="Vector style"
+					/>
+				</LayerList>
+			</Sidebar>
+		</>
+	);
+};
+export const VectortileExample = VectortileTemplate.bind({});
+
+VectortileExample.parameters = {};
+VectortileExample.args = {};

package/src/ui_components/LayerList/LayerList.tsx

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

package/src/ui_components/LayerList/LayerListFolder.tsx

@@ -0,0 +1,82 @@
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import { ListItemIcon, ListItemText, List, Checkbox, ListItem, IconButton } from '@mui/material';
+import { Box } from '@mui/system';
+import React, { useMemo, useState } from 'react';
+
+type Props = {
+	visible: boolean;
+	name?: string;
+	children: JSX.Element | JSX.Element[];
+	setVisible?: (visible: boolean | ((val: unknown) => boolean)) => void;
+};
+
+export default function LayerListFolder({ visible = true, name, children, setVisible }: Props) {
+	const [open, setOpen] = useState(false);
+	const [localVisible, setLocalVisible] = useState(true);
+	const _visible = useMemo(() => {
+		if (!visible) {
+			return false;
+		}
+		return localVisible;
+	}, [visible, localVisible]);
+
+	const _children = useMemo(() => {
+		if (children) {
+			if (Array.isArray(children)) {
+				return children.map((element) => {
+					return React.cloneElement(element, {
+						visible: _visible,
+					});
+				});
+			}
+			return React.cloneElement(children, {
+				visible: _visible,
+			});
+		}
+		return <></>;
+	}, [_visible]);
+
+	return (
+		<>
+			<ListItem
+				secondaryAction={
+					<IconButton
+						sx={{ padding: '4px', marginTop: '-3px' }}
+						edge="end"
+						aria-label="open"
+						onClick={() => setOpen(!open)}
+					>
+						{open ? <ExpandLess /> : <ExpandMore />}
+					</IconButton>
+				}
+				sx={{
+					paddingRight: 0,
+					paddingLeft: 0,
+					paddingTop: 0,
+					paddingBottom: '4px',
+				}}
+			>
+				<ListItemIcon sx={{ minWidth: '30px' }}>
+					<Checkbox
+						sx={{ padding: 0 }}
+						disabled={setVisible ? false : !visible}
+						checked={setVisible?visible:localVisible}
+						onClick={() => {
+							if (setVisible) {
+								setVisible((val) => !val);
+							} else {
+								setLocalVisible((val) => !val);
+							}
+						}}
+					/>
+				</ListItemIcon>
+				<ListItemText primary={name} />
+			</ListItem>
+			<Box sx={{ display: open ? 'block' : 'none' }}>
+				<List component="div" disablePadding sx={{ paddingLeft: '18px' }}>
+					{_children}
+				</List>
+			</Box>
+		</>
+	);
+}

package/src/ui_components/LayerList/LayerListItem.tsx

@@ -0,0 +1,180 @@
+import { Checkbox, IconButton, ListItem, ListItemIcon, ListItemText } from '@mui/material';
+import TuneIcon from '@mui/icons-material/Tune';
+import React, { useMemo, useRef, useState } from 'react';
+import getDefaulLayerTypeByGeometry from '../../components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry';
+import LayerPropertyForm from './util/LayerPropertyForm';
+import getDefaultPaintPropsByType from '../../components/MlGeoJsonLayer/util/getDefaultPaintPropsByType';
+import LayerListFolder from './LayerListFolder';
+import { LayerSpecification } from 'maplibre-gl';
+import LayerListItemVectorLayer from './util/LayerListItemVectorLayer';
+import { useEffect } from 'react';
+
+type Props = {
+	layerComponent: JSX.Element;
+	visible: boolean;
+	configurable: boolean;
+	type?: 'background' | 'background-labels' | 'layer' | 'wms-layer' | 'vector-tile-layer';
+	name: string;
+	description?: string;
+	setLayerState?: (state: unknown) => void;
+};
+
+function LayerListItem({
+	layerComponent,
+	visible,
+	type,
+	name,
+	description,
+	configurable,
+	setLayerState,
+}: Props) {
+	const [localVisible, setLocalVisible] = useState(true);
+	const [paintPropsFormVisible, setPaintPropsFormVisible] = useState(false);
+	const visibleRef = useRef<boolean>(visible);
+
+	// this state variable is used for layer components that provide a paint attribute
+	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]);
+
+	useEffect(() => {
+		if (!setLayerState || !layerComponent?.props?.layers || _visible === visibleRef.current) return;
+
+		visibleRef.current = _visible;
+
+		const state = { ...layerComponent?.props };
+		state.layers = layerComponent?.props?.layers.map((el: LayerSpecification) => {
+			if (el.layout) {
+				el.layout['visibility'] = _visible ? 'visible' : 'none';
+			} else {
+				el.layout = { visibility: _visible ? 'visible' : 'none' };
+			}
+			return el;
+		});
+		setLayerState(state);
+	}, [_visible, setLayerState, layerComponent?.props?.layers]);
+
+	useEffect(() => {
+		if (!setLayerState || !paintProps) return;
+
+		setLayerState({ ...layerComponent.props, paint: paintProps });
+	}, [paintProps, setLayerState]);
+
+	const _layerComponent = useMemo(() => {
+		if (layerComponent && type === 'layer') {
+			if (layerComponent?.props?.layers) {
+				return React.cloneElement(layerComponent, {
+					...layerComponent?.props,
+					layers: layerComponent?.props?.layers,
+				});
+			} else {
+				return React.cloneElement(layerComponent, {
+					layout: {
+						visibility: _visible ? 'visible' : 'none',
+					},
+					...(setLayerState ? {} : { paint: paintProps }),
+				});
+			}
+		}
+		return <></>;
+	}, [type, layerComponent, paintProps, _visible, layerComponent?.props?.layers]);
+
+	const layerType = useMemo(() => {
+		if (layerComponent && type === 'layer') {
+			if (layerComponent.props.type) {
+				return layerComponent.props.type;
+			}
+			if (layerComponent.props.geojson) {
+				return getDefaulLayerTypeByGeometry(layerComponent.props.geojson);
+			}
+		}
+
+		return undefined;
+	}, [layerComponent]);
+
+	return (
+		<>
+			{!layerComponent?.props?.layers && (
+				<ListItem
+					sx={{
+						paddingRight: configurable ? '56px' : 0,
+						paddingLeft: 0,
+						paddingTop: 0,
+						paddingBottom: '4px',
+					}}
+					secondaryAction={
+						configurable ? (
+							<IconButton
+								edge="end"
+								aria-label="comments"
+								onClick={() => {
+									setPaintPropsFormVisible((current) => {
+										return !current;
+									});
+								}}
+								sx={{ padding: '4px', marginTop: '-3px' }}
+							>
+								<TuneIcon />
+							</IconButton>
+						) : undefined
+					}
+				>
+					<ListItemIcon sx={{ minWidth: '30px' }}>
+						<Checkbox
+							disabled={!visible}
+							checked={localVisible}
+							sx={{ padding: 0 }}
+							onClick={() => {
+								setLocalVisible((val) => !val);
+							}}
+						/>
+					</ListItemIcon>
+					<ListItemText
+						primary={name}
+						primaryTypographyProps={{ sx: { fontSize: '0.9rem' } }}
+						secondary={description}
+						secondaryTypographyProps={{ sx: { fontSize: '0.7rem' } }}
+					/>
+				</ListItem>
+			)}
+			{_layerComponent}
+			{!layerComponent?.props?.layers && configurable && paintPropsFormVisible && (
+				<LayerPropertyForm
+					paintProps={paintProps}
+					setPaintProps={setPaintProps}
+					layerType={layerType}
+				/>
+			)}
+
+			{layerComponent?.props?.layers && (
+				<LayerListFolder visible={localVisible} setVisible={setLocalVisible} name={name}>
+					{layerComponent?.props?.layers?.map?.((_el: LayerSpecification, idx: number) => (
+						<LayerListItemVectorLayer
+							vtProps={layerComponent?.props}
+							setVtProps={setLayerState}
+							id={'' + idx}
+							key={'' + idx}
+						/>
+					))}
+				</LayerListFolder>
+			)}
+		</>
+	);
+}
+
+LayerListItem.defaultProps = {
+	type: 'layer',
+	visible: true,
+};
+
+export default LayerListItem;

package/src/ui_components/LayerList/assets/sample_1.json

@@ -0,0 +1,26 @@
+{
+  "type": "Feature",
+  "properties": {},
+  "geometry": {
+    "type": "LineString",
+    "coordinates": [
+      [7.1074676513671875, 50.74340774029213],
+      [7.0992279052734375, 50.756441089372665],
+      [7.079315185546874, 50.764693667025014],
+      [7.045669555664062, 50.77945780529241],
+      [7.030563354492187, 50.79161300845443],
+      [7.0291900634765625, 50.80940599750376],
+      [7.0236968994140625, 50.820685846099174],
+      [7.0085906982421875, 50.825891011253546],
+      [6.9879913330078125, 50.826758482363275],
+      [6.97906494140625, 50.835432306955276],
+      [6.9824981689453125, 50.84583876895451],
+      [6.9962310791015625, 50.85147463352982],
+      [7.012023925781249, 50.85710981721644],
+      [7.021636962890625, 50.86664473085768],
+      [7.0367431640625, 50.872278081520406],
+      [7.0477294921875, 50.877044231111014],
+      [7.052536010742187, 50.88397594225127]
+    ]
+  }
+}

package/src/ui_components/LayerList/assets/sample_2.json

@@ -0,0 +1,22 @@
+{
+  "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]
+    ]
+  }
+}

package/src/ui_components/LayerList/assets/sample_polygon_1.json

@@ -0,0 +1,33 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "coordinates": [
+          [
+            [7.08646747303149, 50.74485058672653],
+            [7.084287513691095, 50.74371917250187],
+            [7.084437772332876, 50.743610683782215],
+            [7.084640903561933, 50.743721758552354],
+            [7.085805654941254, 50.74293993704128],
+            [7.087023278906713, 50.74218320888983],
+            [7.087791368229503, 50.74258090834434],
+            [7.088796806075749, 50.743261830692745],
+            [7.089275088452752, 50.743701110992674],
+            [7.088087117762917, 50.74409411011173],
+            [7.087662548338368, 50.743784963165815],
+            [7.087184330538875, 50.7440368518605],
+            [7.087233860417484, 50.744077781245316],
+            [7.08714938625954, 50.744122118772154],
+            [7.087057544749172, 50.74427276821896],
+            [7.087104984084277, 50.744509715654885],
+            [7.08646747303149, 50.74485058672653]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}