@mapcomponents/react-maplibre 1.1.0 → 1.3.0

package/dist/index.cjs.js

@@ -20,10 +20,12 @@ var Box = require('@mui/material/Box');
 var Grid = require('@mui/material/Grid');
 var PolylineIcon = require('@mui/icons-material/Polyline');
 var PentagonIcon = require('@mui/icons-material/Pentagon');
-var iconsMaterial = require('@mui/icons-material');
+var DeleteIcon = require('@mui/icons-material/Delete');
+var TuneIcon = require('@mui/icons-material/Tune');
 var system = require('@mui/system');
+var ExpandLessIcon = require('@mui/icons-material/ExpandLess');
+var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var reactColor = require('react-color');
-var TuneIcon = require('@mui/icons-material/Tune');
 var Dialog = require('@mui/material/Dialog');
 var DialogActions = require('@mui/material/DialogActions');
 var DialogContent = require('@mui/material/DialogContent');
@@ -34,16 +36,12 @@ var utilities = require('@dnd-kit/utilities');
 var CloseIcon = require('@mui/icons-material/Close');
 var useMediaQuery = require('@mui/material/useMediaQuery');
 var react = require('@emotion/react');
-var _ = require('@mui/material/');
-var DeleteIcon = require('@mui/icons-material/Delete');
 var ButtonGroup = require('@mui/material/ButtonGroup');
 var ControlPointIcon = require('@mui/icons-material/ControlPoint');
 var RemoveCircleOutlineIcon = require('@mui/icons-material/RemoveCircleOutline');
 var Divider = require('@mui/material/Divider');
 var syncMove = require('@mapbox/mapbox-gl-sync-move');
-var Paper = require('@mui/material/Paper');
 var xmldom = require('@xmldom/xmldom');
-var PropTypes = require('prop-types');
 var helpers = require('@turf/helpers');
 var WMSCapabilities = require('wms-capabilities');
 var InfoIcon = require('@mui/icons-material/Info');
@@ -64,6 +62,9 @@ var osm2geojson = require('osm2geojson-lite');
 var topojsonClient = require('topojson-client');
 var externParser = require('@tmcw/togeojson');
 var d3 = require('d3');
+var ArrowCircleDownIcon = require('@mui/icons-material/ArrowCircleDown');
+var ArrowCircleUpIcon = require('@mui/icons-material/ArrowCircleUp');
+var CenterFocusWeakIcon = require('@mui/icons-material/CenterFocusWeak');
 var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 var PlaylistAddIcon = require('@mui/icons-material/PlaylistAdd');
@@ -86,6 +87,7 @@ var DesignServicesIcon = require('@mui/icons-material/DesignServices');
 var PictureAsPdfIcon = require('@mui/icons-material/PictureAsPdf');
 var reactRedux = require('react-redux');
 var toolkit = require('@reduxjs/toolkit');
+var KeyboardArrowRightIcon = require('@mui/icons-material/KeyboardArrowRight');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -2090,7 +2092,8 @@ function featureEditorStyle() {
             },
             paint: {
                 'line-color': '#009EE0',
-                'line-width': 3,
+                'line-width': 10,
+                'line-opacity': 0.2,
             },
         },
         {
@@ -2102,7 +2105,7 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': "#009EE0",
+                'line-color': '#009EE0',
                 'line-dasharray': [0.2, 2],
                 'line-width': 2,
             },
@@ -2115,7 +2118,7 @@ function featureEditorStyle() {
                 'circle-radius': mediaIsMobile ? 5 : 4,
                 'circle-color': '#ffffff',
                 'circle-stroke-color': '#009EE0',
-                'circle-stroke-width': 1
+                'circle-stroke-width': 1,
             },
         },
         {
@@ -2135,7 +2138,7 @@ function featureEditorStyle() {
                 'circle-radius': mediaIsMobile ? 7 : 5,
                 'circle-color': '#ffffff',
                 'circle-stroke-color': '#009EE0',
-                'circle-stroke-width': 1
+                'circle-stroke-width': 1,
             },
         },
         {
@@ -2652,15 +2655,21 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
                 return defaultPaintOverrides.fill;
             }
             return {
-                'fill-color': 'rgba(10,240,256,0.6)',
-                'fill-outline-color': 'rgba(20,230,256,0.8)',
+                // 'fill-color': 'rgba(10,240,256,0.6)',
+                // 'fill-outline-color': 'rgba(20,230,256,0.8)',
+                'fill-color': '#009EE0',
+                'fill-outline-color': '#009EE0',
             };
         case 'line':
             if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.line) {
+                console.log(defaultPaintOverrides.line);
                 return defaultPaintOverrides.line;
             }
             return {
-                'line-color': 'rgb(203,211,2)',
+                // // 'line-color': 'rgb(203,211,2)',
+                // 'line-width': 5,
+                // 'line-blur': 0,
+                'line-color': '#009EE0',
                 'line-width': 5,
                 'line-blur': 0,
             };
@@ -2669,10 +2678,14 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
                 return defaultPaintOverrides.circle;
             }
             return {
-                'circle-color': 'rgba(10,240,256,0.8)',
+                // 'circle-color': 'rgba(10,240,256,0.8)',
+                // 'circle-stroke-color': '#fff',
+                // 'circle-stroke-width': 2,
+                // 'circle-radius': 4,
+                'circle-color': '#009EE0',
                 'circle-stroke-color': '#fff',
                 'circle-stroke-width': 2,
-                'circle-radius': 4,
+                'circle-radius': 5,
             };
         default:
             return {};
