@mapcomponents/react-maplibre 0.1.69 → 0.1.70

package/src/ui_components/ImageLoader.tsx

@@ -1,83 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import CircularProgress from '@mui/material/CircularProgress';
-import ErrorIcon from '@mui/icons-material/Error';
-import { Box } from '@mui/system';
-import { SxProps } from '@mui/material';
-
-interface ImageLoaderProps {
-	src: string;
-	alt?: string;
-	sx?: SxProps;
-	className?: string;
-}
-
-const ImageLoader = (props: ImageLoaderProps) => {
-	const [state, setState] = useState('loading');
-
-	useEffect(() => {
-		if (!props.src) {
-			setState('error');
-			return;
-		}
-		fetch(props.src)
-			.then(({ ok }) => {
-				if (ok) {
-					setState('ready');
-				} else {
-					setState('error');
-				}
-			})
-			.catch((e) => {
-				console.error(e);
-				setState('error');
-			});
-	}, [props.src]);
-
-	const boxStyle = {
-		border: 2,
-		borderRadius: '8px',
-		display: 'flex',
-	};
-
-	const LoadingImage = () => {
-		return (
-			<Box className={props.className} sx={{ ...boxStyle, ...props.sx }}>
-				<CircularProgress />
-			</Box>
-		);
-	};
-
-	const ReadyImage = () => {
-		return (
-			<Box
-				component={'img'}
-				className={props.className}
-				sx={{ ...boxStyle, ...props.sx }}
-				src={props.src}
-				alt={props.alt || ''}
-			/>
-		);
-	};
-	const ErrorImage = () => {
-		return (
-			<Box className={props.className} sx={{ ...boxStyle, ...props.sx }}>
-				<ErrorIcon sx={{ display: 'block', margin: 'auto' }} />
-			</Box>
-		);
-	};
-
-	const renderImage = (state: string) => {
-		switch (state) {
-			case 'ready':
-				return <ReadyImage />;
-			case 'error':
-				return <ErrorImage />;
-			default:
-				return <LoadingImage />;
-		}
-	};
-
-	return <>{renderImage(state)}</>;
-};
-
-export default ImageLoader;

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

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

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

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

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

@@ -1,26 +0,0 @@
-{
-  "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

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

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