@mapcomponents/react-maplibre 1.2.0 → 1.3.1

package/dist/index.esm.js

@@ -4,12 +4,12 @@ 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, 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 { 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, FormGroup, 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';
 import jsPDF from 'jspdf';
-import ReactDOM from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
 import Moveable from 'react-moveable';
 import * as turf from '@turf/turf';
 import { point, circle, lineArc, bbox, booleanContains, bboxPolygon, featureCollection, distance, lineOffset } from '@turf/turf';
@@ -41,7 +41,6 @@ import ControlPointIcon from '@mui/icons-material/ControlPoint';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 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 { featureCollection as featureCollection$1, lineString, polygon } from '@turf/helpers';
 import WMSCapabilities from 'wms-capabilities';
@@ -104,7 +103,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 var __assign = function() {
@@ -141,8 +140,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
 }
 
 function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -2069,7 +2068,7 @@ function featureEditorStyle() {
             },
             paint: {
                 'line-color': '#009EE0',
-                'line-width': 3,
+                'line-width': 4,
             },
         },
         {
@@ -2081,7 +2080,7 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': "#009EE0",
+                'line-color': '#009EE0',
                 'line-dasharray': [0.2, 2],
                 'line-width': 2,
             },
@@ -2094,7 +2093,7 @@ function featureEditorStyle() {
                 'circle-radius': mediaIsMobile ? 5 : 4,
                 'circle-color': '#ffffff',
                 'circle-stroke-color': '#009EE0',
-                'circle-stroke-width': 1
+                'circle-stroke-width': 1,
             },
         },
         {
@@ -2114,7 +2113,7 @@ function featureEditorStyle() {
                 'circle-radius': mediaIsMobile ? 7 : 5,
                 'circle-color': '#ffffff',
                 'circle-stroke-color': '#009EE0',
-                'circle-stroke-width': 1
+                'circle-stroke-width': 1,
             },
         },
         {
@@ -2631,16 +2630,22 @@ 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-width': 5,
+                // // 'line-color': 'rgb(203,211,2)',
+                // 'line-width': 5,
+                // 'line-blur': 0,
+                'line-color': '#009EE0',
+                'line-width': 4,
                 'line-blur': 0,
             };
         case 'circle':
@@ -2648,10 +2653,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 {};
@@ -4353,6 +4362,23 @@ MlLayerSwipe.defaultProps = {
     buttonStyle: {},
 };
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -4362,33 +4388,15 @@ function _typeof(o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
   }, _typeof(o);
 }
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
 }
 
