@mapcomponents/react-maplibre 0.1.67 → 0.1.68

package/src/components/MlCenterPosition/MlCenterPosition.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react";
 import useMap from "../../hooks/useMap";
-import { Button, SxProps, Theme } from "@mui/material";
-import	GpsFixedIcon	from "@mui/icons-material/GpsFixed";
+import { Button, SxProps, Theme } from '@mui/material';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 
 export interface MlCenterPositionProps {
 	/**
@@ -36,51 +36,44 @@ const MlCenterPosition = (props: MlCenterPositionProps) => {
 		mapId: props.mapId,
 		waitForLayer: props.insertBeforeLayer,
 	});
+
 	const [locationAccessDenied, setLocationAccessDenied] = useState(false);
 
 	const centerCurrentLocation = () => {
 		navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);
 	};
 
-	const getLocationSuccess = useCallback((location:GeolocationPosition) => {
-		mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);
-	}, [mapHook.map]);
+	const getLocationSuccess = useCallback(
+		(location: GeolocationPosition) => {
+			mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);
+		},
+		[mapHook.map]
+	);
 
 	const getLocationError = () => {
-		console.log("Access of user location denied");
+		console.log('Access of user location denied');
 		setLocationAccessDenied(true);
 	};
-	return <>
-			<Button 
+	return (
+		<>
+			<Button
+				variant="navtools"
 				sx={{
 					zIndex: 1002,
 					color: !locationAccessDenied ? props.onColor : props.offColor,
-					...props.style,
 				}}
-			 onClick={centerCurrentLocation} disabled={locationAccessDenied}>
-				<GpsFixedIcon sx={{ ...(props.style?.['fontSize']?{fontSize: props.style?.['fontSize']}:{}) }} />{" "}
+				onClick={centerCurrentLocation}
+				disabled={locationAccessDenied}
+			>
+				<GpsFixedIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
 			</Button>
-	</>;
-
+		</>
+	);
 };
 
 MlCenterPosition.defaultProps = {
 	mapId: undefined,
-	style: {
-		minWidth: "30px",
-		minHeight: "30px",
-		width: "30px",
-		height: "30px",
-		backgroundColor: "#414141",
-		borderRadius: "23%",
-		margin: 0.15,
-		fontSize: "1.3em",
-		":hover": {
-			backgroundColor: "#515151",
-			color: "#ececec",
-		},
-	},
-	onColor: "#ececec",
-	offColor: "#666",
+	onColor: '#ececec',
+	offColor: '#666',
 };
 export default MlCenterPosition;

package/src/components/MlCreatePdfForm/lib/PdfForm.tsx

@@ -188,7 +188,7 @@ export default function PdfForm(props: PdfFormProps) {
 				<Select
 					labelId="quality-select-label"
 					id="quality-select"
-					label="Qualität"
+					label="Quality"
 					value={pdfContext.quality}
 					onChange={(event) => {
 						pdfContext.setQuality?.(event.target.value);
@@ -202,11 +202,11 @@ export default function PdfForm(props: PdfFormProps) {
 				</Select>
 			</FormControl>
 			<FormControl fullWidth sx={formControlStyles}>
-				<InputLabel id="quality-select-label">Scale</InputLabel>
+				<InputLabel id="scale-select-label">Scale</InputLabel>
 				<Select
-					labelId="quality-select-label"
-					id="quality-select"
-					label="Qualität"
+					labelId="scale-select-label"
+					id="scale-select"
+					label="Scale"
 					value={pdfContext?.options?.fixedScale}
 					onChange={(event) => {
 						pdfContext.setOptions?.((val) => ({
@@ -229,7 +229,7 @@ export default function PdfForm(props: PdfFormProps) {
 					onClick={createPdfHandler}
 					disabled={loading}
 				>
-					PDF erstellen
+					create PDF
 				</Button>
 				{loading && (
           <CircularProgress

package/src/components/MlFollowGps/MlFollowGps.stories.js

@@ -1,22 +1,40 @@
-import React from "react";
+import React from 'react';
 
-import MlFollowGps from "./MlFollowGps";
+import MlFollowGps from './MlFollowGps';
 
-import mapContextDecorator from "../../decorators/MapContextDecorator";
+import noNavToolsDecorator from '../../decorators/NoNavToolsDecorator';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 const storyoptions = {
-	title: "MapComponents/MlFollowGps",
+	title: 'MapComponents/MlFollowGps',
 	component: MlFollowGps,
-	argTypes: {
-	},
-	decorators: mapContextDecorator,
+	argTypes: {},
+	decorators: noNavToolsDecorator,
 };
 export default storyoptions;
 
-const Template = (props) => <MlFollowGps {...props}/>;
-
+const Template = (props) => {
+	const mediaIsMobile = useMediaQuery('(max-width:900px)');
+	return (
+		<>
+			<div
+				style={{
+					position: 'fixed',
+					right: '11px',
+					bottom: mediaIsMobile ? '130px' : '45px',
+					display: 'flex',
+					flexDirection: 'column',
+					gap: '5px',
+					zIndex: 1000,
+				}}
+			>
+				<MlFollowGps {...props} />
+			</div>
+		</>
+	);
+};
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};
 ExampleConfig.args = {
-	followUserPosition: false
+	followUserPosition: false,
 };

package/src/components/MlFollowGps/MlFollowGps.tsx

@@ -2,11 +2,11 @@ import React, { useRef, useEffect, useState, useCallback, useMemo } from "react"
 import useMap from "../../hooks/useMap";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 
-import { Button, SxProps } from "@mui/material";
-import GpsFixedIcon from "@mui/icons-material/GpsFixed";
+import { Button } from '@mui/material';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 
-import { point, circle, lineArc, Feature, Point } from "@turf/turf";
-import { CircleLayerSpecification, FillLayerSpecification } from "maplibre-gl";
+import { point, circle, lineArc, Feature, Point } from '@turf/turf';
+import { CircleLayerSpecification, FillLayerSpecification } from 'maplibre-gl';
 
 interface MlFollowGpsProps {
 	/**
@@ -47,13 +47,13 @@ interface MlFollowGpsProps {
 	 * Use any available paint prop from layer type "fill".
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
 	 */
-	orientationConePaint?: FillLayerSpecification["paint"];
+	orientationConePaint?: FillLayerSpecification['paint'];
 	/**
 	 * Position circle paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the position circle.
 	 * Use any available paint prop from layer type "circle".
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
 	 */
-	circlePaint?: CircleLayerSpecification["paint"];
+	circlePaint?: CircleLayerSpecification['paint'];
 	/**
 	 * Active button font color
 	 */
@@ -67,11 +67,7 @@ interface MlFollowGpsProps {
 	 * Use any available paint prop from layer type "fill".
 	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
 	 */
-	accuracyPaint?: FillLayerSpecification["paint"];
-	/**
-	 * CSS style object that is applied to the button component
-	 */
-	buttonSx?: SxProps | any;
+	accuracyPaint?: FillLayerSpecification['paint'];
 }
 
 /**
@@ -93,7 +89,7 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 	const initiallyCentered = useRef(false);
 
 	const getLocationSuccess = useCallback(
-		(pos:GeolocationPosition) => {
+		(pos: GeolocationPosition) => {
 			if (!mapHook.map) return;
 
 			if ((!props.centerUserPosition && !initiallyCentered.current) || props.centerUserPosition) {
@@ -119,7 +115,7 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 	);
 
 	const getLocationError = () => {
-		console.log("Access of user location denied");
+		console.log('Access of user location denied');
 		setLocationAccessDenied(true);
 	};
 
@@ -138,16 +134,18 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 		return copy;
 	}, [deviceOrientation, userLocationGeoJson]);
 
-	const handleOrientation = (event: any) => {
-		setDeviceOrientation(-event.alpha);
+	const handleOrientation = (event: DeviceOrientationEvent) => {
+		if (event?.alpha) {
+			setDeviceOrientation(-event.alpha);
+		}
 	};
 
 	useEffect(() => {
 		if (isFollowed) {
 			const _handleOrientation = handleOrientation;
-			window.addEventListener("deviceorientation", _handleOrientation);
+			window.addEventListener('deviceorientation', _handleOrientation);
 			return () => {
-				window.removeEventListener("deviceorientation", _handleOrientation);
+				window.removeEventListener('deviceorientation', _handleOrientation);
 			};
 		} else {
 			initiallyCentered.current = false;
@@ -173,10 +171,10 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 			{isFollowed && userLocationGeoJson && (
 				<MlGeoJsonLayer
 					geojson={accuracyGeoJson}
-					type={"fill"}
+					type={'fill'}
 					paint={{
-						"fill-color": "#cbd300",
-						"fill-opacity": 0.3,
+						'fill-color': '#cbd300',
+						'fill-opacity': 0.3,
 						...props.accuracyPaint,
 					}}
 					insertBeforeLayer={props.insertBeforeLayer}
@@ -186,11 +184,11 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 			{isFollowed && orientationCone && (
 				<MlGeoJsonLayer
 					geojson={orientationCone}
-					type={"fill"}
+					type={'fill'}
 					paint={{
-						"fill-color": "#0000ff",
-						"fill-antialias": false,
-						"fill-opacity": 0.3,
+						'fill-color': '#0000ff',
+						'fill-antialias': false,
+						'fill-opacity': 0.3,
 						...props.orientationConePaint,
 					}}
 					insertBeforeLayer={props.insertBeforeLayer}
@@ -200,12 +198,12 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 			{isFollowed && userLocationGeoJson && (
 				<MlGeoJsonLayer
 					geojson={userLocationGeoJson}
-					type={"circle"}
+					type={'circle'}
 					paint={{
-						"circle-color": "#009ee0",
-						"circle-radius": 5,
-						"circle-stroke-color": "#fafaff",
-						"circle-stroke-width": 1,
+						'circle-color': '#009ee0',
+						'circle-radius': 5,
+						'circle-stroke-color': '#fafaff',
+						'circle-stroke-width': 1,
 						...props.circlePaint,
 					}}
 					insertBeforeLayer={props.insertBeforeLayer}
@@ -213,20 +211,17 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 			)}
 
 			<Button
+				variant="navtools"
 				sx={{
 					zIndex: 1002,
 					color: isFollowed ? props.onColor : props.offColor,
-					...props.buttonSx,
 				}}
 				disabled={locationAccessDenied}
 				onClick={() => {
 					setIsFollowed(!isFollowed);
 				}}
 			>
-				{" "}
-				<GpsFixedIcon
-					sx={{ ...(props.buttonSx?.fontSize ? { fontSize: props.buttonSx?.fontSize } : {}) }}
-				/>{" "}
+				<GpsFixedIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
 			</Button>
 		</>
 	);
@@ -234,22 +229,8 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 
 MlFollowGps.defaultProps = {
 	mapId: undefined,
-	buttonSx: {
-		minWidth: "30px",
-		minHeight: "30px",
-		width: "30px",
-		height: "30px",
-		backgroundColor: "#414141",
-		borderRadius: "23%",
-		margin: 0.15,
-		fontSize: "1.3em",
-		":hover": {
-			backgroundColor: "#515151",
-			color: "#ececec",
-		},
-	},
-	onColor: "#ececec",
-	offColor: "#666",
+	onColor: '#ececec',
+	offColor: '#666',
 	showAccuracyCircle: true,
 	showUserLocation: true,
 	showOrientation: true,

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx

@@ -115,7 +115,7 @@ const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
 			layout: props.layout || {},
 			...props.options,
 			type: layerType as LayerSpecification['type'],
-		},
+		} as Partial<LayerSpecification>,
 		insertBeforeLayer: props.insertBeforeLayer,
 		onHover: props.onHover,
 		onClick: props.onClick,

package/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.ts

@@ -1,29 +1,35 @@
-const getDefaultPaintPropsByType:Function = (type:string, defaultPaintOverrides:any):any => {
+import { LayerSpecification, RasterLayerSpecification } from 'maplibre-gl';
+
+const getDefaultPaintPropsByType = (
+	type: string,
+	defaultPaintOverrides?: { [key: string]: unknown }
+): Exclude<LayerSpecification['paint'], RasterLayerSpecification['paint']> => {
 	switch (type) {
-		case "fill":
+		case 'fill':
 			if (defaultPaintOverrides?.fill) {
 				return defaultPaintOverrides.fill;
 			}
 			return {
-				"fill-color": "rgba(10,240,256,0.6)",
+				'fill-color': 'rgba(10,240,256,0.6)',
 			};
-		case "line":
+		case 'line':
 			if (defaultPaintOverrides?.line) {
 				return defaultPaintOverrides.line;
 			}
 			return {
-				"line-color": "rgb(203,211,2)",
-				"line-width": 5,
+				'line-color': 'rgb(203,211,2)',
+				'line-width': 5,
+				'line-blur': 0,
 			};
-		case "circle":
+		case 'circle':
 		default:
 			if (defaultPaintOverrides?.circle) {
 				return defaultPaintOverrides.circle;
 			}
 			return {
-				"circle-color": "rgba(10,240,256,0.8)",
-				"circle-stroke-color": "#fff",
-				"circle-stroke-width": 2,
+				'circle-color': 'rgba(10,240,256,0.8)',
+				'circle-stroke-color': '#fff',
+				'circle-stroke-width': 2,
 			};
 	}
 };

package/src/components/MlGpxViewer/MlGpxViewer.stories.tsx

@@ -47,8 +47,8 @@ const Template = () => {
 
 	return (
 		<>
-		<MlGpxViewerInstructions open={guide} />
-		<MlGpxDemoLoader open={demoLoaderOpen} setOpen={setDemoLoaderOpen} setGpx={setGpxData} />
+			<MlGpxViewerInstructions open={guide} />
+			<MlGpxDemoLoader open={demoLoaderOpen} setOpen={setDemoLoaderOpen} setGpx={setGpxData} />
 			<TopToolbar appBarStyle={{ zIndex: 500 }}>
 				<Button variant="contained" onClick={handleClick2} sx={{ marginRight: '10px' }}>
 					Guide me through
@@ -57,8 +57,7 @@ const Template = () => {
 					Demo Mode
 				</Button>
 			</TopToolbar>
-			
-			
+
 			<div
 				style={{
 					position: 'fixed',
@@ -73,12 +72,7 @@ const Template = () => {
 				<UploadButton
 					setData={setGpxData}
 					buttonComponent={
-						<IconButton
-							style={{
-								backgroundColor: 'rgba(255,255,255,1)',
-							}}
-							size="large"
-						>
+						<IconButton size="large">
 							<FileCopy />
 						</IconButton>
 					}
@@ -87,9 +81,6 @@ const Template = () => {
 					onClick={() => {
 						setMetadataDrawerOpen((prevState) => !prevState);
 					}}
-					style={{
-						backgroundColor: 'rgba(255,255,255,1)',
-					}}
 					size="large"
 				>
 					<InfoIcon />

package/src/components/MlGpxViewer/util/MlGpxDemoLoader.tsx

@@ -19,6 +19,7 @@ const modalStyle = {
 	width: 350,
 	height: 280,
 	bgcolor: 'background.paper',
+	color: 'text.primary',
 	boxShadow: 24,
 	p: 4,
 };
@@ -30,6 +31,7 @@ const mobileStyle = {
 	width: 200,
 	height: 300,
 	bgcolor: 'background.paper',
+	color: 'text.primary',
 	boxShadow: 24,
 	p: 4,
 };
@@ -101,7 +103,7 @@ const MlGpxDemoLoader = (props: MlGpxDemoLoaderProps) => {
 						</Grid>
 						<Grid item xs={2}>
 							<Button onClick={handleClose}>
-								<CloseIcon sx={{ color: 'black' }} />
+								<CloseIcon sx={{ color: 'text.primary' }} />
 							</Button>
 						</Grid>
 					</Grid>

package/src/components/MlNavigationTools/MlNavigationTools.stories.js

@@ -7,7 +7,7 @@ import BuildIcon from "@mui/icons-material/Build";
 import Button from "@mui/material/Button";
 
 const storyoptions = {
-	title: "MapComponents/MlNavigationTools",
+	title: 'MapComponents/MlNavigationTools',
 	component: MlNavigationTools,
 	argTypes: {
 		url: {},
@@ -18,7 +18,6 @@ const storyoptions = {
 export default storyoptions;
 
 const Template = (args) => <MlNavigationTools {...args} />;
-
 export const DefaultConfig = Template.bind({});
 DefaultConfig.parameters = {};
 DefaultConfig.args = {};
@@ -39,7 +38,7 @@ ShowCenterLocationButton.args = {
 export const AlterToolPosition = Template.bind({});
 AlterToolPosition.parameters = {};
 AlterToolPosition.args = {
-	sx: { top: "10px", right: "5px" },
+	sx: { top: '10px', right: '5px' },
 };
 
 export const NoZoomButtons = Template.bind({});
@@ -58,8 +57,8 @@ export const CustomButton = Template.bind({});
 CustomButton.parameters = {};
 CustomButton.args = {
 	children: (
-		<Button onClick={() => {}}>
-			<BuildIcon sx={{ fontSize: "1em" }} />
+		<Button variant="navtools" onClick={() => {}}>
+			<BuildIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
 		</Button>
 	),
 };

package/src/components/MlNavigationTools/MlNavigationTools.tsx

@@ -46,11 +46,16 @@ interface MlNavigationToolsProps {
 	 * Style attribute for NavigationTools container
 	 */
 	sx?: SxProps;
+	/**
+	 * Style attribute for NavigationTools container
+	 */
+	mediaIsMobile?: boolean;
 }
 
 /**
  * @component
  */
+
 const MlNavigationTools = (props: MlNavigationToolsProps) => {
 	const mapHook = useMap({
 		mapId: props.mapId,
@@ -58,32 +63,13 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
 	});
 
 	const [pitch, setPitch] = useState(0);
-	const mediaIsMobile = useMediaQuery("(max-width:900px)");
-	const buttonStyle = {
-		minWidth: "20px",
-		minHeight: "20px",
-		width: mediaIsMobile ? "50px" : "30px",
-		height: mediaIsMobile ? "50px" : "30px",
-		backgroundColor: "#414141",
-		borderRadius: "23%",
-		//border: "1px solid #bbb",
-		//boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
-		margin: 0.15,
-		fontSize: mediaIsMobile ? "1.4em" : "1.2em",
-		":hover": {
-			backgroundColor: "#515151",
-		},
-		color: "#ececec",
-	};
-	const iconStyle = {
-		fontSize: buttonStyle.fontSize,
-	};
+	const mediaIsMobile = useMediaQuery('(max-width:900px)');
 
 	useEffect(() => {
 		if (!mapHook.map) return;
 
 		mapHook.map.on(
-			"pitchend",
+			'pitchend',
 			() => {
 				if (!mapHook.map) return;
 
@@ -124,63 +110,53 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
 		<Box
 			sx={{
 				zIndex: 501,
-				position: "absolute",
-				display: "flex",
-				flexDirection: "column",
-				...(mediaIsMobile ? { margin: "20px 10px 20px 10px" } : {}),
+				position: 'absolute',
+				display: 'flex',
+				flexDirection: 'column',
+				...(mediaIsMobile ? { margin: '20px 10px 20px 10px' } : {}),
 				...props.sx,
 			}}
 		>
 			<MlNavigationCompass
 				style={{
-					width: "31px",
-					position: "relative",
-					height: mediaIsMobile ? "55px" : "45px",
-					marginLeft: mediaIsMobile ? "3px" : "-5px",
-					transform: mediaIsMobile ? "scale(1.6)" : "scale(1)",
+					width: '31px',
+					position: 'relative',
+					height: mediaIsMobile ? '55px' : '45px',
+					marginLeft: mediaIsMobile ? '3px' : '-5px',
+					transform: mediaIsMobile ? 'scale(1.6)' : 'scale(1)',
 				}}
 				backgroundStyle={{
-					boxShadow: "0px 0px 18px rgba(0,0,0,.5)",
+					boxShadow: '0px 0px 18px rgba(0,0,0,.5)',
 				}}
 			/>
 			{props.show3DButton && (
-				<Button
-					sx={{ ...buttonStyle, fontSize: mediaIsMobile ? "1.4em" : "1em", fontWeight: 600 }}
-					onClick={adjustPitch}
-				>
-					{pitch ? "2D" : "3D"}
+				<Button variant="navtools" onClick={adjustPitch}>
+					{pitch ? '2D' : '3D'}
 				</Button>
 			)}
-			{props.showFollowGpsButton && (
-				<MlFollowGps buttonSx={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
-			)}
-			{props.showCenterLocationButton && (
-				<MlCenterPosition style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
-			)}
+			{props.showFollowGpsButton && <MlFollowGps />}
+			{props.showCenterLocationButton && <MlCenterPosition />}
 			<ButtonGroup
 				orientation="vertical"
 				sx={{
-					width: "50px",
-					border: "none",
-					Button: { minWidth: "20px !important", border: "none", padding: 0 },
-					"Button:hover": { border: "none" },
+					width: '50px',
+					border: 'none',
+					Button: { minWidth: '20px !important', border: 'none', padding: 0 },
+					'Button:hover': { border: 'none' },
 				}}
 			>
 				{props.showZoomButtons && (
 					<>
-						<Button sx={{ ...buttonStyle }} onClick={zoomIn}>
-							<ControlPointIcon sx={{ ...iconStyle }} />
+						<Button variant="navtools" onClick={zoomIn}>
+							<ControlPointIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
 						</Button>
-						<Button sx={{ ...buttonStyle }} onClick={zoomOut}>
-							<RemoveCircleOutlineIcon sx={{ ...iconStyle }} />
+						<Button variant="navtools" onClick={zoomOut}>
+							<RemoveCircleOutlineIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
 						</Button>
 					</>
 				)}
 			</ButtonGroup>
-			{props.children &&
-				React.cloneElement(props.children, {
-					sx: { ...buttonStyle },
-				})}
+			{props.children && React.cloneElement(props.children, {})}
 		</Box>
 	);
 };

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 {