react-bkoi-gl 1.0.7 → 2.0.1

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,31 +27,30 @@ 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, {
-  AttributionControl: () => AttributionControl2,
-  FullscreenControl: () => FullscreenControl2,
-  GeolocateControl: () => GeolocateControl2,
-  Layer: () => Layer2,
-  Map: () => Map2,
+var index_exports = {};
+__export(index_exports, {
+  AttributionControl: () => AttributionControl,
+  FullscreenControl: () => FullscreenControl,
+  GeolocateControl: () => GeolocateControl,
+  Layer: () => Layer,
+  LogoControl: () => LogoControl,
+  Map: () => Map,
   MapProvider: () => MapProvider,
-  Marker: () => Marker2,
-  NavigationControl: () => NavigationControl2,
-  Popup: () => Popup2,
-  ScaleControl: () => ScaleControl2,
-  Source: () => Source2,
-  default: () => exports_mapbox_default,
-  useControl: () => use_control_default,
-  useMap: () => useMap2
+  Marker: () => Marker,
+  NavigationControl: () => NavigationControl,
+  Popup: () => Popup,
+  ScaleControl: () => ScaleControl,
+  Source: () => Source,
+  TerrainControl: () => TerrainControl,
+  default: () => exports_maplibre_gl_default,
+  useControl: () => useControl,
+  useMap: () => useMap
 });
-module.exports = __toCommonJS(src_exports);
-
-// src/exports-mapbox.ts
-var React5 = __toESM(require("react"), 1);
+module.exports = __toCommonJS(index_exports);
 
 // src/components/map.tsx
 var React2 = __toESM(require("react"), 1);
-var import_react3 = require("react");
+var import_react6 = require("react");
 
 // src/components/use-map.tsx
 var React = __toESM(require("react"), 1);
@@ -84,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;
       }
@@ -110,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;
 }
