@biodiv-platform/naksha-maplibre-draw 5.0.7 → 5.0.8

package/dist/esm/index.js

@@ -20,6 +20,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/components/map.tsx
 import maplibregl2 from "maplibre-gl";
+import { useRef, useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
 
 // src/components/setup-draw.tsx
 import {
@@ -34,6 +35,9 @@ import {
   TerraDrawRectangleMode
 } from "terra-draw";
 import { TerraDrawMapLibreGLAdapter } from "terra-draw-maplibre-gl-adapter";
+import { tw } from "twind";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
 function setupDraw(map) {
   return new TerraDraw({
     tracked: true,
@@ -124,9 +128,50 @@ function setupDraw(map) {
     ]
   });
 }
-
-// src/components/map.tsx
-import { useRef, useState as useState2, useEffect as useEffect2, useCallback } from "react";
+var ensureModeProperty = (features) => {
+  return features.map((feature) => {
+    var _a, _b;
+    if ((_a = feature.properties) == null ? void 0 : _a.mode)
+      return feature;
+    const type = (_b = feature.geometry) == null ? void 0 : _b.type;
+    const mode = type === "Point" ? "point" : type === "Polygon" ? "polygon" : type === "LineString" ? "linestring" : "unknown";
+    return __spreadProps(__spreadValues({}, feature), {
+      properties: __spreadProps(__spreadValues({}, feature.properties), { mode })
+    });
+  });
+};
+var IconButton = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx("button", __spreadValues({
+    ref,
+    type: "button",
+    className: tw`h-8 px-3 py-2 rounded-md focus:outline-none  cursor-pointer text-md flex align-middle items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 disabled:cursor-not-allowed disabled:bg-gray-100! disabled:opacity-50`
+  }, props))
+);
+var MapStyleSwitcher = ({
+  currentStyleIdx,
+  onStyleChange,
+  mapStyles
+}) => /* @__PURE__ */ jsx("div", {
+  style: {
+    position: "absolute",
+    left: 12,
+    bottom: 12,
+    background: "rgba(255,255,255,0.95)",
+    padding: "8px",
+    borderRadius: "6px",
+    zIndex: 1e3,
+    boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
+  },
+  children: /* @__PURE__ */ jsx("select", {
+    value: currentStyleIdx,
+    onChange: (e) => onStyleChange(Number(e.target.value)),
+    style: { fontSize: 14, padding: "4px" },
+    children: mapStyles.map((style, idx) => /* @__PURE__ */ jsx("option", {
+      value: idx,
+      children: style.text || `Style ${idx + 1}`
+    }, style.key || idx))
+  })
+});
 
 // src/components/setup-maplibre.tsx
 import maplibregl from "maplibre-gl";
@@ -155,8 +200,97 @@ function setupMaplibreMap({
   });
 }
 
+// src/components/map-buttons/map-buttons.tsx
+import { useEffect, useState, useCallback, useMemo } from "react";
+
 // src/components/icon-buttons/icons.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PencilOpenIcon = () => /* @__PURE__ */ jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [
+    /* @__PURE__ */ jsx2("path", {
+      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "m15 5 4 4"
+    })
+  ]
+});
+var PencilCloseIcon = () => /* @__PURE__ */ jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [
+    /* @__PURE__ */ jsx2("path", {
+      d: "m10 10-6.157 6.162a2 2 0 0 0-.5.833l-1.322 4.36a.5.5 0 0 0 .622.624l4.358-1.323a2 2 0 0 0 .83-.5L14 13.982"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "m12.829 7.172 4.359-4.346a1 1 0 1 1 3.986 3.986l-4.353 4.353"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "m15 5 4 4"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "m2 2 20 20"
+    })
+  ]
+});
+var LocateIcon = () => /* @__PURE__ */ jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [
+    /* @__PURE__ */ jsx2("line", {
+      x1: "2",
+      x2: "5",
+      y1: "12",
+      y2: "12"
+    }),
+    /* @__PURE__ */ jsx2("line", {
+      x1: "19",
+      x2: "22",
+      y1: "12",
+      y2: "12"
+    }),
+    /* @__PURE__ */ jsx2("line", {
+      x1: "12",
+      x2: "12",
+      y1: "2",
+      y2: "5"
+    }),
+    /* @__PURE__ */ jsx2("line", {
+      x1: "12",
+      x2: "12",
+      y1: "19",
+      y2: "22"
+    }),
+    /* @__PURE__ */ jsx2("circle", {
+      cx: "12",
+      cy: "12",
+      r: "7"
+    })
+  ]
+});
 var SelectIcon = () => /* @__PURE__ */ jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
