react-bkoi-gl 2.0.0 → 2.1.0

package/dist/index.cjs

@@ -1,26 +1,9 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -44,16 +27,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   AttributionControl: () => AttributionControl,
+  CanvasSource: () => CanvasSource,
+  DrawControl: () => DrawControl,
   FullscreenControl: () => FullscreenControl,
   GeolocateControl: () => GeolocateControl,
+  GlobeControl: () => GlobeControl,
   Layer: () => Layer,
   LogoControl: () => LogoControl,
   Map: () => Map,
   MapProvider: () => MapProvider,
   Marker: () => Marker,
+  Minimap: () => Minimap,
+  MinimapControl: () => MinimapControl,
   NavigationControl: () => NavigationControl,
   Popup: () => Popup,
   ScaleControl: () => ScaleControl,
@@ -63,7 +51,7 @@ __export(src_exports, {
   useControl: () => useControl,
   useMap: () => useMap
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/components/map.tsx
 var React2 = __toESM(require("react"), 1);
@@ -83,13 +71,13 @@ var MapProvider = (props) => {
       if (currMaps[id]) {
         throw new Error(`Multiple maps with the same id: ${id}`);
       }
-      return __spreadProps(__spreadValues({}, currMaps), { [id]: map });
+      return { ...currMaps, [id]: map };
     });
   }, []);
   const onMapUnmount = (0, import_react.useCallback)((id = "default") => {
     setMaps((currMaps) => {
       if (currMaps[id]) {
-        const nextMaps = __spreadValues({}, currMaps);
+        const nextMaps = { ...currMaps };
         delete nextMaps[id];
         return nextMaps;
       }
@@ -109,11 +97,11 @@ var MapProvider = (props) => {
   );
 };
 function useMap() {
-  var _a;
-  const maps = (_a = (0, import_react.useContext)(MountedMapsContext)) == null ? void 0 : _a.maps;
+  const maps = (0, import_react.useContext)(MountedMapsContext)?.maps;
   const currentMap = (0, import_react.useContext)(MapContext);
   const mapsWithCurrent = (0, import_react.useMemo)(() => {
-    return __spreadProps(__spreadValues({}, maps), { current: currentMap == null ? void 0 : currentMap.map });
+    const current = currentMap?.map || (maps ? Object.values(maps)[0] : void 0);
+    return { ...maps, current };
   }, [maps, currentMap]);
   return mapsWithCurrent;
 }
@@ -153,7 +141,7 @@ function deepEqual(a, b) {
       return false;
     }
     for (const key of aKeys) {
-      if (!b.hasOwnProperty(key)) {
+      if (!Object.prototype.hasOwnProperty.call(b, key)) {
         return false;
       }
       if (!deepEqual(a[key], b[key])) {
@@ -199,15 +187,7 @@ function applyViewStateToTransform(tr, props) {
 }
 
 // src/utils/style-utils.ts
-var refProps = [
-  "type",
-  "source",
-  "source-layer",
-  "minzoom",
-  "maxzoom",
-  "filter",
-  "layout"
-];
+var refProps = ["type", "source", "source-layer", "minzoom", "maxzoom", "filter", "layout"];
 function normalizeStyle(style) {
   if (!style) {
     return null;
@@ -226,14 +206,15 @@ function normalizeStyle(style) {
     layerIndex[layer.id] = layer;
   }
   const layers = style.layers.map((layer) => {
+    const legacyLayer = layer;
     let normalizedLayer = null;
-    if ("interactive" in layer) {
-      normalizedLayer = Object.assign({}, layer);
+    if ("interactive" in legacyLayer) {
+      normalizedLayer = Object.assign({}, legacyLayer);
       delete normalizedLayer.interactive;
     }
-    const layerRef = layerIndex[layer.ref];
+    const layerRef = layerIndex[legacyLayer.ref];
     if (layerRef) {
-      normalizedLayer = normalizedLayer || Object.assign({}, layer);
+      normalizedLayer = normalizedLayer || Object.assign({}, legacyLayer);
       delete normalizedLayer.ref;
       for (const propName of refProps) {
         if (propName in layerRef) {
@@ -243,7 +224,7 @@ function normalizeStyle(style) {
     }
     return normalizedLayer || layer;
   });
-  return __spreadProps(__spreadValues({}, style), { layers });
+  return { ...style, layers };
 }
 
 // src/maplibre/maplibre.ts
@@ -319,7 +300,7 @@ var handlerNames = [
   "touchZoomRotate",
   "touchPitch"
 ];
-var _Maplibre = class {
+var Maplibre = class _Maplibre {
   constructor(MapClass, props, container) {
     // mapboxgl.Map instance
     this._map = null;
@@ -329,7 +310,8 @@ var _Maplibre = class {
     this._propsedCameraUpdate = null;
     this._styleComponents = {};
     this._onEvent = (e) => {
-      const cb = this.props[otherEvents[e.type]];
+      const handlerName = otherEvents[e.type];
+      const cb = this.props[handlerName];
       if (cb) {
         cb(e);
       } else if (e.type === "error") {
@@ -341,7 +323,8 @@ var _Maplibre = class {
         return;
       }
       e.viewState = this._propsedCameraUpdate || transformToViewState(this._map.transform);
-      const cb = this.props[cameraEvents[e.type]];
+      const handlerName = cameraEvents[e.type];
+      const cb = this.props[handlerName];
       if (cb) {
         cb(e);
       }
@@ -357,7 +340,8 @@ var _Maplibre = class {
       if (e.type === "mousemove" || e.type === "mouseout") {
         this._updateHover(e);
       }
-      const cb = this.props[pointerEvents[e.type]];
+      const handlerName = pointerEvents[e.type];
+      const cb = this.props[handlerName];
       if (cb) {
         if (this.props.interactiveLayerIds && e.type !== "mouseover" && e.type !== "mouseout") {
           e.features = this._hoveredFeatures || this._queryRenderedFeatures(e.point);
@@ -370,6 +354,9 @@ var _Maplibre = class {
     this.props = props;
     this._initialize(container);
   }
+  static {
+    this.savedMaps = [];
+  }
   get map() {
     return this._map;
   }
@@ -397,20 +384,22 @@ var _Maplibre = class {
     while (oldContainer.childNodes.length > 0) {
       container.appendChild(oldContainer.childNodes[0]);
     }
-    map._container = container;
-    const resizeObserver = map._resizeObserver;
+    const mapInternal = map;
+    mapInternal._container = container;
+    const resizeObserver = mapInternal._resizeObserver;
     if (resizeObserver) {
       resizeObserver.disconnect();
       resizeObserver.observe(container);
     }
-    that.setProps(__spreadProps(__spreadValues({}, props), { styleDiffing: false }));
+    that.setProps({ ...props, styleDiffing: false });
     map.resize();
     const { initialViewState } = props;
     if (initialViewState) {
       if (initialViewState.bounds) {
-        map.fitBounds(initialViewState.bounds, __spreadProps(__spreadValues({}, initialViewState.fitBoundsOptions), {
+        map.fitBounds(initialViewState.bounds, {
+          ...initialViewState.fitBoundsOptions,
           duration: 0
-        }));
+        });
       } else {
         that._updateViewState(initialViewState);
       }
@@ -420,17 +409,19 @@ var _Maplibre = class {
     } else {
       map.once("style.load", () => map.fire("load"));
     }
-    map._update();
+    const mapInternalForUpdate = map;
+    mapInternalForUpdate._update();
     return that;
   }
-  /* eslint-disable complexity,max-statements */
   _initialize(container) {
     const { props } = this;
     const { mapStyle = DEFAULT_STYLE } = props;
-    const mapOptions = __spreadProps(__spreadValues(__spreadValues({}, props), props.initialViewState), {
+    const mapOptions = {
+      ...props,
+      ...props.initialViewState,
       container,
       style: normalizeStyle(mapStyle)
-    });
+    };
     const viewState = mapOptions.initialViewState || mapOptions.viewState || mapOptions;
     Object.assign(mapOptions, {
       center: [viewState.longitude || 0, viewState.latitude || 0],
@@ -454,12 +445,11 @@ var _Maplibre = class {
     }
     map.transformCameraUpdate = this._onCameraUpdate;
     map.on("style.load", () => {
-      var _a;
+      const mapWithProjection = map;
       this._styleComponents = {
         light: map.getLight(),
         sky: map.getSky(),
-        // @ts-ignore getProjection() does not exist in v4
-        projection: (_a = map.getProjection) == null ? void 0 : _a.call(map),
+        projection: mapWithProjection.getProjection?.(),
         terrain: map.getTerrain()
       };
       this._updateStyleComponents(this.props);
@@ -478,11 +468,10 @@ var _Maplibre = class {
     }
     this._map = map;
   }
-  /* eslint-enable complexity,max-statements */
   recycle() {
     const container = this.map.getContainer();
     const children = container.querySelector("[mapboxgl-children]");
-    children == null ? void 0 : children.remove();
+    children?.remove();
     _Maplibre.savedMaps.push(this);
   }
   destroy() {
@@ -549,7 +538,7 @@ var _Maplibre = class {
       if (propName in nextProps && !deepEqual(nextProps[propName], currProps[propName])) {
         changed = true;
         const setter = map[`set${propName[0].toUpperCase()}${propName.slice(1)}`];
-        setter == null ? void 0 : setter.call(map, nextProps[propName]);
+        setter?.call(map, nextProps[propName]);
       }
     }
     return changed;
@@ -575,23 +564,18 @@ var _Maplibre = class {
    * 1. They can not be applied right away. Certain conditions (style loaded, source loaded, etc.) must be met
    * 2. They can be overwritten by mapStyle
    */
-  _updateStyleComponents({
-    light,
-    projection,
-    sky,
-    terrain
-  }) {
-    var _a, _b;
+  _updateStyleComponents({ light, projection, sky, terrain }) {
     const map = this._map;
     const currProps = this._styleComponents;
+    const mapWithProjection = map;
     if (map.style._loaded) {
       if (light && !deepEqual(light, currProps.light)) {
         currProps.light = light;
         map.setLight(light);
       }
-      if (projection && !deepEqual(projection, currProps.projection) && projection !== ((_a = currProps.projection) == null ? void 0 : _a.type)) {
+      if (projection && !deepEqual(projection, currProps.projection) && projection !== currProps.projection?.type) {
         currProps.projection = typeof projection === "string" ? { type: projection } : projection;
-        (_b = map.setProjection) == null ? void 0 : _b.call(map, currProps.projection);
+        mapWithProjection.setProjection?.(currProps.projection);
       }
       if (sky && !deepEqual(sky, currProps.sky)) {
         currProps.sky = sky;
@@ -607,11 +591,10 @@ var _Maplibre = class {
   }
   /* Update interaction handlers to match props */
   _updateHandlers(nextProps, currProps) {
-    var _a, _b;
     const map = this._map;
     for (const propName of handlerNames) {
-      const newValue = (_a = nextProps[propName]) != null ? _a : true;
-      const oldValue = (_b = currProps[propName]) != null ? _b : true;
+      const newValue = nextProps[propName] ?? true;
+      const oldValue = currProps[propName] ?? true;
       if (!deepEqual(newValue, oldValue)) {
         if (newValue) {
           map[propName].enable(newValue);
@@ -628,17 +611,16 @@ var _Maplibre = class {
       return map.queryRenderedFeatures(point, {
         layers: interactiveLayerIds.filter(map.getLayer.bind(map))
       });
-    } catch (e) {
+    } catch {
       return [];
     }
   }
   _updateHover(e) {
-    var _a;
     const { props } = this;
     const shouldTrackHoveredFeatures = props.interactiveLayerIds && (props.onMouseMove || props.onMouseEnter || props.onMouseLeave);
     if (shouldTrackHoveredFeatures) {
       const eventType = e.type;
-      const wasHovering = ((_a = this._hoveredFeatures) == null ? void 0 : _a.length) > 0;
+      const wasHovering = this._hoveredFeatures?.length > 0;
       const features = this._queryRenderedFeatures(e.point);
       const isHovering = features.length > 0;
       if (!isHovering && wasHovering) {
@@ -656,8 +638,6 @@ var _Maplibre = class {
     }
   }
 };
-var Maplibre = _Maplibre;
-Maplibre.savedMaps = [];
 
 // src/maplibre/create-ref.ts
 var skipMethods = [
@@ -717,19 +697,34 @@ var useIsomorphicLayoutEffect = typeof document !== "undefined" ? import_react2.
 var use_isomorphic_layout_effect_default = useIsomorphicLayoutEffect;
 
 // src/utils/set-globals.ts
+var validateUrl = (url, settingName) => {
+  try {
+    const parsed = new URL(url);
+    if (!["http:", "https:"].includes(parsed.protocol)) {
+      console.warn(`${settingName}: Only http/https protocols are allowed, got: ${parsed.protocol}`);
+      return false;
+    }
+    return true;
+  } catch {
+    console.warn(`${settingName}: Invalid URL format: ${url}`);
+    return false;
+  }
+};
 function setGlobals(mapLib, props) {
   const { RTLTextPlugin, maxParallelImageRequests, workerCount, workerUrl } = props;
   if (RTLTextPlugin && mapLib.getRTLTextPluginStatus && mapLib.getRTLTextPluginStatus() === "unavailable") {
     const { pluginUrl, lazy = true } = typeof RTLTextPlugin === "string" ? { pluginUrl: RTLTextPlugin } : RTLTextPlugin;
-    mapLib.setRTLTextPlugin(
-      pluginUrl,
-      (error) => {
-        if (error) {
-          console.error(error);
-        }
-      },
-      lazy
-    );
+    if (validateUrl(pluginUrl, "RTLTextPlugin")) {
+      mapLib.setRTLTextPlugin(
+        pluginUrl,
+        (error) => {
+          if (error) {
+            console.error(error);
+          }
+        },
+        lazy
+      );
+    }
   }
   if (maxParallelImageRequests !== void 0) {
     mapLib.setMaxParallelImageRequests(maxParallelImageRequests);
@@ -738,7 +733,9 @@ function setGlobals(mapLib, props) {
     mapLib.setWorkerCount(workerCount);
   }
   if (workerUrl !== void 0) {
-    mapLib.setWorkerUrl(workerUrl);
+    if (validateUrl(workerUrl, "workerUrl")) {
+      mapLib.setWorkerUrl(workerUrl);
+    }
   }
 }
 
@@ -766,14 +763,18 @@ function applyReactStyle(element, styles) {
 var import_react3 = require("react");
 function useControl(onCreate, arg1, arg2, arg3) {
   const context = (0, import_react3.useContext)(MapContext);
+  if (!context) {
+    throw new Error("useControl must be used within a Map component");
+  }
   const ctrl = (0, import_react3.useMemo)(() => onCreate(context), []);
   (0, import_react3.useEffect)(() => {
     const opts = arg3 || arg2 || arg1;
     const onAdd = typeof arg1 === "function" && typeof arg2 === "function" ? arg1 : null;
     const onRemove = typeof arg2 === "function" ? arg2 : typeof arg1 === "function" ? arg1 : null;
     const { map } = context;
-    if (!map.hasControl(ctrl)) {
-      map.addControl(ctrl, opts == null ? void 0 : opts.position);
+    const ctrlAsIControl = ctrl;
+    if (!map.hasControl(ctrlAsIControl)) {
+      map.addControl(ctrlAsIControl, opts?.position);
       if (onAdd) {
         onAdd(context);
       }
@@ -782,8 +783,8 @@ function useControl(onCreate, arg1, arg2, arg3) {
       if (onRemove) {
         onRemove(context);
       }
-      if (map.hasControl(ctrl)) {
-        map.removeControl(ctrl);
+      if (map.hasControl(ctrlAsIControl)) {
+        map.removeControl(ctrlAsIControl);
       }
     };
   }, []);
@@ -792,23 +793,36 @@ function useControl(onCreate, arg1, arg2, arg3) {
 
 // src/components/logo-control.ts
 function _LogoControl(props) {
-  const ctrl = useControl(({ mapLib }) => new mapLib.LogoControl(props), {
-    position: props.position
-  });
+  const ctrl = useControl(
+    () => {
+      const control = {
+        onAdd: (map) => {
+          if (map.getContainer) {
+            const existingLogo = map.getContainer().querySelector('a.maplibregl-ctrl-logo[href="https://www.barikoi.com"]');
+            if (existingLogo) {
+              existingLogo.remove();
+            }
+          }
+          const container = document.createElement("a");
+          container.className = "maplibregl-ctrl-logo";
+          container.href = "https://www.barikoi.com";
+          container.target = "_blank";
+          container.setAttribute("alt", "Barikoi");
+          container.setAttribute("aria-label", "Barikoi logo");
+          container.setAttribute("rel", "noopener nofollow");
+          control._container = container;
+          return container;
+        },
+        onRemove: () => {
+          delete control._container;
+        }
+      };
+      return control;
+    },
+    { position: props.position }
+  );
   (0, import_react4.useEffect)(() => {
-    var _a;
     applyReactStyle(ctrl._container, props.style);
-    const logoElement = (_a = ctrl._container) == null ? void 0 : _a.querySelector(
-      ".maplibregl-ctrl-logo"
-    );
-    if (logoElement) {
-      logoElement.href = "https://barikoi.com/";
-      logoElement.setAttribute("aria-label", "Barikoi logo");
-      logoElement.target = "_blank";
-      logoElement.rel = "noopener nofollow";
-      logoElement.style.cursor = "pointer";
-      logoElement.replaceWith(logoElement.cloneNode(true));
-    }
   }, [props.style, ctrl._container]);
   return null;
 }
@@ -817,15 +831,49 @@ var LogoControl = (0, import_react4.memo)(_LogoControl);
 // src/components/attribution-control.ts
 var import_react5 = require("react");
 function _AttributionControl(props) {
+  const { current: map } = useMap();
   const ctrl = useControl(
-    ({ mapLib }) => new mapLib.AttributionControl(props),
+    ({ mapLib }) => new mapLib.AttributionControl({
+      compact: true,
+      ...props
+    }),
     { position: props.position }
   );
   (0, import_react5.useEffect)(() => {
     applyReactStyle(ctrl._container, props.style);
-    if (!ctrl._container)
-      return;
-  }, [props.style, ctrl._container]);
+    if (!ctrl._container || !map) return;
+    const onLoad = () => {
+      setTimeout(() => {
+        const inner = ctrl._container.querySelector(".maplibregl-ctrl-attrib-inner");
+        if (inner) {
+          inner.textContent = "";
+          const createLink = (text, href) => {
+            const a = document.createElement("a");
+            a.href = href;
+            a.target = "_blank";
+            a.rel = "noopener noreferrer";
+            a.textContent = text;
+            return a;
+          };
+          inner.appendChild(createLink("Barikoi", "https://barikoi.com"));
+          inner.appendChild(document.createTextNode(" \xA9 "));
+          inner.appendChild(createLink("OpenMapTiles", "https://openmaptiles.org"));
+          inner.appendChild(document.createTextNode(" \xA9 "));
+          inner.appendChild(
+            createLink("OpenStreetMap contributors", "https://www.openstreetmap.org/copyright")
+          );
+        }
+      }, 0);
+    };
+    if (map.loaded()) {
+      onLoad();
+    } else {
+      map.once("load", onLoad);
+    }
+    return () => {
+      map.off("load", onLoad);
+    };
+  }, [props.style, ctrl._container, map]);
   return null;
 }
 var AttributionControl = (0, import_react5.memo)(_AttributionControl);
@@ -843,7 +891,7 @@ function _Map(props, ref) {
   (0, import_react6.useEffect)(() => {
     const mapLib = props.mapLib;
     let isMounted = true;
-    let maplibre;
+    let maplibre = null;
     Promise.resolve(mapLib || import("maplibre-gl")).then((module2) => {
       if (!isMounted) {
         return;
@@ -862,17 +910,19 @@ function _Map(props, ref) {
       if (!maplibre) {
         maplibre = new Maplibre(
           mapboxgl.Map,
-          __spreadProps(__spreadValues({}, props), {
-            // @ts-ignore
+          {
+            ...props,
             attributionControl: false
-          }),
+          },
           containerRef.current
         );
       }
-      contextValue.map = createRef(maplibre);
-      contextValue.mapLib = mapboxgl;
-      setMapInstance(maplibre);
-      mountedMapsContext == null ? void 0 : mountedMapsContext.onMapMount(contextValue.map, props.id);
+      if (maplibre) {
+        contextValue.map = createRef(maplibre);
+        contextValue.mapLib = mapboxgl;
+        setMapInstance(maplibre);
+      }
+      mountedMapsContext?.onMapMount(contextValue.map, props.id);
     }).catch((error) => {
       const { onError } = props;
       if (onError) {
@@ -889,7 +939,7 @@ function _Map(props, ref) {
     return () => {
       isMounted = false;
       if (maplibre) {
-        mountedMapsContext == null ? void 0 : mountedMapsContext.onMapUnmount(props.id);
+        mountedMapsContext?.onMapUnmount(props.id);
         if (props.reuseMaps) {
           maplibre.recycle();
         } else {
@@ -905,17 +955,18 @@ function _Map(props, ref) {
   });
   (0, import_react6.useImperativeHandle)(ref, () => contextValue.map, [mapInstance]);
   const style = (0, import_react6.useMemo)(
-    () => __spreadValues({
+    () => ({
       position: "relative",
       width: "100%",
-      height: "100%"
-    }, props.style),
+      height: "100%",
+      ...props.style
+    }),
     [props.style]
   );
   const CHILD_CONTAINER_STYLE = {
     height: "100%"
   };
-  return /* @__PURE__ */ React2.createElement("div", { id: props.id, ref: containerRef, style }, mapInstance && /* @__PURE__ */ React2.createElement(MapContext.Provider, { value: contextValue }, /* @__PURE__ */ React2.createElement("div", { "mapboxgl-children": "", style: CHILD_CONTAINER_STYLE }, /* @__PURE__ */ React2.createElement(LogoControl, { position: "bottom-left" }), /* @__PURE__ */ React2.createElement(AttributionControl, { position: "bottom-right" }), props.children)));
+  return /* @__PURE__ */ React2.createElement("div", { id: props.id, ref: containerRef, style }, mapInstance && /* @__PURE__ */ React2.createElement(MapContext.Provider, { value: contextValue }, /* @__PURE__ */ React2.createElement("div", { style: CHILD_CONTAINER_STYLE }, /* @__PURE__ */ React2.createElement(LogoControl, { position: "bottom-left" }), /* @__PURE__ */ React2.createElement(AttributionControl, { position: "bottom-right" }), props.children)));
 }
 var Map = React2.forwardRef(_Map);
 
@@ -952,7 +1003,7 @@ function getClassList(className) {
 var Marker = (0, import_react7.memo)(
   (0, import_react7.forwardRef)((props, ref) => {
     const { map, mapLib } = (0, import_react7.useContext)(MapContext);
-    const thisRef = (0, import_react7.useRef)({ props });
+    const callbackRef = (0, import_react7.useRef)({});
     const marker = (0, import_react7.useMemo)(() => {
       let hasChildren = false;
       React3.Children.forEach(props.children, (el) => {
@@ -960,42 +1011,52 @@ var Marker = (0, import_react7.memo)(
           hasChildren = true;
         }
       });
-      const options = __spreadProps(__spreadValues({}, props), {
+      const options = {
+        ...props,
         element: hasChildren ? document.createElement("div") : void 0
-      });
+      };
       const mk = new mapLib.Marker(options);
       mk.setLngLat([props.longitude, props.latitude]);
-      mk.getElement().addEventListener("click", (e) => {
-        var _a, _b;
-        (_b = (_a = thisRef.current.props).onClick) == null ? void 0 : _b.call(_a, {
-          type: "click",
-          target: mk,
-          originalEvent: e
-        });
-      });
-      mk.on("dragstart", (e) => {
-        var _a, _b;
-        const evt = e;
-        evt.lngLat = marker.getLngLat();
-        (_b = (_a = thisRef.current.props).onDragStart) == null ? void 0 : _b.call(_a, evt);
-      });
-      mk.on("drag", (e) => {
-        var _a, _b;
-        const evt = e;
-        evt.lngLat = marker.getLngLat();
-        (_b = (_a = thisRef.current.props).onDrag) == null ? void 0 : _b.call(_a, evt);
-      });
-      mk.on("dragend", (e) => {
-        var _a, _b;
-        const evt = e;
-        evt.lngLat = marker.getLngLat();
-        (_b = (_a = thisRef.current.props).onDragEnd) == null ? void 0 : _b.call(_a, evt);
-      });
       return mk;
     }, []);
     (0, import_react7.useEffect)(() => {
+      callbackRef.current = {
+        onClick: props.onClick,
+        onDragStart: props.onDragStart,
+        onDrag: props.onDrag,
+        onDragEnd: props.onDragEnd
+      };
+    });
+    (0, import_react7.useEffect)(() => {
+      const clickHandler = (e) => {
+        callbackRef.current.onClick?.({
+          type: "click",
+          target: marker,
+          originalEvent: e
+        });
+      };
+      marker.getElement().addEventListener("click", clickHandler);
+      const dragStartHandler = (e) => {
+        e.lngLat = marker.getLngLat();
+        callbackRef.current.onDragStart?.(e);
+      };
+      const dragHandler = (e) => {
+        e.lngLat = marker.getLngLat();
+        callbackRef.current.onDrag?.(e);
+      };
+      const dragEndHandler = (e) => {
+        e.lngLat = marker.getLngLat();
+        callbackRef.current.onDragEnd?.(e);
+      };
+      marker.on("dragstart", dragStartHandler);
+      marker.on("drag", dragHandler);
+      marker.on("dragend", dragEndHandler);
       marker.addTo(map.getMap());
       return () => {
+        marker.getElement().removeEventListener("click", clickHandler);
+        marker.off("dragstart", dragStartHandler);
+        marker.off("drag", dragHandler);
+        marker.off("dragend", dragEndHandler);
         marker.remove();
       };
     }, []);
@@ -1008,44 +1069,44 @@ var Marker = (0, import_react7.memo)(
       popup = null,
       rotation = 0,
       rotationAlignment = "auto",
-      pitchAlignment = "auto"
+      pitchAlignment = "auto",
+      className
     } = props;
     (0, import_react7.useEffect)(() => {
       applyReactStyle(marker.getElement(), style);
     }, [style]);
     (0, import_react7.useImperativeHandle)(ref, () => marker, []);
-    const oldProps = thisRef.current.props;
-    if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {
-      marker.setLngLat([longitude, latitude]);
-    }
-    if (offset && !arePointsEqual(marker.getOffset(), offset)) {
-      marker.setOffset(offset);
-    }
-    if (marker.isDraggable() !== draggable) {
-      marker.setDraggable(draggable);
-    }
-    if (marker.getRotation() !== rotation) {
-      marker.setRotation(rotation);
-    }
-    if (marker.getRotationAlignment() !== rotationAlignment) {
-      marker.setRotationAlignment(rotationAlignment);
-    }
-    if (marker.getPitchAlignment() !== pitchAlignment) {
-      marker.setPitchAlignment(pitchAlignment);
-    }
-    if (marker.getPopup() !== popup) {
-      marker.setPopup(popup);
-    }
-    const classNameDiff = compareClassNames(
-      oldProps.className,
-      props.className
-    );
-    if (classNameDiff) {
-      for (const c of classNameDiff) {
-        marker.toggleClassName(c);
+    const prevClassNameRef = (0, import_react7.useRef)(className);
+    (0, import_react7.useEffect)(() => {
+      if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {
+        marker.setLngLat([longitude, latitude]);
       }
-    }
-    thisRef.current.props = props;
+      if (offset && !arePointsEqual(marker.getOffset(), offset)) {
+        marker.setOffset(offset);
+      }
+      if (marker.isDraggable() !== draggable) {
+        marker.setDraggable(draggable);
+      }
+      if (marker.getRotation() !== rotation) {
+        marker.setRotation(rotation);
+      }
+      if (marker.getRotationAlignment() !== rotationAlignment) {
+        marker.setRotationAlignment(rotationAlignment);
+      }
+      if (marker.getPitchAlignment() !== pitchAlignment) {
+        marker.setPitchAlignment(pitchAlignment);
+      }
+      if (marker.getPopup() !== popup) {
+        marker.setPopup(popup);
+      }
+      const classNameDiff = compareClassNames(prevClassNameRef.current, className);
+      if (classNameDiff) {
+        for (const c of classNameDiff) {
+          marker.toggleClassName(c);
+        }
+      }
+      prevClassNameRef.current = className;
+    });
     return (0, import_react_dom.createPortal)(props.children, marker.getElement());
   })
 );
@@ -1059,25 +1120,25 @@ var Popup = (0, import_react8.memo)(
     const container = (0, import_react8.useMemo)(() => {
       return document.createElement("div");
     }, []);
-    const thisRef = (0, import_react8.useRef)({ props });
     const popup = (0, import_react8.useMemo)(() => {
-      const options = __spreadValues({}, props);
+      const options = { ...props };
       const pp = new mapLib.Popup(options);
       pp.setLngLat([props.longitude, props.latitude]);
-      pp.once("open", (e) => {
-        var _a, _b;
-        (_b = (_a = thisRef.current.props).onOpen) == null ? void 0 : _b.call(_a, e);
-      });
       return pp;
     }, []);
+    (0, import_react8.useImperativeHandle)(ref, () => popup, []);
     (0, import_react8.useEffect)(() => {
+      const onOpen = (e) => {
+        props.onOpen?.(e);
+      };
       const onClose = (e) => {
-        var _a, _b;
-        (_b = (_a = thisRef.current.props).onClose) == null ? void 0 : _b.call(_a, e);
+        props.onClose?.(e);
       };
+      popup.on("open", onOpen);
       popup.on("close", onClose);
       popup.setDOMContent(container).addTo(map.getMap());
       return () => {
+        popup.off("open", onOpen);
         popup.off("close", onClose);
         if (popup.isOpen()) {
           popup.remove();
@@ -1087,30 +1148,34 @@ var Popup = (0, import_react8.memo)(
     (0, import_react8.useEffect)(() => {
       applyReactStyle(popup.getElement(), props.style);
     }, [props.style]);
-    (0, import_react8.useImperativeHandle)(ref, () => popup, []);
-    if (popup.isOpen()) {
-      const oldProps = thisRef.current.props;
-      if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {
-        popup.setLngLat([props.longitude, props.latitude]);
+    (0, import_react8.useEffect)(() => {
+      if (popup.isOpen()) {
+        if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {
+          popup.setLngLat([props.longitude, props.latitude]);
+        }
       }
-      if (props.offset && !deepEqual(oldProps.offset, props.offset)) {
+    }, [props.longitude, props.latitude]);
+    (0, import_react8.useEffect)(() => {
+      if (popup.isOpen() && props.offset) {
         popup.setOffset(props.offset);
       }
-      if (oldProps.anchor !== props.anchor || oldProps.maxWidth !== props.maxWidth) {
-        popup.options.anchor = props.anchor;
+    }, [props.offset]);
+    (0, import_react8.useEffect)(() => {
+      if (popup.isOpen() && props.maxWidth !== void 0) {
         popup.setMaxWidth(props.maxWidth);
       }
-      const classNameDiff = compareClassNames(
-        oldProps.className,
-        props.className
-      );
-      if (classNameDiff) {
-        for (const c of classNameDiff) {
-          popup.toggleClassName(c);
+    }, [props.maxWidth]);
+    (0, import_react8.useEffect)(() => {
+      if (popup.isOpen() && props.className) {
+        const currentClassName = popup.options.className || "";
+        const classNameDiff = compareClassNames(currentClassName, props.className);
+        if (classNameDiff) {
+          for (const c of classNameDiff) {
+            popup.toggleClassName(c);
+          }
         }
       }
-      thisRef.current.props = props;
-    }
+    }, [props.className]);
     return (0, import_react_dom2.createPortal)(props.children, container);
   })
 );
@@ -1145,24 +1210,19 @@ function _GeolocateControl(props, ref) {
         }
       };
       gc.on("geolocate", (e) => {
-        var _a, _b;
-        (_b = (_a = thisRef.current.props).onGeolocate) == null ? void 0 : _b.call(_a, e);
+        thisRef.current.props.onGeolocate?.(e);
       });
       gc.on("error", (e) => {
-        var _a, _b;
-        (_b = (_a = thisRef.current.props).onError) == null ? void 0 : _b.call(_a, e);
+        thisRef.current.props.onError?.(e);
       });
       gc.on("outofmaxbounds", (e) => {
-        var _a, _b;
-        (_b = (_a = thisRef.current.props).onOutOfMaxBounds) == null ? void 0 : _b.call(_a, e);
+        thisRef.current.props.onOutOfMaxBounds?.(e);
       });
       gc.on("trackuserlocationstart", (e) => {
-        var _a, _b;
-        (_b = (_a = thisRef.current.props).onTrackUserLocationStart) == null ? void 0 : _b.call(_a, e);
+        thisRef.current.props.onTrackUserLocationStart?.(e);
       });
       gc.on("trackuserlocationend", (e) => {
-        var _a, _b;
-        (_b = (_a = thisRef.current.props).onTrackUserLocationEnd) == null ? void 0 : _b.call(_a, e);
+        thisRef.current.props.onTrackUserLocationEnd?.(e);
       });
       return gc;
     },
@@ -1175,9 +1235,7 @@ function _GeolocateControl(props, ref) {
   }, [props.style]);
   return null;
 }
-var GeolocateControl = (0, import_react10.memo)(
-  (0, import_react10.forwardRef)(_GeolocateControl)
-);
+var GeolocateControl = (0, import_react10.memo)((0, import_react10.forwardRef)(_GeolocateControl));
 
 // src/components/navigation-control.ts
 var import_react11 = require("react");
@@ -1201,16 +1259,18 @@ function _ScaleControl(props) {
   const propsRef = (0, import_react12.useRef)(props);
   const prevProps = propsRef.current;
   propsRef.current = props;
-  const { style } = props;
-  if (props.maxWidth !== void 0 && props.maxWidth !== prevProps.maxWidth) {
-    ctrl.options.maxWidth = props.maxWidth;
-  }
-  if (props.unit !== void 0 && props.unit !== prevProps.unit) {
-    ctrl.setUnit(props.unit);
-  }
+  const { style, maxWidth, unit } = props;
+  (0, import_react12.useEffect)(() => {
+    if (maxWidth !== void 0 && maxWidth !== prevProps.maxWidth) {
+      ctrl.options.maxWidth = maxWidth;
+    }
+    if (unit !== void 0 && unit !== prevProps.unit) {
+      ctrl.setUnit(unit);
+    }
+  }, [ctrl, maxWidth, unit, prevProps.maxWidth, prevProps.unit]);
   (0, import_react12.useEffect)(() => {
     applyReactStyle(ctrl._container, style);
-  }, [style]);
+  }, [ctrl, style]);
   return null;
 }
 var ScaleControl = (0, import_react12.memo)(_ScaleControl);
@@ -1240,10 +1300,10 @@ function assert(condition, message) {
 }
 
 // src/components/source.ts
-var sourceCounter = 0;
 function createSource(map, id, props) {
-  if (map.style && map.style._loaded) {
-    const options = __spreadValues({}, props);
+  const mapInternal = map;
+  if (mapInternal.style && mapInternal.style._loaded) {
+    const options = { ...props };
     delete options.id;
     delete options.children;
     map.addSource(id, options);
@@ -1252,7 +1312,6 @@ function createSource(map, id, props) {
   return null;
 }
 function updateSource(source, props, prevProps) {
-  var _a, _b, _c;
   assert(props.id === prevProps.id, "source id changed");
   assert(props.type === prevProps.type, "source type changed");
   let changedKey = "";
@@ -1268,46 +1327,57 @@ function updateSource(source, props, prevProps) {
   }
   const type = props.type;
   if (type === "geojson") {
+    ;
     source.setData(props.data);
   } else if (type === "image") {
+    ;
     source.updateImage({
       url: props.url,
       coordinates: props.coordinates
     });
   } else {
+    const sourceWithMethods = source;
+    const propsWithOptional = props;
     switch (changedKey) {
       case "coordinates":
-        (_a = source.setCoordinates) == null ? void 0 : _a.call(source, props.coordinates);
+        sourceWithMethods.setCoordinates?.(propsWithOptional.coordinates);
         break;
       case "url":
-        (_b = source.setUrl) == null ? void 0 : _b.call(source, props.url);
+        sourceWithMethods.setUrl?.(propsWithOptional.url);
         break;
       case "tiles":
-        (_c = source.setTiles) == null ? void 0 : _c.call(source, props.tiles);
+        sourceWithMethods.setTiles?.(propsWithOptional.tiles);
         break;
       default:
         console.warn(`Unable to update <Source> prop: ${changedKey}`);
     }
   }
 }
-function Source(props) {
+function _Source(props, ref) {
   const map = (0, import_react14.useContext)(MapContext).map.getMap();
   const propsRef = (0, import_react14.useRef)(props);
+  const sourceRef = (0, import_react14.useRef)(null);
   const [, setStyleLoaded] = (0, import_react14.useState)(0);
-  const id = (0, import_react14.useMemo)(() => props.id || `jsx-source-${sourceCounter++}`, []);
+  const generatedId = (0, import_react14.useId)();
+  const id = (0, import_react14.useMemo)(
+    () => props.id || `jsx-source-${generatedId.replace(/:/g, "-")}`,
+    // Empty deps - id is set once on mount and should not change
+    []
+  );
   (0, import_react14.useEffect)(() => {
     if (map) {
       const forceUpdate = () => setTimeout(() => setStyleLoaded((version) => version + 1), 0);
       map.on("styledata", forceUpdate);
       forceUpdate();
       return () => {
-        var _a;
         map.off("styledata", forceUpdate);
-        if (map.style && map.style._loaded && map.getSource(id)) {
-          const allLayers = (_a = map.getStyle()) == null ? void 0 : _a.layers;
+        const mapInternal2 = map;
+        if (mapInternal2.style && mapInternal2.style._loaded && map.getSource(id)) {
+          const allLayers = map.getStyle()?.layers;
           if (allLayers) {
             for (const layer of allLayers) {
-              if (layer.source === id) {
+              const layerWithSource = layer;
+              if (layerWithSource.source === id) {
                 map.removeLayer(layer.id);
               }
             }
@@ -1318,13 +1388,16 @@ function Source(props) {
     }
     return void 0;
   }, [map]);
-  let source = map && map.style && map.getSource(id);
+  const mapInternal = map;
+  let source = map && mapInternal.style && map.getSource(id);
   if (source) {
     updateSource(source, props, propsRef.current);
   } else {
     source = createSource(map, id, props);
   }
+  sourceRef.current = source;
   propsRef.current = props;
+  (0, import_react14.useImperativeHandle)(ref, () => sourceRef.current, [source]);
   return source && React4.Children.map(
     props.children,
     (child) => child && (0, import_react14.cloneElement)(child, {
@@ -1332,80 +1405,272 @@ function Source(props) {
     })
   ) || null;
 }
+var Source = (0, import_react14.memo)(React4.forwardRef(_Source));
 
-// src/components/layer.ts
+// src/components/canvas-source.ts
+var React5 = __toESM(require("react"), 1);
 var import_react15 = require("react");
+function _CanvasSource(props) {
+  const map = (0, import_react15.useContext)(MapContext).map.getMap();
+  const propsRef = (0, import_react15.useRef)(props);
+  const id = (0, import_react15.useMemo)(() => props.id || `canvas-source-${Date.now()}`, [props.id]);
+  (0, import_react15.useEffect)(() => {
+    if (!map) return void 0;
+    const mapInternal2 = map;
+    let source = null;
+    const addSource = () => {
+      if (!mapInternal2.style || !mapInternal2.style._loaded) return;
+      if (map.getSource(id)) return;
+      const { coordinates, canvas, animate } = props;
+      map.addSource(id, {
+        type: "canvas",
+        coordinates,
+        canvas,
+        animate: animate || false
+      });
+      source = map.getSource(id);
+    };
+    const updateSource2 = () => {
+      if (!source) return;
+      const { coordinates, canvas } = props;
+      const prevProps = propsRef.current;
+      if (JSON.stringify(coordinates) !== JSON.stringify(prevProps.coordinates)) {
+        const sourceWithMethods = source;
+        sourceWithMethods.setCoordinates?.(coordinates);
+      }
+    };
+    if (mapInternal2.style && mapInternal2.style._loaded) {
+      addSource();
+    } else {
+      map.once("styledata", addSource);
+    }
+    return () => {
+      map.off("styledata", addSource);
+      const mapInternalForCleanup = map;
+      if (mapInternalForCleanup.style && mapInternalForCleanup.style._loaded && map.getSource(id)) {
+        const allLayers = map.getStyle()?.layers;
+        if (allLayers) {
+          for (const layer of allLayers) {
+            if (layer.source === id) {
+              map.removeLayer(layer.id);
+            }
+          }
+        }
+        map.removeSource(id);
+      }
+    };
+  }, [map, id]);
+  (0, import_react15.useEffect)(() => {
+    if (!map) return;
+    const source = map.getSource(id);
+    if (!source) return;
+    const { coordinates } = props;
+    const prevProps = propsRef.current;
+    if (JSON.stringify(coordinates) !== JSON.stringify(prevProps.coordinates)) {
+      const sourceWithMethods = source;
+      sourceWithMethods.setCoordinates?.(coordinates);
+    }
+    propsRef.current = props;
+  }, [map, id, props.coordinates, props.canvas]);
+  if (!map) return null;
+  const mapInternal = map;
+  if (!mapInternal.style || !mapInternal.style._loaded || !map.getSource(id)) {
+    return null;
+  }
+  return props.children && React5.Children.map(
+    props.children,
+    (child) => child && React5.cloneElement(child, {
+      source: id
+    })
+  ) || null;
+}
+var CanvasSource = (0, import_react15.memo)(_CanvasSource);
+
+// src/components/layer.ts
+var import_react16 = require("react");
 function updateLayer(map, id, props, prevProps) {
   assert(props.id === prevProps.id, "layer id changed");
   assert(props.type === prevProps.type, "layer type changed");
   if (props.type === "custom" || prevProps.type === "custom") {
     return;
   }
-  const { layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId } = props;
-  if (beforeId !== prevProps.beforeId) {
+  const propsWithFilter = props;
+  const prevPropsWithFilter = prevProps;
+  const { layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId } = propsWithFilter;
+  if (beforeId !== prevPropsWithFilter.beforeId) {
     map.moveLayer(id, beforeId);
   }
-  if (layout !== prevProps.layout) {
-    const prevLayout = prevProps.layout || {};
+  if (layout !== prevPropsWithFilter.layout) {
+    const prevLayout = prevPropsWithFilter.layout || {};
     for (const key in layout) {
       if (!deepEqual(layout[key], prevLayout[key])) {
         map.setLayoutProperty(id, key, layout[key]);
       }
     }
     for (const key in prevLayout) {
-      if (!layout.hasOwnProperty(key)) {
+      if (!Object.prototype.hasOwnProperty.call(layout, key)) {
         map.setLayoutProperty(id, key, void 0);
       }
     }
   }
-  if (paint !== prevProps.paint) {
-    const prevPaint = prevProps.paint || {};
+  if (paint !== prevPropsWithFilter.paint) {
+    const prevPaint = prevPropsWithFilter.paint || {};
     for (const key in paint) {
       if (!deepEqual(paint[key], prevPaint[key])) {
         map.setPaintProperty(id, key, paint[key]);
       }
     }
     for (const key in prevPaint) {
-      if (!paint.hasOwnProperty(key)) {
+      if (!Object.prototype.hasOwnProperty.call(paint, key)) {
         map.setPaintProperty(id, key, void 0);
       }
     }
   }
-  if (!deepEqual(filter, prevProps.filter)) {
-    map.setFilter(id, filter);
+  if (!deepEqual(filter, prevPropsWithFilter.filter)) {
+    map.setFilter(id, filter ?? null);
   }
-  if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {
+  if (minzoom !== prevPropsWithFilter.minzoom || maxzoom !== prevPropsWithFilter.maxzoom) {
     map.setLayerZoomRange(id, minzoom, maxzoom);
   }
 }
 function createLayer(map, id, props) {
-  if (map.style && map.style._loaded && (!("source" in props) || map.getSource(props.source))) {
-    const options = __spreadProps(__spreadValues({}, props), { id });
+  const mapInternal = map;
+  if (mapInternal.style && mapInternal.style._loaded && (!("source" in props) || map.getSource(props.source))) {
+    const options = { ...props, id };
     delete options.beforeId;
     map.addLayer(options, props.beforeId);
   }
 }
-var layerCounter = 0;
-function Layer(props) {
-  const map = (0, import_react15.useContext)(MapContext).map.getMap();
-  const propsRef = (0, import_react15.useRef)(props);
-  const [, setStyleLoaded] = (0, import_react15.useState)(0);
-  const id = (0, import_react15.useMemo)(() => props.id || `jsx-layer-${layerCounter++}`, []);
-  (0, import_react15.useEffect)(() => {
+function _Layer(props) {
+  const map = (0, import_react16.useContext)(MapContext).map.getMap();
+  const propsRef = (0, import_react16.useRef)(props);
+  const [, setStyleLoaded] = (0, import_react16.useState)(0);
+  const generatedId = (0, import_react16.useId)();
+  const id = (0, import_react16.useMemo)(
+    () => props.id || `jsx-layer-${generatedId.replace(/:/g, "-")}`,
+    // Empty deps - id is set once on mount and should not change
+    []
+  );
+  const {
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    onContextMenu,
+    onDoubleClick
+  } = props;
+  const callbacksRef = (0, import_react16.useRef)({
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    onContextMenu,
+    onDoubleClick
+  });
+  (0, import_react16.useEffect)(() => {
+    callbacksRef.current = {
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onMouseMove,
+      onMouseDown,
+      onMouseUp,
+      onContextMenu,
+      onDoubleClick
+    };
+  }, [
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    onContextMenu,
+    onDoubleClick
+  ]);
+  (0, import_react16.useEffect)(() => {
     if (map) {
       const forceUpdate = () => setStyleLoaded((version) => version + 1);
       map.on("styledata", forceUpdate);
       forceUpdate();
       return () => {
         map.off("styledata", forceUpdate);
-        if (map.style && map.style._loaded && map.getLayer(id)) {
+        const mapInternal2 = map;
+        if (mapInternal2.style && mapInternal2.style._loaded && map.getLayer(id)) {
           map.removeLayer(id);
         }
       };
     }
     return void 0;
   }, [map]);
-  const layer = map && map.style && map.getLayer(id);
+  (0, import_react16.useEffect)(() => {
+    if (!map) return void 0;
+    const hasEventHandler = onClick || onMouseEnter || onMouseLeave || onMouseMove || onMouseDown || onMouseUp || onContextMenu || onDoubleClick;
+    if (!hasEventHandler) return void 0;
+    const handleClick = (e) => {
+      callbacksRef.current.onClick?.(e);
+    };
+    const handleMouseEnter = (e) => {
+      callbacksRef.current.onMouseEnter?.(e);
+      if (callbacksRef.current.onClick) {
+        map.getCanvas().style.cursor = "pointer";
+      }
+    };
+    const handleMouseLeave = () => {
+      callbacksRef.current.onMouseLeave?.();
+      map.getCanvas().style.cursor = "";
+    };
+    const handleMouseMove = (e) => {
+      callbacksRef.current.onMouseMove?.(e);
+    };
+    const handleMouseDown = (e) => {
+      callbacksRef.current.onMouseDown?.(e);
+    };
+    const handleMouseUp = (e) => {
+      callbacksRef.current.onMouseUp?.(e);
+    };
+    const handleContextMenu = (e) => {
+      callbacksRef.current.onContextMenu?.(e);
+    };
+    const handleDoubleClick = (e) => {
+      callbacksRef.current.onDoubleClick?.(e);
+    };
+    if (onClick) map.on("click", id, handleClick);
+    if (onMouseEnter) map.on("mouseenter", id, handleMouseEnter);
+    if (onMouseLeave) map.on("mouseleave", id, handleMouseLeave);
+    if (onMouseMove) map.on("mousemove", id, handleMouseMove);
+    if (onMouseDown) map.on("mousedown", id, handleMouseDown);
+    if (onMouseUp) map.on("mouseup", id, handleMouseUp);
+    if (onContextMenu) map.on("contextmenu", id, handleContextMenu);
+    if (onDoubleClick) map.on("dblclick", id, handleDoubleClick);
+    return () => {
+      if (onClick) map.off("click", id, handleClick);
+      if (onMouseEnter) map.off("mouseenter", id, handleMouseEnter);
+      if (onMouseLeave) map.off("mouseleave", id, handleMouseLeave);
+      if (onMouseMove) map.off("mousemove", id, handleMouseMove);
+      if (onMouseDown) map.off("mousedown", id, handleMouseDown);
+      if (onMouseUp) map.off("mouseup", id, handleMouseUp);
+      if (onContextMenu) map.off("contextmenu", id, handleContextMenu);
+      if (onDoubleClick) map.off("dblclick", id, handleDoubleClick);
+    };
+  }, [
+    map,
+    id,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseDown,
+    onMouseUp,
+    onContextMenu,
+    onDoubleClick
+  ]);
+  const mapInternal = map;
+  const layer = map && mapInternal.style && map.getLayer(id);
   if (layer) {
     try {
       updateLayer(map, id, props, propsRef.current);
@@ -1418,6 +1683,774 @@ function Layer(props) {
   propsRef.current = props;
   return null;
 }
+var Layer = (0, import_react16.memo)(_Layer);
+
+// src/components/draw-control.ts
+var import_react17 = require("react");
+var import_maplibre_gl_draw = __toESM(require("maplibre-gl-draw"), 1);
+var defaultDrawOptions = {
+  displayControlsDefault: false,
+  controls: {
+    polygon: true,
+    trash: true
+  }
+};
+function _DrawControl(props) {
+  const {
+    position,
+    style,
+    onDrawCreate,
+    onDrawDelete,
+    onDrawUpdate,
+    onDrawSelectionChange,
+    onDrawModeChange,
+    onDrawCombine,
+    onDrawUncombine,
+    onDrawRender,
+    ...drawOptions
+  } = props;
+  const context = (0, import_react17.useContext)(MapContext);
+  if (!context) {
+    throw new Error("DrawControl must be used within a Map component");
+  }
+  const options = (0, import_react17.useMemo)(
+    () => ({
+      ...defaultDrawOptions,
+      ...drawOptions,
+      controls: {
+        ...defaultDrawOptions.controls,
+        ...drawOptions.controls
+      }
+    }),
+    [
+      drawOptions.displayControlsDefault,
+      drawOptions.controls,
+      drawOptions.styles,
+      drawOptions.modes,
+      drawOptions.defaultMode
+    ]
+  );
+  const optionsKey = (0, import_react17.useMemo)(() => JSON.stringify(options), [options]);
+  const callbacksRef = (0, import_react17.useRef)({
+    onDrawCreate,
+    onDrawDelete,
+    onDrawUpdate,
+    onDrawSelectionChange,
+    onDrawModeChange,
+    onDrawCombine,
+    onDrawUncombine,
+    onDrawRender
+  });
+  (0, import_react17.useEffect)(() => {
+    callbacksRef.current = {
+      onDrawCreate,
+      onDrawDelete,
+      onDrawUpdate,
+      onDrawSelectionChange,
+      onDrawModeChange,
+      onDrawCombine,
+      onDrawUncombine,
+      onDrawRender
+    };
+  }, [
+    onDrawCreate,
+    onDrawDelete,
+    onDrawUpdate,
+    onDrawSelectionChange,
+    onDrawModeChange,
+    onDrawCombine,
+    onDrawUncombine,
+    onDrawRender
+  ]);
+  const ctrlRef = (0, import_react17.useRef)(null);
+  const listenersRef = (0, import_react17.useRef)({});
+  (0, import_react17.useEffect)(() => {
+    const { map } = context;
+    if (!map) return;
+    const mapInstance = map.getMap();
+    if (!mapInstance) return;
+    const DrawClass = import_maplibre_gl_draw.default;
+    const resetCursorIfNeeded = () => {
+      if (ctrlRef.current) {
+        const currentMode = ctrlRef.current.getMode();
+        if (currentMode === "simple_select") {
+          mapInstance.getCanvas().style.cursor = "";
+        }
+      }
+    };
+    const handleCreate = (e) => {
+      resetCursorIfNeeded();
+      callbacksRef.current.onDrawCreate?.(e);
+    };
+    const handleUpdate = (e) => {
+      resetCursorIfNeeded();
+      callbacksRef.current.onDrawUpdate?.(e);
+    };
+    const handleDelete = (e) => {
+      resetCursorIfNeeded();
+      callbacksRef.current.onDrawDelete?.(e);
+    };
+    const handleSelectionChange = (e) => {
+      resetCursorIfNeeded();
+      callbacksRef.current.onDrawSelectionChange?.(e);
+    };
+    const handleModeChange = (e) => {
+      resetCursorIfNeeded();
+      callbacksRef.current.onDrawModeChange?.(e);
+    };
+    const handleCombine = (e) => {
+      callbacksRef.current.onDrawCombine?.(e);
+    };
+    const handleUncombine = (e) => {
+      callbacksRef.current.onDrawUncombine?.(e);
+    };
+    const handleRender = (e) => {
+      callbacksRef.current.onDrawRender?.(e);
+    };
+    const ctrl = new DrawClass(options);
+    ctrlRef.current = ctrl;
+    map.addControl(ctrl, position);
+    listenersRef.current = {
+      handleCreate,
+      handleUpdate,
+      handleDelete,
+      handleSelectionChange,
+      handleModeChange,
+      handleCombine,
+      handleUncombine,
+      handleRender
+    };
+    mapInstance.on("draw.create", handleCreate);
+    mapInstance.on("draw.update", handleUpdate);
+    mapInstance.on("draw.delete", handleDelete);
+    mapInstance.on("draw.selectionchange", handleSelectionChange);
+    mapInstance.on("draw.modechange", handleModeChange);
+    mapInstance.on("draw.combine", handleCombine);
+    mapInstance.on("draw.uncombine", handleUncombine);
+    mapInstance.on("draw.render", handleRender);
+    return () => {
+      if (listenersRef.current.handleCreate) {
+        mapInstance.off("draw.create", listenersRef.current.handleCreate);
+      }
+      if (listenersRef.current.handleUpdate) {
+        mapInstance.off("draw.update", listenersRef.current.handleUpdate);
+      }
+      if (listenersRef.current.handleDelete) {
+        mapInstance.off("draw.delete", listenersRef.current.handleDelete);
+      }
+      if (listenersRef.current.handleSelectionChange) {
+        mapInstance.off("draw.selectionchange", listenersRef.current.handleSelectionChange);
+      }
+      if (listenersRef.current.handleModeChange) {
+        mapInstance.off("draw.modechange", listenersRef.current.handleModeChange);
+      }
+      if (listenersRef.current.handleCombine) {
+        mapInstance.off("draw.combine", listenersRef.current.handleCombine);
+      }
+      if (listenersRef.current.handleUncombine) {
+        mapInstance.off("draw.uncombine", listenersRef.current.handleUncombine);
+      }
+      if (listenersRef.current.handleRender) {
+        mapInstance.off("draw.render", listenersRef.current.handleRender);
+      }
+      if (ctrlRef.current && map.hasControl(ctrlRef.current)) {
+        map.removeControl(ctrlRef.current);
+      }
+      ctrlRef.current = null;
+    };
+  }, [context, optionsKey, position]);
+  return null;
+}
+var DrawControl = (0, import_react17.memo)(_DrawControl);
+
+// src/components/globe-control.ts
+var import_react18 = require("react");
+var GLOBE_SVG = `<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2">
+  <circle cx="12" cy="12" r="9" fill="none"/>
+  <path d="M12 21a9 9-9 0 0-9 9-9 0 0 9h0c2.2a8.2 2.3 5.1 5.8-5.5c-.4-.4-.5-.9-.5-1.5v-1.3c0-2.3 1.8-4.2 4-4.5V5.5c-1.8.5-3.5 2-4.5 2.8 0 5.2 2.3 5.2 5 0z"/>
+  <path d="M12 3c-2.8 0-5.2 2.3-5.2 5h2c0-1.5.1-1.1.5-1.5L5.8 9 2.3 5.1 8.2 2c.4 0 .9-.5 1.5-.5h1.3c2.3 0 4.2-1.8 4.5-4h-2c0 1.5-1.8 3.5-4 4.5V21c2.8 0 5.2-2.3 5.2-5h-2c0 1.5-.1 1.1-.5 1.5L18.2 15 14.8l2.7-5.1c-.4 0-.9.5-1.5.5h-1.3c-2.3 0-4.2 1.8-4.5 4h2c0-1.5 1.8-3.5 4-4.5V3z"/>
+</svg>`;
+var MAP_SVG = `<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2">
+  <rect x="3" y="3" width="18" height="18" rx="2" fill="none"/>
+  <path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>
+</svg>`;
+var GlobeControlImpl = class {
+  constructor(options, callbacks) {
+    this._map = null;
+    this._isGlobe = false;
+    this._options = options;
+    this._onProjectionChange = callbacks.onProjectionChange;
+    this._container = document.createElement("div");
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group";
+    this._button = this._createButton();
+    this._container.appendChild(this._button);
+  }
+  _createButton() {
+    const button = this._options.buttonElement || document.createElement("button");
+    if (!this._options.buttonElement) {
+      button.className = this._options.buttonClassName || "maplibregl-ctrl-globe";
+      button.type = "button";
+      button.title = this._options.buttonTitle || "Toggle Globe View";
+      button.setAttribute("aria-label", "Toggle Globe View");
+      button.innerHTML = this._isGlobe ? MAP_SVG : GLOBE_SVG;
+      Object.assign(button.style, {
+        padding: "5px",
+        border: "none",
+        background: "white",
+        cursor: "pointer",
+        borderRadius: "4px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        ...this._options.buttonStyle
+      });
+    }
+    button.addEventListener("click", () => this._toggleGlobe());
+    return button;
+  }
+  _toggleGlobe() {
+    if (!this._map) return;
+    this._isGlobe = !this._isGlobe;
+    this._button.innerHTML = this._isGlobe ? MAP_SVG : GLOBE_SVG;
+    this._button.title = this._isGlobe ? "Switch to Map View" : "Switch to Globe View";
+    try {
+      const projection = this._isGlobe ? { type: "globe" } : { type: "mercator" };
+      this._map.setProjection(projection);
+      this._onProjectionChange?.(this._isGlobe);
+    } catch (error) {
+      console.warn("GlobeControl: setProjection not available", error);
+    }
+  }
+  onAdd(map) {
+    this._map = map;
+    try {
+      const currentProjection = map.getProjection?.();
+      this._isGlobe = currentProjection?.type === "globe";
+      this._button.innerHTML = this._isGlobe ? MAP_SVG : GLOBE_SVG;
+    } catch {
+      this._isGlobe = false;
+    }
+    return this._container;
+  }
+  onRemove() {
+    this._container.parentNode?.removeChild(this._container);
+    this._map = null;
+  }
+  /**
+   * Check if currently in globe view
+   */
+  isGlobe() {
+    return this._isGlobe;
+  }
+  /**
+   * Set the projection programmatically
+   */
+  setGlobe(isGlobe) {
+    if (this._isGlobe !== isGlobe) {
+      this._toggleGlobe();
+    }
+  }
+};
+function _GlobeControl(props) {
+  const { position, onProjectionChange, ...options } = props;
+  const callbacksRef = (0, import_react18.useRef)({ onProjectionChange });
+  (0, import_react18.useEffect)(() => {
+    callbacksRef.current = { onProjectionChange };
+  }, [onProjectionChange]);
+  useControl(
+    () => {
+      return new GlobeControlImpl(options, {
+        onProjectionChange: (isGlobe) => callbacksRef.current.onProjectionChange?.(isGlobe)
+      });
+    },
+    { position }
+  );
+  return null;
+}
+var GlobeControl = (0, import_react18.memo)(_GlobeControl);
+
+// src/components/minimap-control.ts
+var import_react19 = require("react");
+var import_maplibre_gl = require("maplibre-gl");
+var DEFAULT_ZOOM_ADJUST = -4;
+var DEFAULT_COLLAPSED_SIZE = "29px";
+var DEFAULT_BORDER_RADIUS = "3px";
+var TRANSITION_DURATION_MS = 600;
+var RESIZE_DEBOUNCE_MS = 100;
+var DEFAULT_WIDTH = "400px";
+var DEFAULT_HEIGHT = "300px";
+var defaultInteractions = {
+  dragPan: true,
+  scrollZoom: false,
+  boxZoom: false,
+  dragRotate: false,
+  keyboard: false,
+  doubleClickZoom: false,
+  touchZoomRotate: false
+};
+var DEFAULT_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.6 18L8 8.4V17H6V5h12v2H9.4l9.6 9.6l-1.4 1.4Z" /></svg>`;
+function getRandomUUID() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    const array = new Uint8Array(1);
+    crypto.getRandomValues(array);
+    const r = array[0] % 16;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function sanitizeSVG(svgString) {
+  const svgPattern = /^<svg[^>]*>[\s\S]*<\/svg>$/i;
+  if (!svgPattern.test(svgString)) {
+    console.warn("Invalid SVG format, using default icon");
+    return DEFAULT_ICON;
+  }
+  return svgString.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, "").replace(/javascript:/gi, "");
+}
+var Minimap = class {
+  constructor(options = {}) {
+    this.differentStyle = false;
+    this.isMinimized = false;
+    this.id = `minimap-${getRandomUUID()}`;
+    if (options.style !== void 0) {
+      this.differentStyle = true;
+    }
+    const interactions = { ...defaultInteractions, ...options.interactions ?? {} };
+    const containerStyle = this.validateContainerStyle(options.containerStyle);
+    this.options = {
+      zoomAdjust: DEFAULT_ZOOM_ADJUST,
+      position: "top-right",
+      pitchAdjust: false,
+      attributionControl: false,
+      logoPosition: "bottom-left",
+      toggleable: true,
+      initialMinimized: false,
+      collapsedWidth: DEFAULT_COLLAPSED_SIZE,
+      collapsedHeight: DEFAULT_COLLAPSED_SIZE,
+      borderRadius: DEFAULT_BORDER_RADIUS,
+      hideText: "Hide minimap",
+      showText: "Show minimap",
+      responsive: true,
+      responsiveWidth: "20vw",
+      responsiveHeight: "20vh",
+      minWidth: "200px",
+      minHeight: "150px",
+      maxWidth: DEFAULT_WIDTH,
+      maxHeight: DEFAULT_HEIGHT,
+      interactions,
+      ...options,
+      containerStyle
+    };
+    if (options.lockZoom !== void 0) {
+      this.options.minZoom = options.lockZoom;
+      this.options.maxZoom = options.lockZoom;
+    }
+    this.isMinimized = this.options.initialMinimized ?? false;
+  }
+  onAdd(parentMap) {
+    this.parentMap = parentMap;
+    this.container = this.createContainer();
+    this.options.container = this.container;
+    this.options.zoom = parentMap.getZoom() + (this.options.zoomAdjust ?? DEFAULT_ZOOM_ADJUST);
+    this.options.center ??= parentMap.getCenter().toArray();
+    this.options.bearing = parentMap.getBearing();
+    this.options.pitch = this.options.pitchAdjust ? parentMap.getPitch() : 0;
+    if (!this.differentStyle) {
+      this.options.style = parentMap.getStyle();
+    }
+    this.map = new import_maplibre_gl.Map(this.options);
+    this.map.once("style.load", () => {
+      this.map.resize();
+    });
+    this.map.once("load", () => {
+      this.configureInteractions();
+      this.addParentRect(this.options.parentRect);
+      this.desync = this.syncMaps();
+      this.setupToggleButton();
+      this.setupResponsiveSizing();
+    });
+    return this.container;
+  }
+  onRemove() {
+    if (this.resizeHandler) {
+      window.removeEventListener("resize", this.resizeHandler);
+      this.resizeHandler = void 0;
+    }
+    this.toggleButtonCleanup?.();
+    this.desync?.();
+    this.container.remove();
+  }
+  createContainer() {
+    const container = document.createElement("div");
+    container.id = this.id;
+    container.className = "maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-minimap custom-ctrl-minimap";
+    if (this.isMinimized) {
+      container.classList.add("minimized");
+    }
+    const styleEl = document.createElement("style");
+    styleEl.innerHTML = this.getContainerStyles();
+    container.appendChild(styleEl);
+    if (this.options.containerStyle) {
+      for (const [key, value] of Object.entries(this.options.containerStyle)) {
+        container.style.setProperty(key, value);
+      }
+    }
+    if (this.isMinimized) {
+      container.style.width = this.options.collapsedWidth || DEFAULT_COLLAPSED_SIZE;
+      container.style.height = this.options.collapsedHeight || DEFAULT_COLLAPSED_SIZE;
+    }
+    const preventDefault = (e) => e.preventDefault();
+    container.addEventListener("contextmenu", preventDefault);
+    return container;
+  }
+  getContainerStyles() {
+    const width = this.options.containerStyle?.width || DEFAULT_WIDTH;
+    const height = this.options.containerStyle?.height || DEFAULT_HEIGHT;
+    const collapsedWidth = this.options.collapsedWidth || DEFAULT_COLLAPSED_SIZE;
+    const collapsedHeight = this.options.collapsedHeight || DEFAULT_COLLAPSED_SIZE;
+    const borderRadius = this.options.borderRadius || DEFAULT_BORDER_RADIUS;
+    return `
+      #${this.id}.custom-ctrl-minimap {
+        cursor: default !important;
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+        transition: width 0.6s ease-in, height 0.6s ease-in, border-color 0s ease-in;
+        border-style: solid;
+        border-radius: ${borderRadius};
+        border-width: 4px;
+        border-color: white;
+        width: ${width};
+        height: ${height};
+        overflow: hidden;
+        background: #fff;
+        position: relative;
+      }
+      #${this.id}.minimized {
+        border-radius: 3px !important;
+        width: ${collapsedWidth};
+        height: ${collapsedHeight};
+      }
+      #${this.id} canvas {
+        width: 100% !important;
+        height: 100% !important;
+        display: block;
+      }
+      @media (prefers-color-scheme: dark) {
+        #${this.id}.custom-ctrl-minimap {
+          border-color: hsl(0, 0%, 15.2%);
+        }
+      }
+    `;
+  }
+  validateContainerStyle(style) {
+    const defaults = { border: "1px solid #000", width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT };
+    if (!style) return defaults;
+    const validated = {};
+    if (style.width) {
+      validated.width = CSS.supports("width", style.width) ? style.width : defaults.width;
+    } else {
+      validated.width = defaults.width;
+    }
+    if (style.height) {
+      validated.height = CSS.supports("height", style.height) ? style.height : defaults.height;
+    } else {
+      validated.height = defaults.height;
+    }
+    for (const [key, value] of Object.entries(style)) {
+      if (key !== "width" && key !== "height") {
+        validated[key] = value;
+      }
+    }
+    return validated;
+  }
+  configureInteractions() {
+    const interactions = this.options.interactions || defaultInteractions;
+    for (const [interaction, enabled] of Object.entries(interactions)) {
+      if (!enabled) {
+        const interactionMethod = interaction;
+        const interactionObj = this.map[interactionMethod];
+        interactionObj?.disable();
+      }
+    }
+  }
+  setupToggleButton() {
+    if (!this.options.toggleable) return;
+    const el = document.createElement("button");
+    const elId = "btn-" + getRandomUUID();
+    el.innerHTML = sanitizeSVG(this.options.toggleButton?.icon || DEFAULT_ICON);
+    el.setAttribute("id", elId);
+    el.setAttribute("type", "button");
+    el.setAttribute("aria-label", this.options.hideText || "Hide minimap");
+    el.setAttribute("title", this.options.hideText || "Hide minimap");
+    if (this.options.toggleButton?.className) {
+      const classes = this.options.toggleButton.className.split(" ");
+      classes.forEach((cls) => el.classList.add(cls));
+    }
+    const iconBackgroundColor = this.options.toggleButton?.iconBackgroundColor || "black";
+    const hoverColor = this.options.toggleButton?.hoverColor || "#e5e7e3";
+    const styleEl = document.createElement("style");
+    styleEl.innerHTML = `
+      button#${elId} {
+        border-radius: 0 !important;
+        color: black;
+        background-color: ${iconBackgroundColor};
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease-in;
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        z-index: 2;
+        padding: 0;
+        left: 0;
+        top: 0;
+      }
+      button#${elId}:hover {
+        background-color: ${hoverColor} !important;
+      }
+      button#${elId} svg {
+        fill: white;
+        width: 16px;
+        height: 16px;
+      }
+      .minimized > button#${elId} > * {
+        transform: rotate(-180deg);
+      }
+    `;
+    const clickHandler = () => {
+      this.toggle();
+      const minimized = this.container.classList.contains("minimized");
+      const text = minimized ? this.options.showText || "Show minimap" : this.options.hideText || "Hide minimap";
+      el.setAttribute("aria-label", text);
+      el.setAttribute("title", text);
+    };
+    el.addEventListener("click", clickHandler);
+    document.head.appendChild(styleEl);
+    this.container.appendChild(el);
+    this.toggleButtonCleanup = () => {
+      el.removeEventListener("click", clickHandler);
+      styleEl.remove();
+      this.container.removeChild(el);
+    };
+  }
+  setupResponsiveSizing() {
+    if (!this.options.responsive) return;
+    const updateSize = () => {
+      if (this.isMinimized) return;
+      const vw = window.innerWidth / 100;
+      const vh = window.innerHeight / 100;
+      const responsiveWidth = this.options.responsiveWidth || "20vw";
+      const responsiveHeight = this.options.responsiveHeight || "20vh";
+      let width;
+      let height;
+      if (responsiveWidth.endsWith("vw")) {
+        width = parseFloat(responsiveWidth) * vw;
+      } else if (responsiveWidth.endsWith("%")) {
+        width = parseFloat(responsiveWidth) / 100 * window.innerWidth;
+      } else {
+        width = parseFloat(responsiveWidth);
+      }
+      if (responsiveHeight.endsWith("vh")) {
+        height = parseFloat(responsiveHeight) * vh;
+      } else if (responsiveHeight.endsWith("%")) {
+        height = parseFloat(responsiveHeight) / 100 * window.innerHeight;
+      } else {
+        height = parseFloat(responsiveHeight);
+      }
+      const minW = parseFloat(this.options.minWidth || "200px");
+      const minH = parseFloat(this.options.minHeight || "150px");
+      const maxW = parseFloat(this.options.maxWidth || DEFAULT_WIDTH);
+      const maxH = parseFloat(this.options.maxHeight || DEFAULT_HEIGHT);
+      width = Math.max(minW, Math.min(maxW, width));
+      height = Math.max(minH, Math.min(maxH, height));
+      this.container.style.width = `${width}px`;
+      this.container.style.height = `${height}px`;
+      this.map.resize();
+      this.setParentBounds();
+    };
+    updateSize();
+    let resizeTimeout;
+    this.resizeHandler = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(updateSize, RESIZE_DEBOUNCE_MS);
+    };
+    window.addEventListener("resize", this.resizeHandler);
+  }
+  toggle() {
+    this.isMinimized = !this.isMinimized;
+    const collapsedWidth = this.options.collapsedWidth || DEFAULT_COLLAPSED_SIZE;
+    const collapsedHeight = this.options.collapsedHeight || DEFAULT_COLLAPSED_SIZE;
+    if (this.isMinimized) {
+      this.container.classList.add("minimized");
+      this.container.style.width = collapsedWidth;
+      this.container.style.height = collapsedHeight;
+    } else {
+      this.container.classList.remove("minimized");
+      if (this.options.responsive && this.resizeHandler) {
+        this.resizeHandler();
+      } else {
+        const expandedWidth = this.options.containerStyle?.width || DEFAULT_WIDTH;
+        const expandedHeight = this.options.containerStyle?.height || DEFAULT_HEIGHT;
+        this.container.style.width = expandedWidth;
+        this.container.style.height = expandedHeight;
+      }
+    }
+    this.options.onToggle?.(this.isMinimized);
+    setTimeout(() => {
+      this.map.resize();
+      this.setParentBounds();
+    }, TRANSITION_DURATION_MS);
+  }
+  isMinimizedState() {
+    return this.isMinimized;
+  }
+  addParentRect(rect) {
+    if (rect === void 0 || rect.linePaint === void 0 && rect.fillPaint === void 0) {
+      return;
+    }
+    this.parentRect = {
+      type: "Feature",
+      properties: { name: "parentRect" },
+      geometry: {
+        type: "Polygon",
+        coordinates: [[[], [], [], [], []]]
+      }
+    };
+    this.map.addSource("parentRect", {
+      type: "geojson",
+      data: this.parentRect
+    });
+    if (rect.lineLayout !== void 0 || rect.linePaint !== void 0) {
+      this.map.addLayer({
+        id: "parentRectOutline",
+        type: "line",
+        source: "parentRect",
+        layout: { ...rect.lineLayout || {} },
+        paint: {
+          "line-color": "#FFF",
+          "line-width": 1,
+          "line-opacity": 0.85,
+          ...rect.linePaint || {}
+        }
+      });
+    }
+    if (rect.fillPaint !== void 0) {
+      this.map.addLayer({
+        id: "parentRectFill",
+        type: "fill",
+        source: "parentRect",
+        layout: {},
+        paint: {
+          "fill-color": "#08F",
+          "fill-opacity": 0.135,
+          ...rect.fillPaint || {}
+        }
+      });
+    }
+    this.setParentBounds();
+  }
+  setParentBounds() {
+    if (this.parentRect === void 0 || this.isMinimized) return;
+    const { devicePixelRatio } = window;
+    const canvas = this.parentMap.getCanvas();
+    const width = canvas.width / devicePixelRatio;
+    const height = canvas.height / devicePixelRatio;
+    const unproject = this.parentMap.unproject.bind(this.parentMap);
+    const northWest = unproject([0, 0]);
+    const northEast = unproject([width, 0]);
+    const southWest = unproject([0, height]);
+    const southEast = unproject([width, height]);
+    this.parentRect.geometry.coordinates = [
+      [
+        southWest.toArray(),
+        southEast.toArray(),
+        northEast.toArray(),
+        northWest.toArray(),
+        southWest.toArray()
+      ]
+    ];
+    const source = this.map.getSource("parentRect");
+    if (source !== void 0) {
+      source.setData(this.parentRect);
+    }
+  }
+  syncMaps() {
+    const { pitchAdjust } = this.options;
+    const parentCallback = () => {
+      if (!this.isMinimized) {
+        sync("parent");
+      }
+    };
+    const minimapCallback = () => {
+      if (!this.isMinimized) {
+        sync("minimap");
+      }
+    };
+    const on = () => {
+      this.parentMap.on("move", parentCallback);
+      this.map.on("move", minimapCallback);
+    };
+    const off = () => {
+      this.parentMap.off("move", parentCallback);
+      this.map.off("move", minimapCallback);
+    };
+    const sync = (which) => {
+      off();
+      const from = which === "parent" ? this.parentMap : this.map;
+      const to = which === "parent" ? this.map : this.parentMap;
+      const center = from.getCenter();
+      const zoom = from.getZoom() + (this.options.zoomAdjust ?? DEFAULT_ZOOM_ADJUST) * (which === "parent" ? 1 : -1);
+      const bearing = from.getBearing();
+      const pitch = from.getPitch();
+      to.jumpTo({
+        center,
+        zoom,
+        bearing,
+        pitch: pitchAdjust ? pitch : 0
+      });
+      this.setParentBounds();
+      on();
+    };
+    on();
+    return () => {
+      off();
+    };
+  }
+};
+function _MinimapControl(props) {
+  const { position, ...options } = props;
+  useControl(() => new Minimap(options), { position });
+  return null;
+}
+var MinimapControl = (0, import_react19.memo)(_MinimapControl);
 
 // src/exports-maplibre-gl.ts
 var exports_maplibre_gl_default = Map;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AttributionControl,
+  CanvasSource,
+  DrawControl,
+  FullscreenControl,
+  GeolocateControl,
+  GlobeControl,
+  Layer,
+  LogoControl,
+  Map,
+  MapProvider,
+  Marker,
+  Minimap,
+  MinimapControl,
+  NavigationControl,
+  Popup,
+  ScaleControl,
+  Source,
+  TerrainControl,
+  useControl,
+  useMap
+});
+//# sourceMappingURL=index.cjs.map