react-babylon-map 0.0.1

package/dist/es/main8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main8.mjs","sources":["../../src/api/vector-3-to-coords.ts"],"sourcesContent":["import { earthRadius } from '../core/earth-radius';\nimport { Coords } from './coords';\n\nconst DEG2RAD = Math.PI / 180;\nconst RAD2DEG = 180 / Math.PI;\n\nexport function vector3ToCoords(position: [number, number, number], origin: Coords): Coords {\n  const [x, y, z] = position;\n  const latitude = origin.latitude + (-z / earthRadius) * RAD2DEG;\n  const longitude = origin.longitude + (x / earthRadius) * RAD2DEG / Math.cos(origin.latitude * DEG2RAD);\n  const altitude = (origin.altitude || 0) + y;\n  return { latitude, longitude, altitude };\n}\n"],"names":[],"mappings":";AAGA,MAAM,UAAU,KAAK,KAAK;AAC1B,MAAM,UAAU,MAAM,KAAK;AAEX,SAAA,gBAAgB,UAAoC,QAAwB;AAC1F,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI;AAClB,QAAM,WAAW,OAAO,WAAY,CAAC,IAAI,cAAe;AAClD,QAAA,YAAY,OAAO,YAAa,IAAI,cAAe,UAAU,KAAK,IAAI,OAAO,WAAW,OAAO;AAC/F,QAAA,YAAY,OAAO,YAAY,KAAK;AACnC,SAAA,EAAE,UAAU,WAAW;AAChC;"}

package/dist/es/main9.mjs

@@ -0,0 +1,26 @@
+import { useCoordsToMatrix } from "./main13.mjs";
+import { useRender } from "./main16.mjs";
+import { useRoot } from "./main17.mjs";
+function useCanvasInLayer(props, fromLngLat, map) {
+  const { latitude, longitude, altitude, frameloop } = props;
+  const origin = useCoordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat
+  });
+  const { onRemove, scene, camera, babylonMap } = useRoot(fromLngLat, map, props);
+  const render = useRender({ origin, frameloop, scene, camera, map, babylonMap });
+  return {
+    id: props.id,
+    beforeId: props.beforeId,
+    onRemove,
+    render,
+    type: "custom",
+    renderingMode: "3d"
+  };
+}
+export {
+  useCanvasInLayer
+};
+//# sourceMappingURL=main9.mjs.map