@@ -2944,7 +2957,7 @@ var MlFollowGps = function (props) {
         isFollowed && userLocationGeoJson && (React.createElement(MlGeoJsonLayer, { geojson: accuracyGeoJson, type: 'fill', paint: __assign({ 'fill-color': '#cbd300', 'fill-opacity': 0.3 }, props.accuracyPaint), insertBeforeLayer: props.insertBeforeLayer })),
         isFollowed && orientationCone && (React.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.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.createElement(material.Button, { variant: "navtools", sx: {
+        React.createElement(material.Button, { variant: "navtools", "data-testid": "mlFollowGpsBtn", sx: {
                 zIndex: 1002,
                 color: isFollowed
                     ? function (theme) { return theme.palette.GPS.GPSActiveColor; }
@@ -3185,7 +3198,7 @@ function LayerListFolder(_a) {
     return (React.createElement(React.Fragment, null,
         React.createElement(ListItemStyled$2, null,
             React.createElement(ListItemIconStyled$1, null,
-                React.createElement(IconButtonStyled$2, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
+                React.createElement(IconButtonStyled$2, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(ExpandMoreIcon, null) : React.createElement(ExpandLessIcon, null)),
                 React.createElement(CheckboxStyled$1, { disabled: setVisible ? false : !visible, checked: setVisible ? visible : localVisible, onClick: function () {
                         if (setVisible) {
                             setVisible(function (val) { return !val; });
@@ -3213,7 +3226,7 @@ var ColorPicker = function (_a) {
     var value = (props === null || props === void 0 ? void 0 : props.value) || '';
     return (React.createElement(React.Fragment, null,
         React.createElement(material.Grid, { container: true, sx: { flexWrap: 'nowrap' } },
-            React.createElement(material.Grid, { xs: 12, item: true },
+            React.createElement(material.Grid, { size: 12 },
                 React.createElement(material.Button, { variant: "outlined", onClick: function () { return setShowPicker(true); }, sx: {
                         minWidth: '100%',
                         padding: '5px',
@@ -3458,7 +3471,8 @@ function LayerListItem(_a) {
     var deletedRef = React.useRef(false);
     var visibleRef = React.useRef(visible);
     // this state variable is used for layer components that provide a paint attribute
-    var _u = React.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 = React.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 = React.useMemo(function () {
         if (!visible) {
@@ -3514,7 +3528,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 })),
                     });
             }
         }
@@ -3538,7 +3552,7 @@ function LayerListItem(_a) {
                         return !current;
                     });
                 } },
-                React.createElement(iconsMaterial.Tune, null)))) : undefined },
+                React.createElement(TuneIcon, null)))) : undefined },
         React.createElement(CheckboxListItemIcon, null,
             React.createElement(CheckboxStyled, { disabled: !visible, checked: localVisible, onClick: function () {
                     setLocalVisible(function (val) { return !val; });
@@ -3546,7 +3560,7 @@ function LayerListItem(_a) {
         React.createElement(material.ListItemText, { variant: "layerlist", primary: name, secondary: description, primaryTypographyProps: { overflow: 'hidden' } })));
     return (React.createElement(React.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.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 &&
@@ -3558,7 +3572,7 @@ function LayerListItem(_a) {
                             setShowDeletionConfirmationDialog(true);
                         }
                     } },
-                    React.createElement(iconsMaterial.Delete, null)),
+                    React.createElement(DeleteIcon, null)),
                 showDeletionConfirmationDialog && (React.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
                         if (typeof setLayerState === 'function') {
                             deletedRef.current = true;
@@ -3609,7 +3623,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.createElement(DrawerHeader, __assign({}, drawerHeaderProps),
-                    React.createElement(_.Typography, { variant: "h6" }, props.name),
+                    React.createElement(material.Typography, { variant: "h6" }, props.name),
                     React.createElement(material.IconButton, { onClick: setOpen
                             ? function () {
                                 setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
@@ -3628,7 +3642,7 @@ function Sidebar(_a) {
                         overflow: 'visible',
                     },
                 } }),
-            React.createElement(_.SwipeableDrawer, { anchor: "bottom", open: typeof props.open === 'undefined' ? drawerOpen : props.open, onClose: setOpen
+            React.createElement(material.SwipeableDrawer, { anchor: "bottom", open: typeof props.open === 'undefined' ? drawerOpen : props.open, onClose: setOpen
                     ? function () {
                         setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
                     }
@@ -3656,7 +3670,7 @@ function Sidebar(_a) {
                         left: 0,
                     } },
                     React.createElement(Puller, null),
-                    React.createElement(_.Typography, { variant: "h6", sx: { p: '13px' } }, props.name)),
+                    React.createElement(material.Typography, { variant: "h6", sx: { p: '13px' } }, props.name)),
                 React.createElement(material.Paper, { sx: {
                         px: '15px',
                         pb: '15px',
@@ -3703,14 +3717,16 @@ var MlMultiMeasureTool = function (props) {
         });
     };
     React.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]);
     React.useEffect(function () {
         setMeasureState(undefined);
@@ -3720,7 +3736,7 @@ var MlMultiMeasureTool = function (props) {
             React.createElement(Box, { sx: { flexGrow: 1 } },
                 React.createElement("br", null),
                 React.createElement(Grid, { container: true, spacing: 4, justifyContent: "flex-start" },
-                    React.createElement(Grid, { item: true, xs: 3 },
+                    React.createElement(Grid, { size: 3 },
                         React.createElement(material.Tooltip, { title: "Measure Area" },
                             React.createElement(material.Button, { variant: "outlined", sx: {
                                     backgroundColor: selectedMode === 'polygon'
@@ -3735,7 +3751,7 @@ var MlMultiMeasureTool = function (props) {
                                     setReload(true);
                                 } },
                                 React.createElement(PentagonIcon, null)))),
-                    React.createElement(Grid, { item: true, xs: 3 },
+                    React.createElement(Grid, { size: 3 },
                         React.createElement(material.Tooltip, { title: "Measure Distance" },
                             React.createElement(material.Button, { variant: "outlined", sx: {
                                     backgroundColor: selectedMode === 'line'
@@ -3751,7 +3767,7 @@ var MlMultiMeasureTool = function (props) {
                                 } },
                                 React.createElement(PolylineIcon, null)))))),
             React.createElement("br", null),
-            React.createElement(Grid, { item: true, xs: 4 },
+            React.createElement(Grid, { size: 4 },
                 React.createElement(material.FormControl, null,
                     React.createElement(material.InputLabel, { id: "unit-select-label" }, "Unit"),
                     React.createElement(material.Select, { labelId: "unit-select-label", id: "unit-select", value: selectedUnit, label: "Unit", onChange: function (e) {
@@ -3823,56 +3839,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__namespace.createElement("svg", _extends$2({
-    width: 10,
-    height: 40,
-    viewBox: "0 0 10 40",
-    fill: "none",
-    id: "svg6"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    id: "g14",
-    transform: "translate(0.67544,-1.25e-5)"
-  }, /*#__PURE__*/React__namespace.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__namespace.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.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.createElement("title", null, title),
+        React.createElement("circle", { cx: "26.0001", cy: "26.1843", r: "24", fill: "white", stroke: "#009EE0", strokeWidth: "2" }),
+        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" }),
+        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" }),
+        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" }),
+        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 _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__namespace.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__namespace.createElement("circle", {
-    cx: 26.0001,
-    cy: 26.1843,
-    r: 24,
-    fill: "white",
-    stroke: "#009EE0",
-    strokeWidth: 2
-  })), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.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.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.createElement("title", null, title),
+        React.createElement("g", { transform: "translate(0.67544,-1.25e-5)" },
+            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" }),
+            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 BoxStyled$2 = material.styled(material.Box)(function (_a) {
@@ -3978,9 +3962,9 @@ var MlNavigationCompass = function (props) {
     return (React.createElement(React.Fragment, null,
         React.createElement(BoxStyled$2, { sx: __assign({}, props.style) },
             React.createElement(CompassBox, { onClick: rotate, sx: __assign({}, props.backgroundStyle) },
-                React.createElement(SvgCompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
+                React.createElement(CompassBackground, { style: { position: 'absolute', top: 0, left: 0 } }),
                 React.createElement(NeedleBox, { onClick: rotate, sx: __assign({}, props.needleStyle) },
-                    React.createElement(SvgCompassNeedle, { style: {
+                    React.createElement(CompassNeedle, { style: {
                             transform: 'rotate(' + (bearing > 0 ? '-' + bearing : -1 * bearing) + 'deg)',
                         } }))))));
 };
@@ -4294,20 +4278,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__namespace.createElement("svg", _extends({
-    viewBox: "0 0 47 30",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M29.5 21.25L35.75 15L29.5 8.75V21.25Z",
-    fill: "#009EE0"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.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.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.createElement("path", { d: "M29.5 21.25L35.75 15L29.5 8.75V21.25Z", fill: "#009EE0" }),
+        React.createElement("path", { d: "M17.5 8.75L11.25 15L17.5 21.25V8.75Z", fill: "#009EE0" })));
 };
 
 /**
@@ -4401,7 +4376,7 @@ var MlLayerSwipe = function (props) {
         };
     }, [mapContext]);
     return (React.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.createElement(SvgIcononlyarrow, { color: "#0066ff", style: {
+        React.createElement(SwipeIcon, { color: "#0066ff", style: {
                 width: '65px',
                 height: '65px',
                 justifyContent: 'center',
@@ -4639,76 +4614,130 @@ var MlTransitionGeoJsonLayer = function (props) {
         React.createElement(MlGeoJsonLayer, __assign({}, restProps, { geojson: displayGeojson }))));
 };
 
-/**
- * Adds a marker to the map and displays the contents of the "content" property in an iframe next to it
- */
-var MlMarker = function (props) {
+var getBoxTransform = function (anchor) {
+    if (anchor === void 0) { anchor = 'top'; }
+    switch (anchor) {
+        case 'bottom':
+            return 'translate(-50%, 0%)';
+        case 'left':
+            return 'translate(-100%, -50%)';
+        case 'right':
+            return 'translate(0%, -50%)';
+        case 'top-left':
+            return 'translate(-100%, -100%)';
+        case 'top-right':
+            return 'translate(0%, -100%)';
+        case 'bottom-left':
+            return 'translate(-100%, 0%)';
+        case 'bottom-right':
+            return 'translate(0%, 0%)';
+        default:
+        case 'top':
+            return 'translate(-50%, -100%)';
+    }
+};
+function getBoxMargins(anchor, offset, style) {
+    var w = parseInt(String((style === null || style === void 0 ? void 0 : style.width) || 14), 10);
+    var h = parseInt(String((style === null || style === void 0 ? void 0 : style.height) || 14), 10);
+    var m = {};
+    switch (anchor) {
+        case 'bottom':
+            m.marginTop = "".concat(offset, "px");
+            break;
+        case 'left':
+            m.marginLeft = "-".concat(offset, "px");
+            break;
+        case 'right':
+            m.marginLeft = "".concat(w + offset, "px");
+            break;
+        case 'top-left':
+            m.marginTop = "-".concat(h + offset, "px");
+            m.marginLeft = "-".concat(offset, "px");
+            break;
+        case 'top-right':
+            m.marginTop = "-".concat(h + offset, "px");
+            m.marginLeft = "".concat(w + offset, "px");
+            break;
+        case 'bottom-left':
+            m.marginTop = "".concat(offset, "px");
+            m.marginLeft = "-".concat(offset, "px");
+            break;
+        case 'bottom-right':
+            m.marginTop = "".concat(offset, "px");
+            m.marginLeft = "".concat(w + offset, "px");
+            break;
+        case 'top':
+        default:
+            m.marginTop = "-".concat(h + offset, "px");
+            break;
+    }
+    return m;
+}
+var MlMarker = function (_a) {
+    var _b = _a.passEventsThrough, passEventsThrough = _b === void 0 ? true : _b, _c = _a.contentOffset, contentOffset = _c === void 0 ? 5 : _c, props = __rest(_a, ["passEventsThrough", "contentOffset"]);
     var mapHook = useMap({
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var mapState = useMapState({
-        mapId: props.mapId,
-        watch: { viewport: true },
-    });
-    var iframe = React.useRef(null);
-    var _a = React.useState({
-        width: "400px",
-        height: "500px",
-    }), iframeDimensions = _a[0], setIframeDimensions = _a[1];
-    var _b = React.useState(), markerPixelPos = _b[0], setMarkerPixelPos = _b[1];
-    React.useEffect(function () {
-        var _a, _b;
-        if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.project))
-            return;
-        var _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
-        setMarkerPixelPos(_pixelPos);
-    }, [mapHook.map, props.lng, props.lat, mapState.viewport]);
+    var _d = React.useState(null), marker = _d[0], setMarker = _d[1];
+    var container = React.useRef(null);
+    var iframeRef = React.useRef(null);
     React.useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        if (!mapHook.map ||
-            !((_d = (_c = (_b = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document) === null || _c === void 0 ? void 0 : _c.body) === null || _d === void 0 ? void 0 : _d.scrollHeight))
+        if (!mapHook.map)
             return;
-        var mapHeight = mapHook.map.map._container.clientHeight;
-        var _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
-        var pixelToBottom = mapHeight - _pixelPos.y;
-        var iframeHeight = (_h = (_g = (_f = (_e = iframe.current) === null || _e === void 0 ? void 0 : _e.contentWindow) === null || _f === void 0 ? void 0 : _f.document) === null || _g === void 0 ? void 0 : _g.body) === null || _h === void 0 ? void 0 : _h.scrollHeight;
-        var iframeWidth = (_m = (_l = (_k = (_j = iframe.current) === null || _j === void 0 ? void 0 : _j.contentWindow) === null || _k === void 0 ? void 0 : _k.document) === null || _l === void 0 ? void 0 : _l.body) === null || _m === void 0 ? void 0 : _m.scrollWidth;
-        setIframeDimensions({
-            width: iframeWidth + "px",
-            height: (pixelToBottom < iframeHeight ? pixelToBottom : iframeHeight) + "px",
+        container.current = document.createElement('div');
+        var defaultMarkerStyle = {
+            width: '12px',
+            height: '12px',
+            background: 'linear-gradient(135deg, rgb(186, 208, 218) 0%, rgb(96, 209, 253) 100%)',
+            border: '1px solid rgba(255, 255, 255, 0.7)',
+            boxShadow: '0 2px 6px rgba(90, 0, 0, 0.2), 0 0 0 2px rgba(240, 147, 251, 0.2)',
+            borderRadius: '50%',
+        };
+        var markerStyle = __assign(__assign({}, defaultMarkerStyle), props.markerStyle);
+        var maplibreMarker = new maplibregl.Marker({
+            element: container.current,
+            anchor: 'center',
+        })
+            .setLngLat([props.lng, props.lat])
+            .addTo(mapHook.map.map);
+        setMarker(maplibreMarker);
+        var markerDot = document.createElement('div');
+        Object.entries(markerStyle).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            markerDot.style.setProperty(key.replace(/([A-Z])/g, '-$1').toLowerCase(), String(value));
         });
-    }, [props.lng, props.lat, props.content]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MlGeoJsonLayer, { geojson: {
-                type: "Feature",
-                geometry: {
-                    type: "Point",
-                    coordinates: [props.lng, props.lat],
-                },
-                properties: {},
-            }, paint: {
-                "circle-radius": 14,
-                "circle-color": "rgba(40,200,20,0.5)",
-            }, type: "circle", mapId: props.mapId }),
-        markerPixelPos && (React.createElement(Paper, { sx: {
-                opacity: 0.7,
-                position: "fixed",
-                display: "flex",
-                /** TODO: fix positioning delay when moving the map */
-                left: markerPixelPos.x,
-                top: markerPixelPos.y,
-                width: iframeDimensions.width,
-                height: iframeDimensions.height,
-                "&:hover": {
+        container.current.appendChild(markerDot);
+        return function () {
+            var _a;
+            markerDot.remove();
+            maplibreMarker.remove();
+            (_a = container.current) === null || _a === void 0 ? void 0 : _a.remove();
+        };
+    }, [mapHook.map, props.lng, props.lat, props.markerStyle, props.anchor]);
+    React.useEffect(function () {
+        if (marker) {
+            marker.setLngLat([props.lng, props.lat]);
+        }
+    }, [marker, props.lng, props.lat]);
+    function handleIframeLoad() {
+        var _a, _b, _c;
+        var iframeDoc = (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document;
+        if (iframeDoc && ((_c = iframeRef.current) === null || _c === void 0 ? void 0 : _c.parentElement)) {
+            var scrollHeight = iframeDoc.documentElement.scrollHeight;
+            iframeRef.current.parentElement.style.height = "".concat(scrollHeight, "px");
+        }
+    }
+    return (container.current &&
+        ReactDOM.createPortal(React.createElement(material.Box, { sx: __assign(__assign(__assign({ position: 'absolute', display: 'flex', width: '300px', maxHeight: '500px', opacity: passEventsThrough ? 1 : 0.7, zIndex: -1, transform: getBoxTransform(props.anchor) }, getBoxMargins(props.anchor, contentOffset, props.markerStyle)), { pointerEvents: passEventsThrough ? 'none' : 'auto', '&:hover': {
                     opacity: 1,
-                },
-                zIndex: -1,
-            } },
-            React.createElement("iframe", { style: { width: "100%" }, srcDoc: props.content, ref: iframe, sandbox: "allow-same-origin allow-popups-to-escape-sandbox", frameBorder: "0", title: mapHook.componentId })))));
-};
-MlMarker.defaultProps = {
-    mapId: undefined,
+                } }), props.containerStyle) },
+            React.createElement("iframe", { ref: iframeRef, onLoad: handleIframeLoad, style: __assign({ width: '100%', borderStyle: 'none' }, props.iframeStyle), srcDoc: "<div>\n\t<style>\n\t\tbody {\n\t\t\t".concat(Object.entries(props.iframeBodyStyle || {})
+                    .map(function (_a) {
+                    var key = _a[0], val = _a[1];
+                    return "".concat(key.replace(/([A-Z])/g, '-$1').toLowerCase(), ": ").concat(val, ";");
+                })
+                    .join(' '), "\n\t\t}\n\t</style>\n\t").concat(props.content || '', "\n</div>"), sandbox: "allow-same-origin allow-popups-to-escape-sandbox allow-scripts", title: mapHook.componentId })), container.current));
 };
 
 /**
@@ -5588,12 +5617,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) {
@@ -5939,12 +5962,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,
@@ -6056,51 +6073,6 @@ var MlWmsLayer = function (props) {
     return React.createElement(React.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
@@ -6412,7 +6384,7 @@ var MlWmsLoader = function (props) {
                     }
                 }, disabled: !(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) },
                 React.createElement(InfoIcon, null))),
-            React.createElement(IconButton, { 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.createElement(iconsMaterial.ExpandLess, null) : React.createElement(iconsMaterial.ExpandMore, null)),
+            React.createElement(IconButton, { 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.createElement(ExpandLessIcon, null) : React.createElement(ExpandMoreIcon, null)),
             props.showDeleteButton && (React.createElement(React.Fragment, null,
                 React.createElement(IconButton, { "aria-label": "delete", edge: "end", onClick: function () {
                         if (typeof props.onConfigChange === 'function') {
@@ -6776,9 +6748,8 @@ function TemporalControllerPlayer(props) {
                 flexShrink: 0,
                 '& .MuiDrawer-paper': mediaIsMobile ? mobileScreenBoxStyle : bigScreenBoxStyle,
             } },
-            React.createElement(material.Grid, { container: true },
-                mediaIsMobile ? React.createElement(React.Fragment, null) : React.createElement(material.Grid, { item: true, xs: 3 }),
-                React.createElement(material.Grid, { item: true, xs: mediaIsMobile ? 12 : 6, textAlign: "center" },
+            React.createElement(material.Grid, { container: true, alignItems: "center", justifyContent: "space-between" },
+                React.createElement(material.Grid, { item: true, xs: 12, sm: 10, textAlign: "center" },
                     React.createElement(material.Button, { onClick: handleFastRewind },
                         React.createElement(FastRewindIcon, null)),
                     React.createElement(material.Button, { onClick: handleStop },
@@ -6786,8 +6757,11 @@ function TemporalControllerPlayer(props) {
                     React.createElement(material.Button, { onClick: handlePlayPause }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayArrowIcon, null)),
                     React.createElement(material.Button, { onClick: handleFastForward },
                         React.createElement(FastForwardIcon, null))),
-                props.display && !mediaIsMobile && (React.createElement(material.Grid, { item: true, xs: 3 },
-                    React.createElement(material.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.createElement(material.Grid, { item: true, xs: 12, sm: 5, textAlign: "right" },
+                    React.createElement(material.Typography, { variant: 'h5', sx: { paddingRight: '25px' } }, Math.floor(currentVal))))),
             React.createElement(material.Slider, { sx: {
                     position: 'flex',
                     width: '95%',
@@ -7042,37 +7016,53 @@ var sketchTools = [
  *
  */
 var MlSketchTool = function (props) {
-    var _a, _b;
     var mapHook = useMap({
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var _c = React.useState(), hoveredGeometry = _c[0], setHoveredGeometry = _c[1];
-    var _d = React.useState({
+    var _a = React.useState(), hoveredGeometry = _a[0], setHoveredGeometry = _a[1];
+    var _b = React.useState({
         activeGeometryIndex: undefined,
         selectedGeoJson: undefined,
         geometries: [],
         drawMode: undefined,
-    }), sketchState = _d[0], setSketchState = _d[1];
+    }), sketchState = _b[0], setSketchState = _b[1];
+    console.log(sketchState);
     React.useEffect(function () {
         if (!(typeof props.onChange === 'function'))
             return;
         props.onChange(sketchState);
     }, [sketchState, props.onChange]);
     var buttonStyle = __assign({}, props.buttonStyleOverride);
+    // const buttonClickHandler = (buttonDrawMode: keyof MapboxDraw.Modes) => {
+    // 	setSketchState((_state) => ({
+    // 		drawMode: _state.drawMode !== buttonDrawMode ? buttonDrawMode : undefined,
+    // 		geometries: _state.geometries,
+    // 		activeGeometryIndex: undefined,
+    // 		selectedGeoJson: undefined,
+    // 	}));
+    // };
     var buttonClickHandler = function (buttonDrawMode) {
-        setSketchState(function (_state) { return ({
-            drawMode: _state.drawMode !== buttonDrawMode ? buttonDrawMode : undefined,
-            geometries: _state.geometries,
-            activeGeometryIndex: undefined,
-            selectedGeoJson: undefined,
-        }); });
+        var modeRef = undefined;
+        setSketchState(function (prevState) {
+            modeRef = prevState.drawMode;
+            return __assign(__assign({}, prevState), { drawMode: undefined, activeGeometryIndex: undefined, selectedGeoJson: undefined });
+        });
+        requestAnimationFrame(function () {
+            setSketchState(function (prevState) {
+                if ((modeRef === 'draw_polygon' || modeRef === 'draw_line_string') &&
+                    buttonDrawMode === 'draw_point') {
+                    return __assign(__assign({}, prevState), { drawMode: undefined });
+                }
+                return __assign(__assign({}, prevState), { drawMode: buttonDrawMode });
+            });
+        });
     };
     var removeGeoJson = function (geoJson) {
         setSketchState(function (_sketchState) {
             var _geometries = __spreadArray([], _sketchState.geometries, true);
             _geometries.splice(_geometries.indexOf(geoJson), 1);
-            return __assign(__assign({}, _sketchState), { geometries: _geometries, activeGeometryIndex: _sketchState.activeGeometryIndex
+            return __assign(__assign({}, _sketchState), { drawMode: undefined, geometries: _geometries, activeGeometryIndex: _sketchState.activeGeometryIndex
                     ? _sketchState.activeGeometryIndex - 1
                     : undefined });
         });
@@ -7109,6 +7099,7 @@ var MlSketchTool = function (props) {
             React.createElement(ButtonGroup, null,
                 React.createElement(SketchToolButtons, null))),
         sketchState.drawMode && (React.createElement(MlFeatureEditor, { mode: sketchState.drawMode, geojson: sketchState.selectedGeoJson, onChange: function (feature) {
+                console.log(feature);
                 if (!(feature === null || feature === void 0 ? void 0 : feature[0]))
                     return;
                 setSketchState(function (_sketchState) {
@@ -7127,6 +7118,24 @@ var MlSketchTool = function (props) {
                     else {
                         _geometries[_sketchState.activeGeometryIndex] = feature[0];
                     }
+                    // Check if the geometry type is point and if the coordinates have changed to exit draw mode after editing
+                    var changedPoint = function () {
+                        var _a, _b, _c, _d;
+                        if (_sketchState.selectedGeoJson &&
+                            typeof _sketchState.activeGeometryIndex !== 'undefined' &&
+                            _sketchState.geometries[_sketchState.activeGeometryIndex] &&
+                            _sketchState.geometries[_sketchState.activeGeometryIndex].geometry.type ===
+                                'Point') {
+                            var selectedCoords = (_b = (_a = _sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 : _b.coordinates;
+                            var activeCoords = (_d = (_c = _sketchState.geometries[_sketchState.activeGeometryIndex]) === null || _c === void 0 ? void 0 : _c.geometry) === null || _d === void 0 ? void 0 : _d.coordinates;
+                            // Compare coordinates
+                            return JSON.stringify(selectedCoords) !== JSON.stringify(activeCoords);
+                        }
+                        return false;
+                    };
+                    if (changedPoint()) {
+                        _sketchState.drawMode = undefined;
+                    }
                     return __assign(__assign({}, _sketchState), { geometries: _geometries });
                 });
             }, onFinish: function () {
@@ -7146,46 +7155,73 @@ var MlSketchTool = function (props) {
                         }, onMouseLeave: function () {
                             setHoveredGeometry(undefined);
                         } },
-                        React.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id) }), type: 'layer', name: String(el.id), description: el.geometry.type }),
+                        React.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id), defaultPaintOverrides: {
+                                    fill: { 'fill-opacity': 0.5 },
+                                } }), type: 'layer', name: String(el.id), description: el.geometry.type }),
                         React.createElement(system.Box, { sx: {
                                 padding: '3px 30px',
                             } },
                             React.createElement(ButtonGroup, { size: "small" },
-                                React.createElement(material.Button, { onClick: function () {
-                                        var _a;
-                                        (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setCenter(el.geometry.type === 'Point'
-                                            ? el.geometry.coordinates
-                                            : turf__namespace.centerOfMass(el).geometry.coordinates);
-                                    } },
-                                    React.createElement(GpsFixedIcon, null)),
-                                React.createElement(material.Button, { sx: buttonStyle, onClick: function () {
-                                        setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { selectedGeoJson: el, activeGeometryIndex: _sketchState.geometries.indexOf(el), drawMode: 'simple_select' })); });
-                                    } },
-                                    React.createElement(EditIcon, null)),
-                                React.createElement(material.Button, { sx: buttonStyle, onClick: function () {
-                                        removeGeoJson(el);
-                                        setHoveredGeometry(undefined);
-                                    } },
-                                    React.createElement(DeleteIcon, null)))))))); }),
+                                React.createElement(Tooltip, { title: "Center" },
+                                    React.createElement(material.Button, { sx: __assign({ color: function (theme) { return theme.palette.primary.main; }, backgroundColor: function (theme) { return theme.palette.navigation.navColor; } }, buttonStyle), onClick: function () {
+                                            var _a;
+                                            (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setCenter(el.geometry.type === 'Point'
+                                                ? el.geometry.coordinates
+                                                : turf__namespace.centerOfMass(el).geometry.coordinates);
+                                        } },
+                                        React.createElement(GpsFixedIcon, null))),
+                                React.createElement(Tooltip, { title: "Edit" },
+                                    React.createElement(material.Button, { sx: __assign({ color: function (theme) {
+                                                var _a;
+                                                if (sketchState.drawMode === 'simple_select' &&
+                                                    ((_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id) {
+                                                    return theme.palette.navigation.navColor;
+                                                }
+                                                else {
+                                                    return theme.palette.primary.main;
+                                                }
+                                            }, backgroundColor: function (theme) {
+                                                var _a;
+                                                if (sketchState.drawMode === 'simple_select' &&
+                                                    ((_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id) {
+                                                    return theme.palette.primary.main;
+                                                }
+                                                else {
+                                                    return theme.palette.navigation.navColor;
+                                                }
+                                            } }, buttonStyle), onClick: function () {
+                                            setSketchState(function (_sketchState) {
+                                                var _a;
+                                                var newDrawMode = _sketchState.drawMode === 'simple_select' &&
+                                                    ((_a = _sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id
+                                                    ? undefined
+                                                    : 'simple_select';
+                                                return __assign(__assign({}, _sketchState), { selectedGeoJson: el, activeGeometryIndex: _sketchState.geometries.indexOf(el), drawMode: newDrawMode });
+                                            });
+                                        } },
+                                        React.createElement(EditIcon, null))),
+                                React.createElement(Tooltip, { title: "Delete" },
+                                    React.createElement(material.Button, { sx: __assign({ color: function (theme) { return theme.palette.primary.main; }, backgroundColor: function (theme) { return theme.palette.navigation.navColor; } }, buttonStyle), onClick: function () {
+                                            removeGeoJson(el);
+                                            setHoveredGeometry(undefined);
+                                        } },
+                                        React.createElement(DeleteIcon, null))))))))); }),
             hoveredGeometry && (React.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: { type: 'FeatureCollection', features: [hoveredGeometry] }, layerId: 'highlightBorder', defaultPaintOverrides: {
                     circle: {
-                        'circle-color': '#dd9900',
-                        'circle-opacity': 0.4,
+                        'circle-color': '#000000',
+                        'circle-opacity': 0.2,
                         'circle-radius': 10,
                     },
                     line: {
-                        'line-color': '#dd9900',
-                        'line-opacity': 0.4,
+                        'line-color': '#000000',
+                        'line-opacity': 0.2,
                         'line-width': 10,
                     },
                     fill: {
-                        'fill-color': '#dd9900',
-                        'fill-opacity': 0.4,
+                        'fill-color': '#000000',
+                        'fill-opacity': 0.2,
                     },
-                } }))),
-        sketchState.drawMode === 'simple_select' && (React.createElement(material.Typography, { sx: { fontSize: '0.6em' } },
-            "Edit ", (_b = (_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 :
-            _b.type))));
+                } })))));
 };
 MlSketchTool.defaultProps = {
     mapId: undefined,
@@ -7791,9 +7827,6 @@ var SimpleDataProvider = function (props) {
     };
     return (React.createElement(SimpleDataContextProvider, { value: value }, props.children));
 };
-SimpleDataProvider.propTypes = {
-    children: PropTypes.node.isRequired,
-};
 
 var IconButtonStyled$1 = material.styled(material.IconButton)({
     padding: '4px',
@@ -7901,13 +7934,13 @@ function LayerListItemFactory(props) {
                                     React.createElement(IconButtonStyled$1, { disabled: idx === layers.length - 1, onClick: function () {
                                             layerContext.moveDown(layer.id || '');
                                         } },
-                                        React.createElement(iconsMaterial.ArrowCircleDown, null)),
+                                        React.createElement(ArrowCircleDownIcon, null)),
                                     React.createElement(IconButtonStyled$1, { disabled: idx === 0, onClick: function () {
                                             layerContext.moveUp(layer.id || '');
                                         } },
-                                        React.createElement(iconsMaterial.ArrowCircleUp, null)),
+                                        React.createElement(ArrowCircleUpIcon, null)),
                                     React.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
-                                        React.createElement(iconsMaterial.CenterFocusWeak, null))), setLayerState: function (layerConfig) {
+                                        React.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) {
@@ -7947,26 +7980,26 @@ function LayerListItemFactory(props) {
                                         React.createElement(IconButtonStyled$1, { disabled: idx === layers.length - 1, onClick: function () {
                                                 layerContext.moveDown(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleDown, null)),
+                                            React.createElement(ArrowCircleDownIcon, null)),
                                         React.createElement(IconButtonStyled$1, { disabled: idx === 0, onClick: function () {
                                                 layerContext.moveUp(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleUp, null)),
+                                            React.createElement(ArrowCircleUpIcon, null)),
                                         React.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
-                                            React.createElement(iconsMaterial.CenterFocusWeak, null))) }))));
+                                            React.createElement(CenterFocusWeakIcon, null))) }))));
                         case 'vt':
                             return (React.createElement(React.Fragment, { key: (layer === null || layer === void 0 ? void 0 : layer.id) + '_listItem' },
                                 React.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.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.createElement(React.Fragment, null,
                                         React.createElement(IconButtonStyled$1, { key: layer.id + '_button1', disabled: idx === layers.length - 1, onClick: function () {
                                                 layerContext.moveDown(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleDown, null)),
+                                            React.createElement(ArrowCircleDownIcon, null)),
                                         React.createElement(IconButtonStyled$1, { key: layer.id + '_button2', disabled: idx === 0, onClick: function () {
                                                 layerContext.moveUp(layer.id || '');
                                             } },
-                                            React.createElement(iconsMaterial.ArrowCircleUp, null)),
+                                            React.createElement(ArrowCircleUpIcon, null)),
                                         React.createElement(IconButtonStyled$1, { onClick: function () { return fitLayer(layer); } },
-                                            React.createElement(iconsMaterial.CenterFocusWeak, null))), setLayerState: function (layerConfig) {
+                                            React.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) {
@@ -21706,18 +21739,18 @@ function LayerTreeListItem(props) {
                         React.createElement(IconButtonStyled, { disabled: false, onClick: function () {
                                 moveDown(layer.uuid);
                             } },
-                            React.createElement(iconsMaterial.ArrowCircleDown, null)),
+                            React.createElement(ArrowCircleDownIcon, null)),
                         React.createElement(IconButtonStyled, { disabled: false, onClick: function () {
                                 moveUp(layer.uuid);
                             } },
-                            React.createElement(iconsMaterial.ArrowCircleUp, null)),
+                            React.createElement(ArrowCircleUpIcon, null)),
                         layer.configurable && (React.createElement(React.Fragment, null,
                             React.createElement(TuneIconButton, { edge: 'end', "aria-label": "settings", onClick: function () {
                                     setPaintPropsFormVisible(function (current) {
                                         return !current;
                                     });
                                 } },
-                                React.createElement(iconsMaterial.Tune, null))))) },
+                                React.createElement(TuneIcon, null))))) },
                     React.createElement(CheckboxListItemIcon, null,
                         React.createElement(CheckboxStyled, { checked: visible, disabled: layer.masterVisible === false, onClick: function () { return handleToggleVisibility(visible); } })),
                     React.createElement(material.ListItemText, { variant: "layerlist", primary: layer.name || '', secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } }),
