@mapcomponents/react-maplibre 0.1.66 → 0.1.68

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) => {
+		(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);
 	};
 
@@ -127,27 +123,29 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 		if (!userLocationGeoJson) {
 			return undefined;
 		}
-		let radius = 0.02;
-		let bearing1 = deviceOrientation - 15;
-		let bearing2 = deviceOrientation + 15;
+		const radius = 0.02;
+		const bearing1 = deviceOrientation - 15;
+		const bearing2 = deviceOrientation + 15;
 		const options = { steps: 65 };
-		let arc = lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);
-		let copy = arc;
+		const arc = lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);
+		const copy = arc;
 		copy.geometry.coordinates.push(userLocationGeoJson.geometry.coordinates);
 		copy.geometry.coordinates.slice(0, 0);
 		return copy;
 	}, [deviceOrientation, userLocationGeoJson]);
 
-	const handleOrientation = (event: any) => {
-		setDeviceOrientation(-event.alpha);
+	const handleOrientation = (event: DeviceOrientationEvent) => {
+		if (event?.alpha) {
+			setDeviceOrientation(-event.alpha);
+		}
 	};
 
 	useEffect(() => {
 		if (isFollowed) {
-			let _handleOrientation = handleOrientation;
-			window.addEventListener("deviceorientation", _handleOrientation);
+			const _handleOrientation = handleOrientation;
+			window.addEventListener('deviceorientation', _handleOrientation);
 			return () => {
-				window.removeEventListener("deviceorientation", _handleOrientation);
+				window.removeEventListener('deviceorientation', _handleOrientation);
 			};
 		} else {
 			initiallyCentered.current = false;
@@ -159,7 +157,7 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
 		if (!mapHook.map) return;
 
 		if (isFollowed) {
-			let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
+			const _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
 
 			return () => {
 				navigator.geolocation.clearWatch(_watchId);
@@ -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/MlLayerMagnify/MlLayerMagnify.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useCallback, useRef, useEffect, useState, useMemo }
 // @ts-ignore
 import syncMove from '@mapbox/mapbox-gl-sync-move';
 import './style.css';
-import MapContext from '../../contexts/MapContext';
+import MapContext, { MapContextType } from '../../contexts/MapContext';
 
 export interface MlLayerMagnifyProps {
 	/**
@@ -34,10 +34,10 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 	const syncMoveInitializedRef = useRef(false);
 	const syncCleanupFunctionRef = useRef(() => {});
 
-	const [swipeX, setSwipeX] = useState('50');
-	const swipeXRef = useRef('50');
-	const [swipeY, setSwipeY] = useState('50');
-	const swipeYRef = useRef('50');
+	const [swipeX, setSwipeX] = useState(50);
+	const swipeXRef = useRef(50);
+	const [swipeY, setSwipeY] = useState(50);
+	const swipeYRef = useRef(50);
 
 	const magnifierRadius = useMemo(() => {
 		return props.magnifierRadius || 200;
@@ -60,7 +60,7 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 		onMove({
 			clientX: swipeXRef.current,
 			clientY: swipeYRef.current,
-		});
+		} as (TouchEvent & MouseEvent));
 	});
 
 	useEffect(() => {
@@ -74,25 +74,25 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 	}, []);
 
 	const onMove = useCallback(
-		(e) => {
+		(e:(TouchEvent & MouseEvent)) => {
 			if (!mapExists()) return;
 
 			const bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
 			let clientX =
-				e.clientX ||
-				(typeof e.touches !== 'undefined' && typeof e.touches[0] !== 'undefined'
-					? e.touches[0].clientX
+				e?.clientX ||
+				(typeof e?.touches !== 'undefined' && typeof e?.touches[0] !== 'undefined'
+					? e?.touches[0].clientX
 					: 0);
 			let clientY =
-				e.clientY ||
+				e?.clientY ||
 				(typeof e.touches !== 'undefined' && typeof e.touches[0] !== 'undefined'
 					? e.touches[0].clientY
 					: 0);
 
 			clientX -= bounds.x;
 			clientY -= bounds.y;
-			const swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
-			const swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
+			const swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
+			const swipeY_tmp = parseFloat(((clientY / bounds.height) * 100).toFixed(2));
 
 			if (swipeXRef.current !== swipeX_tmp || swipeYRef.current !== swipeY_tmp) {
 				setSwipeX(swipeX_tmp);
@@ -102,9 +102,9 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 
 				mapContext.maps[props.map2Id].getContainer().style.clipPath =
 					`circle(${magnifierRadius}px at ` +
-					(parseFloat(swipeXRef.current) * bounds.width) / 100 +
+					(swipeXRef.current * bounds.width) / 100 +
 					'px ' +
-					(parseFloat(swipeYRef.current) * bounds.height) / 100 +
+					(swipeYRef.current * bounds.height) / 100 +
 					'px)';
 			}
 		},
@@ -120,6 +120,10 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 			mapContext.getMap(props.map2Id).map
 		);
 
+		onMove({
+			clientX: swipeXRef.current,
+			clientY: swipeYRef.current,
+		} as (TouchEvent & MouseEvent));
 		/*
 		automatically adjust radius for small screens
 		if (
@@ -150,7 +154,7 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 		onMove({
 			clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2,
 			clientY: mapContext.maps[props.map1Id].getCanvas().clientHeight / 2,
-		});
+		} as (TouchEvent & MouseEvent));
 	}, [mapContext.mapIds, mapContext, mapExists, props, onMove]);
 
 	const onDown = (e: React.MouseEvent | React.TouchEvent) => {
@@ -175,7 +179,7 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
 
 	const onWheel = (e: React.WheelEvent) => {
 		const evCopy = new WheelEvent(e.type, e as unknown as WheelEventInit);
-		mapContext.map.getCanvas().dispatchEvent(evCopy);
+		mapContext.map?.map.getCanvas().dispatchEvent(evCopy);
 	};
 
 	return (

package/src/components/MlLayerSwipe/MlLayerSwipe.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useCallback, useRef, useEffect, useState } from 'rea
 // @ts-ignore
 import syncMove from '@mapbox/mapbox-gl-sync-move';
 import './style.css';
-import MapContext from '../../contexts/MapContext';
+import MapContext, { MapContextType } from '../../contexts/MapContext';
 
 export interface MlLayerSwipeProps {
 	/**
@@ -48,7 +48,7 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
 	};
 
 	const onMove = useCallback(
-		(e) => {
+		(e:(TouchEvent & MouseEvent)) => {
 			if (!mapExists()) return;
 
 			const bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
@@ -87,7 +87,7 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) => {
 		);
 		onMove({
 			clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2,
-		});
+		} as (TouchEvent & MouseEvent));
 	}, [mapContext.mapIds, mapContext, props, onMove, mapExists]);
 
 	const onDown = (e: React.MouseEvent | React.TouchEvent) => {

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>
 	);
 };