package/dist/es/main9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main9.mjs","sources":["../../src/core/canvas-in-layer/use-canvas-in-layer.tsx"],"sourcesContent":["import { CanvasProps } from '../../api/canvas-props';\nimport { FromLngLat, MapInstance } from '../generic-map';\nimport { useCoordsToMatrix } from '../use-coords-to-matrix';\nimport { useRender } from './use-render';\nimport { useRoot } from './use-root';\n\n/** Get all the properties needed to render as a map `<Layer>` */\nexport function useCanvasInLayer(props: CanvasProps, fromLngLat: FromLngLat, map: MapInstance) {\n  const { latitude, longitude, altitude, frameloop } = props;\n\n  const origin = useCoordsToMatrix({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { onRemove, scene, camera, babylonMap } = useRoot(fromLngLat, map, props);\n\n  const render = useRender({ origin, frameloop, scene, camera, map, babylonMap });\n\n  return {\n    id: props.id,\n    beforeId: props.beforeId,\n    onRemove,\n    render,\n    type: 'custom' as const,\n    renderingMode: '3d' as const,\n  };\n}\n"],"names":[],"mappings":";;;AAOgB,SAAA,iBAAiB,OAAoB,YAAwB,KAAkB;AAC7F,QAAM,EAAE,UAAU,WAAW,UAAU,cAAc;AAErD,QAAM,SAAS,kBAAkB;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAEK,QAAA,EAAE,UAAU,OAAO,QAAQ,eAAe,QAAQ,YAAY,KAAK,KAAK;AAExE,QAAA,SAAS,UAAU,EAAE,QAAQ,WAAW,OAAO,QAAQ,KAAK,WAAA,CAAY;AAEvE,SAAA;AAAA,IACL,IAAI,MAAM;AAAA,IACV,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,eAAe;AAAA,EAAA;AAEnB;"}

package/dist/maplibre/cjs/main.js

@@ -0,0 +1,520 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const maplibreGl = require("maplibre-gl");
+const maplibre = require("react-map-gl/maplibre");
+const core = require("@babylonjs/core");
+const require$$0 = require("react-dom");
+const BabylonMapContext = react.createContext(null);
+function useBabylonMap() {
+  const ctx = react.useContext(BabylonMapContext);
+  if (!ctx)
+    throw new Error("useBabylonMap must be used inside a <Canvas>");
+  return ctx;
+}
+function createBabylonMap(opts) {
+  return {
+    map: opts.map,
+    viewProjMx: new Array(16).fill(0),
+    fromLngLat: opts.fromLngLat,
+    engine: opts.engine,
+    scene: opts.scene
+  };
+}
+const useMap$1 = () => {
+  const ctx = useBabylonMap();
+  return ctx.map;
+};
+const tmpCameraMx = core.Matrix.Identity();
+const tmpWvpMx = core.Matrix.Identity();
+function syncCamera(camera, origin, mapCamMx) {
+  core.Matrix.FromArrayToRef(mapCamMx, 0, tmpCameraMx);
+  origin.multiplyToRef(tmpCameraMx, tmpWvpMx);
+  camera.freezeProjectionMatrix(tmpWvpMx);
+  camera.minZ = 0;
+  camera.maxZ = 1e6;
+}
+function coordsToMatrix({
+  longitude,
+  latitude,
+  altitude,
+  fromLngLat: fromLngLat2
+}) {
+  const center = fromLngLat2([longitude, latitude], altitude);
+  const scaleUnit = center.meterInMercatorCoordinateUnits();
+  const position = new core.Vector3(center.x, center.y, center.z || 0);
+  const scaling = new core.Vector3(scaleUnit, scaleUnit, scaleUnit);
+  const rotation = core.Quaternion.FromEulerAngles(Math.PI / 2, 0, 0);
+  return core.Matrix.Compose(scaling, rotation, position);
+}
+function useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: fromLngLat2 }) {
+  return react.useMemo(
+    () => coordsToMatrix({ latitude, longitude, altitude, fromLngLat: fromLngLat2 }),
+    [latitude, longitude, altitude, fromLngLat2]
+  );
+}
+const Coordinates = react.memo(({
+  latitude,
+  longitude,
+  altitude = 0,
+  children
+}) => {
+  const babylonMap = useBabylonMap();
+  const origin = useCoordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat: babylonMap.fromLngLat
+  });
+  const [subScene] = react.useState(() => {
+    if (!babylonMap.engine)
+      return null;
+    const sub = new core.Scene(babylonMap.engine);
+    sub.autoClear = false;
+    sub.clearColor = new core.Color4(0, 0, 0, 0);
+    return sub;
+  });
+  const cameraRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!subScene)
+      return;
+    const cam = new core.FreeCamera("coordsCam", core.Vector3.Zero(), subScene);
+    cam.inputs.clear();
+    cam.minZ = 0;
+    cameraRef.current = cam;
+    const light = new core.HemisphericLight("coordsLight", new core.Vector3(0, 1, 0), subScene);
+    light.intensity = 1;
+    return () => {
+      cam.dispose();
+      light.dispose();
+    };
+  }, [subScene]);
+  react.useEffect(() => {
+    if (!subScene || !babylonMap.scene)
+      return;
+    const mainScene = babylonMap.scene;
+    const observer = mainScene.onBeforeRenderObservable.add(() => {
+      var _a;
+      if (!cameraRef.current)
+        return;
+      syncCamera(cameraRef.current, origin, babylonMap.viewProjMx);
+      (_a = babylonMap.engine) == null ? void 0 : _a.wipeCaches(true);
+      subScene.render(false);
+    });
+    return () => {
+      mainScene.onBeforeRenderObservable.remove(observer);
+    };
+  }, [subScene, babylonMap.scene, origin, babylonMap]);
+  const childMap = {
+    ...babylonMap,
+    scene: subScene || void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(BabylonMapContext.Provider, { value: childMap, children });
+});
+Coordinates.displayName = "Coordinates";
+const earthRadius = 63710088e-1;
+const DEG2RAD$1 = Math.PI / 180;
+const mercatorScaleLookup = {};
+function getMercatorScale(lat) {
+  const index = Math.round(lat * 1e3);
+  if (mercatorScaleLookup[index] === void 0) {
+    mercatorScaleLookup[index] = 1 / Math.cos(lat * DEG2RAD$1);
+  }
+  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) * DEG2RAD$1;
+  const longitudeDiff = (point.longitude - origin.longitude) * DEG2RAD$1;
+  const altitudeDiff = (point.altitude || 0) - (origin.altitude || 0);
+  const x = longitudeDiff * earthRadius * Math.cos(origin.latitude * DEG2RAD$1);
+  const y = altitudeDiff;
+  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() {
+  const ctx = react.useContext(BabylonMapContext);
+  if (!ctx)
+    throw new Error("useCoords must be used inside a <Canvas>");
+  return ctx.coords;
+}
+const NearCoordinates = react.memo(({ children, ...coords }) => {
+  const { latitude, longitude, altitude } = useCoords();
+  const babylonMap = useBabylonMap();
+  const pos = coordsToVector3(coords, { latitude, longitude, altitude });
+  const [subScene] = react.useState(() => {
+    if (!babylonMap.engine)
+      return null;
+    const sub = new core.Scene(babylonMap.engine);
+    sub.autoClear = false;
+    sub.clearColor = new core.Color4(0, 0, 0, 0);
+    return sub;
+  });
+  const cameraRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!subScene)
+      return;
+    const cam = new core.FreeCamera("nearCoordsCam", new core.Vector3(pos[0], pos[1], pos[2]), subScene);
+    cam.inputs.clear();
+    cam.minZ = 0;
+    cameraRef.current = cam;
+    const light = new core.HemisphericLight("nearCoordsLight", new core.Vector3(0, 1, 0), subScene);
+    light.intensity = 1;
+    return () => {
+      cam.dispose();
+      light.dispose();
+    };
+  }, [subScene]);
+  react.useEffect(() => {
+    if (!cameraRef.current)
+      return;
+    cameraRef.current.position.set(pos[0], pos[1], pos[2]);
+  }, [pos]);
+  react.useEffect(() => {
+    if (!subScene || !babylonMap.scene)
+      return;
+    const mainScene = babylonMap.scene;
+    const observer = mainScene.onBeforeRenderObservable.add(() => {
+      var _a;
+      if (!cameraRef.current)
+        return;
+      cameraRef.current.freezeProjectionMatrix(babylonMap.scene.activeCamera.getProjectionMatrix());
+      (_a = babylonMap.engine) == null ? void 0 : _a.wipeCaches(true);
+      subScene.render(false);
+    });
+    return () => {
+      mainScene.onBeforeRenderObservable.remove(observer);
+    };
+  }, [subScene, babylonMap.scene, babylonMap]);
+  const childMap = {
+    ...babylonMap,
+    scene: subScene || void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(BabylonMapContext.Provider, { value: childMap, children });
+});
+NearCoordinates.displayName = "NearCoordinates";
+const DEG2RAD = Math.PI / 180;
+const RAD2DEG = 180 / Math.PI;
+function vector3ToCoords(position, origin) {
+  const [x, y, z] = position;
+  const latitude = origin.latitude + -z / earthRadius * RAD2DEG;
+  const longitude = origin.longitude + x / earthRadius * RAD2DEG / Math.cos(origin.latitude * DEG2RAD);
+  const altitude = (origin.altitude || 0) + y;
+  return { latitude, longitude, altitude };
+}
+const useFunction = (callback) => {
+  const callbackRef = react.useRef(callback);
+  callbackRef.current = callback;
+  return react.useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+};
+function useRender({
+  map,
+  origin,
+  scene,
+  camera,
+  frameloop,
+  babylonMap
+}) {
+  const render = useFunction((_gl, projViewMx) => {
+    const pVMx = "defaultProjectionData" in projViewMx ? Object.values(projViewMx.defaultProjectionData.mainMatrix) : projViewMx;
+    babylonMap.viewProjMx = pVMx;
+    syncCamera(camera, origin, pVMx);
+    scene.getEngine().wipeCaches(true);
+    scene.render(false);
+    if (!frameloop || frameloop === "always")
+      map.triggerRepaint();
+  });
+  return render;
+}
+var createRoot;
+var m = require$$0;
+if (process.env.NODE_ENV === "production") {
+  createRoot = m.createRoot;
+  m.hydrateRoot;
+} else {
+  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+function useRoot(fromLngLat2, map, { longitude, latitude, altitude, frameloop, ...props }) {
+  const [{ engine, scene, camera, reactRoot, babylonMap }] = react.useState(() => {
+    const canvas = map.getCanvas();
+    const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
+    const engine2 = new core.Engine(
+      gl,
+      true,
+      { useHighPrecisionMatrix: true },
+      true
+    );
+    const scene2 = new core.Scene(engine2);
+    scene2.autoClear = false;
+    scene2.clearColor = new core.Color4(0, 0, 0, 0);
+    scene2.detachControl();
+    const camera2 = new core.FreeCamera("cam", core.Vector3.Zero(), scene2);
+    camera2.inputs.clear();
+    camera2.minZ = 0;
+    const babylonMap2 = createBabylonMap({ map, fromLngLat: fromLngLat2, engine: engine2, scene: scene2 });
+    const container = document.createElement("div");
+    const reactRoot2 = createRoot(container);
+    return { engine: engine2, scene: scene2, camera: camera2, reactRoot: reactRoot2, container, babylonMap: babylonMap2 };
+  });
+  const onResize = useFunction(() => {
+    engine.resize();
+  });
+  const onRemove = useFunction(() => {
+    reactRoot.unmount();
+    scene.dispose();
+    engine.dispose();
+  });
+  babylonMap.coords = { longitude, latitude, altitude };
+  react.useEffect(() => {
+    map.on("resize", onResize);
+    return () => {
+      map.off("resize", onResize);
+    };
+  }, []);
+  react.useEffect(() => {
+    reactRoot.render(
+      /* @__PURE__ */ jsxRuntime.jsx(BabylonMapContext.Provider, { value: babylonMap, children: props.children })
+    );
+  }, [props.children]);
+  return { onRemove, engine, scene, camera, babylonMap };
+}
+function useCanvasInLayer(props, fromLngLat2, map) {
+  const { latitude, longitude, altitude, frameloop } = props;
+  const origin = useCoordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat: fromLngLat2
+  });
+  const { onRemove, scene, camera, babylonMap } = useRoot(fromLngLat2, map, props);
+  const render = useRender({ origin, frameloop, scene, camera, map, babylonMap });
+  return {
+    id: props.id,
+    beforeId: props.beforeId,
+    onRemove,
+    render,
+    type: "custom",
+    renderingMode: "3d"
+  };
+}
+const SyncCameraFC = react.memo(({
+  latitude,
+  longitude,
+  altitude = 0,
+  setOnRender,
+  onReady,
+  map,
+  canvasRef
+}) => {
+  const mapCanvas = map.getCanvas();
+  const babylonMap = useBabylonMap();
+  const scene = babylonMap.scene;
+  const engine = babylonMap.engine;
+  const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: babylonMap.fromLngLat });
+  const ready = react.useRef(false);
+  const triggerRepaint = react.useMemo(() => map.triggerRepaint, [map]);
+  const mapPaintRequests = react.useRef(0);
+  const triggerRepaintOff = useFunction(() => {
+    mapPaintRequests.current++;
+  });
+  const onRender = useFunction((viewProjMx) => {
+    map.triggerRepaint = triggerRepaintOff;
+    if (canvasRef.current && engine) {
+      if (canvasRef.current.width !== mapCanvas.width || canvasRef.current.height !== mapCanvas.height) {
+        canvasRef.current.width = mapCanvas.clientWidth * window.devicePixelRatio;
+        canvasRef.current.height = mapCanvas.clientHeight * window.devicePixelRatio;
+        canvasRef.current.style.width = `${mapCanvas.clientWidth}px`;
+        canvasRef.current.style.height = `${mapCanvas.clientHeight}px`;
+        engine.resize();
+      }
+    }
+    const pVMx = "defaultProjectionData" in viewProjMx ? Object.values(viewProjMx.defaultProjectionData.mainMatrix) : viewProjMx;
+    babylonMap.viewProjMx = pVMx;
+    syncCamera(scene.activeCamera, origin, babylonMap.viewProjMx);
+    engine.wipeCaches(true);
+    scene.render(false);
+    if (!ready.current && onReady) {
+      ready.current = true;
+      onReady();
+    }
+    map.triggerRepaint = triggerRepaint;
+    if (mapPaintRequests.current > 0) {
+      mapPaintRequests.current = 0;
+      map.triggerRepaint();
+    }
+  });
+  react.useEffect(() => {
+    setOnRender && setOnRender(() => onRender);
+  }, [setOnRender, onRender]);
+  return null;
+});
+SyncCameraFC.displayName = "SyncCameraFC";
+const canvasStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  pointerEvents: "none"
+};
+const CanvasPortal = react.memo(({
+  children,
+  latitude,
+  longitude,
+  altitude,
+  setOnRender,
+  map,
+  fromLngLat: fromLngLat2
+}) => {
+  const canvasRef = react.useRef(null);
+  const mapCanvas = map.getCanvas();
+  const [babylonMap, setBabylonMap] = react.useState(null);
+  const [ready, setReady] = react.useState(false);
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    const engine = new core.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, useHighPrecisionMatrix: true });
+    const scene = new core.Scene(engine);
+    scene.clearColor = new core.Color4(0, 0, 0, 0);
+    const camera = new core.FreeCamera("cam", core.Vector3.Zero(), scene);
+    camera.inputs.clear();
+    camera.minZ = 0;
+    setBabylonMap(createBabylonMap({ map, fromLngLat: fromLngLat2, engine, scene }));
+    return () => {
+      scene.dispose();
+      engine.dispose();
+    };
+  }, []);
+  react.useEffect(() => {
+    if (!(babylonMap == null ? void 0 : babylonMap.engine))
+      return;
+    const engine = babylonMap.engine;
+    const onResize = () => {
+      const c = canvasRef.current;
+      if (!c)
+        return;
+      c.width = mapCanvas.clientWidth * window.devicePixelRatio;
+      c.height = mapCanvas.clientHeight * window.devicePixelRatio;
+      c.style.width = `${mapCanvas.clientWidth}px`;
+      c.style.height = `${mapCanvas.clientHeight}px`;
+      engine.resize();
+    };
+    onResize();
+    map.on("resize", onResize);
+    return () => {
+      map.off("resize", onResize);
+    };
+  }, [babylonMap, map, mapCanvas]);
+  const onReady = useFunction(() => {
+    setReady(true);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, style: canvasStyle }),
+    babylonMap && /* @__PURE__ */ jsxRuntime.jsxs(BabylonMapContext.Provider, { value: babylonMap, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SyncCameraFC,
+        {
+          latitude,
+          longitude,
+          altitude,
+          setOnRender,
+          onReady,
+          map,
+          canvasRef
+        }
+      ),
+      ready && children
+    ] })
+  ] });
+});
+CanvasPortal.displayName = "CanvasPortal";
+const InitCanvasFC = react.memo((props) => {
+  const canvas = props.map.getCanvas();
+  const [el] = react.useState(() => {
+    const el2 = document.createElement("div");
+    el2.style.position = "absolute";
+    el2.style.top = "0";
+    el2.style.bottom = "0";
+    el2.style.left = "0";
+    el2.style.right = "0";
+    el2.style.pointerEvents = "none";
+    return el2;
+  });
+  react.useEffect(() => {
+    const parent = canvas.parentElement;
+    parent.appendChild(el);
+    return () => {
+      parent.removeChild(el);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: require$$0.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(CanvasPortal, { ...props }),
+    el
+  ) });
+});
+InitCanvasFC.displayName = "InitCanvasFC";
+const fromLngLat = maplibreGl.MercatorCoordinate.fromLngLat;
+const Canvas = react.memo(({ overlay, ...props }) => {
+  const map = maplibre.useMap().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 layerProps = useCanvasInLayer(props, fromLngLat, map);
+  return /* @__PURE__ */ jsxRuntime.jsx(maplibre.Layer, { ...layerProps });
+});
+CanvasInLayer.displayName = "CanvasInLayer";
+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(maplibre.Layer, { id, beforeId, type: "custom", render }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InitCanvasFC,
+      {
+        ...props,
+        setOnRender,
+        map,
+        fromLngLat
+      }
+    )
+  ] });
+});
+CanvasOverlay.displayName = "CanvasOverlay";
+const useMap = useMap$1;
+exports.BabylonMapContext = BabylonMapContext;
+exports.Canvas = Canvas;
+exports.Coordinates = Coordinates;
+exports.NearCoordinates = NearCoordinates;
+exports.averageMercatorScale = averageMercatorScale;
+exports.coordsToVector3 = coordsToVector3;
+exports.useBabylonMap = useBabylonMap;
+exports.useMap = useMap;
+exports.vector3ToCoords = vector3ToCoords;

