@mapcomponents/react-maplibre 0.1.66 → 0.1.68

package/src/components/MlScaleReference/{MlScaleReference.js → MlScaleReference.tsx}

@@ -1,18 +1,25 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
-import useMap from "../../hooks/useMap";
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import useMap from '../../hooks/useMap';
 
-const MlScaleReference = (props) => {
+export interface MlScaleReferenceProps {
+	mapId?: string;
+	insertBeforeLayer?: string | undefined;
+	maxWidth?: number;
+	unit?: string;
+}
+
+const MlScaleReference = (props: MlScaleReferenceProps) => {
 	const zoomRef = useRef(0);
 	const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
 
 	const [pxWidth, setPxWidth] = useState(0);
-	const [text, setText] = useState("");
+	const [text, setText] = useState('');
 
 	const updateScale = useCallback(() => {
+		if (!mapHook.map) return;
 		if (mapHook.map?.map.getZoom() === zoomRef.current) {
 			return;
 		}
-		if (!mapHook.map) return;
 
 		zoomRef.current = mapHook.map?.map.getZoom();
 		// Calculation from MapLibre
@@ -21,56 +28,56 @@ const MlScaleReference = (props) => {
 		// found between the two coordinates.
 		const maxWidth = props.maxWidth || 100;
 
-		const y = mapHook.map._container.clientHeight / 2;
-		const left = mapHook.map.unproject([0, y]);
-		const right = mapHook.map.unproject([maxWidth, y]);
+		const y = mapHook.map.map._container.clientHeight / 2;
+		const left = mapHook.map.map.unproject([0, y]);
+		const right = mapHook.map.map.unproject([maxWidth, y]);
 		const maxMeters = left.distanceTo(right);
 		// The real distance corresponding to 100px scale length is rounded off to
 		// near pretty number and the scale length for the same is found out.
 		// Default unit of the scale is based on User's locale.
-		if (props.unit === "imperial") {
+		if (props.unit === 'imperial') {
 			const maxFeet = 3.2808 * maxMeters;
 			if (maxFeet > 5280) {
 				const maxMiles = maxFeet / 5280;
-				setScale(maxWidth, maxMiles, mapHook.map._getUIString("ScaleControl.Miles"));
+				setScale(maxWidth, maxMiles, mapHook.map.map._getUIString('ScaleControl.Miles'));
 			} else {
-				setScale(maxWidth, maxFeet, mapHook.map._getUIString("ScaleControl.Feet"));
+				setScale(maxWidth, maxFeet, mapHook.map.map._getUIString('ScaleControl.Feet'));
 			}
-		} else if (props.unit === "nautical") {
+		} else if (props.unit === 'nautical') {
 			const maxNauticals = maxMeters / 1852;
-			setScale(maxWidth, maxNauticals, mapHook.map._getUIString("ScaleControl.NauticalMiles"));
+			setScale(maxWidth, maxNauticals, mapHook.map.map._getUIString('ScaleControl.NauticalMiles'));
 		} else if (maxMeters >= 1000) {
-			setScale(maxWidth, maxMeters / 1000, mapHook.map._getUIString("ScaleControl.Kilometers"));
+			setScale(maxWidth, maxMeters / 1000, mapHook.map.map._getUIString('ScaleControl.Kilometers'));
 		} else {
-			setScale(maxWidth, maxMeters, mapHook.map._getUIString("ScaleControl.Meters"));
+			setScale(maxWidth, maxMeters, mapHook.map.map._getUIString('ScaleControl.Meters'));
 		}
 	}, [mapHook.map, props.unit, props.maxWidth]);
 
 	useEffect(() => {
 		if (!mapHook.map) return;
 
-		let _updateScale = updateScale;
-		mapHook.map.on("move", _updateScale, mapHook.componentId);
+		const _updateScale = updateScale;
+		mapHook.map.on('move', _updateScale, mapHook.componentId);
 		updateScale();
 
 		return () => {
-			mapHook.map.off("move", _updateScale);
+			mapHook.map?.map.off('move', _updateScale);
 		};
 	}, [mapHook.map, updateScale]);
 
-	const setScale = (maxWidth, maxDistance, unit) => {
+	const setScale = (maxWidth: number, maxDistance: number, unit: string) => {
 		const distance = getRoundNum(maxDistance);
 		const ratio = distance / maxDistance;
 		setPxWidth(maxWidth * ratio);
-		setText(distance + " " + unit);
+		setText(distance + ' ' + unit);
 	};
 
-	const getDecimalRoundNum = (d) => {
+	const getDecimalRoundNum = (d: number) => {
 		const multiplier = Math.pow(10, Math.ceil(-Math.log(d) / Math.LN10));
 		return Math.round(d * multiplier) / multiplier;
 	};
 
-	const getRoundNum = (num) => {
+	const getRoundNum = (num: number) => {
 		const pow10 = Math.pow(10, `${Math.floor(num)}`.length - 1);
 		let d = num / pow10;
 
@@ -83,15 +90,15 @@ const MlScaleReference = (props) => {
 		<>
 			<div
 				style={{
-					backgroundColor: "hsla(0,0%,100%,.75)",
-					fontSize: "10px",
-					border: "2px solid #333",
-					borderTop: "#333",
-					padding: "0 5px",
-					color: "#333",
-					boxSizing: "border-box",
-					width: pxWidth + "px",
-					fontFamily: "sans-serif",
+					backgroundColor: 'hsla(0,0%,100%,.75)',
+					fontSize: '10px',
+					border: '2px solid #333',
+					borderTop: '#333',
+					padding: '0 5px',
+					color: '#333',
+					boxSizing: 'border-box',
+					width: pxWidth + 'px',
+					fontFamily: 'sans-serif',
 				}}
 				dangerouslySetInnerHTML={{ __html: text }}
 			></div>

package/src/components/MlShareMapState/MlShareMapState.stories.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import MlShareMapState from './MlShareMapState';
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import useMapState from '../../hooks/useMapState';
+import useMap from '../../hooks/useMap';
+import Sidebar from '../../ui_components/Sidebar';
+import ListItem from '@mui/material/ListItem';
+import IconButton from '@mui/material/IconButton';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import ListItemText from '@mui/material/ListItemText';
+import sample_geojson_1 from '../MlGeoJsonLayer/assets/sample_1.json';
+import sample_geojson_2 from '../MlGeoJsonLayer/assets/sample_2.json';
+import List from '@mui/material/List';
+import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
+import { ToggleButton } from '@mui/material';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+
+const storyoptions = {
+	title: 'MapComponents/MlShareMapState',
+	component: MlShareMapState,
+	argTypes: {},
+	decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = () => {
+	const geoJsonArray = [sample_geojson_1, sample_geojson_2];
+	const [watchState, setWatchState] = useState(true);
+	const mapHook = useMap({ mapId: 'map_1' });
+	const mapState = useMapState({
+		mapId: 'map_1',
+		watch: {
+			viewport: false,
+			layers: true,
+			sources: false,
+		},
+		filter: {
+			includeBaseLayers: false,
+		},
+	});
+
+	return (
+		<>
+			<MlShareMapState active={watchState} />
+			{geoJsonArray.map((el, i) => (
+				<MlGeoJsonLayer layerId={'GeoJson_' + i} type="line" geojson={el} key={'GeoJson_' + i} />
+			))}
+			<Sidebar sx={{ wordBreak: 'break-word' }}>
+				<ToggleButton
+					size="small"
+					selected={watchState}
+					value={watchState}
+					onChange={() => {
+						setWatchState(!watchState);
+					}}
+				>
+					{watchState ? <CheckCircleOutlineIcon /> : <ErrorOutlineIcon />}
+
+					{watchState ? 'active' : 'inactive'}
+				</ToggleButton>
+				<List dense key="layers">
+					{mapState.layers?.map((el) => (
+						<ListItem
+							key={el?.id}
+							secondaryAction={
+								<IconButton
+									edge="end"
+									aria-label="toggle visibility"
+									onClick={() => {
+										const currentVisibility = mapHook.map
+											?.getLayer?.(el?.id)
+											?.getLayoutProperty('visibility');
+										mapHook.map
+											?.getLayer?.(el?.id)
+											?.setLayoutProperty(
+												'visibility',
+												currentVisibility === 'none' ? 'visible' : 'none'
+											);
+										mapHook.map?.map.fire('zoom');
+									}}
+								>
+									{el?.visible ? <VisibilityIcon /> : <VisibilityOffIcon />}
+								</IconButton>
+							}
+						>
+							<ListItemText primary={el?.id} secondary={''} />
+						</ListItem>
+					))}
+				</List>
+			</Sidebar>
+		</>
+	);
+};
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};

package/src/components/MlShareMapState/{MlShareMapState.js → MlShareMapState.tsx}

@@ -1,13 +1,26 @@
-import React, { useRef, useEffect, useContext, useState, useCallback } from "react";
-import PropTypes from "prop-types";
-
-import MapContext from "../../contexts/MapContext";
-import { v4 as uuidv4 } from "uuid";
-import useMapState from "../../hooks/useMapState";
-
-const getCurrentUrlParameters = () => {
-	let currentParams = Object.fromEntries(new URLSearchParams(window.location.search));
-	currentParams.layers = JSON.parse(currentParams?.layers ? currentParams.layers : "[]");
+import React, { useRef, useEffect, useContext, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+
+import MapContext from '../../contexts/MapContext';
+import { v4 as uuidv4 } from 'uuid';
+import useMapState from '../../hooks/useMapState';
+import MapLibreGlWrapper from '../MapLibreMap/lib/MapLibreGlWrapper';
+
+export interface MapState {
+	lat?: number;
+	lng?: number;
+	zoom?: number;
+	bearing?: number;
+	pitch?: number;
+	layers?: {
+		visible: boolean;
+		id: string;
+	}[];
+}
+
+const getCurrentUrlParameters = (): MapState => {
+	const currentParams = Object.fromEntries(new URLSearchParams(window.location.search));
+	currentParams.layers = JSON.parse(currentParams?.layers ? currentParams.layers : '[]');
 
 	return currentParams;
 };
@@ -22,14 +35,27 @@ const initialUrlParams = getCurrentUrlParameters();
  *
  * @component
  */
-const MlShareMapState = (props) => {
+
+export interface MlShareMapStateProps {
+	//
+	mapId?: string;
+	idPrefix?: string;
+	active?: boolean;
+}
+
+export interface LayerStatesInterface {
+	//
+	[key: string]: boolean;
+}
+
+const MlShareMapState = (props: MlShareMapStateProps) => {
 	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
 	const mapContext = useContext(MapContext);
 	const initializedRef = useRef(false);
-	const mapRef = useRef(undefined);
-	const [map, setMap] = useState(undefined);
+	const mapRef = useRef<MapLibreGlWrapper | undefined>();
+	const [map, setMap] = useState<MapLibreGlWrapper | undefined>(undefined);
 	const layersFromUrlParamsRef = useRef({});
-	const componentId = useRef((props.idPrefix ? props.idPrefix : "MlShareMapState-") + uuidv4());
+	const componentId = useRef((props.idPrefix ? props.idPrefix : 'MlShareMapState-') + uuidv4());
 	const mapState = useMapState({
 		watch: {
 			viewport: false,
@@ -42,7 +68,7 @@ const MlShareMapState = (props) => {
 	});
 
 	const allStatesRestoredRef = useRef(false);
-	const layerStatesRestored = useRef(undefined);
+	const layerStatesRestored = useRef<LayerStatesInterface>();
 	const restoredStatesRef = useRef({
 		viewport: {
 			center: false,
@@ -56,42 +82,42 @@ const MlShareMapState = (props) => {
 	});
 
 	// initial URL-Params
-	const mapStateRef = useRef({});
+	const mapStateRef = useRef<MapState>({});
 
 	const refreshUrlParameters = useCallback(() => {
 		if (!props.active) return;
 
-		let mapLayers = [];
-		for (let x in mapState.layers) {
+		const mapLayers = [];
+		for (const x in mapState.layers) {
 			mapLayers.push({
-				id: mapState.layers[x].id,
-				type: mapState.layers[x].type,
-				visible: mapState.layers[x].visible,
+				id: mapState.layers[x]?.id,
+				type: mapState.layers[x]?.type,
+				visible: mapState.layers[x]?.visible,
 			});
 		}
 		refreshMapState();
-		let urlParams = new URLSearchParams({
-			...getCurrentUrlParameters(),
-			...mapStateRef.current,
+		const urlParams = new URLSearchParams({
+			...(getCurrentUrlParameters() as Record<string, string>),
+			...(mapStateRef.current as Record<string, string>),
 			layers: JSON.stringify(mapLayers),
 		});
-		JSON.parse(Object.fromEntries(urlParams).layers).forEach((el) => {
+		JSON.parse(Object.fromEntries(urlParams).layers).forEach((el: { id: number }) => {
+			// is iD a number?
 			layersFromUrlParamsRef.current[el.id] = false;
 		});
 
-		let currentParams = new URLSearchParams(window.location.search);
-		checkRestorationStates(mapState.layers);
+		const currentParams = new URLSearchParams(window.location.search);
 		if (urlParams.toString() !== currentParams.toString()) {
 			window.history.pushState(
 				{ ...mapStateRef.current },
 				document.title,
-				"?" + urlParams.toString()
+				'?' + urlParams.toString()
 			);
 		}
 	}, [mapState.layers, props.active]);
 
 	useEffect(() => {
-		let _componentId = componentId.current;
+		const _componentId = componentId.current;
 
 		mapStateRef.current = getCurrentUrlParameters();
 
@@ -119,12 +145,12 @@ const MlShareMapState = (props) => {
 	useEffect(() => {
 		if (!mapRef.current) return;
 
-		let _refreshUrlParameters = refreshUrlParameters;
+		const _refreshUrlParameters = refreshUrlParameters;
 
-		mapRef.current.on("moveend", _refreshUrlParameters, componentId.current);
+		mapRef.current.on('moveend', _refreshUrlParameters, componentId.current);
 
 		return () => {
-			mapRef.current?.off("moveend", _refreshUrlParameters);
+			mapRef.current?.map.off('moveend', _refreshUrlParameters);
 		};
 	}, [refreshUrlParameters, map]);
 
@@ -143,14 +169,16 @@ const MlShareMapState = (props) => {
 	useEffect(() => {
 		if (!mapState?.layers?.length) return;
 
-		if (typeof layerStatesRestored.current === "undefined") {
-			layerStatesRestored.current = {};
-			initialUrlParams?.layers.forEach((layer) => {
-				layerStatesRestored.current[layer.id] = false;
+		if (typeof layerStatesRestored.current === 'undefined') {
+			layerStatesRestored.current = undefined;
+			initialUrlParams?.layers?.forEach((layer: { id: string }) => {
+				if (layerStatesRestored.current?.[layer.id]) {
+					layerStatesRestored.current[layer.id] = false;
+				}
 			});
 		}
 
-		for (let key in layerStatesRestored.current) {
+		for (const key in layerStatesRestored.current) {
 			let _allDone = true;
 			if (layerStatesRestored.current[key] === false) {
 				_allDone = false;
@@ -162,11 +190,14 @@ const MlShareMapState = (props) => {
 
 		if (initialUrlParams.layers) {
 			initialUrlParams.layers.forEach((layer) => {
-				if (mapRef.current?.getLayer(layer.id) && layerStatesRestored.current[layer.id] === false) {
+				if (
+					mapRef.current?.map.getLayer(layer.id) && //number oder str?
+					layerStatesRestored.current?.[layer.id] === false
+				) {
 					layerStatesRestored.current[layer.id] = true;
-					mapRef.current
+					mapRef.current.map
 						?.getLayer(layer.id)
-						?.setLayoutProperty("visibility", layer.visible ? "visible" : "none");
+						?.setLayoutProperty('visibility', layer.visible ? 'visible' : 'none');
 				}
 			});
 		}
@@ -181,28 +212,32 @@ const MlShareMapState = (props) => {
 		}
 	}, [props.active, map, mapState.layers]);
 
-	const refreshMapState = () => {
-		mapStateRef.current.lat = mapRef.current.getCenter().lat;
-		mapStateRef.current.lng = mapRef.current.getCenter().lng;
-		mapStateRef.current.zoom = mapRef.current.getZoom();
-		mapStateRef.current.bearing = mapRef.current.getBearing();
-		mapStateRef.current.pitch = mapRef.current.getPitch();
-	};
+	//ist .current?.map. richtig?
 
-	const checkRestorationStates = (stateArray) => {
-		let tempArray = {};
-		stateArray.forEach((el, i, arr) => {
-			if (!arr[el.key]) tempArray[el.key] = true;
-		});
+	const refreshMapState = () => {
+		mapStateRef.current.lat = mapRef.current?.map.getCenter().lat;
+		mapStateRef.current.lng = mapRef.current?.map.getCenter().lng;
+		mapStateRef.current.zoom = mapRef.current?.map.getZoom();
+		mapStateRef.current.bearing = mapRef.current?.map.getBearing();
+		mapStateRef.current.pitch = mapRef.current?.map.getPitch();
 	};
 
 	const restoreViewportState = () => {
 		if (!restoredStatesRef.current.viewport.center) {
 			restoredStatesRef.current.viewport.center = true;
-			mapRef.current.setCenter([mapStateRef.current.lng, mapStateRef.current.lat]);
-			mapRef.current.setZoom(mapStateRef.current.zoom);
-			mapRef.current.setBearing(mapStateRef.current.bearing);
-			mapRef.current.setPitch(mapStateRef.current.pitch);
+
+			if (mapStateRef.current.lng && mapStateRef.current.lat) {
+				mapRef.current?.map.setCenter([mapStateRef.current.lng, mapStateRef.current.lat]);
+			}
+			if (mapStateRef.current.zoom) {
+				mapRef.current?.map.setZoom(mapStateRef.current.zoom);
+			}
+			if (mapStateRef.current.bearing) {
+				mapRef.current?.map.setBearing(mapStateRef.current.bearing);
+			}
+			if (mapStateRef.current.pitch) {
+				mapRef.current?.map.setPitch(mapStateRef.current.pitch);
+			}
 		}
 
 		allStatesRestoredRef.current = true;
@@ -210,7 +245,8 @@ const MlShareMapState = (props) => {
 
 	window.onpopstate = (event) => {
 		if (event.state && event.state.lng && event.state.lat && event.state.zoom) {
-			mapRef.current.easeTo({
+			mapRef.current?.map.easeTo({
+				// so möglich?
 				zoom: event.state.zoom,
 				center: [event.state.lng, event.state.lat],
 			});
@@ -218,7 +254,7 @@ const MlShareMapState = (props) => {
 	};
 
 	return <></>;
-};
+};;
 
 MlShareMapState.defaultProps = {
 	mapId: undefined,

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

@@ -84,7 +84,7 @@ export default function LayerPropertyForm({ paintProps = {}, setPaintProps }: Pr
 							<TextField
 								inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
 								value={paintProps[key]}
-								onChange={(ev: React.ChangeEvent) => {
+								onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
 									if (ev?.target?.value) {
 										setPaintProps((current) => ({ ...current, [key]: parseInt(ev.target.value) }));
 									}

package/src/components/MlSketchTool/MlSketchTool.tsx

@@ -18,7 +18,7 @@ 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 { LngLatLike } from 'maplibre-gl';
 import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
 
 export interface MlSketchToolProps {