react-three-map 0.8.1 → 1.0.0-next.0

package/dist/cjs/main.js

@@ -1,12 +1,33 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fiber = require("@react-three/fiber");
 const jsxRuntime = require("react/jsx-runtime");
 const mapboxGl = require("mapbox-gl");
-const react = require("react");
-const reactMapGl = require("react-map-gl");
-const THREE = require("three");
+const React = require("react");
 const reactDom = require("react-dom");
+const THREE = require("three");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -23,8 +44,9 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
-const useMap$1 = () => fiber.useThree((s) => {
+const useMap$2 = () => fiber.useThree((s) => {
   var _a;
   return (_a = s.r3m) == null ? void 0 : _a.map;
 });
@@ -79,7 +101,7 @@ function coordsToMatrix({
   return m4.compose(pos, quat, scale).toArray();
 }
 function useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: fromLngLat2 }) {
-  const m42 = react.useMemo(() => coordsToMatrix({
+  const m42 = React.useMemo(() => coordsToMatrix({
     latitude,
     longitude,
     altitude,
@@ -93,7 +115,7 @@ function useR3M() {
 }
 function useInitR3M(props) {
   const canvas = fiber.useThree((s) => s.gl.domElement);
-  react.useState(() => {
+  React.useState(() => {
     const store = fiber._roots.get(canvas).store;
     initR3M({ ...props, store });
   });
@@ -104,13 +126,13 @@ function initR3M({ store, ...props }) {
   store.setState({ r3m });
   return r3m;
 }
-const Coordinates = react.memo(({
+const Coordinates = React.memo(({
   latitude,
   longitude,
   altitude = 0,
   children
 }) => {
-  const [scene] = react.useState(() => new THREE.Scene());
+  const [scene] = React.useState(() => new THREE.Scene());
   const r3m = useR3M();
   const origin = useCoordsToMatrix({
     latitude,
@@ -126,14 +148,14 @@ const Coordinates = react.memo(({
 Coordinates.displayName = "Coordinates";
 function RenderAtCoords({ r3m, origin }) {
   const { gl, scene, set } = fiber.useThree();
-  const cameraRef = react.useRef(null);
+  const cameraRef = React.useRef(null);
   fiber.useFrame(() => {
     if (!cameraRef.current)
       return;
     syncCamera(cameraRef.current, origin, r3m.viewProjMx);
     gl.render(scene, cameraRef.current);
   });
-  react.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (!cameraRef.current)
       return;
     set({
@@ -147,14 +169,33 @@ function RenderAtCoords({ r3m, origin }) {
   }, [set, r3m]);
   return /* @__PURE__ */ jsxRuntime.jsx("perspectiveCamera", { ref: cameraRef });
 }
-const earthRadius = 6378137;
+const earthRadius = 63710088e-1;
+const mercatorScaleLookup = {};
+function getMercatorScale(lat) {
+  const index = Math.round(lat * 1e3);
+  if (mercatorScaleLookup[index] === void 0) {
+    mercatorScaleLookup[index] = 1 / Math.cos(lat * THREE.MathUtils.DEG2RAD);
+  }
+  return mercatorScaleLookup[index];
+}
+function averageMercatorScale(originLat, pointLat, steps = 10) {
+  let totalScale = 0;
+  const latStep = (pointLat - originLat) / steps;
+  for (let i = 0; i <= steps; i++) {
+    const lat = originLat + latStep * i;
+    totalScale += getMercatorScale(lat);
+  }
+  return totalScale / (steps + 1);
+}
 function coordsToVector3(point, origin) {
   const latitudeDiff = (point.latitude - origin.latitude) * THREE.MathUtils.DEG2RAD;
   const longitudeDiff = (point.longitude - origin.longitude) * THREE.MathUtils.DEG2RAD;
   const altitudeDiff = (point.altitude || 0) - (origin.altitude || 0);
   const x = longitudeDiff * earthRadius * Math.cos(origin.latitude * THREE.MathUtils.DEG2RAD);
   const y = altitudeDiff;
-  const z = -latitudeDiff * earthRadius;
+  const steps = Math.ceil(Math.abs(point.latitude - origin.latitude)) * 100 + 1;
+  const avgScale = averageMercatorScale(origin.latitude, point.latitude, steps);
+  const z = -latitudeDiff * earthRadius / getMercatorScale(origin.latitude) * avgScale;
   return [x, y, z];
 }
 function useCoords() {
@@ -163,7 +204,7 @@ function useCoords() {
 }
 function useSetCoords({ longitude, latitude, altitude }) {
   const canvas = fiber.useThree((s) => s.gl.domElement);
-  react.useMemo(() => {
+  React.useMemo(() => {
     const store = fiber._roots.get(canvas).store;
     const coords = { longitude, latitude, altitude };
     setCoords(store, coords);
@@ -174,16 +215,16 @@ function useSetRootCoords(store, {
   latitude,
   altitude
 }) {
-  react.useMemo(() => {
+  React.useMemo(() => {
     setCoords(store, { longitude, latitude, altitude });
   }, [longitude, latitude, altitude]);
 }
 function setCoords(store, coords) {
   store.setState({ coords });
 }
-const NearCoordinates = react.memo(({ children, ...coords }) => {
+const NearCoordinates = React.memo(({ children, ...coords }) => {
   const { latitude, longitude, altitude } = useCoords();
-  const pos2 = react.useMemo(() => coordsToVector3(coords, { latitude, longitude, altitude }), [
+  const pos2 = React.useMemo(() => coordsToVector3(coords, { latitude, longitude, altitude }), [
     // eslint-disable-line react-hooks/exhaustive-deps
     latitude,
     longitude,
@@ -203,10 +244,1206 @@ function vector3ToCoords(position, origin) {
   const coords = { latitude, longitude, altitude };
   return coords;
 }
+const MountedMapsContext = React__namespace.createContext(null);
+function useMap$1() {
+  var _a;
+  const maps = (_a = React.useContext(MountedMapsContext)) == null ? void 0 : _a.maps;
+  const currentMap = React.useContext(MapContext);
+  const mapsWithCurrent = React.useMemo(() => {
+    return { ...maps, current: currentMap == null ? void 0 : currentMap.map };
+  }, [maps, currentMap]);
+  return mapsWithCurrent;
+}
+function arePointsEqual(a, b) {
+  const ax = Array.isArray(a) ? a[0] : a ? a.x : 0;
+  const ay = Array.isArray(a) ? a[1] : a ? a.y : 0;
+  const bx = Array.isArray(b) ? b[0] : b ? b.x : 0;
+  const by = Array.isArray(b) ? b[1] : b ? b.y : 0;
+  return ax === bx && ay === by;
+}
+function deepEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) {
+      return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) {
+        return false;
+      }
+    }
+    return true;
+  } else if (Array.isArray(b)) {
+    return false;
+  }
+  if (typeof a === "object" && typeof b === "object") {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+    for (const key of aKeys) {
+      if (!b.hasOwnProperty(key)) {
+        return false;
+      }
+      if (!deepEqual(a[key], b[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+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,
+    latitude: tr.center.lat,
+    zoom: tr.zoom,
+    pitch: tr.pitch,
+    bearing: tr.bearing,
+    padding: tr.padding
+  };
+}
+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;
+  }
+  if ("bearing" in v) {
+    const bearing = tr.bearing;
+    tr.bearing = v.bearing;
+    changed = changed || bearing !== tr.bearing;
+  }
+  if ("pitch" in v) {
+    const pitch = tr.pitch;
+    tr.pitch = v.pitch;
+    changed = changed || pitch !== tr.pitch;
+  }
+  if (v.padding && !tr.isPaddingEqual(v.padding)) {
+    changed = true;
+    tr.padding = v.padding;
+  }
+  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;
+  }
+  return changed;
+}
+const refProps = ["type", "source", "source-layer", "minzoom", "maxzoom", "filter", "layout"];
+function normalizeStyle(style) {
+  if (!style) {
+    return null;
+  }
+  if (typeof style === "string") {
+    return style;
+  }
+  if ("toJS" in style) {
+    style = style.toJS();
+  }
+  if (!style.layers) {
+    return style;
+  }
+  const layerIndex = {};
+  for (const layer of style.layers) {
+    layerIndex[layer.id] = layer;
+  }
+  const layers = style.layers.map((layer) => {
+    let normalizedLayer = null;
+    if ("interactive" in layer) {
+      normalizedLayer = Object.assign({}, layer);
+      delete normalizedLayer.interactive;
+    }
+    const layerRef = layerIndex[layer.ref];
+    if (layerRef) {
+      normalizedLayer = normalizedLayer || Object.assign({}, layer);
+      delete normalizedLayer.ref;
+      for (const propName of refProps) {
+        if (propName in layerRef) {
+          normalizedLayer[propName] = layerRef[propName];
+        }
+      }
+    }
+    return normalizedLayer || layer;
+  });
+  return { ...style, layers };
+}
+const DEFAULT_STYLE = { version: 8, sources: {}, layers: [] };
+const pointerEvents = {
+  mousedown: "onMouseDown",
+  mouseup: "onMouseUp",
+  mouseover: "onMouseOver",
+  mousemove: "onMouseMove",
+  click: "onClick",
+  dblclick: "onDblClick",
+  mouseenter: "onMouseEnter",
+  mouseleave: "onMouseLeave",
+  mouseout: "onMouseOut",
+  contextmenu: "onContextMenu",
+  touchstart: "onTouchStart",
+  touchend: "onTouchEnd",
+  touchmove: "onTouchMove",
+  touchcancel: "onTouchCancel"
+};
+const cameraEvents = {
+  movestart: "onMoveStart",
+  move: "onMove",
+  moveend: "onMoveEnd",
+  dragstart: "onDragStart",
+  drag: "onDrag",
+  dragend: "onDragEnd",
+  zoomstart: "onZoomStart",
+  zoom: "onZoom",
+  zoomend: "onZoomEnd",
+  rotatestart: "onRotateStart",
+  rotate: "onRotate",
+  rotateend: "onRotateEnd",
+  pitchstart: "onPitchStart",
+  pitch: "onPitch",
+  pitchend: "onPitchEnd"
+};
+const otherEvents = {
+  wheel: "onWheel",
+  boxzoomstart: "onBoxZoomStart",
+  boxzoomend: "onBoxZoomEnd",
+  boxzoomcancel: "onBoxZoomCancel",
+  resize: "onResize",
+  load: "onLoad",
+  render: "onRender",
+  idle: "onIdle",
+  remove: "onRemove",
+  data: "onData",
+  styledata: "onStyleData",
+  sourcedata: "onSourceData",
+  error: "onError"
+};
+const settingNames = [
+  "minZoom",
+  "maxZoom",
+  "minPitch",
+  "maxPitch",
+  "maxBounds",
+  "projection",
+  "renderWorldCopies"
+];
+const handlerNames = [
+  "scrollZoom",
+  "boxZoom",
+  "dragRotate",
+  "dragPan",
+  "keyboard",
+  "doubleClickZoom",
+  "touchZoomRotate",
+  "touchPitch"
+];
+class Mapbox {
+  constructor(MapClass, props, container) {
+    this._map = null;
+    this._internalUpdate = false;
+    this._inRender = false;
+    this._hoveredFeatures = null;
+    this._deferredEvents = {
+      move: false,
+      zoom: false,
+      pitch: false,
+      rotate: false
+    };
+    this._onEvent = (e) => {
+      const cb = this.props[otherEvents[e.type]];
+      if (cb) {
+        cb(e);
+      } else if (e.type === "error") {
+        console.error(e.error);
+      }
+    };
+    this._onPointerEvent = (e) => {
+      if (e.type === "mousemove" || e.type === "mouseout") {
+        this._updateHover(e);
+      }
+      const cb = this.props[pointerEvents[e.type]];
+      if (cb) {
+        if (this.props.interactiveLayerIds && e.type !== "mouseover" && e.type !== "mouseout") {
+          e.features = this._hoveredFeatures || this._queryRenderedFeatures(e.point);
+        }
+        cb(e);
+        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);
+  }
+  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);
+    this._updateStyle(props, oldProps);
+    this._updateStyleComponents(props, oldProps);
+    this._updateHandlers(props, oldProps);
+    if (settingsChanged || sizeChanged || viewStateChanged && !this._map.isMoving()) {
+      this.redraw();
+    }
+  }
+  static reuse(props, container) {
+    const that = Mapbox.savedMaps.pop();
+    if (!that) {
+      return null;
+    }
+    const map = that.map;
+    const oldContainer = map.getContainer();
+    container.className = oldContainer.className;
+    while (oldContainer.childNodes.length > 0) {
+      container.appendChild(oldContainer.childNodes[0]);
+    }
+    map._container = container;
+    that.setProps({ ...props, styleDiffing: false });
+    map.resize();
+    const { initialViewState } = props;
+    if (initialViewState) {
+      if (initialViewState.bounds) {
+        map.fitBounds(initialViewState.bounds, { ...initialViewState.fitBoundsOptions, duration: 0 });
+      } else {
+        that._updateViewState(initialViewState, false);
+      }
+    }
+    if (map.isStyleLoaded()) {
+      map.fire("load");
+    } else {
+      map.once("styledata", () => map.fire("load"));
+    }
+    map._update();
+    return that;
+  }
+  /* eslint-disable complexity,max-statements */
+  _initialize(container) {
+    const { props } = this;
+    const { mapStyle = DEFAULT_STYLE } = props;
+    const mapOptions = {
+      ...props,
+      ...props.initialViewState,
+      accessToken: props.mapboxAccessToken || getAccessTokenFromEnv() || null,
+      container,
+      style: normalizeStyle(mapStyle)
+    };
+    const viewState = mapOptions.initialViewState || mapOptions.viewState || mapOptions;
+    Object.assign(mapOptions, {
+      center: [viewState.longitude || 0, viewState.latitude || 0],
+      zoom: viewState.zoom || 0,
+      pitch: viewState.pitch || 0,
+      bearing: viewState.bearing || 0
+    });
+    if (props.gl) {
+      const getContext = HTMLCanvasElement.prototype.getContext;
+      HTMLCanvasElement.prototype.getContext = () => {
+        HTMLCanvasElement.prototype.getContext = getContext;
+        return props.gl;
+      };
+    }
+    const map = new this._MapClass(mapOptions);
+    if (viewState.padding) {
+      map.setPadding(viewState.padding);
+    }
+    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.on("styledata", () => {
+      this._updateStyleComponents(this.props, {});
+      syncProjection(map.transform, this._renderTransform);
+    });
+    map.on("sourcedata", () => this._updateStyleComponents(this.props, {}));
+    for (const eventName in pointerEvents) {
+      map.on(eventName, this._onPointerEvent);
+    }
+    for (const eventName in cameraEvents) {
+      map.on(eventName, this._onCameraEvent);
+    }
+    for (const eventName in otherEvents) {
+      map.on(eventName, this._onEvent);
+    }
+    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();
+    Mapbox.savedMaps.push(this);
+  }
+  destroy() {
+    this._map.remove();
+  }
+  // Force redraw the map now. Typically resize() and jumpTo() is reflected in the next
+  // render cycle, which is managed by Mapbox's animation loop.
+  // This removes the synchronization issue caused by requestAnimationFrame.
+  redraw() {
+    const map = this._map;
+    if (!this._inRender && map.style) {
+      if (map._frame) {
+        map._frame.cancel();
+        map._frame = null;
+      }
+      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
+   */
+  _updateSize(nextProps) {
+    const { viewState } = nextProps;
+    if (viewState) {
+      const map = this._map;
+      if (viewState.width !== map.transform.width || viewState.height !== map.transform.height) {
+        map.resize();
+        return true;
+      }
+    }
+    return false;
+  }
+  // Adapted from map.jumpTo
+  /* Update camera to match props
+     @param {object} nextProps
+     @param {bool} triggerEvents - should fire camera events
+     @returns {bool} true if anything is changed
+   */
+  _updateViewState(nextProps, triggerEvents) {
+    if (this._internalUpdate) {
+      return false;
+    }
+    const map = this._map;
+    const tr = this._renderTransform;
+    const { zoom, pitch, bearing } = tr;
+    const isMoving = map.isMoving();
+    if (isMoving) {
+      tr.cameraElevationReference = "sea";
+    }
+    const changed = applyViewStateToTransform(tr, {
+      ...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);
+    }
+    return changed;
+  }
+  /* Update camera constraints and projection settings to match props
+     @param {object} nextProps
+     @param {object} currProps
+     @returns {bool} true if anything is changed
+   */
+  _updateSettings(nextProps, currProps) {
+    const map = this._map;
+    let changed = false;
+    for (const propName of settingNames) {
+      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]);
+      }
+    }
+    return changed;
+  }
+  /* Update map style to match props
+     @param {object} nextProps
+     @param {object} currProps
+     @returns {bool} true if style is changed
+   */
+  _updateStyle(nextProps, currProps) {
+    if (nextProps.cursor !== currProps.cursor) {
+      this._map.getCanvas().style.cursor = nextProps.cursor || "";
+    }
+    if (nextProps.mapStyle !== currProps.mapStyle) {
+      const { mapStyle = DEFAULT_STYLE, styleDiffing = true } = nextProps;
+      const options = {
+        diff: styleDiffing
+      };
+      if ("localIdeographFontFamily" in nextProps) {
+        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
+   */
+  _updateStyleComponents(nextProps, currProps) {
+    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);
+      }
+      if ("fog" in nextProps && map.setFog && !deepEqual(nextProps.fog, currProps.fog)) {
+        changed = true;
+        map.setFog(nextProps.fog);
+      }
+      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);
+        }
+      }
+    }
+    return changed;
+  }
+  /* Update interaction handlers to match props
+     @param {object} nextProps
+     @param {object} currProps
+     @returns {bool} true if anything is changed
+   */
+  _updateHandlers(nextProps, currProps) {
+    const map = this._map;
+    let changed = false;
+    for (const propName of handlerNames) {
+      const newValue = nextProps[propName] ?? true;
+      const oldValue = currProps[propName] ?? true;
+      if (!deepEqual(newValue, oldValue)) {
+        changed = true;
+        if (newValue) {
+          map[propName].enable(newValue);
+        } else {
+          map[propName].disable();
+        }
+      }
+    }
+    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 {
+      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 features = this._queryRenderedFeatures(e.point);
+      const isHovering = features.length > 0;
+      if (!isHovering && wasHovering) {
+        e.type = "mouseleave";
+        this._onPointerEvent(e);
+      }
+      this._hoveredFeatures = features;
+      if (isHovering && !wasHovering) {
+        e.type = "mouseenter";
+        this._onPointerEvent(e);
+      }
+      e.type = eventType;
+    } else {
+      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;
+    };
+  }
+}
+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 {
+  }
+  try {
+    accessToken = accessToken || process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
+  } catch {
+  }
+  return accessToken;
+}
+const skipMethods = [
+  "setMaxBounds",
+  "setMinZoom",
+  "setMaxZoom",
+  "setMinPitch",
+  "setMaxPitch",
+  "setRenderWorldCopies",
+  "setProjection",
+  "setStyle",
+  "addSource",
+  "removeSource",
+  "addLayer",
+  "removeLayer",
+  "setLayerZoomRange",
+  "setFilter",
+  "setPaintProperty",
+  "setLayoutProperty",
+  "setLight",
+  "setTerrain",
+  "setFog",
+  "remove"
+];
+function createRef(mapInstance) {
+  if (!mapInstance) {
+    return null;
+  }
+  const map = mapInstance.map;
+  const ref = {
+    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 result = map.project(lnglat);
+      map.transform = tr;
+      return result;
+    },
+    unproject: (point) => {
+      const tr = map.transform;
+      map.transform = mapInstance.transform;
+      const result = map.unproject(point);
+      map.transform = tr;
+      return result;
+    },
+    // options diverge between mapbox and maplibre
+    queryTerrainElevation: (lnglat, options) => {
+      const tr = map.transform;
+      map.transform = mapInstance.transform;
+      const result = map.queryTerrainElevation(lnglat, options);
+      map.transform = tr;
+      return result;
+    },
+    queryRenderedFeatures: (geometry, options) => {
+      const tr = map.transform;
+      map.transform = mapInstance.transform;
+      const result = map.queryRenderedFeatures(geometry, options);
+      map.transform = tr;
+      return result;
+    }
+  };
+  for (const key of getMethodNames(map)) {
+    if (!(key in ref) && !skipMethods.includes(key)) {
+      ref[key] = map[key].bind(map);
+    }
+  }
+  return ref;
+}
+function getMethodNames(obj) {
+  const result = /* @__PURE__ */ new Set();
+  let proto = obj;
+  while (proto) {
+    for (const key of Object.getOwnPropertyNames(proto)) {
+      if (key[0] !== "_" && typeof obj[key] === "function" && key !== "fire" && key !== "setEventedParent") {
+        result.add(key);
+      }
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+  return Array.from(result);
+}
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
+const globalSettings = [
+  "baseApiUrl",
+  "maxParallelImageRequests",
+  "workerClass",
+  "workerCount",
+  "workerUrl"
+];
+function setGlobals(mapLib, props) {
+  for (const key of globalSettings) {
+    if (key in props) {
+      mapLib[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 && mapLib.getRTLTextPluginStatus && mapLib.getRTLTextPluginStatus() === "unavailable") {
+    mapLib.setRTLTextPlugin(RTLTextPlugin, (error) => {
+      if (error) {
+        console.error(error);
+      }
+    }, true);
+  }
+}
+const MapContext = React__namespace.createContext(null);
+function _Map(props, ref) {
+  const mountedMapsContext = React.useContext(MountedMapsContext);
+  const [mapInstance, setMapInstance] = React.useState(null);
+  const containerRef = React.useRef();
+  const { current: contextValue } = React.useRef({ mapLib: null, map: null });
+  React.useEffect(() => {
+    const mapLib = props.mapLib;
+    let isMounted = true;
+    let mapbox;
+    Promise.resolve(mapLib || import("mapbox-gl")).then((module2) => {
+      if (!isMounted) {
+        return;
+      }
+      if (!module2) {
+        throw new Error("Invalid mapLib");
+      }
+      const mapboxgl = "Map" in module2 ? module2 : module2.default;
+      if (!mapboxgl.Map) {
+        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");
+      }
+    }).catch((error) => {
+      const { onError } = props;
+      if (onError) {
+        onError({
+          type: "error",
+          target: null,
+          error
+        });
+      } else {
+        console.error(error);
+      }
+    });
+    return () => {
+      isMounted = false;
+      if (mapbox) {
+        mountedMapsContext == null ? void 0 : mountedMapsContext.onMapUnmount(props.id);
+        if (props.reuseMaps) {
+          mapbox.recycle();
+        } else {
+          mapbox.destroy();
+        }
+      }
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (mapInstance) {
+      mapInstance.setProps(props);
+    }
+  });
+  React.useImperativeHandle(ref, () => contextValue.map, [mapInstance]);
+  const style = React.useMemo(() => ({
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    ...props.style
+  }), [props.style]);
+  const CHILD_CONTAINER_STYLE = {
+    height: "100%"
+  };
+  return React__namespace.createElement("div", { id: props.id, ref: containerRef, style }, mapInstance && React__namespace.createElement(
+    MapContext.Provider,
+    { value: contextValue },
+    React__namespace.createElement("div", { "mapboxgl-children": "", style: CHILD_CONTAINER_STYLE }, props.children)
+  ));
+}
+React__namespace.forwardRef(_Map);
+const 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;
+    }
+  }
+}
+React.memo(React.forwardRef((props, ref) => {
+  const { map, mapLib } = React.useContext(MapContext);
+  const thisRef = React.useRef({ props });
+  thisRef.current.props = props;
+  const marker = React.useMemo(() => {
+    let hasChildren = false;
+    React__namespace.Children.forEach(props.children, (el) => {
+      if (el) {
+        hasChildren = true;
+      }
+    });
+    const options = {
+      ...props,
+      element: hasChildren ? document.createElement("div") : null
+    };
+    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;
+  }, []);
+  React.useEffect(() => {
+    marker.addTo(map.getMap());
+    return () => {
+      marker.remove();
+    };
+  }, []);
+  const { longitude, latitude, offset, style, draggable = false, popup = null, rotation = 0, rotationAlignment = "auto", pitchAlignment = "auto" } = props;
+  React.useEffect(() => {
+    applyReactStyle(marker.getElement(), style);
+  }, [style]);
+  React.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);
+  }
+  return reactDom.createPortal(props.children, marker.getElement());
+}));
+function getClassList(className) {
+  return new Set(className ? className.trim().split(/\s+/) : []);
+}
+React.memo(React.forwardRef((props, ref) => {
+  const { map, mapLib } = React.useContext(MapContext);
+  const container = React.useMemo(() => {
+    return document.createElement("div");
+  }, []);
+  const thisRef = React.useRef({ props });
+  thisRef.current.props = props;
+  const popup = React.useMemo(() => {
+    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;
+  }, []);
+  React.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();
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    applyReactStyle(popup.getElement(), props.style);
+  }, [props.style]);
+  React.useImperativeHandle(ref, () => popup, []);
+  if (popup.isOpen()) {
+    if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {
+      popup.setLngLat([props.longitude, props.latitude]);
+    }
+    if (props.offset && !deepEqual(popup.options.offset, props.offset)) {
+      popup.setOffset(props.offset);
+    }
+    if (popup.options.anchor !== props.anchor || popup.options.maxWidth !== props.maxWidth) {
+      popup.options.anchor = props.anchor;
+      popup.setMaxWidth(props.maxWidth);
+    }
+    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);
+        }
+      }
+      popup.options.className = props.className;
+    }
+  }
+  return reactDom.createPortal(props.children, container);
+}));
+function useControl(onCreate, arg1, arg2, arg3) {
+  const context = React.useContext(MapContext);
+  const ctrl = React.useMemo(() => onCreate(context), []);
+  React.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);
+      }
+    }
+    return () => {
+      if (onRemove) {
+        onRemove(context);
+      }
+      if (map.hasControl(ctrl)) {
+        map.removeControl(ctrl);
+      }
+    };
+  }, []);
+  return ctrl;
+}
+function _AttributionControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.AttributionControl(props), {
+    position: props.position
+  });
+  React.useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+  return null;
+}
+React.memo(_AttributionControl);
+function _FullscreenControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.FullscreenControl({
+    container: props.containerId && document.getElementById(props.containerId)
+  }), { position: props.position });
+  React.useEffect(() => {
+    applyReactStyle(ctrl._controlContainer, props.style);
+  }, [props.style]);
+  return null;
+}
+React.memo(_FullscreenControl);
+function _GeolocateControl(props, ref) {
+  const thisRef = React.useRef({ props });
+  const ctrl = useControl(({ mapLib }) => {
+    const gc = new mapLib.GeolocateControl(props);
+    const setupUI = gc._setupUI.bind(gc);
+    gc._setupUI = (args) => {
+      if (!gc._container.hasChildNodes()) {
+        setupUI(args);
+      }
+    };
+    gc.on("geolocate", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onGeolocate) == null ? void 0 : _b.call(_a, e);
+    });
+    gc.on("error", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onError) == null ? void 0 : _b.call(_a, e);
+    });
+    gc.on("outofmaxbounds", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onOutOfMaxBounds) == null ? void 0 : _b.call(_a, e);
+    });
+    gc.on("trackuserlocationstart", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onTrackUserLocationStart) == null ? void 0 : _b.call(_a, e);
+    });
+    gc.on("trackuserlocationend", (e) => {
+      var _a, _b;
+      (_b = (_a = thisRef.current.props).onTrackUserLocationEnd) == null ? void 0 : _b.call(_a, e);
+    });
+    return gc;
+  }, { position: props.position });
+  thisRef.current.props = props;
+  React.useImperativeHandle(ref, () => ctrl, []);
+  React.useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+  return null;
+}
+React.memo(React.forwardRef(_GeolocateControl));
+function _NavigationControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.NavigationControl(props), {
+    position: props.position
+  });
+  React.useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+  return null;
+}
+React.memo(_NavigationControl);
+function _ScaleControl(props) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.ScaleControl(props), {
+    position: props.position
+  });
+  const propsRef = React.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);
+  }
+  React.useEffect(() => {
+    applyReactStyle(ctrl._container, style);
+  }, [style]);
+  return null;
+}
+React.memo(_ScaleControl);
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+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 = { ...props, id };
+    delete options.beforeId;
+    map.addLayer(options, props.beforeId);
+  }
+}
+let layerCounter = 0;
+function Layer(props) {
+  const map = React.useContext(MapContext).map.getMap();
+  const propsRef = React.useRef(props);
+  const [, setStyleLoaded] = React.useState(0);
+  const id = React.useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);
+  React.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;
+}
 const useFunction = (callback) => {
-  const callbackRef = react.useRef(callback);
+  const callbackRef = React.useRef(callback);
   callbackRef.current = callback;
-  return react.useCallback((...args) => {
+  return React.useCallback((...args) => {
     return callbackRef.current(...args);
   }, []);
 };
@@ -218,7 +1455,8 @@ function useRender({
   r3m
 }) {
   const render = useFunction((_gl, projViewMx) => {
-    r3m.viewProjMx.splice(0, 16, ...projViewMx);
+    const pVMx = "defaultProjectionData" in projViewMx ? Object.values(projViewMx.defaultProjectionData.mainMatrix) : projViewMx;
+    r3m.viewProjMx.splice(0, 16, ...pVMx);
     const state = useThree.getState();
     const camera = state.camera;
     const { gl, advance } = state;
@@ -252,7 +1490,7 @@ const events = (store) => {
   };
 };
 function useRoot(fromLngLat2, map, { frameloop, longitude, latitude, altitude, ...props }) {
-  const [{ root, useThree, canvas, r3m }] = react.useState(() => {
+  const [{ root, useThree, canvas, r3m }] = React.useState(() => {
     const canvas2 = map.getCanvas();
     const gl = canvas2.getContext("webgl2") || canvas2.getContext("webgl");
     const root2 = fiber.createRoot(canvas2);
@@ -312,7 +1550,7 @@ function useRoot(fromLngLat2, map, { frameloop, longitude, latitude, altitude, .
     root.unmount();
   });
   useSetRootCoords(useThree, { longitude, latitude, altitude });
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (frameloop !== "demand")
       return;
     const setState = useThree.setState;
@@ -327,13 +1565,13 @@ function useRoot(fromLngLat2, map, { frameloop, longitude, latitude, altitude, .
       setState({ frameloop: "never", invalidate });
     };
   }, [frameloop]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     map.on("resize", onResize);
     return () => {
       map.off("resize", onResize);
     };
   }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
     root.render(/* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children }));
   }, [props.children]);
   return { onRemove, useThree, r3m };
@@ -357,7 +1595,7 @@ function useCanvasInLayer(props, fromLngLat2, map) {
     renderingMode: "3d"
   };
 }
-const InitR3M = react.memo(({
+const InitR3M = React.memo(({
   longitude,
   latitude,
   altitude,
@@ -368,7 +1606,7 @@ const InitR3M = react.memo(({
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
 });
 InitR3M.displayName = "InitR3M";
-const SyncCameraFC = react.memo(({
+const SyncCameraFC = React.memo(({
   latitude,
   longitude,
   altitude = 0,
@@ -379,7 +1617,7 @@ const SyncCameraFC = react.memo(({
 }) => {
   const mapCanvas = map.getCanvas();
   const r3m = useR3M();
-  const camRef = react.useRef(null);
+  const camRef = React.useRef(null);
   const camera = fiber.useThree((s) => s.camera);
   const gl = fiber.useThree((s) => s.gl);
   const threeCanvas = fiber.useThree((s) => s.gl.domElement);
@@ -388,9 +1626,9 @@ const SyncCameraFC = react.memo(({
   const setSize = fiber.useThree((s) => s.setSize);
   const set = fiber.useThree((s) => s.set);
   const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: r3m.fromLngLat });
-  const ready = react.useRef(false);
-  const triggerRepaint = react.useMemo(() => map.triggerRepaint, [map]);
-  const mapPaintRequests = react.useRef(0);
+  const ready = React.useRef(false);
+  const triggerRepaint = React.useMemo(() => map.triggerRepaint, [map]);
+  const mapPaintRequests = React.useRef(0);
   const triggerRepaintOff = useFunction(() => {
     mapPaintRequests.current++;
   });
@@ -422,10 +1660,10 @@ const SyncCameraFC = react.memo(({
     }
     advance(Date.now() * 1e-3, true);
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     setOnRender && setOnRender(() => onRender);
   }, [setOnRender, onRender]);
-  react.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (!manualRender)
       return;
     set({ camera: camRef.current });
@@ -440,7 +1678,7 @@ const SyncCameraFC = react.memo(({
   ) });
 });
 SyncCameraFC.displayName = "SyncCameraFC";
-const CanvasPortal = react.memo(({
+const CanvasPortal = React.memo(({
   children,
   latitude,
   longitude,
@@ -452,7 +1690,7 @@ const CanvasPortal = react.memo(({
 }) => {
   const mapCanvas = map.getCanvas();
   const eventSource = mapCanvas.parentElement;
-  const [ready, setReady] = react.useState(false);
+  const [ready, setReady] = React.useState(false);
   const onReady = useFunction(() => {
     setReady(true);
   });
@@ -495,9 +1733,9 @@ const CanvasPortal = react.memo(({
   );
 });
 CanvasPortal.displayName = "CanvasPortal";
-const InitCanvasFC = react.memo((props) => {
+const InitCanvasFC = React.memo((props) => {
   const canvas = props.map.getCanvas();
-  const [el] = react.useState(() => {
+  const [el] = React.useState(() => {
     const el2 = document.createElement("div");
     el2.style.position = "absolute";
     el2.style.top = "0";
@@ -507,7 +1745,7 @@ const InitCanvasFC = react.memo((props) => {
     el2.style.pointerEvents = "none";
     return el2;
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     const parent = canvas.parentElement;
     parent.appendChild(el);
     return () => {
@@ -519,28 +1757,28 @@ const InitCanvasFC = react.memo((props) => {
 InitCanvasFC.displayName = "InitCanvasFC";
 fiber.extend(THREE__namespace);
 const fromLngLat = mapboxGl.MercatorCoordinate.fromLngLat;
-const Canvas = react.memo(({ overlay, ...props }) => {
-  const map = reactMapGl.useMap().current.getMap();
+const Canvas = React.memo(({ overlay, ...props }) => {
+  const map = useMap$1().current.getMap();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     overlay && /* @__PURE__ */ jsxRuntime.jsx(CanvasOverlay, { map, ...props }),
     !overlay && /* @__PURE__ */ jsxRuntime.jsx(CanvasInLayer, { map, ...props })
   ] });
 });
 Canvas.displayName = "Canvas";
-const CanvasInLayer = react.memo(({ map, ...props }) => {
+const CanvasInLayer = React.memo(({ map, ...props }) => {
   const layerProps = useCanvasInLayer(props, fromLngLat, map);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactMapGl.Layer, { ...layerProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(Layer, { ...layerProps });
 });
 CanvasInLayer.displayName = "CanvasInLayer";
-const CanvasOverlay = react.memo(({ map, id, beforeId, ...props }) => {
-  const [onRender, setOnRender] = react.useState();
+const CanvasOverlay = React.memo(({ map, id, beforeId, ...props }) => {
+  const [onRender, setOnRender] = React.useState();
   const render = useFunction((_gl, mx) => {
     if (!onRender)
       return;
     onRender(mx);
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactMapGl.Layer, { id, beforeId, type: "custom", render }),
+    /* @__PURE__ */ jsxRuntime.jsx(Layer, { id, beforeId, type: "custom", render }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InitCanvasFC,
       {
@@ -553,10 +1791,11 @@ const CanvasOverlay = react.memo(({ map, id, beforeId, ...props }) => {
   ] });
 });
 CanvasInLayer.displayName = "CanvasInLayer";
-const useMap = useMap$1;
+const useMap = useMap$2;
 exports.Canvas = Canvas;
 exports.Coordinates = Coordinates;
 exports.NearCoordinates = NearCoordinates;
+exports.averageMercatorScale = averageMercatorScale;
 exports.coordsToVector3 = coordsToVector3;
 exports.useMap = useMap;
 exports.vector3ToCoords = vector3ToCoords;