package/dist/maplibre/es/main.mjs

@@ -0,0 +1,20 @@
+import { useMap as useMap$1 } from "./main2.mjs";
+import { Canvas } from "./main3.mjs";
+import { BabylonMapContext, useBabylonMap } from "./main4.mjs";
+import { Coordinates } from "./main5.mjs";
+import { averageMercatorScale, coordsToVector3 } from "./main6.mjs";
+import { NearCoordinates } from "./main7.mjs";
+import { vector3ToCoords } from "./main8.mjs";
+const useMap = useMap$1;
+export {
+  BabylonMapContext,
+  Canvas,
+  Coordinates,
+  NearCoordinates,
+  averageMercatorScale,
+  coordsToVector3,
+  useBabylonMap,
+  useMap,
+  vector3ToCoords
+};
+//# sourceMappingURL=main.mjs.map

package/dist/maplibre/es/main.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.mjs","sources":["../../../src/maplibre.index.ts"],"sourcesContent":["import type { Map } from 'maplibre-gl';\nimport { useMap as useMapGeneric } from './api/use-map';\n\nexport * from './api';\nexport * from './maplibre/canvas';\n\nexport const useMap = useMapGeneric<Map>;\n"],"names":["useMapGeneric"],"mappings":";;;;;;;AAMO,MAAM,SAASA;"}