@@ -21725,7 +21758,7 @@ function LayerTreeListItem(props) {
                 layer.configurable && paintPropsFormVisible && (React.createElement(React.Fragment, null,
                     props.showDeleteButton && (React.createElement(React.Fragment, null,
                         React.createElement(DeleteIconButton, { edge: "end", "aria-label": "delete", onClick: function () { } },
-                            React.createElement(iconsMaterial.Delete, null)),
+                            React.createElement(DeleteIcon, null)),
                         showDeletionConfirmationDialog && (React.createElement(ConfirmDialog, { open: showDeletionConfirmationDialog, onConfirm: function () {
                                 setShowDeletionConfirmationDialog(false);
                             }, onCancel: function () {
@@ -21737,7 +21770,7 @@ function LayerTreeListItem(props) {
             return (React.createElement(React.Fragment, null,
                 React.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx), secondaryAction: undefined },
                     React.createElement(ListItemIconStyled, null,
-                        React.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
+                        React.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(ExpandMoreIcon, null) : React.createElement(KeyboardArrowRightIcon, null)),
                         React.createElement(CheckboxListItemIcon, null,
                             React.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.createElement(material.ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } })),
@@ -21767,7 +21800,7 @@ function LayerTreeListItem(props) {
             return (React.createElement(React.Fragment, null,
                 React.createElement(ListItemStyled, { key: layer.uuid, sx: __assign({}, props.listItemSx) },
                     React.createElement(ListItemIconStyled, null,
-                        React.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(iconsMaterial.ExpandMore, null) : React.createElement(iconsMaterial.KeyboardArrowRight, null)),
+                        React.createElement(IconButtonStyled, { edge: "end", "aria-label": "open", onClick: function () { return setOpen(!open); } }, open ? React.createElement(ExpandMoreIcon, null) : React.createElement(KeyboardArrowRightIcon, null)),
                         React.createElement(CheckboxListItemIcon, null,
                             React.createElement(CheckboxStyled, { checked: layer.visible, disabled: layer.masterVisible, onClick: function () { return handleToggleVisibility(layer.visible ? layer.visible : false); } }))),
                     React.createElement(material.ListItemText, { primary: layer.name, secondary: props.description, primaryTypographyProps: { overflow: 'hidden' } })),