@@ -154,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])) {
@@ -167,21 +148,6 @@ function deepEqual(a, b) {
 }
 
 // src/utils/transform.ts
-function cloneTransform(tr) {
-  const newTransform = tr.clone();
-  newTransform.pixelsToGLUnits = tr.pixelsToGLUnits;
-  return newTransform;
-}
-function syncProjection(src, dest) {
-  if (!src.getProjection) {
-    return;
-  }
-  const srcProjection = src.getProjection();
-  const destProjection = dest.getProjection();
-  if (!deepEqual(srcProjection, destProjection)) {
-    dest.setProjection(srcProjection);
-  }
-}
 function transformToViewState(tr) {
   return {
     longitude: tr.center.lng,
@@ -194,36 +160,36 @@ function transformToViewState(tr) {
 }
 function applyViewStateToTransform(tr, props) {
   const v = props.viewState || props;
-  let changed = false;
-  if ("zoom" in v) {
-    const zoom = tr.zoom;
-    tr.zoom = v.zoom;
-    changed = changed || zoom !== tr.zoom;
+  const changes = {};
+  if ("longitude" in v && "latitude" in v && (v.longitude !== tr.center.lng || v.latitude !== tr.center.lat)) {
+    const LngLat = tr.center.constructor;
+    changes.center = new LngLat(v.longitude, v.latitude);
   }
-  if ("bearing" in v) {
-    const bearing = tr.bearing;
-    tr.bearing = v.bearing;
-    changed = changed || bearing !== tr.bearing;
+  if ("zoom" in v && v.zoom !== tr.zoom) {
+    changes.zoom = v.zoom;
   }
-  if ("pitch" in v) {
-    const pitch = tr.pitch;
-    tr.pitch = v.pitch;
-    changed = changed || pitch !== tr.pitch;
+  if ("bearing" in v && v.bearing !== tr.bearing) {
+    changes.bearing = v.bearing;
   }
-  if (v.padding && !tr.isPaddingEqual(v.padding)) {
-    changed = true;
-    tr.padding = v.padding;
+  if ("pitch" in v && v.pitch !== tr.pitch) {
+    changes.pitch = v.pitch;
   }
-  if ("longitude" in v && "latitude" in v) {
-    const center = tr.center;
-    tr.center = new center.constructor(v.longitude, v.latitude);
-    changed = changed || center !== tr.center;
+  if (v.padding && tr.padding && !deepEqual(v.padding, tr.padding)) {
+    changes.padding = v.padding;
   }
-  return changed;
+  return changes;
 }
 
 // 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;
@@ -259,11 +225,15 @@ function normalizeStyle(style) {
     }
     return normalizedLayer || layer;
   });
-  return __spreadProps(__spreadValues({}, style), { layers });
+  return { ...style, layers };
 }
 
-// src/mapbox/mapbox.ts
-var DEFAULT_STYLE = { version: 8, sources: {}, layers: [] };
+// src/maplibre/maplibre.ts
+var DEFAULT_STYLE = {
+  version: 8,
+  sources: {},
+  layers: []
+};
 var pointerEvents = {
   mousedown: "onMouseDown",
   mouseup: "onMouseUp",
@@ -331,20 +301,15 @@ var handlerNames = [
   "touchZoomRotate",
   "touchPitch"
 ];
-var _Mapbox = class {
+var Maplibre = class _Maplibre {
   constructor(MapClass, props, container) {
     // mapboxgl.Map instance
     this._map = null;
     // Internal states
     this._internalUpdate = false;
-    this._inRender = false;
     this._hoveredFeatures = null;
-    this._deferredEvents = {
-      move: false,
-      zoom: false,
-      pitch: false,
-      rotate: false
-    };
+    this._propsedCameraUpdate = null;
+    this._styleComponents = {};
     this._onEvent = (e) => {
       const cb = this.props[otherEvents[e.type]];
       if (cb) {
@@ -353,6 +318,23 @@ var _Mapbox = class {
         console.error(e.error);
       }
     };
+    this._onCameraEvent = (e) => {
+      if (this._internalUpdate) {
+        return;
+      }
+      e.viewState = this._propsedCameraUpdate || transformToViewState(this._map.transform);
+      const cb = this.props[cameraEvents[e.type]];
+      if (cb) {
+        cb(e);
+      }
+    };
+    this._onCameraUpdate = (tr) => {
+      if (this._internalUpdate) {
+        return tr;
+      }
+      this._propsedCameraUpdate = transformToViewState(tr);
+      return applyViewStateToTransform(tr, this.props);
+    };
     this._onPointerEvent = (e) => {
       if (e.type === "mousemove" || e.type === "mouseout") {
         this._updateHover(e);
@@ -366,45 +348,32 @@ var _Mapbox = class {
         delete e.features;
       }
     };
-    this._onCameraEvent = (e) => {
-      if (!this._internalUpdate) {
-        const cb = this.props[cameraEvents[e.type]];
-        if (cb) {
-          cb(e);
-        }
-      }
-      if (e.type in this._deferredEvents) {
-        this._deferredEvents[e.type] = false;
-      }
-    };
     this._MapClass = MapClass;
     this.props = props;
     this._initialize(container);
   }
+  static {
+    // eslint-disable-next-line no-use-before-define
+    this.savedMaps = [];
+  }
   get map() {
     return this._map;
   }
-  get transform() {
-    return this._renderTransform;
-  }
   setProps(props) {
     const oldProps = this.props;
     this.props = props;
     const settingsChanged = this._updateSettings(props, oldProps);
-    if (settingsChanged) {
-      this._createShadowTransform(this._map);
-    }
     const sizeChanged = this._updateSize(props);
-    const viewStateChanged = this._updateViewState(props, true);
+    const viewStateChanged = this._updateViewState(props);
     this._updateStyle(props, oldProps);
-    this._updateStyleComponents(props, oldProps);
+    this._updateStyleComponents(props);
     this._updateHandlers(props, oldProps);
     if (settingsChanged || sizeChanged || viewStateChanged && !this._map.isMoving()) {
       this.redraw();
     }
   }
   static reuse(props, container) {
-    const that = _Mapbox.savedMaps.pop();
+    const that = _Maplibre.savedMaps.pop();
     if (!that) {
       return null;
     }
@@ -420,20 +389,23 @@ var _Mapbox = 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), { duration: 0 }));
+        map.fitBounds(initialViewState.bounds, {
+          ...initialViewState.fitBoundsOptions,
+          duration: 0
+        });
       } else {
-        that._updateViewState(initialViewState, false);
+        that._updateViewState(initialViewState);
       }
     }
     if (map.isStyleLoaded()) {
       map.fire("load");
     } else {
-      map.once("styledata", () => map.fire("load"));
+      map.once("style.load", () => map.fire("load"));
     }
     map._update();
     return that;
@@ -442,11 +414,12 @@ var _Mapbox = class {
   _initialize(container) {
     const { props } = this;
     const { mapStyle = DEFAULT_STYLE } = props;
-    const mapOptions = __spreadProps(__spreadValues(__spreadValues({}, props), props.initialViewState), {
-      accessToken: props.mapboxAccessToken || getAccessTokenFromEnv() || null,
+    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],
@@ -468,29 +441,20 @@ var _Mapbox = class {
     if (props.cursor) {
       map.getCanvas().style.cursor = props.cursor;
     }
-    this._createShadowTransform(map);
-    const renderMap = map._render;
-    map._render = (arg) => {
-      this._inRender = true;
-      renderMap.call(map, arg);
-      this._inRender = false;
-    };
-    const runRenderTaskQueue = map._renderTaskQueue.run;
-    map._renderTaskQueue.run = (arg) => {
-      runRenderTaskQueue.call(map._renderTaskQueue, arg);
-      this._onBeforeRepaint();
-    };
-    map.on("render", () => this._onAfterRepaint());
-    const fireEvent = map.fire;
-    map.fire = this._fireEvent.bind(this, fireEvent);
-    map.on("resize", () => {
-      this._renderTransform.resize(map.transform.width, map.transform.height);
+    map.transformCameraUpdate = this._onCameraUpdate;
+    map.on("style.load", () => {
+      this._styleComponents = {
+        light: map.getLight(),
+        sky: map.getSky(),
+        // @ts-ignore getProjection() does not exist in v4
+        projection: map.getProjection?.(),
+        terrain: map.getTerrain()
+      };
+      this._updateStyleComponents(this.props);
     });
-    map.on("styledata", () => {
-      this._updateStyleComponents(this.props, {});
-      syncProjection(map.transform, this._renderTransform);
+    map.on("sourcedata", () => {
+      this._updateStyleComponents(this.props);
     });
-    map.on("sourcedata", () => this._updateStyleComponents(this.props, {}));
     for (const eventName in pointerEvents) {
       map.on(eventName, this._onPointerEvent);
     }
@@ -506,8 +470,8 @@ var _Mapbox = class {
   recycle() {
     const container = this.map.getContainer();
     const children = container.querySelector("[mapboxgl-children]");
-    children == null ? void 0 : children.remove();
-    _Mapbox.savedMaps.push(this);
+    children?.remove();
+    _Maplibre.savedMaps.push(this);
   }
   destroy() {
     this._map.remove();
@@ -517,7 +481,7 @@ var _Mapbox = class {
   // This removes the synchronization issue caused by requestAnimationFrame.
   redraw() {
     const map = this._map;
-    if (!this._inRender && map.style) {
+    if (map.style) {
       if (map._frame) {
         map._frame.cancel();
         map._frame = null;
@@ -525,11 +489,6 @@ var _Mapbox = class {
       map._render();
     }
   }
-  _createShadowTransform(map) {
-    const renderTransform = cloneTransform(map.transform);
-    map.painter.transform = renderTransform;
-    this._renderTransform = renderTransform;
-  }
   /* Trigger map resize if size is controlled
      @param {object} nextProps
      @returns {bool} true if size has changed
@@ -551,32 +510,20 @@ var _Mapbox = class {
      @param {bool} triggerEvents - should fire camera events
      @returns {bool} true if anything is changed
    */
-  _updateViewState(nextProps, triggerEvents) {
-    if (this._internalUpdate) {
-      return false;
-    }
+  _updateViewState(nextProps) {
     const map = this._map;
-    const tr = this._renderTransform;
-    const { zoom, pitch, bearing } = tr;
+    const tr = map.transform;
     const isMoving = map.isMoving();
-    if (isMoving) {
-      tr.cameraElevationReference = "sea";
-    }
-    const changed = applyViewStateToTransform(tr, __spreadValues(__spreadValues({}, transformToViewState(map.transform)), nextProps));
-    if (isMoving) {
-      tr.cameraElevationReference = "ground";
-    }
-    if (changed && triggerEvents) {
-      const deferredEvents = this._deferredEvents;
-      deferredEvents.move = true;
-      deferredEvents.zoom || (deferredEvents.zoom = zoom !== tr.zoom);
-      deferredEvents.rotate || (deferredEvents.rotate = bearing !== tr.bearing);
-      deferredEvents.pitch || (deferredEvents.pitch = pitch !== tr.pitch);
-    }
     if (!isMoving) {
-      applyViewStateToTransform(map.transform, nextProps);
+      const changes = applyViewStateToTransform(tr, nextProps);
+      if (Object.keys(changes).length > 0) {
+        this._internalUpdate = true;
+        map.jumpTo(changes);
+        this._internalUpdate = false;
+        return true;
+      }
     }
-    return changed;
+    return false;
   }
   /* Update camera constraints and projection settings to match props
      @param {object} nextProps
@@ -590,16 +537,12 @@ var _Mapbox = 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;
   }
-  /* Update map style to match props
-     @param {object} nextProps
-     @param {object} currProps
-     @returns {bool} true if style is changed
-   */
+  /* Update map style to match props */
   _updateStyle(nextProps, currProps) {
     if (nextProps.cursor !== currProps.cursor) {
       this._map.getCanvas().style.cursor = nextProps.cursor || "";
@@ -613,50 +556,49 @@ var _Mapbox = class {
         options.localIdeographFontFamily = nextProps.localIdeographFontFamily;
       }
       this._map.setStyle(normalizeStyle(mapStyle), options);
-      return true;
     }
-    return false;
   }
-  /* Update fog, light and terrain to match props
-     @param {object} nextProps
-     @param {object} currProps
-     @returns {bool} true if anything is changed
+  /* Update fog, light, projection and terrain to match props
+   * These props are special because
+   * 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(nextProps, currProps) {
+  _updateStyleComponents({
+    light,
+    projection,
+    sky,
+    terrain
+  }) {
     const map = this._map;
-    let changed = false;
-    if (map.isStyleLoaded()) {
-      if ("light" in nextProps && map.setLight && !deepEqual(nextProps.light, currProps.light)) {
-        changed = true;
-        map.setLight(nextProps.light);
+    const currProps = this._styleComponents;
+    if (map.style._loaded) {
+      if (light && !deepEqual(light, currProps.light)) {
+        currProps.light = light;
+        map.setLight(light);
       }
-      if ("fog" in nextProps && map.setFog && !deepEqual(nextProps.fog, currProps.fog)) {
-        changed = true;
-        map.setFog(nextProps.fog);
+      if (projection && !deepEqual(projection, currProps.projection) && projection !== currProps.projection?.type) {
+        currProps.projection = typeof projection === "string" ? { type: projection } : projection;
+        map.setProjection?.(currProps.projection);
+      }
+      if (sky && !deepEqual(sky, currProps.sky)) {
+        currProps.sky = sky;
+        map.setSky(sky);
       }
-      if ("terrain" in nextProps && map.setTerrain && !deepEqual(nextProps.terrain, currProps.terrain)) {
-        if (!nextProps.terrain || map.getSource(nextProps.terrain.source)) {
-          changed = true;
-          map.setTerrain(nextProps.terrain);
+      if (terrain !== void 0 && !deepEqual(terrain, currProps.terrain)) {
+        if (!terrain || map.getSource(terrain.source)) {
+          currProps.terrain = terrain;
+          map.setTerrain(terrain);
         }
       }
     }
-    return changed;
   }
-  /* Update interaction handlers to match props
-     @param {object} nextProps
-     @param {object} currProps
-     @returns {bool} true if anything is changed
-   */
+  /* Update interaction handlers to match props */
   _updateHandlers(nextProps, currProps) {
-    var _a, _b;
     const map = this._map;
-    let changed = false;
     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)) {
-        changed = true;
         if (newValue) {
           map[propName].enable(newValue);
         } else {
@@ -664,30 +606,24 @@ var _Mapbox = class {
         }
       }
     }
-    return changed;
   }
   _queryRenderedFeatures(point) {
     const map = this._map;
-    const tr = map.transform;
     const { interactiveLayerIds = [] } = this.props;
     try {
-      map.transform = this._renderTransform;
       return map.queryRenderedFeatures(point, {
         layers: interactiveLayerIds.filter(map.getLayer.bind(map))
       });
-    } catch (e) {
+    } catch {
       return [];
-    } finally {
-      map.transform = tr;
     }
   }
   _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) {
@@ -704,65 +640,9 @@ var _Mapbox = class {
       this._hoveredFeatures = null;
     }
   }
-  _fireEvent(baseFire, event, properties) {
-    const map = this._map;
-    const tr = map.transform;
-    const eventType = typeof event === "string" ? event : event.type;
-    if (eventType === "move") {
-      this._updateViewState(this.props, false);
-    }
-    if (eventType in cameraEvents) {
-      if (typeof event === "object") {
-        event.viewState = transformToViewState(tr);
-      }
-      if (this._map.isMoving()) {
-        map.transform = this._renderTransform;
-        baseFire.call(map, event, properties);
-        map.transform = tr;
-        return map;
-      }
-    }
-    baseFire.call(map, event, properties);
-    return map;
-  }
-  // All camera manipulations are complete, ready to repaint
-  _onBeforeRepaint() {
-    const map = this._map;
-    this._internalUpdate = true;
-    for (const eventType in this._deferredEvents) {
-      if (this._deferredEvents[eventType]) {
-        map.fire(eventType);
-      }
-    }
-    this._internalUpdate = false;
-    const tr = this._map.transform;
-    map.transform = this._renderTransform;
-    this._onAfterRepaint = () => {
-      syncProjection(this._renderTransform, tr);
-      map.transform = tr;
-    };
-  }
 };
-var Mapbox = _Mapbox;
-Mapbox.savedMaps = [];
-function getAccessTokenFromEnv() {
-  let accessToken = null;
-  if (typeof location !== "undefined") {
-    const match = /access_token=([^&\/]*)/.exec(location.search);
-    accessToken = match && match[1];
-  }
-  try {
-    accessToken = accessToken || process.env.MapboxAccessToken;
-  } catch (e) {
-  }
-  try {
-    accessToken = accessToken || process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
-  } catch (e) {
-  }
-  return accessToken;
-}
 
-// src/mapbox/create-ref.ts
+// src/maplibre/create-ref.ts
 var skipMethods = [
   "setMaxBounds",
   "setMinZoom",
@@ -791,43 +671,7 @@ function createRef(mapInstance) {
   }
   const map = mapInstance.map;
   const result = {
-    getMap: () => map,
-    // Overwrite getters to use our shadow transform
-    getCenter: () => mapInstance.transform.center,
-    getZoom: () => mapInstance.transform.zoom,
-    getBearing: () => mapInstance.transform.bearing,
-    getPitch: () => mapInstance.transform.pitch,
-    getPadding: () => mapInstance.transform.padding,
-    getBounds: () => mapInstance.transform.getBounds(),
-    project: (lnglat) => {
-      const tr = map.transform;
-      map.transform = mapInstance.transform;
-      const result2 = map.project(lnglat);
-      map.transform = tr;
-      return result2;
-    },
-    unproject: (point) => {
-      const tr = map.transform;
-      map.transform = mapInstance.transform;
-      const result2 = map.unproject(point);
-      map.transform = tr;
-      return result2;
-    },
-    // options diverge between mapbox and maplibre
-    queryTerrainElevation: (lnglat, options) => {
-      const tr = map.transform;
-      map.transform = mapInstance.transform;
-      const result2 = map.queryTerrainElevation(lnglat, options);
-      map.transform = tr;
-      return result2;
-    },
-    queryRenderedFeatures: (geometry, options) => {
-      const tr = map.transform;
-      map.transform = mapInstance.transform;
-      const result2 = map.queryRenderedFeatures(geometry, options);
-      map.transform = tr;
-      return result2;
-    }
+    getMap: () => map
   };
   for (const key of getMethodNames(map)) {
     if (!(key in result) && !skipMethods.includes(key)) {
@@ -856,47 +700,168 @@ var useIsomorphicLayoutEffect = typeof document !== "undefined" ? import_react2.
 var use_isomorphic_layout_effect_default = useIsomorphicLayoutEffect;
 
 // src/utils/set-globals.ts
-var globalSettings = [
-  "baseApiUrl",
-  "maxParallelImageRequests",
-  "workerClass",
-  "workerCount",
-  "workerUrl"
-];
-function setGlobals(mapLib2, props) {
-  for (const key of globalSettings) {
-    if (key in props) {
-      mapLib2[key] = props[key];
-    }
-  }
-  const {
-    RTLTextPlugin = "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js"
-  } = props;
-  if (RTLTextPlugin && mapLib2.getRTLTextPluginStatus && mapLib2.getRTLTextPluginStatus() === "unavailable") {
-    mapLib2.setRTLTextPlugin(
-      RTLTextPlugin,
+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);
         }
       },
-      true
+      lazy
     );
   }
+  if (maxParallelImageRequests !== void 0) {
+    mapLib.setMaxParallelImageRequests(maxParallelImageRequests);
+  }
+  if (workerCount !== void 0) {
+    mapLib.setWorkerCount(workerCount);
+  }
+  if (workerUrl !== void 0) {
+    mapLib.setWorkerUrl(workerUrl);
+  }
 }
 
+// src/components/logo-control.ts
+var import_react4 = require("react");
+
+// src/utils/apply-react-style.ts
+var unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
+function applyReactStyle(element, styles) {
+  if (!element || !styles) {
+    return;
+  }
+  const style = element.style;
+  for (const key in styles) {
+    const value = styles[key];
+    if (Number.isFinite(value) && !unitlessNumber.test(key)) {
+      style[key] = `${value}px`;
+    } else {
+      style[key] = value;
+    }
+  }
+}
+
+// src/components/use-control.ts
+var import_react3 = require("react");
+function useControl(onCreate, arg1, arg2, arg3) {
+  const context = (0, import_react3.useContext)(MapContext);
+  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?.position);
+      if (onAdd) {
+        onAdd(context);
+      }
+    }
+    return () => {
+      if (onRemove) {
+        onRemove(context);
+      }
+      if (map.hasControl(ctrl)) {
+        map.removeControl(ctrl);
+      }
+    };
+  }, []);
+  return ctrl;
+}
+
+// src/components/logo-control.ts
+function _LogoControl(props) {
+  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)(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style, ctrl._container]);
+  return null;
+}
+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({
+      compact: true,
+      ...props
+    }),
+    { position: props.position }
+  );
+  (0, import_react5.useEffect)(() => {
+    applyReactStyle(ctrl._container, props.style);
+    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);
+
 // src/components/map.tsx
 var MapContext = React2.createContext(null);
-function Map(props, ref, defaultLib) {
-  const mountedMapsContext = (0, import_react3.useContext)(MountedMapsContext);
-  const [mapInstance, setMapInstance] = (0, import_react3.useState)(null);
-  const containerRef = (0, import_react3.useRef)();
-  const { current: contextValue } = (0, import_react3.useRef)({ mapLib: null, map: null });
-  (0, import_react3.useEffect)(() => {
-    const mapLib2 = props.mapLib;
+function _Map(props, ref) {
+  const mountedMapsContext = (0, import_react6.useContext)(MountedMapsContext);
+  const [mapInstance, setMapInstance] = (0, import_react6.useState)(null);
+  const containerRef = (0, import_react6.useRef)();
+  const { current: contextValue } = (0, import_react6.useRef)({
+    mapLib: null,
+    map: null
+  });
+  (0, import_react6.useEffect)(() => {
+    const mapLib = props.mapLib;
     let isMounted = true;
-    let mapbox;
-    Promise.resolve(mapLib2 || defaultLib).then((module2) => {
+    let maplibre;
+    Promise.resolve(mapLib || import("maplibre-gl")).then((module2) => {
       if (!isMounted) {
         return;
       }
@@ -908,20 +873,24 @@ function Map(props, ref, defaultLib) {
         throw new Error("Invalid mapLib");
       }
       setGlobals(mapboxgl, props);
-      if (!mapboxgl.supported || mapboxgl.supported(props)) {
-        if (props.reuseMaps) {
-          mapbox = Mapbox.reuse(props, containerRef.current);
-        }
-        if (!mapbox) {
-          mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current);
-        }
-        contextValue.map = createRef(mapbox);
-        contextValue.mapLib = mapboxgl;
-        setMapInstance(mapbox);
-        mountedMapsContext == null ? void 0 : mountedMapsContext.onMapMount(contextValue.map, props.id);
-      } else {
-        throw new Error("Map is not supported by this browser");
+      if (props.reuseMaps) {
+        maplibre = Maplibre.reuse(props, containerRef.current);
+      }
+      if (!maplibre) {
+        maplibre = new Maplibre(
+          mapboxgl.Map,
+          {
+            ...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?.onMapMount(contextValue.map, props.id);
     }).catch((error) => {
       const { onError } = props;
       if (onError) {
@@ -937,12 +906,12 @@ function Map(props, ref, defaultLib) {
     });
     return () => {
       isMounted = false;
-      if (mapbox) {
-        mountedMapsContext == null ? void 0 : mountedMapsContext.onMapUnmount(props.id);
+      if (maplibre) {
+        mountedMapsContext?.onMapUnmount(props.id);
         if (props.reuseMaps) {
-          mapbox.recycle();
+          maplibre.recycle();
         } else {
-          mapbox.destroy();
+          maplibre.destroy();
         }
       }
     };
@@ -952,335 +921,293 @@ function Map(props, ref, defaultLib) {
       mapInstance.setProps(props);
     }
   });
-  (0, import_react3.useImperativeHandle)(ref, () => contextValue.map, [mapInstance]);
-  const style = (0, import_react3.useMemo)(
-    () => __spreadValues({
+  (0, import_react6.useImperativeHandle)(ref, () => contextValue.map, [mapInstance]);
+  const style = (0, import_react6.useMemo)(
+    () => ({
       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 }, 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", { "mapboxgl-children": "", 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);
 
 // src/components/marker.ts
 var React3 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
-var import_react4 = require("react");
+var import_react7 = require("react");
 
-// src/utils/apply-react-style.ts
-var unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
-function applyReactStyle(element, styles) {
-  if (!element || !styles) {
-    return;
+// src/utils/compare-class-names.ts
+function compareClassNames(prevClassName, nextClassName) {
+  if (prevClassName === nextClassName) {
+    return null;
   }
-  const style = element.style;
-  for (const key in styles) {
-    const value = styles[key];
-    if (Number.isFinite(value) && !unitlessNumber.test(key)) {
-      style[key] = `${value}px`;
-    } else {
-      style[key] = value;
+  const prevClassList = getClassList(prevClassName);
+  const nextClassList = getClassList(nextClassName);
+  const diff = [];
+  for (const c of nextClassList) {
+    if (!prevClassList.has(c)) {
+      diff.push(c);
     }
   }
-}
-
-// src/components/marker.ts
-function Marker(props, ref) {
-  const { map, mapLib: mapLib2 } = (0, import_react4.useContext)(MapContext);
-  const thisRef = (0, import_react4.useRef)({ props });
-  thisRef.current.props = props;
-  const marker = (0, import_react4.useMemo)(() => {
-    let hasChildren = false;
-    React3.Children.forEach(props.children, (el) => {
-      if (el) {
-        hasChildren = true;
-      }
-    });
-    const options = __spreadProps(__spreadValues({}, props), {
-      element: hasChildren ? document.createElement("div") : null
-    });
-    const mk = new mapLib2.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_react4.useEffect)(() => {
-    marker.addTo(map.getMap());
-    return () => {
-      marker.remove();
-    };
-  }, []);
-  const {
-    longitude,
-    latitude,
-    offset,
-    style,
-    draggable = false,
-    popup = null,
-    rotation = 0,
-    rotationAlignment = "auto",
-    pitchAlignment = "auto"
-  } = props;
-  (0, import_react4.useEffect)(() => {
-    applyReactStyle(marker.getElement(), style);
-  }, [style]);
-  (0, import_react4.useImperativeHandle)(ref, () => marker, []);
-  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);
+  for (const c of prevClassList) {
+    if (!nextClassList.has(c)) {
+      diff.push(c);
+    }
   }
-  return (0, import_react_dom.createPortal)(props.children, marker.getElement());
+  return diff.length === 0 ? null : diff;
 }
-var marker_default = (0, import_react4.memo)((0, import_react4.forwardRef)(Marker));
-
-// src/components/popup.ts
-var import_react_dom2 = require("react-dom");
-var import_react5 = require("react");
 function getClassList(className) {
   return new Set(className ? className.trim().split(/\s+/) : []);
 }
-function Popup(props, ref) {
-  const { map, mapLib: mapLib2 } = (0, import_react5.useContext)(MapContext);
-  const container = (0, import_react5.useMemo)(() => {
-    return document.createElement("div");
-  }, []);
-  const thisRef = (0, import_react5.useRef)({ props });
-  thisRef.current.props = props;
-  const popup = (0, import_react5.useMemo)(() => {
-    const options = __spreadValues({}, props);
-    const pp = new mapLib2.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_react5.useEffect)(() => {
-    const onClose = (e) => {
-      var _a, _b;
-      (_b = (_a = thisRef.current.props).onClose) == null ? void 0 : _b.call(_a, e);
-    };
-    popup.on("close", onClose);
-    popup.setDOMContent(container).addTo(map.getMap());
-    return () => {
-      popup.off("close", onClose);
-      if (popup.isOpen()) {
-        popup.remove();
-      }
-    };
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    applyReactStyle(popup.getElement(), props.style);
-  }, [props.style]);
-  (0, import_react5.useImperativeHandle)(ref, () => popup, []);
-  if (popup.isOpen()) {
-    if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {
-      popup.setLngLat([props.longitude, props.latitude]);
+
+// src/components/marker.ts
+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 marker = (0, import_react7.useMemo)(() => {
+      let hasChildren = false;
+      React3.Children.forEach(props.children, (el) => {
+        if (el) {
+          hasChildren = true;
+        }
+      });
+      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) => {
+        thisRef.current.props.onClick?.({
+          type: "click",
+          target: mk,
+          originalEvent: e
+        });
+      });
+      mk.on("dragstart", (e) => {
+        const evt = e;
+        evt.lngLat = marker.getLngLat();
+        thisRef.current.props.onDragStart?.(evt);
+      });
+      mk.on("drag", (e) => {
+        const evt = e;
+        evt.lngLat = marker.getLngLat();
+        thisRef.current.props.onDrag?.(evt);
+      });
+      mk.on("dragend", (e) => {
+        const evt = e;
+        evt.lngLat = marker.getLngLat();
+        thisRef.current.props.onDragEnd?.(evt);
+      });
+      return mk;
+    }, []);
+    (0, import_react7.useEffect)(() => {
+      marker.addTo(map.getMap());
+      return () => {
+        marker.remove();
+      };
+    }, []);
+    const {
+      longitude,
+      latitude,
+      offset,
+      style,
+      draggable = false,
+      popup = null,
+      rotation = 0,
+      rotationAlignment = "auto",
+      pitchAlignment = "auto"
+    } = 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 (props.offset && !deepEqual(popup.options.offset, props.offset)) {
-      popup.setOffset(props.offset);
+    if (offset && !arePointsEqual(marker.getOffset(), offset)) {
+      marker.setOffset(offset);
     }
-    if (popup.options.anchor !== props.anchor || popup.options.maxWidth !== props.maxWidth) {
-      popup.options.anchor = props.anchor;
-      popup.setMaxWidth(props.maxWidth);
+    if (marker.isDraggable() !== draggable) {
+      marker.setDraggable(draggable);
     }
-    if (popup.options.className !== props.className) {
-      const prevClassList = getClassList(popup.options.className);
-      const nextClassList = getClassList(props.className);
-      for (const c of prevClassList) {
-        if (!nextClassList.has(c)) {
-          popup.removeClassName(c);
-        }
-      }
-      for (const c of nextClassList) {
-        if (!prevClassList.has(c)) {
-          popup.addClassName(c);
-        }
+    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);
       }
-      popup.options.className = props.className;
     }
-  }
-  return (0, import_react_dom2.createPortal)(props.children, container);
-}
-var popup_default = (0, import_react5.memo)((0, import_react5.forwardRef)(Popup));
-
-// src/components/attribution-control.ts
-var import_react7 = require("react");
+    thisRef.current.props = props;
+    return (0, import_react_dom.createPortal)(props.children, marker.getElement());
+  })
+);
 
-// src/components/use-control.ts
-var import_react6 = require("react");
-function useControl(onCreate, arg1, arg2, arg3) {
-  const context = (0, import_react6.useContext)(MapContext);
-  const ctrl = (0, import_react6.useMemo)(() => onCreate(context), []);
-  (0, import_react6.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);
-      if (onAdd) {
-        onAdd(context);
+// src/components/popup.ts
+var import_react_dom2 = require("react-dom");
+var import_react8 = require("react");
+var Popup = (0, import_react8.memo)(
+  (0, import_react8.forwardRef)((props, ref) => {
+    const { map, mapLib } = (0, import_react8.useContext)(MapContext);
+    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 = { ...props };
+      const pp = new mapLib.Popup(options);
+      pp.setLngLat([props.longitude, props.latitude]);
+      pp.once("open", (e) => {
+        thisRef.current.props.onOpen?.(e);
+      });
+      return pp;
+    }, []);
+    (0, import_react8.useEffect)(() => {
+      const onClose = (e) => {
+        thisRef.current.props.onClose?.(e);
+      };
+      popup.on("close", onClose);
+      popup.setDOMContent(container).addTo(map.getMap());
+      return () => {
+        popup.off("close", onClose);
+        if (popup.isOpen()) {
+          popup.remove();
+        }
+      };
+    }, []);
+    (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]);
       }
-    }
-    return () => {
-      if (onRemove) {
-        onRemove(context);
+      if (props.offset && !deepEqual(oldProps.offset, props.offset)) {
+        popup.setOffset(props.offset);
       }
-      if (map.hasControl(ctrl)) {
-        map.removeControl(ctrl);
+      if (oldProps.anchor !== props.anchor || oldProps.maxWidth !== props.maxWidth) {
+        popup.options.anchor = props.anchor;
+        popup.setMaxWidth(props.maxWidth);
       }
-    };
-  }, []);
-  return ctrl;
-}
-var use_control_default = useControl;
-
-// src/components/attribution-control.ts
-function AttributionControl(props) {
-  const ctrl = use_control_default(
-    ({ mapLib: mapLib2 }) => new mapLib2.AttributionControl(props),
-    {
-      position: props.position
+      const classNameDiff = compareClassNames(
+        oldProps.className,
+        props.className
+      );
+      if (classNameDiff) {
+        for (const c of classNameDiff) {
+          popup.toggleClassName(c);
+        }
+      }
+      thisRef.current.props = props;
     }
-  );
-  (0, import_react7.useEffect)(() => {
-    applyReactStyle(ctrl._container, props.style);
-  }, [props.style]);
-  return null;
-}
-var attribution_control_default = (0, import_react7.memo)(AttributionControl);
+    return (0, import_react_dom2.createPortal)(props.children, container);
+  })
+);
 
-// src/components/fullscreen-control.tsx
-var import_react8 = require("react");
-function FullscreenControl(props) {
-  const ctrl = use_control_default(
-    ({ mapLib: mapLib2 }) => new mapLib2.FullscreenControl({
+// src/components/fullscreen-control.ts
+var import_react9 = require("react");
+function _FullscreenControl(props) {
+  const ctrl = useControl(
+    ({ mapLib }) => new mapLib.FullscreenControl({
       container: props.containerId && document.getElementById(props.containerId)
     }),
     { position: props.position }
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     applyReactStyle(ctrl._controlContainer, props.style);
   }, [props.style]);
   return null;
 }
-var fullscreen_control_default = (0, import_react8.memo)(FullscreenControl);
+var FullscreenControl = (0, import_react9.memo)(_FullscreenControl);
 
 // src/components/geolocate-control.ts
-var import_react9 = require("react");
-function GeolocateControl(props, ref) {
-  const thisRef = (0, import_react9.useRef)({ props });
-  const ctrl = use_control_default(
-    ({ mapLib: mapLib2 }) => {
-      const gc = new mapLib2.GeolocateControl(props);
+var import_react10 = require("react");
+function _GeolocateControl(props, ref) {
+  const thisRef = (0, import_react10.useRef)({ props });
+  const ctrl = useControl(
+    ({ mapLib }) => {
+      const gc = new mapLib.GeolocateControl(props);
       const setupUI = gc._setupUI;
-      gc._setupUI = (args) => {
+      gc._setupUI = () => {
         if (!gc._container.hasChildNodes()) {
-          setupUI(args);
+          setupUI();
         }
       };
       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;
     },
     { position: props.position }
   );
   thisRef.current.props = props;
-  (0, import_react9.useImperativeHandle)(ref, () => ctrl, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useImperativeHandle)(ref, () => ctrl, []);
+  (0, import_react10.useEffect)(() => {
     applyReactStyle(ctrl._container, props.style);
   }, [props.style]);
   return null;
 }
-var geolocate_control_default = (0, import_react9.memo)((0, import_react9.forwardRef)(GeolocateControl));
+var GeolocateControl = (0, import_react10.memo)(
+  (0, import_react10.forwardRef)(_GeolocateControl)
+);
 
 // src/components/navigation-control.ts
-var import_react10 = require("react");
-function NavigationControl(props) {
-  const ctrl = use_control_default(({ mapLib: mapLib2 }) => new mapLib2.NavigationControl(props), {
+var import_react11 = require("react");
+function _NavigationControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.NavigationControl(props), {
     position: props.position
   });
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     applyReactStyle(ctrl._container, props.style);
   }, [props.style]);
   return null;
 }
-var navigation_control_default = (0, import_react10.memo)(NavigationControl);
+var NavigationControl = (0, import_react11.memo)(_NavigationControl);
 
 // src/components/scale-control.ts
-var import_react11 = require("react");
-function ScaleControl(props) {
-  const ctrl = use_control_default(({ mapLib: mapLib2 }) => new mapLib2.ScaleControl(props), {
+var import_react12 = require("react");
+function _ScaleControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.ScaleControl(props), {
     position: props.position
   });
-  const propsRef = (0, import_react11.useRef)(props);
+  const propsRef = (0, import_react12.useRef)(props);
   const prevProps = propsRef.current;
   propsRef.current = props;
   const { style } = props;
@@ -1290,15 +1217,29 @@ function ScaleControl(props) {
   if (props.unit !== void 0 && props.unit !== prevProps.unit) {
     ctrl.setUnit(props.unit);
   }
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     applyReactStyle(ctrl._container, style);
   }, [style]);
   return null;
 }
-var scale_control_default = (0, import_react11.memo)(ScaleControl);
+var ScaleControl = (0, import_react12.memo)(_ScaleControl);
 
-// src/components/layer.ts
-var import_react12 = require("react");
+// src/components/terrain-control.ts
+var import_react13 = require("react");
+function _TerrainControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.TerrainControl(props), {
+    position: props.position
+  });
+  (0, import_react13.useEffect)(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+  return null;
+}
+var TerrainControl = (0, import_react13.memo)(_TerrainControl);
+
+// src/components/source.ts
+var React4 = __toESM(require("react"), 1);
+var import_react14 = require("react");
 
 // src/utils/assert.ts
 function assert(condition, message) {
@@ -1307,100 +1248,11 @@ function assert(condition, message) {
   }
 }
 
-// src/components/layer.ts
-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) {
-    map.moveLayer(id, beforeId);
-  }
-  if (layout !== prevProps.layout) {
-    const prevLayout = prevProps.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)) {
-        map.setLayoutProperty(id, key, void 0);
-      }
-    }
-  }
-  if (paint !== prevProps.paint) {
-    const prevPaint = prevProps.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)) {
-        map.setPaintProperty(id, key, void 0);
-      }
-    }
-  }
-  if (!deepEqual(filter, prevProps.filter)) {
-    map.setFilter(id, filter);
-  }
-  if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.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 });
-    delete options.beforeId;
-    map.addLayer(options, props.beforeId);
-  }
-}
-var layerCounter = 0;
-function Layer(props) {
-  const map = (0, import_react12.useContext)(MapContext).map.getMap();
-  const propsRef = (0, import_react12.useRef)(props);
-  const [, setStyleLoaded] = (0, import_react12.useState)(0);
-  const id = (0, import_react12.useMemo)(() => props.id || `jsx-layer-${layerCounter++}`, []);
-  (0, import_react12.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)) {
-          map.removeLayer(id);
-        }
-      };
-    }
-    return void 0;
-  }, [map]);
-  const layer = map && map.style && map.getLayer(id);
-  if (layer) {
-    try {
-      updateLayer(map, id, props, propsRef.current);
-    } catch (error) {
-      console.warn(error);
-    }
-  } else {
-    createLayer(map, id, props);
-  }
-  propsRef.current = props;
-  return null;
-}
-var layer_default = Layer;
-
 // src/components/source.ts
-var React4 = __toESM(require("react"), 1);
-var import_react13 = require("react");
-var import_react14 = require("react");
 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);
@@ -1424,45 +1276,42 @@ function updateSource(source, props, prevProps) {
   }
   const type = props.type;
   if (type === "geojson") {
-    source.setData(
-      props.data
-    );
+    source.setData(props.data);
   } else if (type === "image") {
     source.updateImage({
       url: props.url,
       coordinates: props.coordinates
     });
-  } else if ("setCoordinates" in source && changedKeyCount === 1 && changedKey === "coordinates") {
-    source.setCoordinates(props.coordinates);
-  } else if ("setUrl" in source) {
+  } else {
     switch (changedKey) {
+      case "coordinates":
+        source.setCoordinates?.(props.coordinates);
+        break;
       case "url":
-        source.setUrl(props.url);
+        source.setUrl?.(props.url);
         break;
       case "tiles":
-        source.setTiles(props.tiles);
+        source.setTiles?.(props.tiles);
         break;
       default:
+        console.warn(`Unable to update <Source> prop: ${changedKey}`);
     }
-  } else {
-    console.warn(`Unable to update <Source> prop: ${changedKey}`);
   }
 }
 function Source(props) {
-  const map = (0, import_react13.useContext)(MapContext).map.getMap();
-  const propsRef = (0, import_react13.useRef)(props);
-  const [, setStyleLoaded] = (0, import_react13.useState)(0);
-  const id = (0, import_react13.useMemo)(() => props.id || `jsx-source-${sourceCounter++}`, []);
-  (0, import_react13.useEffect)(() => {
+  const map = (0, import_react14.useContext)(MapContext).map.getMap();
+  const propsRef = (0, import_react14.useRef)(props);
+  const [, setStyleLoaded] = (0, import_react14.useState)(0);
+  const id = (0, import_react14.useMemo)(() => props.id || `jsx-source-${sourceCounter++}`, []);
+  (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 allLayers = map.getStyle()?.layers;
           if (allLayers) {
             for (const layer of allLayers) {
               if (layer.source === id) {
@@ -1490,25 +1339,111 @@ function Source(props) {
     })
   ) || null;
 }
-var source_default = Source;
 
-// src/exports-mapbox.ts
-function useMap2() {
-  return useMap();
+// src/components/layer.ts
+var import_react15 = 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) {
+    map.moveLayer(id, beforeId);
+  }
+  if (layout !== prevProps.layout) {
+    const prevLayout = prevProps.layout || {};
+    for (const key in layout) {
+      if (!deepEqual(layout[key], prevLayout[key])) {
+        map.setLayoutProperty(id, key, layout[key]);
+      }
+    }
+    for (const key in prevLayout) {
+      if (!Object.prototype.hasOwnProperty.call(layout, key)) {
+        map.setLayoutProperty(id, key, void 0);
+      }
+    }
+  }
+  if (paint !== prevProps.paint) {
+    const prevPaint = prevProps.paint || {};
+    for (const key in paint) {
+      if (!deepEqual(paint[key], prevPaint[key])) {
+        map.setPaintProperty(id, key, paint[key]);
+      }
+    }
+    for (const key in prevPaint) {
+      if (!Object.prototype.hasOwnProperty.call(paint, key)) {
+        map.setPaintProperty(id, key, void 0);
+      }
+    }
+  }
+  if (!deepEqual(filter, prevProps.filter)) {
+    map.setFilter(id, filter);
+  }
+  if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {
+    map.setLayerZoomRange(id, minzoom, maxzoom);
+  }
 }
-var mapLib = import("mapbox-gl");
-var Map2 = (() => {
-  return React5.forwardRef(function Map3(props, ref) {
-    return Map(props, ref, mapLib);
-  });
-})();
-var Marker2 = marker_default;
-var Popup2 = popup_default;
-var AttributionControl2 = attribution_control_default;
-var FullscreenControl2 = fullscreen_control_default;
-var NavigationControl2 = navigation_control_default;
-var GeolocateControl2 = geolocate_control_default;
-var ScaleControl2 = scale_control_default;
-var Layer2 = layer_default;
-var Source2 = source_default;
-var exports_mapbox_default = Map2;
+function createLayer(map, id, props) {
+  if (map.style && map.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)(() => {
+    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)) {
+          map.removeLayer(id);
+        }
+      };
+    }
+    return void 0;
+  }, [map]);
+  const layer = map && map.style && map.getLayer(id);
+  if (layer) {
+    try {
+      updateLayer(map, id, props, propsRef.current);
+    } catch (error) {
+      console.warn(error);
+    }
+  } else {
+    createLayer(map, id, props);
+  }
+  propsRef.current = props;
+  return null;
+}
+
+// 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