package/dist/maplibre/es/main10.mjs

@@ -0,0 +1,33 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { memo, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { CanvasPortal } from "./main18.mjs";
+const InitCanvasFC = memo((props) => {
+  const canvas = props.map.getCanvas();
+  const [el] = useState(() => {
+    const el2 = document.createElement("div");
+    el2.style.position = "absolute";
+    el2.style.top = "0";
+    el2.style.bottom = "0";
+    el2.style.left = "0";
+    el2.style.right = "0";
+    el2.style.pointerEvents = "none";
+    return el2;
+  });
+  useEffect(() => {
+    const parent = canvas.parentElement;
+    parent.appendChild(el);
+    return () => {
+      parent.removeChild(el);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(
+    /* @__PURE__ */ jsx(CanvasPortal, { ...props }),
+    el
+  ) });
+});
+InitCanvasFC.displayName = "InitCanvasFC";
+export {
+  InitCanvasFC
+};
+//# sourceMappingURL=main10.mjs.map

package/dist/maplibre/es/main10.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main10.mjs","sources":["../../../src/core/canvas-overlay/init-canvas-fc.tsx"],"sourcesContent":["import { memo, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CanvasProps } from '../../api/canvas-props';\nimport { FromLngLat, MapInstance } from '../generic-map';\nimport { CanvasPortal } from './canvas-portal';\n\ninterface InitCanvasFCProps extends CanvasProps {\n  map: MapInstance;\n  setOnRender: (callback: () => (mx: number[]) => void) => void;\n  frameloop?: 'always' | 'demand';\n  fromLngLat: FromLngLat;\n}\n\nexport const InitCanvasFC = memo<InitCanvasFCProps>((props) => {\n  const canvas = props.map.getCanvas();\n\n  const [el] = useState(() => {\n    const el = document.createElement('div');\n    el.style.position = 'absolute';\n    el.style.top = '0';\n    el.style.bottom = '0';\n    el.style.left = '0';\n    el.style.right = '0';\n    el.style.pointerEvents = 'none';\n    return el;\n  });\n\n  useEffect(() => {\n    const parent = canvas.parentElement!; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    parent.appendChild(el);\n    return () => {\n      parent.removeChild(el);\n    };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <>\n      {createPortal(\n        <CanvasPortal {...props} />,\n        el,\n      )}\n    </>\n  );\n});\nInitCanvasFC.displayName = 'InitCanvasFC';\n"],"names":["el"],"mappings":";;;;AAaa,MAAA,eAAe,KAAwB,CAAC,UAAU;AACvD,QAAA,SAAS,MAAM,IAAI,UAAU;AAEnC,QAAM,CAAC,EAAE,IAAI,SAAS,MAAM;AACpBA,UAAAA,MAAK,SAAS,cAAc,KAAK;AACvCA,QAAG,MAAM,WAAW;AACpBA,QAAG,MAAM,MAAM;AACfA,QAAG,MAAM,SAAS;AAClBA,QAAG,MAAM,OAAO;AAChBA,QAAG,MAAM,QAAQ;AACjBA,QAAG,MAAM,gBAAgB;AAClBA,WAAAA;AAAAA,EAAA,CACR;AAED,YAAU,MAAM;AACd,UAAM,SAAS,OAAO;AACtB,WAAO,YAAY,EAAE;AACrB,WAAO,MAAM;AACX,aAAO,YAAY,EAAE;AAAA,IAAA;AAAA,EAEzB,GAAG,CAAE,CAAA;AAEL,SAEK,oBAAA,UAAA,EAAA,UAAA;AAAA,IACC,oBAAC,cAAc,EAAA,GAAG,OAAO;AAAA,IACzB;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;AACD,aAAa,cAAc;"}

package/dist/maplibre/es/main11.mjs

@@ -0,0 +1,12 @@
+import { useRef, useCallback } from "react";
+const useFunction = (callback) => {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+};
+export {
+  useFunction
+};
+//# sourceMappingURL=main11.mjs.map

package/dist/maplibre/es/main11.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main11.mjs","sources":["../../../src/core/use-function.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const useFunction = <T extends (...args: any[]) => any>(callback: T): T => {\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n  return useCallback((...args: any[]) => {\n    return callbackRef.current(...args);\n  }, []) as T;\n};\n"],"names":[],"mappings":";AAGa,MAAA,cAAc,CAAoC,aAAmB;AAC1E,QAAA,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AACf,SAAA,YAAY,IAAI,SAAgB;AAC9B,WAAA,YAAY,QAAQ,GAAG,IAAI;AAAA,EACpC,GAAG,CAAE,CAAA;AACP;"}

package/dist/maplibre/es/main12.mjs

@@ -0,0 +1,14 @@
+import { Matrix } from "@babylonjs/core";
+const tmpCameraMx = Matrix.Identity();
+const tmpWvpMx = Matrix.Identity();
+function syncCamera(camera, origin, mapCamMx) {
+  Matrix.FromArrayToRef(mapCamMx, 0, tmpCameraMx);
+  origin.multiplyToRef(tmpCameraMx, tmpWvpMx);
+  camera.freezeProjectionMatrix(tmpWvpMx);
+  camera.minZ = 0;
+  camera.maxZ = 1e6;
+}
+export {
+  syncCamera
+};
+//# sourceMappingURL=main12.mjs.map

package/dist/maplibre/es/main12.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main12.mjs","sources":["../../../src/core/sync-camera.ts"],"sourcesContent":["import { FreeCamera, Matrix } from '@babylonjs/core';\n\nconst tmpCameraMx = Matrix.Identity();\nconst tmpWvpMx = Matrix.Identity();\n\n/** Synchronise a Babylon camera with the map's view-projection matrix.\n *  @param camera   The Babylon camera to update.\n *  @param origin   Babylon world matrix for the Canvas origin.\n *  @param mapCamMx Flat array from MapLibre's view-projection (column-major).\n */\nexport function syncCamera(\n  camera: FreeCamera,\n  origin: Matrix,\n  mapCamMx: number[],\n): void {\n\n  // Matrix.FromArray reads column-major data (same layout as MapLibre provides)\n  Matrix.FromArrayToRef(mapCamMx, 0, tmpCameraMx);\n\n  // world-view-projection = origin * camera (same as demo: worldMatrix.multiply(cameraMatrix))\n  origin.multiplyToRef(tmpCameraMx, tmpWvpMx);\n\n  // Freeze the projection to the composed matrix so Babylon's own\n  // projection math is bypassed.\n  camera.freezeProjectionMatrix(tmpWvpMx);\n\n  camera.minZ = 0;\n  camera.maxZ = 1e6;\n}\n"],"names":[],"mappings":";AAEA,MAAM,cAAc,OAAO;AAC3B,MAAM,WAAW,OAAO;AAOR,SAAA,WACd,QACA,QACA,UACM;AAGC,SAAA,eAAe,UAAU,GAAG,WAAW;AAGvC,SAAA,cAAc,aAAa,QAAQ;AAI1C,SAAO,uBAAuB,QAAQ;AAEtC,SAAO,OAAO;AACd,SAAO,OAAO;AAChB;"}

package/dist/maplibre/es/main13.mjs

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+import { coordsToMatrix } from "./main19.mjs";
+function useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat }) {
+  return useMemo(
+    () => coordsToMatrix({ latitude, longitude, altitude, fromLngLat }),
+    [latitude, longitude, altitude, fromLngLat]
+  );
+}
+export {
+  useCoordsToMatrix
+};
+//# sourceMappingURL=main13.mjs.map

package/dist/maplibre/es/main13.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main13.mjs","sources":["../../../src/core/use-coords-to-matrix.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Matrix } from '@babylonjs/core';\nimport { coordsToMatrix } from './coords-to-matrix';\n\ntype Props = Parameters<typeof coordsToMatrix>[0];\n\n/** Calculate a Babylon Matrix from coordinates (memoised). */\nexport function useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat }: Props): Matrix {\n  return useMemo(\n    () => coordsToMatrix({ latitude, longitude, altitude, fromLngLat }),\n    [latitude, longitude, altitude, fromLngLat],\n  );\n}\n"],"names":[],"mappings":";;AAOO,SAAS,kBAAkB,EAAE,UAAU,WAAW,UAAU,cAA6B;AACvF,SAAA;AAAA,IACL,MAAM,eAAe,EAAE,UAAU,WAAW,UAAU,YAAY;AAAA,IAClE,CAAC,UAAU,WAAW,UAAU,UAAU;AAAA,EAAA;AAE9C;"}

package/dist/maplibre/es/main14.mjs

@@ -0,0 +1,5 @@
+const earthRadius = 63710088e-1;
+export {
+  earthRadius
+};
+//# sourceMappingURL=main14.mjs.map