@@ -168,10 +302,10 @@ var SelectIcon = () => /* @__PURE__ */ jsxs("svg", {
   strokeLinecap: "round",
   strokeLinejoin: "round",
   children: [
-    /* @__PURE__ */ jsx("path", {
+    /* @__PURE__ */ jsx2("path", {
       d: "M12.586 12.586 19 19"
     }),
-    /* @__PURE__ */ jsx("path", {
+    /* @__PURE__ */ jsx2("path", {
       d: "M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"
     })
   ]
@@ -187,150 +321,143 @@ var PointIcon = () => /* @__PURE__ */ jsxs("svg", {
   strokeLinecap: "round",
   strokeLinejoin: "round",
   children: [
-    /* @__PURE__ */ jsx("path", {
+    /* @__PURE__ */ jsx2("path", {
       d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
     }),
-    /* @__PURE__ */ jsx("circle", {
+    /* @__PURE__ */ jsx2("circle", {
       cx: "12",
       cy: "10",
       r: "3"
     })
   ]
 });
-var LineIcon = () => /* @__PURE__ */ jsx("svg", {
+var LineIcon = () => /* @__PURE__ */ jsx2("svg", {
   width: "16",
   height: "16",
   viewBox: "0 0 24 24",
   fill: "none",
   stroke: "currentColor",
   strokeWidth: "2",
-  children: /* @__PURE__ */ jsx("line", {
+  children: /* @__PURE__ */ jsx2("line", {
     x1: "4",
     y1: "20",
     x2: "20",
     y2: "4"
   })
 });
-var PolygonIcon = () => /* @__PURE__ */ jsx("svg", {
+var PolygonIcon = () => /* @__PURE__ */ jsx2("svg", {
   width: "16",
   height: "16",
   viewBox: "0 0 24 24",
   fill: "none",
   stroke: "currentColor",
   strokeWidth: "2",
-  children: /* @__PURE__ */ jsx("polygon", {
+  children: /* @__PURE__ */ jsx2("polygon", {
     points: "12,2 22,8 18,22 6,22 2,8"
   })
 });
-var DeleteIcon = () => /* @__PURE__ */ jsx("svg", {
+var RectangleIcon = () => /* @__PURE__ */ jsx2("svg", {
   width: "16",
   height: "16",
   viewBox: "0 0 24 24",
   fill: "none",
   stroke: "currentColor",
   strokeWidth: "2",
-  children: /* @__PURE__ */ jsx("path", {
+  children: /* @__PURE__ */ jsx2("rect", {
+    x: "4",
+    y: "4",
+    width: "16",
+    height: "16"
+  })
+});
+var CircleIcon = () => /* @__PURE__ */ jsx2("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  children: /* @__PURE__ */ jsx2("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  })
+});
+var FreeHandIcon = () => /* @__PURE__ */ jsx2("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  children: /* @__PURE__ */ jsx2("path", {
+    d: "M3 16c1-3 4-5 7-4 3 1 5 3 7 2 2-1 3-4 1-6-1-2-4-2-6-1"
+  })
+});
+var DeleteIcon = () => /* @__PURE__ */ jsx2("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  children: /* @__PURE__ */ jsx2("path", {
     d: "M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
   })
 });
 
-// src/components/map-button/MapButton.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+// src/components/map-button/map-button.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BUTTON_STYLE = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: 30,
+  height: 30,
+  padding: 0,
+  borderRadius: 4
+};
 var MapButton = ({
   mode,
   currentMode,
-  changeMode,
+  onClick,
   icon,
-  tooltip
-}) => {
-  return /* @__PURE__ */ jsx2("button", {
-    onClick: () => changeMode(mode),
-    title: tooltip,
-    style: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      width: "30px",
-      height: "30px",
-      padding: "0",
-      borderRadius: "4px",
-      backgroundColor: currentMode === mode ? "#02cf87" : "#f0f0f0",
-      cursor: "pointer"
-    },
-    children: icon
-  });
-};
-var MapButton_default = MapButton;
+  tooltip,
+  disabled
+}) => /* @__PURE__ */ jsx3(IconButton, {
+  type: "button",
+  title: tooltip,
+  disabled,
+  onClick: () => !disabled && onClick(mode != null ? mode : ""),
+  style: __spreadProps(__spreadValues({}, BUTTON_STYLE), {
+    backgroundColor: disabled ? "#d3d3d3" : currentMode === mode ? "#02cf87" : "#f0f0f0",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.6 : 1
+  }),
+  children: icon
+});
+var map_button_default = MapButton;
 
-// src/components/map-buttons/MapButtons.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var MapButtons = ({
+// src/components/map-buttons/map-buttons.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function MapButtons({
   mode,
-  changeMode
-}) => {
-  return /* @__PURE__ */ jsxs2("div", {
-    style: {
-      position: "absolute",
-      top: "10px",
-      left: "10px",
-      display: "flex",
-      flexDirection: "column",
-      gap: "6px",
-      zIndex: 1e3,
-      backgroundColor: "rgba(255, 255, 255, 0.9)",
-      padding: "8px",
-      borderRadius: "6px",
-      boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
-    },
-    children: [
-      /* @__PURE__ */ jsx3(MapButton_default, {
-        mode: "select",
-        icon: /* @__PURE__ */ jsx3(SelectIcon, {}),
-        currentMode: mode,
-        changeMode,
-        tooltip: "Select"
-      }),
-      /* @__PURE__ */ jsx3(MapButton_default, {
-        mode: "point",
-        icon: /* @__PURE__ */ jsx3(PointIcon, {}),
-        currentMode: mode,
-        changeMode,
-        tooltip: "Point"
-      }),
-      /* @__PURE__ */ jsx3(MapButton_default, {
-        mode: "linestring",
-        icon: /* @__PURE__ */ jsx3(LineIcon, {}),
-        currentMode: mode,
-        changeMode,
-        tooltip: "Line"
-      }),
-      /* @__PURE__ */ jsx3(MapButton_default, {
-        mode: "polygon",
-        icon: /* @__PURE__ */ jsx3(PolygonIcon, {}),
-        currentMode: mode,
-        changeMode,
-        tooltip: "Polygon"
-      })
-    ]
-  });
-};
-var MapButtons_default = MapButtons;
-
-// src/components/icon-buttons/ClearButton.tsx
-import { useState, useEffect } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ClearButton = ({
+  setMode,
+  onClick,
   draw,
-  onFeaturesChange
-}) => {
+  onFeaturesChange,
+  isMultiple = true,
+  autoFocus
+}) {
+  const [expanded, setExpanded] = useState(false);
   const [hasFeatures, setHasFeatures] = useState(false);
+  const updateHasFeatures = useCallback(
+    () => setHasFeatures(draw.getSnapshot().length > 0),
+    [draw]
+  );
   useEffect(() => {
     if (!draw)
       return;
-    const updateHasFeatures = () => {
-      const snapshot = draw.getSnapshot();
-      setHasFeatures(snapshot.length > 0);
-    };
     draw.on("finish", updateHasFeatures);
     draw.on("change", updateHasFeatures);
     updateHasFeatures();
@@ -338,128 +465,242 @@ var ClearButton = ({
       draw.off("finish", updateHasFeatures);
       draw.off("change", updateHasFeatures);
     };
-  }, [draw]);
-  const handleClear = () => {
-    if (!draw)
+  }, [draw, updateHasFeatures]);
+  const handleGeolocation = useCallback(() => {
+    if (!("geolocation" in navigator)) {
+      alert("Geolocation is not supported in this browser.");
       return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        const coords = [
+          pos.coords.longitude,
+          pos.coords.latitude
+        ];
+        const pt = {
+          type: "Feature",
+          geometry: { type: "Point", coordinates: coords },
+          properties: { mode: "point", source: "geolocation" }
+        };
+        if (!isMultiple)
+          draw.clear();
+        draw.addFeatures([pt]);
+        onFeaturesChange == null ? void 0 : onFeaturesChange(draw.getSnapshot());
+        autoFocus == null ? void 0 : autoFocus([pt]);
+      },
+      (error) => {
+        alert("Error getting geolocation");
+        console.error(error);
+      }
+    );
+    setMode("current-location");
+  }, [draw, isMultiple, onFeaturesChange, autoFocus]);
+  const handleClear = useCallback(() => {
     draw.clear();
     setHasFeatures(false);
-    if (onFeaturesChange)
-      onFeaturesChange([]);
-  };
-  return /* @__PURE__ */ jsx4("button", {
-    onClick: handleClear,
-    title: "Clear all features",
-    disabled: !hasFeatures,
+    setMode("static");
+    onFeaturesChange == null ? void 0 : onFeaturesChange([]);
+  }, [draw, onFeaturesChange]);
+  const buttons = useMemo(
+    () => [
+      {
+        icon: /* @__PURE__ */ jsx4(LocateIcon, {}),
+        mode: "current-location",
+        onClick: handleGeolocation,
+        tooltip: "Use current location"
+      },
+      {
+        icon: /* @__PURE__ */ jsx4(SelectIcon, {}),
+        mode: "select",
+        onClick,
+        tooltip: "Select"
+      },
+      {
+        icon: /* @__PURE__ */ jsx4(PointIcon, {}),
+        mode: "point",
+        onClick,
+        tooltip: "Point"
+      },
+      {
+        icon: /* @__PURE__ */ jsx4(LineIcon, {}),
+        mode: "linestring",
+        onClick,
+        tooltip: "Linestring"
+      },
+      {
+        icon: /* @__PURE__ */ jsx4(PolygonIcon, {}),
+        mode: "polygon",
+        onClick,
+        tooltip: "Polygon"
+      },
+      {
+        icon: /* @__PURE__ */ jsx4(RectangleIcon, {}),
+        mode: "rectangle",
+        onClick,
+        tooltip: "Reactangle"
+      },
+      {
+        icon: /* @__PURE__ */ jsx4(CircleIcon, {}),
+        mode: "circle",
+        onClick,
+        tooltip: "Circle"
+      },
+      {
+        icon: /* @__PURE__ */ jsx4(FreeHandIcon, {}),
+        mode: "freehand",
+        onClick,
+        tooltip: "Freehand"
+      },
+      {
+        icon: /* @__PURE__ */ jsx4(DeleteIcon, {}),
+        mode: "clear",
+        onClick: handleClear,
+        tooltip: "Clear all features",
+        disabled: !hasFeatures
+      }
+    ],
+    [onClick, handleGeolocation, handleClear, hasFeatures]
+  );
+  return /* @__PURE__ */ jsxs2("div", {
     style: {
+      position: "absolute",
+      top: 10,
+      left: 10,
       display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      width: "30px",
-      height: "30px",
-      padding: "0",
-      borderRadius: "4px",
-      backgroundColor: hasFeatures ? "#f0f0f0" : "#e0e0e0",
-      cursor: hasFeatures ? "pointer" : "not-allowed"
+      flexDirection: "column",
+      gap: 6,
+      zIndex: 1e3,
+      backgroundColor: "rgba(255,255,255,0.9)",
+      padding: 8,
+      borderRadius: 6,
+      boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
     },
-    children: /* @__PURE__ */ jsx4(DeleteIcon, {})
+    children: [
+      /* @__PURE__ */ jsx4(IconButton, {
+        onClick: () => setExpanded((v) => !v),
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: 30,
+          height: 30,
+          padding: 0,
+          borderRadius: 4,
+          backgroundColor: "#d3d3d3"
+        },
+        title: "Expand or collapse tools",
+        children: expanded ? /* @__PURE__ */ jsx4(PencilCloseIcon, {}) : /* @__PURE__ */ jsx4(PencilOpenIcon, {})
+      }),
+      expanded && /* @__PURE__ */ jsx4("div", {
+        style: { display: "flex", flexDirection: "column", gap: 6 },
+        children: buttons.map((btn, i) => /* @__PURE__ */ jsx4(map_button_default, {
+          icon: btn.icon,
+          mode: btn.mode,
+          currentMode: mode,
+          onClick: btn.onClick,
+          tooltip: btn.tooltip,
+          disabled: btn.disabled
+        }, i))
+      })
+    ]
   });
-};
-var ClearButton_default = ClearButton;
+}
+var map_buttons_default = MapButtons;
 
 // src/components/map.tsx
-import { defaultMapStyles } from "@biodiv-platform/naksha-commons";
 import bbox from "@turf/bbox";
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var ensureModeProperty = (features) => {
-  return features.map((feature) => {
-    var _a, _b;
-    if ((_a = feature.properties) == null ? void 0 : _a.mode)
-      return feature;
-    const geometryType = (_b = feature.geometry) == null ? void 0 : _b.type;
-    const mode = geometryType === "Point" ? "point" : geometryType === "Polygon" ? "polygon" : geometryType === "LineString" ? "linestring" : "unknown";
-    return __spreadProps(__spreadValues({}, feature), {
-      properties: __spreadProps(__spreadValues({}, feature.properties), { mode })
-    });
-  });
-};
+import { defaultMapStyles } from "@biodiv-platform/naksha-commons";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var Map = (props) => {
+  var _a;
+  console.info("Rendering Naksha Maplibre Draw Map Component");
   const mapRef = useRef(null);
   const [map, setMap] = useState2();
   const [mode, setMode] = useState2("static");
   const [draw, setDraw] = useState2();
-  const mapStyle = defaultMapStyles[(props == null ? void 0 : props.mapStyle) || 0].style;
-  const { isMultiple = true } = props;
+  const { isMultiple = true, features = [], onFeaturesChange } = props;
+  const [selectedMapStyleIdx, setSelectedMapStyleIdx] = useState2(
+    (props == null ? void 0 : props.mapStyle) || 0
+  );
+  const mapTile = props.mapStyles ? props.mapStyles : defaultMapStyles;
+  const mapStyle = (_a = mapTile[selectedMapStyleIdx]) == null ? void 0 : _a.style;
+  const autoFocus = useCallback2(
+    (features2) => {
+      if (!(features2 == null ? void 0 : features2.length) || !map)
+        return;
+      const _bbox = bbox({ type: "FeatureCollection", features: features2 });
+      map.fitBounds(_bbox, {
+        padding: 40,
+        duration: 1e3,
+        maxZoom: 15
+      });
+    },
+    [map]
+  );
+  const mapStyleConfig = mapTile[selectedMapStyleIdx];
   useEffect2(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const maplibreMap = setupMaplibreMap({
       containerId: "maplibre-map",
-      latitude: (_b = (_a = props.defaultViewState) == null ? void 0 : _a.latitude) != null ? _b : 0,
+      latitude: (_b = (_a2 = props.defaultViewState) == null ? void 0 : _a2.latitude) != null ? _b : 0,
       longitude: (_d = (_c = props.defaultViewState) == null ? void 0 : _c.longitude) != null ? _d : 0,
       zoom: (_f = (_e = props.defaultViewState) == null ? void 0 : _e.zoom) != null ? _f : 0,
       pitch: (_h = (_g = props.defaultViewState) == null ? void 0 : _g.pitch) != null ? _h : 0,
       bearing: (_j = (_i = props.defaultViewState) == null ? void 0 : _i.bearing) != null ? _j : 0,
       mapstyle: mapStyle
     });
+    if ("maxZoom" in mapStyleConfig && mapStyleConfig.maxZoom) {
+      maplibreMap.setMaxZoom(mapStyleConfig.maxZoom);
+    }
     const navControl = new maplibregl2.NavigationControl({
       showCompass: true,
       showZoom: true,
       visualizePitch: true
     });
+    const fullscreen = new maplibregl2.FullscreenControl({});
     maplibreMap.addControl(navControl, "bottom-right");
+    maplibreMap.addControl(fullscreen, "bottom-right");
     maplibreMap.once("style.load", () => setMap(maplibreMap));
     return () => {
-      if (navControl && maplibreMap) {
-        maplibreMap.removeControl(navControl);
-      }
+      maplibreMap.removeControl(navControl);
     };
-  }, []);
-  const autoFocus = useCallback(
-    (features) => {
-      if (!(features == null ? void 0 : features.length) || !map)
-        return;
-      const _bbox = bbox({
-        type: "FeatureCollection",
-        features
-      });
-      map.fitBounds(_bbox, { padding: 40, duration: 1e3 });
-    },
-    [map]
+  }, [mapStyle, props.defaultViewState]);
+  const filterUserFeatures = (features2) => features2.filter(
+    (f) => f.geometry.type !== "Point" || f.properties.mode !== "static" && f.properties.mode !== "select"
   );
   useEffect2(() => {
-    var _a;
     if (!map)
       return;
     const terraDraw = setupDraw(map);
     terraDraw.start();
     setDraw(terraDraw);
     const handleChange = () => {
-      var _a2;
-      const snapshot = terraDraw.getSnapshot();
-      let filteredFeatures = snapshot;
-      if (!isMultiple && snapshot.length > 1) {
-        const latestFeature = snapshot[snapshot.length - 1];
-        filteredFeatures = [latestFeature];
-        const featuresToRemove = snapshot.slice(0, -1);
-        const featureIds = featuresToRemove.map((f) => f.id).filter((id) => id !== void 0);
-        if (featureIds.length > 0) {
-          terraDraw.removeFeatures(featureIds);
+      let snapshot = terraDraw.getSnapshot();
+      let userFeatures = filterUserFeatures(snapshot);
+      if (!isMultiple && userFeatures.length > 1) {
+        const lastFeature = userFeatures.at(-1);
+        const toRemove = userFeatures.slice(0, -1).map((f) => f.id).filter((id) => Boolean(id));
+        if (toRemove.length > 0) {
+          try {
+            terraDraw.removeFeatures(toRemove);
+          } catch (e) {
+            console.warn("removeFeatures failed", e);
+          }
         }
+        userFeatures = [lastFeature];
       }
-      (_a2 = props.onFeaturesChange) == null ? void 0 : _a2.call(props, snapshot);
-      autoFocus(filteredFeatures);
+      onFeaturesChange == null ? void 0 : onFeaturesChange(userFeatures);
+      autoFocus(userFeatures);
+      setMode("static");
     };
     terraDraw.on("finish", handleChange);
-    if ((_a = props.features) == null ? void 0 : _a.length) {
+    if (features.length) {
       setTimeout(() => {
         if (terraDraw.getSnapshot().length === 0) {
-          const featuresWithMode = ensureModeProperty(props.features);
-          let initialFeatures = featuresWithMode;
-          if (!isMultiple && featuresWithMode.length > 1) {
-            initialFeatures = [featuresWithMode[featuresWithMode.length - 1]];
-          }
-          terraDraw.addFeatures(initialFeatures);
-          autoFocus(initialFeatures);
+          let withMode = ensureModeProperty(features);
+          let initial = !isMultiple && withMode.length > 1 ? [withMode.at(-1)] : withMode;
+          terraDraw.addFeatures(initial);
+          autoFocus(initial);
         }
       });
     }
@@ -467,45 +708,37 @@ var Map = (props) => {
       terraDraw.off("finish", handleChange);
       terraDraw.stop();
     };
-  }, [map, isMultiple, autoFocus]);
-  const changeMode = useCallback(
+  }, [map, isMultiple, autoFocus, features, onFeaturesChange]);
+  const changeMode = useCallback2(
     (newMode) => {
       draw == null ? void 0 : draw.setMode(newMode);
       setMode(newMode);
     },
     [draw]
   );
-  return /* @__PURE__ */ jsx5("div", {
+  const handleStyleChange = (idx) => {
+    setSelectedMapStyleIdx(idx);
+  };
+  return /* @__PURE__ */ jsxs3("div", {
     ref: mapRef,
     id: "maplibre-map",
-    style: { width: "100%", height: "100%" },
-    children: draw && /* @__PURE__ */ jsxs3(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx5(MapButtons_default, {
-          mode,
-          changeMode
-        }),
-        /* @__PURE__ */ jsx5("div", {
-          style: {
-            position: "absolute",
-            top: "180px",
-            left: "10px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "6px",
-            zIndex: 1e3,
-            backgroundColor: "rgba(255, 255, 255, 0.9)",
-            padding: "8px",
-            borderRadius: "6px",
-            boxShadow: "0 2px 6px rgba(0,0,0,0.2)"
-          },
-          children: /* @__PURE__ */ jsx5(ClearButton_default, {
-            draw,
-            onFeaturesChange: props.onFeaturesChange
-          })
-        })
-      ]
-    })
+    style: { width: "100%", height: "100%", position: "relative" },
+    children: [
+      /* @__PURE__ */ jsx5(MapStyleSwitcher, {
+        currentStyleIdx: selectedMapStyleIdx,
+        onStyleChange: handleStyleChange,
+        mapStyles: mapTile
+      }),
+      draw && /* @__PURE__ */ jsx5(map_buttons_default, {
+        mode,
+        setMode,
+        onClick: changeMode,
+        draw,
+        onFeaturesChange,
+        isMultiple,
+        autoFocus
+      })
+    ]
   });
 };
 var map_default = Map;