@mapcomponents/react-maplibre 1.1.0-1 → 1.2.0

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import React__default, { useMemo, useEffect, useCallback, useState, useRef, useC
 import { createTheme, ThemeProvider, styled as styled$2, useTheme } from '@mui/material/styles';
 import { v4 } from 'uuid';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { Button, CircularProgress, useMediaQuery, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, styled, List, ListItem, ListItemIcon, IconButton, Checkbox, ListItemText, Grid, Paper, Box as Box$1, Typography, TextField, Slider, Drawer, Tooltip, Snackbar, DialogTitle as DialogTitle$1, DialogActions as DialogActions$1, ListItemButton, ListItemAvatar, Avatar, DialogContent as DialogContent$1, OutlinedInput, Accordion, AccordionSummary, Dialog as Dialog$1 } from '@mui/material';
+import { Button, CircularProgress, useMediaQuery, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, styled, List, ListItem, ListItemIcon, IconButton, Checkbox, ListItemText, Grid, Paper, Box as Box$1, Typography, TextField, Slider, Drawer, SwipeableDrawer, Tooltip, Snackbar, DialogTitle as DialogTitle$1, DialogActions as DialogActions$1, ListItemButton, ListItemAvatar, Avatar, DialogContent as DialogContent$1, OutlinedInput, Accordion, AccordionSummary, Dialog as Dialog$1 } from '@mui/material';
 import FilterCenterFocusIcon from '@mui/icons-material/FilterCenterFocus';
 import PrinterIcon from '@mui/icons-material/Print';
 import Button$1 from '@mui/material/Button';
@@ -20,10 +20,12 @@ import Box$2 from '@mui/material/Box';
 import Grid$1 from '@mui/material/Grid';
 import PolylineIcon from '@mui/icons-material/Polyline';
 import PentagonIcon from '@mui/icons-material/Pentagon';
-import { ExpandMore, KeyboardArrowRight, Tune, Delete, ExpandLess, ArrowCircleDown, ArrowCircleUp, CenterFocusWeak } from '@mui/icons-material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import TuneIcon from '@mui/icons-material/Tune';
 import { styled as styled$1, Box } from '@mui/system';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { ChromePicker } from 'react-color';
-import TuneIcon from '@mui/icons-material/Tune';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
@@ -34,8 +36,6 @@ import { CSS } from '@dnd-kit/utilities';
 import CloseIcon from '@mui/icons-material/Close';
 import useMediaQuery$1 from '@mui/material/useMediaQuery';
 import { Global } from '@emotion/react';
-import { Typography as Typography$1, SwipeableDrawer } from '@mui/material/';
-import DeleteIcon from '@mui/icons-material/Delete';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import ControlPointIcon from '@mui/icons-material/ControlPoint';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
@@ -43,7 +43,6 @@ import Divider from '@mui/material/Divider';
 import syncMove from '@mapbox/mapbox-gl-sync-move';
 import Paper$1 from '@mui/material/Paper';
 import * as xmldom from '@xmldom/xmldom';
-import PropTypes from 'prop-types';
 import { featureCollection as featureCollection$1, lineString, polygon } from '@turf/helpers';
 import WMSCapabilities from 'wms-capabilities';
 import InfoIcon from '@mui/icons-material/Info';
@@ -64,6 +63,9 @@ import osm2geojson from 'osm2geojson-lite';
 import { feature } from 'topojson-client';
 import * as externParser from '@tmcw/togeojson';
 import * as d3 from 'd3';
+import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown';
+import ArrowCircleUpIcon from '@mui/icons-material/ArrowCircleUp';
+import CenterFocusWeakIcon from '@mui/icons-material/CenterFocusWeak';
 import { useSensor, PointerSensor, MouseSensor, useSensors, DndContext, closestCenter } from '@dnd-kit/core';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
@@ -86,6 +88,7 @@ import DesignServicesIcon from '@mui/icons-material/DesignServices';
 import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 import { useSelector, useDispatch } from 'react-redux';
 import { createSlice, configureStore } from '@reduxjs/toolkit';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2920,7 +2923,7 @@ var MlFollowGps = function (props) {
         isFollowed && userLocationGeoJson && (React__default.createElement(MlGeoJsonLayer, { geojson: accuracyGeoJson, type: 'fill', paint: __assign({ 'fill-color': '#cbd300', 'fill-opacity': 0.3 }, props.accuracyPaint), insertBeforeLayer: props.insertBeforeLayer })),
         isFollowed && orientationCone && (React__default.createElement(MlGeoJsonLayer, { geojson: orientationCone, type: 'fill', paint: __assign({ 'fill-color': '#0000ff', 'fill-antialias': false, 'fill-opacity': 0.3 }, props.orientationConePaint), insertBeforeLayer: props.insertBeforeLayer })),
         isFollowed && userLocationGeoJson && (React__default.createElement(MlGeoJsonLayer, { geojson: userLocationGeoJson, type: 'circle', paint: __assign({ 'circle-color': '#009ee0', 'circle-radius': 5, 'circle-stroke-color': '#fafaff', 'circle-stroke-width': 1 }, props.circlePaint), insertBeforeLayer: props.insertBeforeLayer })),
-        React__default.createElement(Button, { variant: "navtools", sx: {
+        React__default.createElement(Button, { variant: "navtools", "data-testid": "mlFollowGpsBtn", sx: {
                 zIndex: 1002,
                 color: isFollowed
                     ? function (theme) { return theme.palette.GPS.GPSActiveColor; }
@@ -3161,7 +3164,7 @@ function LayerListFolder(_a) {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(ListItemStyled$2, null,
             React__default.createElement(ListItemIconStyled$1, null,
-                React__default.createElement(IconButtonStyled$2, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMore, null) : React__default.createElement(KeyboardArrowRight, null)),
+                React__default.createElement(IconButtonStyled$2, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMoreIcon, null) : React__default.createElement(ExpandLessIcon, null)),
                 React__default.createElement(CheckboxStyled$1, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, onClick: function () {
                         if (setVisible) {
                             setVisible(function (val) { return !val; });
@@ -3189,7 +3192,7 @@ var ColorPicker = function (_a) {
     var value = (props === null || props === void 0 ? void 0 : props.value) || '';
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Grid, { container: true, sx: { flexWrap: 'nowrap' } },
-            React__default.createElement(Grid, { xs: 12, item: true },
+            React__default.createElement(Grid, { size: 12 },
                 React__default.createElement(Button, { variant: "outlined", onClick: function () { return setShowPicker(true); }, sx: {
                         minWidth: '100%',
                         padding: '5px',
@@ -3434,7 +3437,8 @@ function LayerListItem(_a) {
     var deletedRef = useRef(false);
     var visibleRef = useRef(visible);
     // this state variable is used for layer components that provide a paint attribute
-    var _u = useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) || ((_d = (_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.paint) ||
+    var _u = useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) ||
+        ((_d = (_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.paint) ||
         getDefaultPaintPropsByType(((_e = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _e === void 0 ? void 0 : _e.type) || getDefaulLayerTypeByGeometry(layerComponent.props.geojson))), paintProps = _u[0], setPaintProps = _u[1];
     var _visible = useMemo(function () {
         if (!visible) {
@@ -3490,7 +3494,7 @@ function LayerListItem(_a) {
                         layout: {
                             visibility: _visible ? 'visible' : 'none',
                         },
-                        options: __assign(__assign({}, (_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.options), (setLayerState ? {} : { paint: paintProps }))
+                        options: __assign(__assign({}, (_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.options), (setLayerState ? {} : { paint: paintProps })),
                     });
             }
         }
@@ -3514,7 +3518,7 @@ function LayerListItem(_a) {
                         return !current;
                     });
                 } },
-                React__default.createElement(Tune, null)))) : undefined },
+                React__default.createElement(TuneIcon, null)))) : undefined },
         React__default.createElement(CheckboxListItemIcon, null,
             React__default.createElement(CheckboxStyled, { disabled: !visible, checked: localVisible, onClick: function () {
                     setLocalVisible(function (val) { return !val; });
@@ -3522,7 +3526,7 @@ function LayerListItem(_a) {
         React__default.createElement(ListItemText, { variant: "layerlist", primary: name, secondary: description, primaryTypographyProps: { overflow: 'hidden' } })));
     return (React__default.createElement(React__default.Fragment, null,
         props.sortable && props.layerId && !((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) && (React__default.createElement(SortableContainer, { layerId: props.layerId }, listContent)),
-        !props.sortable && !((_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) && (listContent),
+        !props.sortable && !((_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) && listContent,
         _layerComponent,
         !((_l = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _l === void 0 ? void 0 : _l.layers) &&
             Object.keys(paintProps).length > 0 &&
@@ -3534,7 +3538,7 @@ function LayerListItem(_a) {
                             setShowDeletionConfirmationDialog(true);
                         }
                     } },
-                    React__default.createElement(Delete, null)),
+                    React__default.createElement(DeleteIcon, null)),
                 showDeletionConfirmationDialog && (React__default.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
                         if (typeof setLayerState === 'function') {
                             deletedRef.current = true;
@@ -3585,7 +3589,7 @@ function Sidebar(_a) {
                             lg: '350px',
                         }, boxSizing: 'border-box' }, drawerPaperProps === null || drawerPaperProps === void 0 ? void 0 : drawerPaperProps.sx) }), sx: __assign({ flexGrow: 1, zIndex: 105, position: 'absolute', bottom: 0, display: 'flex', flexDirection: 'column', maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' } }, (drawerOpen ? {} : { left: mediaIsMobile ? '-90vw' : '-20vw' })) }, props),
                 React__default.createElement(DrawerHeader, __assign({}, drawerHeaderProps),
-                    React__default.createElement(Typography$1, { variant: "h6" }, props.name),
+                    React__default.createElement(Typography, { variant: "h6" }, props.name),
                     React__default.createElement(IconButton, { onClick: setOpen
                             ? function () {
                                 setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
@@ -3632,7 +3636,7 @@ function Sidebar(_a) {
                         left: 0,
                     } },
                     React__default.createElement(Puller, null),
-                    React__default.createElement(Typography$1, { variant: "h6", sx: { p: '13px' } }, props.name)),
+                    React__default.createElement(Typography, { variant: "h6", sx: { p: '13px' } }, props.name)),
                 React__default.createElement(Paper, { sx: {
                         px: '15px',
                         pb: '15px',
@@ -3679,14 +3683,16 @@ var MlMultiMeasureTool = function (props) {
         });
     };
     useEffect(function () {
-        reload && setReload(false);
-        reload &&
+        if (reload) {
+            setReload(false);
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             measureState &&
-            setMeasureList(function (current) {
-                var newList = __spreadArray([], current, true);
-                newList.push(measureState);
-                return newList;
-            });
+                setMeasureList(function (current) {
+                    var newList = __spreadArray([], current, true);
+                    newList.push(measureState);
+                    return newList;
+                });
+        }
     }, [reload]);
     useEffect(function () {
         setMeasureState(undefined);
@@ -3696,7 +3702,7 @@ var MlMultiMeasureTool = function (props) {
             React__default.createElement(Box$2, { sx: { flexGrow: 1 } },
                 React__default.createElement("br", null),
                 React__default.createElement(Grid$1, { container: true, spacing: 4, justifyContent: "flex-start" },
-                    React__default.createElement(Grid$1, { item: true, xs: 3 },
+                    React__default.createElement(Grid$1, { size: 3 },
                         React__default.createElement(Tooltip, { title: "Measure Area" },
                             React__default.createElement(Button, { variant: "outlined", sx: {
                                     backgroundColor: selectedMode === 'polygon'
@@ -3711,7 +3717,7 @@ var MlMultiMeasureTool = function (props) {
                                     setReload(true);
                                 } },
                                 React__default.createElement(PentagonIcon, null)))),
-                    React__default.createElement(Grid$1, { item: true, xs: 3 },
+                    React__default.createElement(Grid$1, { size: 3 },
                         React__default.createElement(Tooltip, { title: "Measure Distance" },
                             React__default.createElement(Button, { variant: "outlined", sx: {
                                     backgroundColor: selectedMode === 'line'
@@ -3727,7 +3733,7 @@ var MlMultiMeasureTool = function (props) {
                                 } },
                                 React__default.createElement(PolylineIcon, null)))))),
             React__default.createElement("br", null),
-            React__default.createElement(Grid$1, { item: true, xs: 4 },
+            React__default.createElement(Grid$1, { size: 4 },
                 React__default.createElement(FormControl, null,
                     React__default.createElement(InputLabel, { id: "unit-select-label" }, "Unit"),
                     React__default.createElement(Select, { labelId: "unit-select-label", id: "unit-select", value: selectedUnit, label: "Unit", onChange: function (e) {
@@ -3799,56 +3805,24 @@ MlMultiMeasureTool.defaultProps = {
     buttonStyleOverride: {},
 };
 
-var _g;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var SvgCompassNeedle = function SvgCompassNeedle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    width: 10,
-    height: 40,
-    viewBox: "0 0 10 40",
-    fill: "none",
-    id: "svg6"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    id: "g14",
-    transform: "translate(0.67544,-1.25e-5)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "m 3.34715,4.52028 c 0.22737,-1.05154 1.72745,-1.05154 1.95482,0 L 8.64912,20 H 0 Z",
-    fill: "#cf003d"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "m 3.34715,35.4797 c 0.22737,1.0516 1.72745,1.0516 1.95482,0 L 8.64912,20 H 0 Z",
-    fill: "#d3dcf0"
-  }))));
+var CompassBackground = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, onClick = _a.onClick, style = _a.style;
+    return (React__default.createElement("svg", { width: "52", height: "53", viewBox: "0 0 52 53", fill: "none", className: className, onClick: onClick, role: title ? 'img' : 'presentation', "aria-hidden": !title, style: style },
+        title && React__default.createElement("title", null, title),
+        React__default.createElement("circle", { cx: "26.0001", cy: "26.1843", r: "24", fill: "white", stroke: "#009EE0", strokeWidth: "2" }),
+        React__default.createElement("path", { d: "M26.4915 7.59161C26.3524 8.07338 25.6698 8.07338 25.5307 7.59161L24.2998 3.3276C24.2075 3.0079 24.4474 2.68893 24.7802 2.68893H27.242C27.5748 2.68893 27.8147 3.0079 27.7224 3.3276L26.4915 7.59161Z", fill: "#009EE0" }),
+        React__default.createElement("path", { d: "M25.5085 44.7598C25.6476 44.278 26.3302 44.278 26.4693 44.7598L27.7002 49.0238C27.7925 49.3435 27.5526 49.6625 27.2198 49.6625H24.758C24.4252 49.6625 24.1853 49.3435 24.2776 49.0238L25.5085 44.7598Z", fill: "#009EE0" }),
+        React__default.createElement("path", { d: "M44.6641 26.4915C44.1823 26.3524 44.1823 25.6698 44.6641 25.5307L48.9281 24.2998C49.2478 24.2075 49.5668 24.4474 49.5668 24.7802V27.242C49.5668 27.5747 49.2478 27.8147 48.9281 27.7224L44.6641 26.4915Z", fill: "#009EE0" }),
+        React__default.createElement("path", { d: "M7.3959 25.6085C7.87766 25.7476 7.87766 26.4302 7.3959 26.5693L3.13189 27.8002C2.81218 27.8925 2.49321 27.6526 2.49321 27.3198L2.49321 24.858C2.49321 24.5253 2.81218 24.2853 3.13189 24.3776L7.3959 25.6085Z", fill: "#009EE0" })));
 };
 
-var _circle, _path$1, _path2$1, _path3, _path4;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var SvgCompassBackground = function SvgCompassBackground(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    width: 52,
-    height: 53,
-    viewBox: "0 0 52 53",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
-    cx: 26.0001,
-    cy: 26.1843,
-    r: 24,
-    fill: "white",
-    stroke: "#009EE0",
-    strokeWidth: 2
-  })), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    d: "M26.4915 7.59161C26.3524 8.07338 25.6698 8.07338 25.5307 7.59161L24.2998 3.3276C24.2075 3.0079 24.4474 2.68893 24.7802 2.68893H27.242C27.5748 2.68893 27.8147 3.0079 27.7224 3.3276L26.4915 7.59161Z",
-    fill: "#009EE0"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
-    d: "M25.5085 44.7598C25.6476 44.278 26.3302 44.278 26.4693 44.7598L27.7002 49.0238C27.7925 49.3435 27.5526 49.6625 27.2198 49.6625H24.758C24.4252 49.6625 24.1853 49.3435 24.2776 49.0238L25.5085 44.7598Z",
-    fill: "#009EE0"
-  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
-    d: "M44.6641 26.4915C44.1823 26.3524 44.1823 25.6698 44.6641 25.5307L48.9281 24.2998C49.2478 24.2075 49.5668 24.4474 49.5668 24.7802V27.242C49.5668 27.5747 49.2478 27.8147 48.9281 27.7224L44.6641 26.4915Z",
-    fill: "#009EE0"
-  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
-    d: "M7.3959 25.6085C7.87766 25.7476 7.87766 26.4302 7.3959 26.5693L3.13189 27.8002C2.81218 27.8925 2.49321 27.6526 2.49321 27.3198L2.49321 24.858C2.49321 24.5253 2.81218 24.2853 3.13189 24.3776L7.3959 25.6085Z",
-    fill: "#009EE0"
-  })));
+var CompassNeedle = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, onClick = _a.onClick, style = _a.style;
+    return (React__default.createElement("svg", { width: "10", height: "40", viewBox: "0 0 10 40", fill: "none", className: className, onClick: onClick, role: title ? 'img' : 'presentation', "aria-hidden": !title, style: style },
+        title && React__default.createElement("title", null, title),
+        React__default.createElement("g", { transform: "translate(0.67544,-1.25e-5)" },
+            React__default.createElement("path", { d: "m 3.34715,4.52028 c 0.22737,-1.05154 1.72745,-1.05154 1.95482,0 L 8.64912,20 H 0 Z", fill: "#cf003d" }),
+            React__default.createElement("path", { d: "m 3.34715,35.4797 c 0.22737,1.0516 1.72745,1.0516 1.95482,0 L 8.64912,20 H 0 Z", fill: "#d3dcf0" }))));
 };
 
 var BoxStyled$2 = styled(Box$1)(function (_a) {
@@ -3954,9 +3928,9 @@ var MlNavigationCompass = function (props) {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(BoxStyled$2, { sx: __assign({}, props.style) },
             React__default.createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
-                React__default.createElement(SvgCompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
+                React__default.createElement(CompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
                 React__default.createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
-                    React__default.createElement(SvgCompassNeedle, { style: {
+                    React__default.createElement(CompassNeedle, { style: {
                             transform: 'rotate(' + (bearing > 0 ? '-' + bearing : -1 * bearing) + 'deg)',
                         } }))))));
 };
@@ -3984,16 +3958,12 @@ var MlNavigationTools = function (props) {
     var zoomIn = useCallback(function () {
         if (!mapHook.map)
             return;
-        if (mapHook.map.transform.zoom + 0.5 <= mapHook.map.transform.maxZoom) {
-            mapHook.map.easeTo({ zoom: mapHook.map.transform.zoom + 0.5 });
-        }
+        mapHook.map.easeTo({ zoom: mapHook.map.getZoom() + 0.5 });
     }, [mapHook.map]);
     var zoomOut = useCallback(function () {
         if (!mapHook.map)
             return;
-        if (mapHook.map.transform.zoom - 0.5 >= mapHook.map.transform.minZoom) {
-            mapHook.map.easeTo({ zoom: mapHook.map.transform.zoom - 0.5 });
-        }
+        mapHook.map.easeTo({ zoom: mapHook.map.getZoom() - 0.5 });
     }, [mapHook.map]);
     var adjustPitch = useCallback(function () {
         if (!mapHook.map)
@@ -4274,20 +4244,11 @@ MlLayerMagnify.defaultProps = {
     magnifierStyle: {},
 };
 
-var _path, _path2;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SvgIcononlyarrow = function SvgIcononlyarrow(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 47 30",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    d: "M29.5 21.25L35.75 15L29.5 8.75V21.25Z",
-    fill: "#009EE0"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    d: "M17.5 8.75L11.25 15L17.5 21.25V8.75Z",
-    fill: "#009EE0"
-  })));
+var SwipeIcon = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, onClick = _a.onClick, style = _a.style, color = _a.color;
+    return (React__default.createElement("svg", { viewBox: "0 0 47 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, onClick: onClick, role: title ? 'img' : 'presentation', "aria-hidden": !title, style: style, color: color },
+        React__default.createElement("path", { d: "M29.5 21.25L35.75 15L29.5 8.75V21.25Z", fill: "#009EE0" }),
+        React__default.createElement("path", { d: "M17.5 8.75L11.25 15L17.5 21.25V8.75Z", fill: "#009EE0" })));
 };
 
 /**
@@ -4381,7 +4342,7 @@ var MlLayerSwipe = function (props) {
         };
     }, [mapContext]);
     return (React__default.createElement("div", { style: __assign({ position: 'absolute', left: swipeX + '%', top: '50%', borderRadius: '50%', width: '65px', height: '65px', background: 'rgba(234, 235, 241, 0.75)', border: '2px solid rgba(0, 158, 224, 0.75)', cursor: 'pointer', zIndex: '110', marginLeft: '-35px', marginTop: '-50px', textAlign: 'center', lineHeight: '91px', fontSize: '2em', color: '#fafafa', userSelect: 'none' }, props.buttonStyle), onTouchStart: onDown, onMouseDown: onDown },
-        React__default.createElement(SvgIcononlyarrow, { color: "#0066ff", style: {
+        React__default.createElement(SwipeIcon, { color: "#0066ff", style: {
                 width: '65px',
                 height: '65px',
                 justifyContent: 'center',
@@ -5568,12 +5529,6 @@ var MlShareMapState = function (props) {
 MlShareMapState.defaultProps = {
     mapId: undefined,
 };
-MlShareMapState.propTypes = {
-    /**
-     * Id of the target MapLibre instance in mapContext
-     */
-    mapId: PropTypes.string,
-};
 
 function getElevationData(_geojsonInfo, elevationFactor) {
     var createStep = function (x, y, z, x2, y2) {
@@ -5919,12 +5874,6 @@ var MlWmsFeatureInfoPopup = function (props) {
 MlWmsFeatureInfoPopup.defaultProps = {
     mapId: undefined,
 };
-MlWmsFeatureInfoPopup.propTypes = {
-    /**
-     * Id of the target MapLibre instance in mapContext
-     */
-    mapId: PropTypes.string,
-};
 
 var defaultProps = {
     visible: true,
@@ -6036,51 +5985,6 @@ var MlWmsLayer = function (props) {
     return React__default.createElement(React__default.Fragment, null);
 };
 MlWmsLayer.defaultProps = __assign({}, defaultProps);
-MlWmsLayer.propTypes = {
-    /**
-     * WMS URL
-     */
-    url: PropTypes.string.isRequired,
-    /**
-     * URL query parameters that will be added to the WMS URL. A layers property (string) is mandatory. Any value defined on this attribute will extend the default object.
-     */
-    urlParameters: PropTypes.shape({
-        layers: PropTypes.string.isRequired,
-        bbox: PropTypes.string,
-        format: PropTypes.string,
-        service: PropTypes.string,
-        version: PropTypes.string,
-        request: PropTypes.string,
-        srs: PropTypes.string,
-        width: PropTypes.number,
-        height: PropTypes.number,
-    }),
-    /**
-     * Id of the target MapLibre instance in mapContext
-     */
-    mapId: PropTypes.string,
-    /**
-     * MapLibre attribution shown in the bottom right of the map, if this layer is visible
-     */
-    attribution: PropTypes.string,
-    /**
-     * Object that is passed to the MapLibre.addLayer call as config option parameter
-     */
-    layerOptions: PropTypes.object,
-    /**
-     * Object that is passed to the MapLibre.addSource call as config option parameter
-     */
-    sourceOptions: PropTypes.object,
-    /**
-     * Id of an existing layer in the mapLibre instance to help specify the layer order
-     * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-     */
-    insertBeforeLayer: PropTypes.string,
-    /**
-     * Sets layer "visibility" property to "visible" if true or "none" if false
-     */
-    visible: PropTypes.bool,
-};
 
 function useWms(props) {
     // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
@@ -6392,7 +6296,7 @@ var MlWmsLoader = function (props) {
                     }
                 }, disabled: !(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) },
                 React__default.createElement(InfoIcon, null))),
-            React__default.createElement(IconButton$1, { edge: props.showDeleteButton ? false : 'end', sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})), "aria-label": "open", onClick: function () { return setOpen(function (current) { return !current; }); } }, open ? React__default.createElement(ExpandLess, null) : React__default.createElement(ExpandMore, null)),
+            React__default.createElement(IconButton$1, { edge: props.showDeleteButton ? false : 'end', sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})), "aria-label": "open", onClick: function () { return setOpen(function (current) { return !current; }); } }, open ? React__default.createElement(ExpandLessIcon, null) : React__default.createElement(ExpandMoreIcon, null)),
             props.showDeleteButton && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(IconButton$1, { "aria-label": "delete", edge: "end", onClick: function () {
                         if (typeof props.onConfigChange === 'function') {
@@ -6756,9 +6660,8 @@ function TemporalControllerPlayer(props) {
                 flexShrink: 0,
                 '& .MuiDrawer-paper': mediaIsMobile ? mobileScreenBoxStyle : bigScreenBoxStyle,
             } },
-            React__default.createElement(Grid, { container: true },
-                mediaIsMobile ? React__default.createElement(React__default.Fragment, null) : React__default.createElement(Grid, { item: true, xs: 3 }),
-                React__default.createElement(Grid, { item: true, xs: mediaIsMobile ? 12 : 6, textAlign: "center" },
+            React__default.createElement(Grid, { container: true, alignItems: "center", justifyContent: "space-between" },
+                React__default.createElement(Grid, { item: true, xs: 12, sm: 10, textAlign: "center" },
                     React__default.createElement(Button, { onClick: handleFastRewind },
                         React__default.createElement(FastRewindIcon, null)),
                     React__default.createElement(Button, { onClick: handleStop },
@@ -6766,8 +6669,11 @@ function TemporalControllerPlayer(props) {
                     React__default.createElement(Button, { onClick: handlePlayPause }, isPlaying ? React__default.createElement(PauseIcon, null) : React__default.createElement(PlayArrowIcon, null)),
                     React__default.createElement(Button, { onClick: handleFastForward },
                         React__default.createElement(FastForwardIcon, null))),
-                props.display && !mediaIsMobile && (React__default.createElement(Grid, { item: true, xs: 3 },
-                    React__default.createElement(Typography, { variant: 'h5', textAlign: 'right', sx: { paddingRight: '25px' } }, Math.floor(currentVal))))),
+                props.display && !mediaIsMobile && (
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                React__default.createElement(Grid, { item: true, xs: 12, sm: 5, textAlign: "right" },
+                    React__default.createElement(Typography, { variant: 'h5', sx: { paddingRight: '25px' } }, Math.floor(currentVal))))),
             React__default.createElement(Slider, { sx: {
                     position: 'flex',
                     width: '95%',
@@ -7771,9 +7677,6 @@ var SimpleDataProvider = function (props) {
     };
     return (React__default.createElement(SimpleDataContextProvider, { value: value }, props.children));
 };
-SimpleDataProvider.propTypes = {
-    children: PropTypes.node.isRequired,
-};
 
 var IconButtonStyled$1 = styled(IconButton)({
     padding: '4px',
@@ -7881,13 +7784,13 @@ function LayerListItemFactory(props) {
                                     React__default.createElement(IconButtonStyled$1, { disabled: idx === layers.length - 1, onClick: function () {
                                             layerContext.moveDown(layer.id || '');
                                         } },
-                                        React__default.createElement(ArrowCircleDown, null)),
+                                        React__default.createElement(ArrowCircleDownIcon, null)),
                                     React__default.createElement(IconButtonStyled$1, { disabled: idx === 0, onClick: function () {
                                             layerContext.moveUp(layer.id || '');
                                         } },
-                                        React__default.createElement(ArrowCircleUp, null)),
+                                        React__default.createElement(ArrowCircleUpIcon, null)),
                                     React__default.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
-                                        React__default.createElement(CenterFocusWeak, null))), setLayerState: function (layerConfig) {
+                                        React__default.createElement(CenterFocusWeakIcon, null))), setLayerState: function (layerConfig) {
                                     return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                         var _layers = __spreadArray([], current, true);
                                         if (layerConfig === false) {
@@ -7927,26 +7830,26 @@ function LayerListItemFactory(props) {
                                         React__default.createElement(IconButtonStyled$1, { disabled: idx === layers.length - 1, onClick: function () {
                                                 layerContext.moveDown(layer.id || '');
                                             } },
-                                            React__default.createElement(ArrowCircleDown, null)),
+                                            React__default.createElement(ArrowCircleDownIcon, null)),
                                         React__default.createElement(IconButtonStyled$1, { disabled: idx === 0, onClick: function () {
                                                 layerContext.moveUp(layer.id || '');
                                             } },
-                                            React__default.createElement(ArrowCircleUp, null)),
+                                            React__default.createElement(ArrowCircleUpIcon, null)),
                                         React__default.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
-                                            React__default.createElement(CenterFocusWeak, null))) }))));
+                                            React__default.createElement(CenterFocusWeakIcon, null))) }))));
                         case 'vt':
                             return (React__default.createElement(React__default.Fragment, { key: (layer === null || layer === void 0 ? void 0 : layer.id) + '_listItem' },
                                 React__default.createElement(LayerListItem, { key: layer.id, name: (layer === null || layer === void 0 ? void 0 : layer.name) || (layer === null || layer === void 0 ? void 0 : layer.type) + ' layer' || 'unnamed layer', layerComponent: React__default.createElement(MlVectorTileLayer, { layers: ((_c = layer === null || layer === void 0 ? void 0 : layer.config) === null || _c === void 0 ? void 0 : _c.layers) || [], key: layer.id, mapId: layer === null || layer === void 0 ? void 0 : layer.config.mapId, sourceOptions: (_d = layer === null || layer === void 0 ? void 0 : layer.config) === null || _d === void 0 ? void 0 : _d.sourceOptions, layerId: layer.id, url: (_e = layer === null || layer === void 0 ? void 0 : layer.config) === null || _e === void 0 ? void 0 : _e.url }), buttons: React__default.createElement(React__default.Fragment, null,
                                         React__default.createElement(IconButtonStyled$1, { key: layer.id + '_button1', disabled: idx === layers.length - 1, onClick: function () {
                                                 layerContext.moveDown(layer.id || '');
                                             } },
-                                            React__default.createElement(ArrowCircleDown, null)),
+                                            React__default.createElement(ArrowCircleDownIcon, null)),
                                         React__default.createElement(IconButtonStyled$1, { key: layer.id + '_button2', disabled: idx === 0, onClick: function () {
                                                 layerContext.moveUp(layer.id || '');
                                             } },
-                                            React__default.createElement(ArrowCircleUp, null)),
+                                            React__default.createElement(ArrowCircleUpIcon, null)),
                                         React__default.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
-                                            React__default.createElement(CenterFocusWeak, null))), setLayerState: function (layerConfig) {
+                                            React__default.createElement(CenterFocusWeakIcon, null))), setLayerState: function (layerConfig) {
                                         return setLayers === null || setLayers === void 0 ? void 0 : setLayers(function (current) {
                                             var _layers = __spreadArray([], current, true);
                                             if (layerConfig === false) {
@@ -21686,18 +21589,18 @@ function LayerTreeListItem(props) {
                         React__default.createElement(IconButtonStyled, { disabled: false, onClick: function () {
                                 moveDown(layer.uuid);
                             } },
-                            React__default.createElement(ArrowCircleDown, null)),
+                            React__default.createElement(ArrowCircleDownIcon, null)),
                         React__default.createElement(IconButtonStyled, { disabled: false, onClick: function () {
                                 moveUp(layer.uuid);
                             } },
-                            React__default.createElement(ArrowCircleUp, null)),
+                            React__default.createElement(ArrowCircleUpIcon, null)),
                         layer.configurable && (React__default.createElement(React__default.Fragment, null,
                             React__default.createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
                                     setPaintPropsFormVisible(function (current) {
                                         return !current;
                                     });
                                 } },
-                                React__default.createElement(Tune, null))))) },
+                                React__default.createElement(TuneIcon, null))))) },
                     React__default.createElement(CheckboxListItemIcon, null,
                         React__default.createElement(CheckboxStyled, { checked: visible, disabled: layer.masterVisible === false, onClick: function () { return handleToggleVisibility(visible); } })),
                     React__default.createElement(ListItemText, { variant: "layerlist", primary: layer.name || '', secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } }),
@@ -21705,7 +21608,7 @@ function LayerTreeListItem(props) {
                 layer.configurable && paintPropsFormVisible && (React__default.createElement(React__default.Fragment, null,
                     props.showDeleteButton && (React__default.createElement(React__default.Fragment, null,
                         React__default.createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () { } },
-                            React__default.createElement(Delete, null)),
+                            React__default.createElement(DeleteIcon, null)),
                         showDeletionConfirmationDialog && (React__default.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
                                 setShowDeletionConfirmationDialog(false);
                             }, onCancel: function () {
@@ -21717,7 +21620,7 @@ function LayerTreeListItem(props) {
             return (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx), secondaryAction: undefined },
                     React__default.createElement(ListItemIconStyled, null,
-                        React__default.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMore, null) : React__default.createElement(KeyboardArrowRight, null)),
+                        React__default.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMoreIcon, null) : React__default.createElement(KeyboardArrowRightIcon, null)),
                         React__default.createElement(CheckboxListItemIcon, null,
                             React__default.createElement(CheckboxStyled, { checked: layer.visible, disabled: layer.masterVisible === false, onClick: function () { var _a; return handleToggleVisibility((_a = layer.visible) !== null && _a !== void 0 ? _a : false); } }))),
                     React__default.createElement(ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } })),
@@ -21747,7 +21650,7 @@ function LayerTreeListItem(props) {
             return (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx) },
                     React__default.createElement(ListItemIconStyled, null,
-                        React__default.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMore, null) : React__default.createElement(KeyboardArrowRight, null)),
+                        React__default.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React__default.createElement(ExpandMoreIcon, null) : React__default.createElement(KeyboardArrowRightIcon, null)),
                         React__default.createElement(CheckboxListItemIcon, null,
                             React__default.createElement(CheckboxStyled, { checked: layer.visible, disabled: layer.masterVisible, onClick: function () { return handleToggleVisibility(layer.visible ? layer.visible : false); } }))),
                     React__default.createElement(ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } })),