react-bkoi-gl 2.0.0 → 2.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Barikoi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,14 @@
 <h1 align="center">react-bkoi-gl | <a href="https://docs.barikoi.com/npm/npm-intro">Docs</a></h1>
 
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-bkoi-gl"><img src="https://img.shields.io/npm/v/react-bkoi-gl.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/react-bkoi-gl"><img src="https://img.shields.io/npm/dw/react-bkoi-gl" alt="npm downloads"></a>
+  <a href="https://bundlephobia.com/package/react-bkoi-gl"><img src="https://img.shields.io/bundlephobia/min/react-bkoi-gl" alt="Bundle Size"></a>
+  <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white" alt="TypeScript"></a>
+  <a href="https://nodejs.org/"><img src="https://img.shields.io/node/v/react-bkoi-gl" alt="Node.js Version"></a>
+  <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a>
+</p>
+
 ## Description
 
 `react-bkoi-gl` is a suite of [React](http://facebook.github.io/react/) components designed to provide a API for [Barikoi Maps](https://docs.barikoi.com/docs/maps-api). More information in the online documentation.

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,8 +27,8 @@ 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,
   FullscreenControl: () => FullscreenControl,
   GeolocateControl: () => GeolocateControl,
@@ -63,7 +46,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 +66,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 +92,10 @@ 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 });
+    return { ...maps, current: currentMap?.map };
   }, [maps, currentMap]);
   return mapsWithCurrent;
 }
@@ -153,7 +135,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])) {
@@ -243,7 +225,7 @@ function normalizeStyle(style) {
     }
     return normalizedLayer || layer;
   });
-  return __spreadProps(__spreadValues({}, style), { layers });
+  return { ...style, layers };
 }
 
 // src/maplibre/maplibre.ts
@@ -319,7 +301,7 @@ var handlerNames = [
   "touchZoomRotate",
   "touchPitch"
 ];
-var _Maplibre = class {
+var Maplibre = class _Maplibre {
   constructor(MapClass, props, container) {
     // mapboxgl.Map instance
     this._map = null;
@@ -370,6 +352,10 @@ var _Maplibre = class {
     this.props = props;
     this._initialize(container);
   }
+  static {
+    // eslint-disable-next-line no-use-before-define
+    this.savedMaps = [];
+  }
   get map() {
     return this._map;
   }
@@ -403,14 +389,15 @@ var _Maplibre = class {
       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);
       }
@@ -427,10 +414,12 @@ var _Maplibre = class {
   _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 +443,11 @@ var _Maplibre = class {
     }
     map.transformCameraUpdate = this._onCameraUpdate;
     map.on("style.load", () => {
-      var _a;
       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: map.getProjection?.(),
         terrain: map.getTerrain()
       };
       this._updateStyleComponents(this.props);
@@ -482,7 +470,7 @@ var _Maplibre = class {
   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 +537,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;
@@ -581,7 +569,6 @@ var _Maplibre = class {
     sky,
     terrain
   }) {
-    var _a, _b;
     const map = this._map;
     const currProps = this._styleComponents;
     if (map.style._loaded) {
@@ -589,9 +576,9 @@ var _Maplibre = class {
         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);
+        map.setProjection?.(currProps.projection);
       }
       if (sky && !deepEqual(sky, currProps.sky)) {
         currProps.sky = sky;
@@ -607,11 +594,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 +614,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 +641,6 @@ var _Maplibre = class {
     }
   }
 };
-var Maplibre = _Maplibre;
-Maplibre.savedMaps = [];
 
 // src/maplibre/create-ref.ts
 var skipMethods = [
@@ -773,7 +756,7 @@ function useControl(onCreate, arg1, arg2, arg3) {
     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);
+      map.addControl(ctrl, opts?.position);
       if (onAdd) {
         onAdd(context);
       }
@@ -792,23 +775,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 +813,36 @@ 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.innerHTML = '\xA9 <a href="https://barikoi.com" target="_blank">Barikoi</a> \xA9 <a href="https://openmaptiles.org" target="_blank">OpenMapTiles</a> \xA9 <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap contributors</a>';
+        }
+      }, 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);
@@ -862,17 +879,18 @@ function _Map(props, ref) {
       if (!maplibre) {
         maplibre = new Maplibre(
           mapboxgl.Map,
-          __spreadProps(__spreadValues({}, props), {
-            // @ts-ignore
+          {
+            ...props,
+            // @ts-ignore - attributionControl is not in the type definition but is supported by maplibre-gl
             attributionControl: false
-          }),
+          },
           containerRef.current
         );
       }
       contextValue.map = createRef(maplibre);
       contextValue.mapLib = mapboxgl;
       setMapInstance(maplibre);
-      mountedMapsContext == null ? void 0 : mountedMapsContext.onMapMount(contextValue.map, props.id);
+      mountedMapsContext?.onMapMount(contextValue.map, props.id);
     }).catch((error) => {
       const { onError } = props;
       if (onError) {
@@ -889,7 +907,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,11 +923,12 @@ 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 = {
@@ -960,36 +979,33 @@ 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, {
+        thisRef.current.props.onClick?.({
           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);
+        thisRef.current.props.onDragStart?.(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);
+        thisRef.current.props.onDrag?.(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);
+        thisRef.current.props.onDragEnd?.(evt);
       });
       return mk;
     }, []);
@@ -1061,19 +1077,17 @@ var Popup = (0, import_react8.memo)(
     }, []);
     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);
+        thisRef.current.props.onOpen?.(e);
       });
       return pp;
     }, []);
     (0, import_react8.useEffect)(() => {
       const onClose = (e) => {
-        var _a, _b;
-        (_b = (_a = thisRef.current.props).onClose) == null ? void 0 : _b.call(_a, e);
+        thisRef.current.props.onClose?.(e);
       };
       popup.on("close", onClose);
       popup.setDOMContent(container).addTo(map.getMap());
@@ -1145,24 +1159,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;
     },
@@ -1243,7 +1252,7 @@ function assert(condition, message) {
 var sourceCounter = 0;
 function createSource(map, id, props) {
   if (map.style && map.style._loaded) {
-    const options = __spreadValues({}, props);
+    const options = { ...props };
     delete options.id;
     delete options.children;
     map.addSource(id, options);
@@ -1252,7 +1261,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 = "";
@@ -1277,13 +1285,13 @@ function updateSource(source, props, prevProps) {
   } else {
     switch (changedKey) {
       case "coordinates":
-        (_a = source.setCoordinates) == null ? void 0 : _a.call(source, props.coordinates);
+        source.setCoordinates?.(props.coordinates);
         break;
       case "url":
-        (_b = source.setUrl) == null ? void 0 : _b.call(source, props.url);
+        source.setUrl?.(props.url);
         break;
       case "tiles":
-        (_c = source.setTiles) == null ? void 0 : _c.call(source, props.tiles);
+        source.setTiles?.(props.tiles);
         break;
       default:
         console.warn(`Unable to update <Source> prop: ${changedKey}`);
@@ -1301,10 +1309,9 @@ function Source(props) {
       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 allLayers = map.getStyle()?.layers;
           if (allLayers) {
             for (const layer of allLayers) {
               if (layer.source === id) {
@@ -1353,7 +1360,7 @@ function updateLayer(map, id, props, prevProps) {
       }
     }
     for (const key in prevLayout) {
-      if (!layout.hasOwnProperty(key)) {
+      if (!Object.prototype.hasOwnProperty.call(layout, key)) {
         map.setLayoutProperty(id, key, void 0);
       }
     }
@@ -1366,7 +1373,7 @@ function updateLayer(map, id, props, prevProps) {
       }
     }
     for (const key in prevPaint) {
-      if (!paint.hasOwnProperty(key)) {
+      if (!Object.prototype.hasOwnProperty.call(paint, key)) {
         map.setPaintProperty(id, key, void 0);
       }
     }
@@ -1380,7 +1387,7 @@ function updateLayer(map, id, props, prevProps) {
 }
 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 options = { ...props, id };
     delete options.beforeId;
     map.addLayer(options, props.beforeId);
   }
@@ -1421,3 +1428,22 @@ function Layer(props) {
 
 // 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,
+  FullscreenControl,
+  GeolocateControl,
+  Layer,
+  LogoControl,
+  Map,
+  MapProvider,
+  Marker,
+  NavigationControl,
+  Popup,
+  ScaleControl,
+  Source,
+  TerrainControl,
+  useControl,
+  useMap
+});
+//# sourceMappingURL=index.cjs.map