-var _showNextTransitionSegment = function _showNextTransitionSegment(props, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef, setDisplayGeojson) {
+var _showNextTransitionSegment2 = function _showNextTransitionSegment(props, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef, setDisplayGeojson) {
   var _arguments = arguments;
   if (typeof transitionGeojsonDataRef.current[currentTransitionStepRef.current] !== "undefined") {
     // if at last transition step set to target geojson
@@ -4401,7 +4409,7 @@ var _showNextTransitionSegment = function _showNextTransitionSegment(props, map,
     currentTransitionStepRef.current++;
     if (transitionInProgressRef.current && currentTransitionStepRef.current < transitionGeojsonDataRef.current.length) {
       transitionTimeoutRef.current = setTimeout(function () {
-        return _showNextTransitionSegment.apply(void 0, _toConsumableArray(_arguments));
+        return _showNextTransitionSegment2.apply(void 0, _toConsumableArray(_arguments));
       }, msPerStep);
     } else {
       if (typeof props.onTransitionEnd === "function") {
@@ -4491,7 +4499,7 @@ var _transitionToGeojson = function _transitionToGeojson(props, transitionGeojso
   currentTransitionStepRef.current = 1;
   transitionInProgressRef.current = true;
   transitionTimeoutRef.current = setTimeout(function () {
-    return _showNextTransitionSegment(props, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef, setDisplayGeojson);
+    return _showNextTransitionSegment2(props, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef, setDisplayGeojson);
   }, msPerStep);
 };
 var createTransitionSteps = function createTransitionSteps(linestringCoordinates, perStepDistance, stepCnt) {
@@ -4580,76 +4588,130 @@ var MlTransitionGeoJsonLayer = function (props) {
         React__default.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 = useRef(null);
-    var _a = useState({
-        width: "400px",
-        height: "500px",
-    }), iframeDimensions = _a[0], setIframeDimensions = _a[1];
-    var _b = useState(), markerPixelPos = _b[0], setMarkerPixelPos = _b[1];
+    var _d = useState(null), marker = _d[0], setMarker = _d[1];
+    var container = useRef(null);
+    var iframeRef = useRef(null);
     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]);
-    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__default.createElement(React__default.Fragment, null,
-        React__default.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__default.createElement(Paper$1, { 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]);
+    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 &&
+        createPortal(React__default.createElement(Box$1, { 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__default.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__default.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));
 };
 
 /**
@@ -6928,41 +6990,61 @@ var sketchTools = [
  *
  */
 var MlSketchTool = function (props) {
-    var _a, _b;
     var mapHook = useMap({
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var _c = useState(), hoveredGeometry = _c[0], setHoveredGeometry = _c[1];
-    var _d = useState({
+    var _a = useState(), hoveredGeometry = _a[0], setHoveredGeometry = _a[1];
+    var _b = useState({
         activeGeometryIndex: undefined,
         selectedGeoJson: undefined,
         geometries: [],
         drawMode: undefined,
-    }), sketchState = _d[0], setSketchState = _d[1];
+    }), sketchState = _b[0], setSketchState = _b[1];
+    console.log(sketchState);
     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 });
         });
     };
+    var handleCheckboxChange = function (event) {
+        var _a;
+        (_a = props.onShowInstructionChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.checked);
+    };
     var SketchToolButtons = function () {
         return (React__default.createElement(React__default.Fragment, null, sketchTools.map(function (el) {
             var stateColor = function (theme) {
@@ -6994,7 +7076,11 @@ var MlSketchTool = function (props) {
             } },
             React__default.createElement(ButtonGroup, null,
                 React__default.createElement(SketchToolButtons, null))),
+        React__default.createElement(Box, { sx: { marginTop: '10px' } },
+            React__default.createElement(FormGroup, null,
+                React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { size: "small", checked: props.showInstruction, onChange: handleCheckboxChange }), label: "Show instructions" }))),
         sketchState.drawMode && (React__default.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) {
@@ -7013,65 +7099,152 @@ 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 () {
                 setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { drawMode: undefined, activeGeometryIndex: undefined, selectedGeoJson: undefined })); });
             } })),
         React__default.createElement(List$1, { sx: { zIndex: 105, marginBottom: '-10px' } },
-            sketchState.geometries.map(function (el) { return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Box, { key: el.id, sx: { display: 'flex', flexDirection: 'column' } },
-                    React__default.createElement("br", null),
-                    React__default.createElement(Box, { flexDirection: 'row', sx: {
-                            '&:hover': {
-                                backgroundColor: 'rgb(177, 177, 177, 0.2)',
-                            },
-                            marginTop: '25px',
-                        }, onMouseOver: function () {
-                            setHoveredGeometry(el);
-                        }, onMouseLeave: function () {
-                            setHoveredGeometry(undefined);
-                        } },
-                        React__default.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React__default.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id) }), type: 'layer', name: String(el.id), description: el.geometry.type }),
-                        React__default.createElement(Box, { sx: {
-                                padding: '3px 30px',
+            sketchState.geometries.map(function (el, index) {
+                var _a, _b, _c;
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Box, { key: el.id, sx: { display: 'flex', flexDirection: 'column' } },
+                        React__default.createElement("br", null),
+                        React__default.createElement(Box, { flexDirection: 'row', sx: {
+                                '&:hover': {
+                                    backgroundColor: 'rgb(177, 177, 177, 0.2)',
+                                },
+                                marginTop: '25px',
+                            }, onMouseOver: function () {
+                                setHoveredGeometry(el);
+                            }, onMouseLeave: function () {
+                                setHoveredGeometry(undefined);
                             } },
-                            React__default.createElement(ButtonGroup, { size: "small" },
-                                React__default.createElement(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.centerOfMass(el).geometry.coordinates);
-                                    } },
-                                    React__default.createElement(GpsFixedIcon, null)),
-                                React__default.createElement(Button, { sx: buttonStyle, onClick: function () {
-                                        setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { selectedGeoJson: el, activeGeometryIndex: _sketchState.geometries.indexOf(el), drawMode: 'simple_select' })); });
-                                    } },
-                                    React__default.createElement(EditIcon, null)),
-                                React__default.createElement(Button, { sx: buttonStyle, onClick: function () {
-                                        removeGeoJson(el);
-                                        setHoveredGeometry(undefined);
-                                    } },
-                                    React__default.createElement(DeleteIcon, null)))))))); }),
+                            !((_a = el.properties) === null || _a === void 0 ? void 0 : _a.customName) && (React__default.createElement("input", { type: "text", value: ((_b = el.properties) === null || _b === void 0 ? void 0 : _b.name) || '', placeholder: "Assign name", onChange: function (e) {
+                                    var newName = e.target.value;
+                                    setSketchState(function (_sketchState) {
+                                        var updatedGeometries = __spreadArray([], _sketchState.geometries, true);
+                                        if (!updatedGeometries[index].properties) {
+                                            updatedGeometries[index].properties = {};
+                                        }
+                                        updatedGeometries[index].properties.name = newName;
+                                        return __assign(__assign({}, _sketchState), { geometries: updatedGeometries });
+                                    });
+                                }, style: {
+                                    padding: '5px',
+                                    border: '1px solid #ccc',
+                                    borderRadius: '4px',
+                                    outline: 'none',
+                                }, onFocus: function (e) { return (e.target.style.borderColor = '#009ee0'); }, onBlur: function (e) {
+                                    e.target.style.borderColor = '#ccc';
+                                    setSketchState(function (_sketchState) {
+                                        var updatedGeometries = __spreadArray([], _sketchState.geometries, true);
+                                        if (!updatedGeometries[index].properties) {
+                                            updatedGeometries[index].properties = {};
+                                        }
+                                        updatedGeometries[index].properties.customName = true;
+                                        return __assign(__assign({}, _sketchState), { geometries: updatedGeometries });
+                                    });
+                                } })),
+                            React__default.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React__default.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id), defaultPaintOverrides: {
+                                        fill: { 'fill-opacity': 0.5 },
+                                    } }), type: 'layer', name: React__default.createElement(Typography, { onClick: function () {
+                                        setSketchState(function (_sketchState) {
+                                            var updatedGeometries = __spreadArray([], _sketchState.geometries, true);
+                                            if (!updatedGeometries[index].properties) {
+                                                updatedGeometries[index].properties = {};
+                                            }
+                                            updatedGeometries[index].properties.customName = false;
+                                            return __assign(__assign({}, _sketchState), { geometries: updatedGeometries });
+                                        });
+                                    }, sx: {
+                                        cursor: 'pointer',
+                                        overflow: 'hidden',
+                                        whiteSpace: 'nowrap',
+                                    } }, ((_c = el.properties) === null || _c === void 0 ? void 0 : _c.name) || String(el.id)), description: el.geometry.type }),
+                            React__default.createElement(Box, { sx: {
+                                    padding: '3px 30px',
+                                } },
+                                React__default.createElement(ButtonGroup, { size: "small" },
+                                    React__default.createElement(Tooltip$1, { title: "Center" },
+                                        React__default.createElement(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.centerOfMass(el).geometry.coordinates);
+                                            } },
+                                            React__default.createElement(GpsFixedIcon, null))),
+                                    React__default.createElement(Tooltip$1, { title: "Edit" },
+                                        React__default.createElement(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__default.createElement(EditIcon, null))),
+                                    React__default.createElement(Tooltip$1, { title: "Delete" },
+                                        React__default.createElement(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__default.createElement(DeleteIcon, null)))))))));
+            }),
             hoveredGeometry && (React__default.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__default.createElement(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,