react-babylon-map 0.0.1

package/dist/es/main16.mjs

@@ -0,0 +1,25 @@
+import { syncCamera } from "./main12.mjs";
+import { useFunction } from "./main11.mjs";
+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;
+}
+export {
+  useRender
+};
+//# sourceMappingURL=main16.mjs.map

package/dist/es/main16.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main16.mjs","sources":["../../src/core/canvas-in-layer/use-render.ts"],"sourcesContent":["import { FreeCamera, Matrix, Scene } from '@babylonjs/core';\nimport { MapInstance } from '../generic-map';\nimport { syncCamera } from '../sync-camera';\nimport { useFunction } from '../use-function';\nimport { BabylonMap } from '../use-babylon-map';\n\nexport function useRender({\n  map, origin, scene, camera, frameloop, babylonMap,\n}: {\n  map: MapInstance;\n  origin: Matrix;\n  scene: Scene;\n  camera: FreeCamera;\n  frameloop?: 'always' | 'demand';\n  babylonMap: BabylonMap;\n}) {\n  const render = useFunction((\n    _gl: WebGL2RenderingContext,\n    projViewMx: number[] | { defaultProjectionData: { mainMatrix: Record<string, number> } },\n  ) => {\n    const pVMx = 'defaultProjectionData' in projViewMx\n      ? Object.values(projViewMx.defaultProjectionData.mainMatrix)\n      : projViewMx;\n\n    // Update shared context\n    babylonMap.viewProjMx = pVMx as number[];\n\n    // Sync camera\n    syncCamera(camera, origin, pVMx as number[]);\n\n    // Wipe Babylon's internal GL state caches so the next render\n    // re-applies everything from scratch. This is critical when\n    // sharing a GL context with MapLibre.\n    scene.getEngine().wipeCaches(true);\n\n    // Render the Babylon scene into the shared GL context.\n    scene.render(false);\n\n    if (!frameloop || frameloop === 'always') map.triggerRepaint();\n  });\n\n  return render;\n}\n"],"names":[],"mappings":";;AAMO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAK;AAAA,EAAQ;AAAA,EAAO;AAAA,EAAQ;AAAA,EAAW;AACzC,GAOG;AACD,QAAM,SAAS,YAAY,CACzB,KACA,eACG;AACG,UAAA,OAAO,2BAA2B,aACpC,OAAO,OAAO,WAAW,sBAAsB,UAAU,IACzD;AAGJ,eAAW,aAAa;AAGb,eAAA,QAAQ,QAAQ,IAAgB;AAKrC,UAAA,UAAA,EAAY,WAAW,IAAI;AAGjC,UAAM,OAAO,KAAK;AAEd,QAAA,CAAC,aAAa,cAAc;AAAU,UAAI,eAAe;AAAA,EAAA,CAC9D;AAEM,SAAA;AACT;"}

package/dist/es/main17.mjs

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { Engine, Scene, Color4, FreeCamera, Vector3 } from "@babylonjs/core";
+import { createRoot } from "./main20.mjs";
+import { useState, useEffect } from "react";
+import { createBabylonMap, BabylonMapContext } from "./main4.mjs";
+import { useFunction } from "./main11.mjs";
+function useRoot(fromLngLat, map, { longitude, latitude, altitude, frameloop, ...props }) {
+  const [{ engine, scene, camera, reactRoot, babylonMap }] = useState(() => {
+    const canvas = map.getCanvas();
+    const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
+    const engine2 = new Engine(
+      gl,
+      true,
+      { useHighPrecisionMatrix: true },
+      true
+    );
+    const scene2 = new Scene(engine2);
+    scene2.autoClear = false;
+    scene2.clearColor = new Color4(0, 0, 0, 0);
+    scene2.detachControl();
+    const camera2 = new FreeCamera("cam", Vector3.Zero(), scene2);
+    camera2.inputs.clear();
+    camera2.minZ = 0;
+    const babylonMap2 = createBabylonMap({ map, fromLngLat, 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 };
+  useEffect(() => {
+    map.on("resize", onResize);
+    return () => {
+      map.off("resize", onResize);
+    };
+  }, []);
+  useEffect(() => {
+    reactRoot.render(
+      /* @__PURE__ */ jsx(BabylonMapContext.Provider, { value: babylonMap, children: props.children })
+    );
+  }, [props.children]);
+  return { onRemove, engine, scene, camera, babylonMap };
+}
+export {
+  useRoot
+};
+//# sourceMappingURL=main17.mjs.map

package/dist/es/main17.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main17.mjs","sources":["../../src/core/canvas-in-layer/use-root.tsx"],"sourcesContent":["import { Color4, Engine, FreeCamera, Scene, Vector3 } from '@babylonjs/core';\nimport { createRoot, Root } from 'react-dom/client';\nimport { useEffect, useState } from 'react';\nimport { CanvasProps } from '../../api/canvas-props';\nimport { BabylonMap, BabylonMapContext, createBabylonMap } from '../use-babylon-map';\nimport { FromLngLat, MapInstance } from '../generic-map';\nimport { useFunction } from '../use-function';\n\ninterface RootState {\n  engine: Engine;\n  scene: Scene;\n  camera: FreeCamera;\n  reactRoot: Root;\n  container: HTMLDivElement;\n  babylonMap: BabylonMap;\n}\n\nexport function useRoot(\n  fromLngLat: FromLngLat,\n  map: MapInstance,\n  { longitude, latitude, altitude, frameloop, ...props }: CanvasProps,\n) {\n  const [{ engine, scene, camera, reactRoot, babylonMap }] = useState<RootState>(() => {\n    const canvas = map.getCanvas();\n    const gl = (canvas.getContext('webgl2') || canvas.getContext('webgl')) as WebGLRenderingContext;\n\n    // Create Babylon Engine from MapLibre's GL context (same pattern as demo.html)\n    const engine = new Engine(\n      gl as WebGL2RenderingContext,\n      true,\n      { useHighPrecisionMatrix: true },\n      true,\n    );\n\n    const scene = new Scene(engine);\n    scene.autoClear = false;\n    scene.clearColor = new Color4(0, 0, 0, 0);\n    scene.detachControl(); // let MapLibre handle pointer events\n\n    const camera = new FreeCamera('cam', Vector3.Zero(), scene);\n    camera.inputs.clear();\n    camera.minZ = 0;\n\n    const babylonMap = createBabylonMap({ map, fromLngLat, engine, scene });\n\n    // Separate React root for children\n    const container = document.createElement('div');\n    const reactRoot = createRoot(container);\n\n    return { engine, scene, camera, reactRoot, container, babylonMap };\n  });\n\n  const onResize = useFunction(() => {\n    engine.resize();\n  });\n\n  const onRemove = useFunction(() => {\n    reactRoot.unmount();\n    scene.dispose();\n    engine.dispose();\n  });\n\n  // Update coords on babylonMap\n  babylonMap.coords = { longitude, latitude, altitude };\n\n  // Resize listener\n  useEffect(() => {\n    map.on('resize', onResize);\n    return () => { map.off('resize', onResize); };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Render children into the separate React root\n  useEffect(() => {\n    reactRoot.render(\n      <BabylonMapContext.Provider value={babylonMap}>\n        {props.children}\n      </BabylonMapContext.Provider>,\n    );\n  }, [props.children]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { onRemove, engine, scene, camera, babylonMap };\n}\n"],"names":["engine","scene","camera","babylonMap","reactRoot"],"mappings":";;;;;;AAiBgB,SAAA,QACd,YACA,KACA,EAAE,WAAW,UAAU,UAAU,WAAW,GAAG,SAC/C;AACM,QAAA,CAAC,EAAE,QAAQ,OAAO,QAAQ,WAAW,WAAW,CAAC,IAAI,SAAoB,MAAM;AAC7E,UAAA,SAAS,IAAI;AACnB,UAAM,KAAM,OAAO,WAAW,QAAQ,KAAK,OAAO,WAAW,OAAO;AAGpE,UAAMA,UAAS,IAAI;AAAA,MACjB;AAAA,MACA;AAAA,MACA,EAAE,wBAAwB,KAAK;AAAA,MAC/B;AAAA,IAAA;AAGIC,UAAAA,SAAQ,IAAI,MAAMD,OAAM;AAC9BC,WAAM,YAAY;AAClBA,WAAM,aAAa,IAAI,OAAO,GAAG,GAAG,GAAG,CAAC;AACxCA,WAAM,cAAc;AAEpB,UAAMC,UAAS,IAAI,WAAW,OAAO,QAAQ,KAAA,GAAQD,MAAK;AAC1DC,YAAO,OAAO;AACdA,YAAO,OAAO;AAERC,UAAAA,cAAa,iBAAiB,EAAE,KAAK,YAAY,QAAAH,SAAQ,OAAAC,OAAAA,CAAO;AAGhE,UAAA,YAAY,SAAS,cAAc,KAAK;AACxCG,UAAAA,aAAY,WAAW,SAAS;AAE/B,WAAA,EAAE,QAAAJ,SAAQ,OAAAC,QAAO,QAAAC,SAAQ,WAAAE,YAAW,WAAW,YAAAD,YAAW;AAAA,EAAA,CAClE;AAEK,QAAA,WAAW,YAAY,MAAM;AACjC,WAAO,OAAO;AAAA,EAAA,CACf;AAEK,QAAA,WAAW,YAAY,MAAM;AACjC,cAAU,QAAQ;AAClB,UAAM,QAAQ;AACd,WAAO,QAAQ;AAAA,EAAA,CAChB;AAGD,aAAW,SAAS,EAAE,WAAW,UAAU,SAAS;AAGpD,YAAU,MAAM;AACV,QAAA,GAAG,UAAU,QAAQ;AACzB,WAAO,MAAM;AAAM,UAAA,IAAI,UAAU,QAAQ;AAAA,IAAA;AAAA,EAC3C,GAAG,CAAE,CAAA;AAGL,YAAU,MAAM;AACJ,cAAA;AAAA,0BACP,kBAAkB,UAAlB,EAA2B,OAAO,YAChC,gBAAM,UACT;AAAA,IAAA;AAAA,EACF,GACC,CAAC,MAAM,QAAQ,CAAC;AAEnB,SAAO,EAAE,UAAU,QAAQ,OAAO,QAAQ,WAAW;AACvD;"}

package/dist/es/main18.mjs

@@ -0,0 +1,88 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Engine, Scene, Color4, FreeCamera, Vector3 } from "@babylonjs/core";
+import { memo, useRef, useState, useEffect } from "react";
+import { createBabylonMap, BabylonMapContext } from "./main4.mjs";
+import { useFunction } from "./main11.mjs";
+import { SyncCameraFC } from "./main21.mjs";
+const canvasStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  pointerEvents: "none"
+};
+const CanvasPortal = memo(({
+  children,
+  latitude,
+  longitude,
+  altitude,
+  setOnRender,
+  map,
+  fromLngLat
+}) => {
+  const canvasRef = useRef(null);
+  const mapCanvas = map.getCanvas();
+  const [babylonMap, setBabylonMap] = useState(null);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const engine = new Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, useHighPrecisionMatrix: true });
+    const scene = new Scene(engine);
+    scene.clearColor = new Color4(0, 0, 0, 0);
+    const camera = new FreeCamera("cam", Vector3.Zero(), scene);
+    camera.inputs.clear();
+    camera.minZ = 0;
+    setBabylonMap(createBabylonMap({ map, fromLngLat, engine, scene }));
+    return () => {
+      scene.dispose();
+      engine.dispose();
+    };
+  }, []);
+  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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: canvasStyle }),
+    babylonMap && /* @__PURE__ */ jsxs(BabylonMapContext.Provider, { value: babylonMap, children: [
+      /* @__PURE__ */ jsx(
+        SyncCameraFC,
+        {
+          latitude,
+          longitude,
+          altitude,
+          setOnRender,
+          onReady,
+          map,
+          canvasRef
+        }
+      ),
+      ready && children
+    ] })
+  ] });
+});
+CanvasPortal.displayName = "CanvasPortal";
+export {
+  CanvasPortal
+};
+//# sourceMappingURL=main18.mjs.map

package/dist/es/main18.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main18.mjs","sources":["../../src/core/canvas-overlay/canvas-portal.tsx"],"sourcesContent":["import { Color4, Engine, FreeCamera, Scene, Vector3 } from '@babylonjs/core';\nimport { memo, useEffect, useRef, useState } from 'react';\nimport { CanvasProps } from '../../api/canvas-props';\nimport { BabylonMap, BabylonMapContext, createBabylonMap } from '../use-babylon-map';\nimport { FromLngLat, MapInstance } from '../generic-map';\nimport { useFunction } from '../use-function';\nimport { SyncCameraFC } from './sync-camera-fc';\n\ninterface CanvasPortalProps extends CanvasProps {\n  setOnRender: (callback: () => (mx: number[]) => void) => void;\n  map: MapInstance;\n  fromLngLat: FromLngLat;\n}\n\nconst canvasStyle: React.CSSProperties = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n  pointerEvents: 'none',\n};\n\nexport const CanvasPortal = memo<CanvasPortalProps>(({\n  children, latitude, longitude, altitude,\n  setOnRender, map, fromLngLat,\n}) => {\n\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const mapCanvas = map.getCanvas();\n\n  const [babylonMap, setBabylonMap] = useState<BabylonMap | null>(null);\n  const [ready, setReady] = useState(false);\n\n  // Create Engine + Scene on mount\n  useEffect(() => {\n    const canvas = canvasRef.current!;\n    const engine = new Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, useHighPrecisionMatrix: true });\n    const scene = new Scene(engine);\n    scene.clearColor = new Color4(0, 0, 0, 0);\n\n    const camera = new FreeCamera('cam', Vector3.Zero(), scene);\n    camera.inputs.clear();\n    camera.minZ = 0;\n\n    setBabylonMap(createBabylonMap({ map, fromLngLat, engine, scene }));\n\n    return () => {\n      scene.dispose();\n      engine.dispose();\n    };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Resize handling\n  useEffect(() => {\n    if (!babylonMap?.engine) return;\n    const engine = babylonMap.engine;\n\n    const onResize = () => {\n      const c = canvasRef.current;\n      if (!c) return;\n      c.width = mapCanvas.clientWidth * window.devicePixelRatio;\n      c.height = mapCanvas.clientHeight * window.devicePixelRatio;\n      c.style.width = `${mapCanvas.clientWidth}px`;\n      c.style.height = `${mapCanvas.clientHeight}px`;\n      engine.resize();\n    };\n\n    onResize();\n    map.on('resize', onResize);\n    return () => { map.off('resize', onResize); };\n  }, [babylonMap, map, mapCanvas]);\n\n  const onReady = useFunction(() => {\n    setReady(true);\n  });\n\n  return (\n    <>\n      <canvas ref={canvasRef} style={canvasStyle} />\n      {babylonMap && (\n        <BabylonMapContext.Provider value={babylonMap}>\n          <SyncCameraFC\n            latitude={latitude}\n            longitude={longitude}\n            altitude={altitude}\n            setOnRender={setOnRender}\n            onReady={onReady}\n            map={map}\n            canvasRef={canvasRef}\n          />\n          {ready && children}\n        </BabylonMapContext.Provider>\n      )}\n    </>\n  );\n});\nCanvasPortal.displayName = 'CanvasPortal';\n"],"names":[],"mappings":";;;;;;AAcA,MAAM,cAAmC;AAAA,EACvC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,eAAe;AACjB;AAEa,MAAA,eAAe,KAAwB,CAAC;AAAA,EACnD;AAAA,EAAU;AAAA,EAAU;AAAA,EAAW;AAAA,EAC/B;AAAA,EAAa;AAAA,EAAK;AACpB,MAAM;AAEE,QAAA,YAAY,OAA0B,IAAI;AAC1C,QAAA,YAAY,IAAI;AAEtB,QAAM,CAAC,YAAY,aAAa,IAAI,SAA4B,IAAI;AACpE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAGxC,YAAU,MAAM;AACd,UAAM,SAAS,UAAU;AACzB,UAAM,SAAS,IAAI,OAAO,QAAQ,MAAM,EAAE,uBAAuB,MAAM,SAAS,MAAM,wBAAwB,KAAM,CAAA;AAC9G,UAAA,QAAQ,IAAI,MAAM,MAAM;AAC9B,UAAM,aAAa,IAAI,OAAO,GAAG,GAAG,GAAG,CAAC;AAExC,UAAM,SAAS,IAAI,WAAW,OAAO,QAAQ,KAAA,GAAQ,KAAK;AAC1D,WAAO,OAAO;AACd,WAAO,OAAO;AAEd,kBAAc,iBAAiB,EAAE,KAAK,YAAY,QAAQ,MAAO,CAAA,CAAC;AAElE,WAAO,MAAM;AACX,YAAM,QAAQ;AACd,aAAO,QAAQ;AAAA,IAAA;AAAA,EAEnB,GAAG,CAAE,CAAA;AAGL,YAAU,MAAM;AACd,QAAI,EAAC,yCAAY;AAAQ;AACzB,UAAM,SAAS,WAAW;AAE1B,UAAM,WAAW,MAAM;AACrB,YAAM,IAAI,UAAU;AACpB,UAAI,CAAC;AAAG;AACN,QAAA,QAAQ,UAAU,cAAc,OAAO;AACvC,QAAA,SAAS,UAAU,eAAe,OAAO;AAC3C,QAAE,MAAM,QAAQ,GAAG,UAAU,WAAW;AACxC,QAAE,MAAM,SAAS,GAAG,UAAU,YAAY;AAC1C,aAAO,OAAO;AAAA,IAAA;AAGP;AACL,QAAA,GAAG,UAAU,QAAQ;AACzB,WAAO,MAAM;AAAM,UAAA,IAAI,UAAU,QAAQ;AAAA,IAAA;AAAA,EACxC,GAAA,CAAC,YAAY,KAAK,SAAS,CAAC;AAEzB,QAAA,UAAU,YAAY,MAAM;AAChC,aAAS,IAAI;AAAA,EAAA,CACd;AAED,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,UAAO,EAAA,KAAK,WAAW,OAAO,aAAa;AAAA,IAC3C,cACE,qBAAA,kBAAkB,UAAlB,EAA2B,OAAO,YACjC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MACC,SAAS;AAAA,IAAA,GACZ;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;AACD,aAAa,cAAc;"}

package/dist/es/main19.mjs

@@ -0,0 +1,18 @@
+import { Vector3, Quaternion, Matrix } from "@babylonjs/core";
+function coordsToMatrix({
+  longitude,
+  latitude,
+  altitude,
+  fromLngLat
+}) {
+  const center = fromLngLat([longitude, latitude], altitude);
+  const scaleUnit = center.meterInMercatorCoordinateUnits();
+  const position = new Vector3(center.x, center.y, center.z || 0);
+  const scaling = new Vector3(scaleUnit, scaleUnit, scaleUnit);
+  const rotation = Quaternion.FromEulerAngles(Math.PI / 2, 0, 0);
+  return Matrix.Compose(scaling, rotation, position);
+}
+export {
+  coordsToMatrix
+};
+//# sourceMappingURL=main19.mjs.map

package/dist/es/main19.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main19.mjs","sources":["../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Matrix, Quaternion, Vector3 } from '@babylonjs/core';\nimport { FromLngLat } from './generic-map';\nimport { Coords } from '../api/coords';\n\n/** Calculate Babylon.js Matrix from coordinates.\n *  Returns a Babylon Matrix (world transform at the given geo coord).\n *  Matches the pattern from MapLibre + Babylon.js integration demo. */\nexport function coordsToMatrix({\n  longitude, latitude, altitude, fromLngLat\n}: Coords & { fromLngLat: FromLngLat }): Matrix {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n\n  const position = new Vector3(center.x, center.y, center.z || 0);\n  const scaling = new Vector3(scaleUnit, scaleUnit, scaleUnit);\n  // Babylon default: +x east, +y up, +z north\n  // MapLibre default: +x east, -y north, +z up\n  const rotation = Quaternion.FromEulerAngles(Math.PI / 2, 0, 0);\n\n  return Matrix.Compose(scaling, rotation, position);\n}\n"],"names":[],"mappings":";AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AACjC,GAAgD;AAC9C,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AAEnB,QAAA,WAAW,IAAI,QAAQ,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AAC9D,QAAM,UAAU,IAAI,QAAQ,WAAW,WAAW,SAAS;AAG3D,QAAM,WAAW,WAAW,gBAAgB,KAAK,KAAK,GAAG,GAAG,CAAC;AAE7D,SAAO,OAAO,QAAQ,SAAS,UAAU,QAAQ;AACnD;"}

package/dist/es/main2.mjs

@@ -0,0 +1,9 @@
+import { useBabylonMap } from "./main4.mjs";
+const useMap = () => {
+  const ctx = useBabylonMap();
+  return ctx.map;
+};
+export {
+  useMap
+};
+//# sourceMappingURL=main2.mjs.map

package/dist/es/main2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main2.mjs","sources":["../../src/api/use-map.ts"],"sourcesContent":["import { MapInstance } from '../core/generic-map';\nimport { useBabylonMap } from '../core/use-babylon-map';\n\n/** Access the underlying map instance from inside a `<Canvas>`. */\nexport const useMap = <T extends MapInstance = MapInstance>(): T => {\n  const ctx = useBabylonMap();\n  return ctx.map as T;\n};\n"],"names":[],"mappings":";AAIO,MAAM,SAAS,MAA8C;AAClE,QAAM,MAAM;AACZ,SAAO,IAAI;AACb;"}

package/dist/es/main20.mjs

@@ -0,0 +1,21 @@
+import require$$0 from "react-dom";
+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;
+    }
+  };
+}
+export {
+  createRoot
+};
+//# sourceMappingURL=main20.mjs.map

package/dist/es/main20.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main20.mjs","sources":["../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/client.js"],"sourcesContent":["'use strict';\n\nvar m = require('react-dom');\nif (process.env.NODE_ENV === 'production') {\n  exports.createRoot = m.createRoot;\n  exports.hydrateRoot = m.hydrateRoot;\n} else {\n  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;\n  exports.createRoot = function(c, o) {\n    i.usingClientEntryPoint = true;\n    try {\n      return m.createRoot(c, o);\n    } finally {\n      i.usingClientEntryPoint = false;\n    }\n  };\n  exports.hydrateRoot = function(c, h, o) {\n    i.usingClientEntryPoint = true;\n    try {\n      return m.hydrateRoot(c, h, o);\n    } finally {\n      i.usingClientEntryPoint = false;\n    }\n  };\n}\n"],"names":[],"mappings":";;AAEA,IAAI,IAAI;AACR,IAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,eAAqB,EAAE;AACD,IAAE;AAC1B,OAAO;AACL,MAAI,IAAI,EAAE;AACV,eAAqB,SAAS,GAAG,GAAG;AAClC,MAAE,wBAAwB;AAC1B,QAAI;AACF,aAAO,EAAE,WAAW,GAAG,CAAC;AAAA,IAC9B,UAAc;AACR,QAAE,wBAAwB;AAAA,IAC3B;AAAA,EACL;AASA;","x_google_ignoreList":[0]}

package/dist/es/main21.mjs

@@ -0,0 +1,61 @@
+import { memo, useRef, useMemo, useEffect } from "react";
+import { syncCamera } from "./main12.mjs";
+import { useCoordsToMatrix } from "./main13.mjs";
+import { useFunction } from "./main11.mjs";
+import { useBabylonMap } from "./main4.mjs";
+const SyncCameraFC = 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 = useRef(false);
+  const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);
+  const mapPaintRequests = 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();
+    }
+  });
+  useEffect(() => {
+    setOnRender && setOnRender(() => onRender);
+  }, [setOnRender, onRender]);
+  return null;
+});
+SyncCameraFC.displayName = "SyncCameraFC";
+export {
+  SyncCameraFC
+};
+//# sourceMappingURL=main21.mjs.map

package/dist/es/main21.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main21.mjs","sources":["../../src/core/canvas-overlay/sync-camera-fc.tsx"],"sourcesContent":["import { FreeCamera } from '@babylonjs/core';\nimport { memo, RefObject, useEffect, useRef, useMemo } from 'react';\nimport { Coords } from '../../api/coords';\nimport { MapInstance } from '../generic-map';\nimport { syncCamera } from '../sync-camera';\nimport { useCoordsToMatrix } from '../use-coords-to-matrix';\nimport { useFunction } from '../use-function';\nimport { useBabylonMap } from '../use-babylon-map';\n\ninterface SyncCameraFCProps extends Coords {\n  setOnRender?: (callback: () => (mx: number[]) => void) => void;\n  onReady?: () => void;\n  map: MapInstance;\n  canvasRef: RefObject<HTMLCanvasElement | null>;\n}\n\n/** React component to sync the Babylon camera with the map provider on each render. */\nexport const SyncCameraFC = memo<SyncCameraFCProps>(({\n  latitude, longitude, altitude = 0, setOnRender, onReady, map, canvasRef,\n}) => {\n\n  const mapCanvas = map.getCanvas();\n  const babylonMap = useBabylonMap();\n  const scene = babylonMap.scene!;\n  const engine = babylonMap.engine!;\n\n  const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: babylonMap.fromLngLat });\n\n  const ready = useRef(false);\n\n  const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);\n  const mapPaintRequests = useRef(0);\n  const triggerRepaintOff = useFunction(() => {\n    mapPaintRequests.current++;\n  });\n\n  // Render callback — called by MapLibre on each paint frame\n  const onRender = useFunction((viewProjMx: number[] | { defaultProjectionData: { mainMatrix: Record<string, number> } }) => {\n    map.triggerRepaint = triggerRepaintOff;\n\n    // Resize if needed\n    if (canvasRef.current && engine) {\n      if (canvasRef.current.width !== mapCanvas.width || canvasRef.current.height !== mapCanvas.height) {\n        canvasRef.current.width = mapCanvas.clientWidth * window.devicePixelRatio;\n        canvasRef.current.height = mapCanvas.clientHeight * window.devicePixelRatio;\n        canvasRef.current.style.width = `${mapCanvas.clientWidth}px`;\n        canvasRef.current.style.height = `${mapCanvas.clientHeight}px`;\n        engine.resize();\n      }\n    }\n\n    const pVMx = 'defaultProjectionData' in viewProjMx\n      ? Object.values(viewProjMx.defaultProjectionData.mainMatrix)\n      : viewProjMx;\n    babylonMap.viewProjMx = pVMx as number[];\n\n    // Sync camera\n    syncCamera(scene.activeCamera as FreeCamera, origin, babylonMap.viewProjMx);\n\n    // Wipe caches and render one frame\n    engine.wipeCaches(true);\n    scene.render(false);\n\n    if (!ready.current && onReady) {\n      ready.current = true;\n      onReady();\n    }\n\n    // Restore triggerRepaint for demand-based rendering\n    map.triggerRepaint = triggerRepaint;\n    if (mapPaintRequests.current > 0) {\n      mapPaintRequests.current = 0;\n      map.triggerRepaint();\n    }\n  });\n\n  useEffect(() => {\n    setOnRender && setOnRender(() => onRender);\n  }, [setOnRender, onRender]);\n\n  return null;\n});\nSyncCameraFC.displayName = 'SyncCameraFC';\n"],"names":[],"mappings":";;;;;AAiBa,MAAA,eAAe,KAAwB,CAAC;AAAA,EACnD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AAAA,EAAa;AAAA,EAAS;AAAA,EAAK;AAChE,MAAM;AAEE,QAAA,YAAY,IAAI;AACtB,QAAM,aAAa;AACnB,QAAM,QAAQ,WAAW;AACzB,QAAM,SAAS,WAAW;AAEpB,QAAA,SAAS,kBAAkB,EAAE,UAAU,WAAW,UAAU,YAAY,WAAW,WAAA,CAAY;AAE/F,QAAA,QAAQ,OAAO,KAAK;AAE1B,QAAM,iBAAiB,QAAQ,MAAM,IAAI,gBAAgB,CAAC,GAAG,CAAC;AACxD,QAAA,mBAAmB,OAAO,CAAC;AAC3B,QAAA,oBAAoB,YAAY,MAAM;AACzB,qBAAA;AAAA,EAAA,CAClB;AAGK,QAAA,WAAW,YAAY,CAAC,eAA6F;AACzH,QAAI,iBAAiB;AAGjB,QAAA,UAAU,WAAW,QAAQ;AAC3B,UAAA,UAAU,QAAQ,UAAU,UAAU,SAAS,UAAU,QAAQ,WAAW,UAAU,QAAQ;AAChG,kBAAU,QAAQ,QAAQ,UAAU,cAAc,OAAO;AACzD,kBAAU,QAAQ,SAAS,UAAU,eAAe,OAAO;AAC3D,kBAAU,QAAQ,MAAM,QAAQ,GAAG,UAAU,WAAW;AACxD,kBAAU,QAAQ,MAAM,SAAS,GAAG,UAAU,YAAY;AAC1D,eAAO,OAAO;AAAA,MAChB;AAAA,IACF;AAEM,UAAA,OAAO,2BAA2B,aACpC,OAAO,OAAO,WAAW,sBAAsB,UAAU,IACzD;AACJ,eAAW,aAAa;AAGxB,eAAW,MAAM,cAA4B,QAAQ,WAAW,UAAU;AAG1E,WAAO,WAAW,IAAI;AACtB,UAAM,OAAO,KAAK;AAEd,QAAA,CAAC,MAAM,WAAW,SAAS;AAC7B,YAAM,UAAU;AACR;IACV;AAGA,QAAI,iBAAiB;AACjB,QAAA,iBAAiB,UAAU,GAAG;AAChC,uBAAiB,UAAU;AAC3B,UAAI,eAAe;AAAA,IACrB;AAAA,EAAA,CACD;AAED,YAAU,MAAM;AACC,mBAAA,YAAY,MAAM,QAAQ;AAAA,EAAA,GACxC,CAAC,aAAa,QAAQ,CAAC;AAEnB,SAAA;AACT,CAAC;AACD,aAAa,cAAc;"}

package/dist/es/main3.mjs

@@ -0,0 +1,46 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { MercatorCoordinate } from "mapbox-gl";
+import { memo, useState } from "react";
+import { useMap, Layer } from "react-map-gl/mapbox";
+import { useCanvasInLayer } from "./main9.mjs";
+import { InitCanvasFC } from "./main10.mjs";
+import { useFunction } from "./main11.mjs";
+const fromLngLat = MercatorCoordinate.fromLngLat;
+const Canvas = memo(({ overlay, ...props }) => {
+  const map = useMap().current.getMap();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    overlay && /* @__PURE__ */ jsx(CanvasOverlay, { map, ...props }),
+    !overlay && /* @__PURE__ */ jsx(CanvasInLayer, { map, ...props })
+  ] });
+});
+Canvas.displayName = "Canvas";
+const CanvasInLayer = memo(({ map, ...props }) => {
+  const layerProps = useCanvasInLayer(props, fromLngLat, map);
+  return /* @__PURE__ */ jsx(Layer, { ...layerProps });
+});
+CanvasInLayer.displayName = "CanvasInLayer";
+const CanvasOverlay = memo(({ map, id, beforeId, ...props }) => {
+  const [onRender, setOnRender] = useState();
+  const render = useFunction((_gl, mx) => {
+    if (!onRender)
+      return;
+    onRender(mx);
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Layer, { id, beforeId, type: "custom", render }),
+    /* @__PURE__ */ jsx(
+      InitCanvasFC,
+      {
+        ...props,
+        setOnRender,
+        map,
+        fromLngLat
+      }
+    )
+  ] });
+});
+CanvasOverlay.displayName = "CanvasOverlay";
+export {
+  Canvas
+};
+//# sourceMappingURL=main3.mjs.map

package/dist/es/main3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main3.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport { MercatorCoordinate } from 'mapbox-gl';\nimport { memo, useState } from 'react';\nimport { Layer, useMap } from 'react-map-gl/mapbox';\nimport { CanvasProps } from '../api/canvas-props';\nimport { useCanvasInLayer } from '../core/canvas-in-layer/use-canvas-in-layer';\nimport { InitCanvasFC } from '../core/canvas-overlay/init-canvas-fc';\nimport { Render } from '../core/canvas-overlay/render';\nimport { MapInstance } from '../core/generic-map';\nimport { useFunction } from '../core/use-function';\n\nconst fromLngLat = MercatorCoordinate.fromLngLat;\n\n/** `react-babylon-map` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>(({ overlay, ...props }) => {\n  const map = useMap().current!.getMap(); // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n  return (\n    <>\n      {overlay && <CanvasOverlay map={map} {...props} />}\n      {!overlay && <CanvasInLayer map={map} {...props} />}\n    </>\n  );\n});\nCanvas.displayName = 'Canvas';\n\ninterface CanvasPropsAndMap extends CanvasProps {\n  map: MapInstance;\n}\n\nconst CanvasInLayer = memo<CanvasPropsAndMap>(({ map, ...props }) => {\n  const layerProps = useCanvasInLayer(props, fromLngLat, map);\n  /* @ts-ignore */\n  return <Layer {...layerProps} />;\n});\nCanvasInLayer.displayName = 'CanvasInLayer';\n\nconst CanvasOverlay = memo<CanvasPropsAndMap>(({ map, id, beforeId, ...props }) => {\n  const [onRender, setOnRender] = useState<(mx: number[]) => void>();\n\n  const render = useFunction<Render>((_gl, mx) => {\n    if (!onRender) return;\n    onRender(mx as number[]);\n  });\n\n  return (\n    <>\n      {/* @ts-ignore */}\n      <Layer id={id} beforeId={beforeId} type=\"custom\" render={render} />\n      <InitCanvasFC\n        {...props}\n        setOnRender={setOnRender}\n        map={map}\n        fromLngLat={fromLngLat}\n      />\n    </>\n  );\n});\nCanvasOverlay.displayName = 'CanvasOverlay';\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,aAAa,mBAAmB;AAG/B,MAAM,SAAS,KAAkB,CAAC,EAAE,SAAS,GAAG,YAAY;AACjE,QAAM,MAAM,OAAA,EAAS,QAAS,OAAO;AAErC,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,WAAY,oBAAA,eAAA,EAAc,KAAW,GAAG,MAAO,CAAA;AAAA,IAC/C,CAAC,WAAW,oBAAC,eAAc,EAAA,KAAW,GAAG,OAAO;AAAA,EACnD,EAAA,CAAA;AAEJ,CAAC;AACD,OAAO,cAAc;AAMrB,MAAM,gBAAgB,KAAwB,CAAC,EAAE,KAAK,GAAG,YAAY;AACnE,QAAM,aAAa,iBAAiB,OAAO,YAAY,GAAG;AAEnD,SAAA,oBAAC,OAAO,EAAA,GAAG,WAAY,CAAA;AAChC,CAAC;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgB,KAAwB,CAAC,EAAE,KAAK,IAAI,UAAU,GAAG,YAAY;AACjF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiC;AAEjE,QAAM,SAAS,YAAoB,CAAC,KAAK,OAAO;AAC9C,QAAI,CAAC;AAAU;AACf,aAAS,EAAc;AAAA,EAAA,CACxB;AAED,SAGI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,OAAM,EAAA,IAAQ,UAAoB,MAAK,UAAS,QAAgB;AAAA,IACjE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;AACD,cAAc,cAAc;"}

package/dist/es/main4.mjs

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+const BabylonMapContext = createContext(null);
+function useBabylonMap() {
+  const ctx = 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
+  };
+}
+export {
+  BabylonMapContext,
+  createBabylonMap,
+  useBabylonMap
+};
+//# sourceMappingURL=main4.mjs.map

package/dist/es/main4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main4.mjs","sources":["../../src/core/use-babylon-map.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { Engine, Scene } from '@babylonjs/core';\nimport { FromLngLat, MapInstance } from './generic-map';\n\n/** Context object shared between both rendering modes. */\nexport interface BabylonMap<T extends MapInstance = MapInstance> {\n  /** Map provider instance */\n  map: T;\n  /** Column-major view-projection matrix from the map provider */\n  viewProjMx: number[];\n  /** Mercator coordinate factory */\n  fromLngLat: FromLngLat;\n  /** Babylon Engine (may be null during init) */\n  engine?: Engine;\n  /** Babylon Scene (may be null during init) */\n  scene?: Scene;\n  /** Current origin coordinates (set by Canvas) */\n  coords?: { longitude: number; latitude: number; altitude?: number };\n}\n\n// ── React context ──────────────────────────────────────────────────────\n\nexport const BabylonMapContext = createContext<BabylonMap | null>(null);\n\n/** Access the current BabylonMap context (map, scene, engine, viewProjMx). */\nexport function useBabylonMap<T extends MapInstance = MapInstance>(): BabylonMap<T> {\n  const ctx = useContext(BabylonMapContext);\n  if (!ctx) throw new Error('useBabylonMap must be used inside a <Canvas>');\n  return ctx as BabylonMap<T>;\n}\n\n/** Initialise / update the BabylonMap context value. */\nexport function createBabylonMap<T extends MapInstance>(opts: {\n  map: T;\n  fromLngLat: FromLngLat;\n  engine?: Engine;\n  scene?: Scene;\n}): BabylonMap<T> {\n  return {\n    map: opts.map,\n    viewProjMx: new Array(16).fill(0) as number[],\n    fromLngLat: opts.fromLngLat,\n    engine: opts.engine,\n    scene: opts.scene,\n  };\n}\n"],"names":[],"mappings":";AAsBa,MAAA,oBAAoB,cAAiC,IAAI;AAG/D,SAAS,gBAAoE;AAC5E,QAAA,MAAM,WAAW,iBAAiB;AACxC,MAAI,CAAC;AAAW,UAAA,IAAI,MAAM,8CAA8C;AACjE,SAAA;AACT;AAGO,SAAS,iBAAwC,MAKtC;AACT,SAAA;AAAA,IACL,KAAK,KAAK;AAAA,IACV,YAAY,IAAI,MAAM,EAAE,EAAE,KAAK,CAAC;AAAA,IAChC,YAAY,KAAK;AAAA,IACjB,QAAQ,KAAK;AAAA,IACb,OAAO,KAAK;AAAA,EAAA;AAEhB;"}

package/dist/es/main5.mjs

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { Scene, Color4, FreeCamera, Vector3, HemisphericLight } from "@babylonjs/core";
+import { memo, useState, useRef, useEffect } from "react";
+import { syncCamera } from "./main12.mjs";
+import { useCoordsToMatrix } from "./main13.mjs";
+import { useBabylonMap, BabylonMapContext } from "./main4.mjs";
+const Coordinates = memo(({
+  latitude,
+  longitude,
+  altitude = 0,
+  children
+}) => {
+  const babylonMap = useBabylonMap();
+  const origin = useCoordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat: babylonMap.fromLngLat
+  });
+  const [subScene] = useState(() => {
+    if (!babylonMap.engine)
+      return null;
+    const sub = new Scene(babylonMap.engine);
+    sub.autoClear = false;
+    sub.clearColor = new Color4(0, 0, 0, 0);
+    return sub;
+  });
+  const cameraRef = useRef(null);
+  useEffect(() => {
+    if (!subScene)
+      return;
+    const cam = new FreeCamera("coordsCam", Vector3.Zero(), subScene);
+    cam.inputs.clear();
+    cam.minZ = 0;
+    cameraRef.current = cam;
+    const light = new HemisphericLight("coordsLight", new Vector3(0, 1, 0), subScene);
+    light.intensity = 1;
+    return () => {
+      cam.dispose();
+      light.dispose();
+    };
+  }, [subScene]);
+  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__ */ jsx(BabylonMapContext.Provider, { value: childMap, children });
+});
+Coordinates.displayName = "Coordinates";
+export {
+  Coordinates
+};
+//# sourceMappingURL=main5.mjs.map

package/dist/es/main5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main5.mjs","sources":["../../src/api/coordinates.tsx"],"sourcesContent":["import { Color4, FreeCamera, HemisphericLight, Scene, Vector3 } from '@babylonjs/core';\nimport { memo, useEffect, useRef, useState } from 'react';\nimport { syncCamera } from '../core/sync-camera';\nimport { useCoordsToMatrix } from '../core/use-coords-to-matrix';\nimport { useBabylonMap, BabylonMapContext } from '../core/use-babylon-map';\nimport type { BabylonMap } from '../core/use-babylon-map';\n\nexport interface CoordinatesProps {\n  longitude: number;\n  latitude: number;\n  altitude?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * Place 3D content at specific geographic coordinates inside a `<Canvas>`.\n * Creates a sub-scene with its own camera synced to the given geo position,\n * mirroring react-three-map's createPortal approach.\n */\nexport const Coordinates = memo<CoordinatesProps>(({\n  latitude, longitude, altitude = 0, children,\n}) => {\n  const babylonMap = useBabylonMap();\n  const origin = useCoordsToMatrix({\n    latitude, longitude, altitude, fromLngLat: babylonMap.fromLngLat,\n  });\n\n  // Create a sub-scene for this coordinate portal\n  const [subScene] = useState(() => {\n    if (!babylonMap.engine) return null;\n    const sub = new Scene(babylonMap.engine);\n    sub.autoClear = false;\n    sub.clearColor = new Color4(0, 0, 0, 0);\n    return sub;\n  });\n\n  const cameraRef = useRef<FreeCamera | null>(null);\n\n  // Create camera + default light in sub-scene\n  useEffect(() => {\n    if (!subScene) return;\n    const cam = new FreeCamera('coordsCam', Vector3.Zero(), subScene);\n    cam.inputs.clear();\n    cam.minZ = 0;\n    cameraRef.current = cam;\n\n    // Add a default light so StandardMaterial isn't black\n    const light = new HemisphericLight('coordsLight', new Vector3(0, 1, 0), subScene);\n    light.intensity = 1;\n\n    return () => { cam.dispose(); light.dispose(); };\n  }, [subScene]);\n\n  // Render the sub-scene each frame, synced to its geographic position\n  useEffect(() => {\n    if (!subScene || !babylonMap.scene) return;\n    const mainScene = babylonMap.scene;\n\n    const observer = mainScene.onBeforeRenderObservable.add(() => {\n      if (!cameraRef.current) return;\n      syncCamera(cameraRef.current, origin, babylonMap.viewProjMx);\n      babylonMap.engine?.wipeCaches(true);\n      subScene.render(false);\n    });\n\n    return () => {\n      mainScene.onBeforeRenderObservable.remove(observer);\n    };\n  }, [subScene, babylonMap.scene, origin, babylonMap]);\n\n  // Provide child context pointing at the sub-scene\n  const childMap: BabylonMap = {\n    ...babylonMap,\n    scene: subScene || undefined,\n  };\n\n  return (\n    <BabylonMapContext.Provider value={childMap}>\n      {children}\n    </BabylonMapContext.Provider>\n  );\n});\nCoordinates.displayName = 'Coordinates';\n"],"names":[],"mappings":";;;;;;AAmBa,MAAA,cAAc,KAAuB,CAAC;AAAA,EACjD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AACrC,MAAM;AACJ,QAAM,aAAa;AACnB,QAAM,SAAS,kBAAkB;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU,YAAY,WAAW;AAAA,EAAA,CACvD;AAGD,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAChC,QAAI,CAAC,WAAW;AAAe,aAAA;AAC/B,UAAM,MAAM,IAAI,MAAM,WAAW,MAAM;AACvC,QAAI,YAAY;AAChB,QAAI,aAAa,IAAI,OAAO,GAAG,GAAG,GAAG,CAAC;AAC/B,WAAA;AAAA,EAAA,CACR;AAEK,QAAA,YAAY,OAA0B,IAAI;AAGhD,YAAU,MAAM;AACd,QAAI,CAAC;AAAU;AACf,UAAM,MAAM,IAAI,WAAW,aAAa,QAAQ,KAAA,GAAQ,QAAQ;AAChE,QAAI,OAAO;AACX,QAAI,OAAO;AACX,cAAU,UAAU;AAGd,UAAA,QAAQ,IAAI,iBAAiB,eAAe,IAAI,QAAQ,GAAG,GAAG,CAAC,GAAG,QAAQ;AAChF,UAAM,YAAY;AAElB,WAAO,MAAM;AAAE,UAAI,QAAQ;AAAG,YAAM,QAAQ;AAAA,IAAA;AAAA,EAAG,GAC9C,CAAC,QAAQ,CAAC;AAGb,YAAU,MAAM;AACV,QAAA,CAAC,YAAY,CAAC,WAAW;AAAO;AACpC,UAAM,YAAY,WAAW;AAE7B,UAAM,WAAW,UAAU,yBAAyB,IAAI,MAAM;;AAC5D,UAAI,CAAC,UAAU;AAAS;AACxB,iBAAW,UAAU,SAAS,QAAQ,WAAW,UAAU;AAChD,uBAAA,WAAA,mBAAQ,WAAW;AAC9B,eAAS,OAAO,KAAK;AAAA,IAAA,CACtB;AAED,WAAO,MAAM;AACD,gBAAA,yBAAyB,OAAO,QAAQ;AAAA,IAAA;AAAA,EACpD,GACC,CAAC,UAAU,WAAW,OAAO,QAAQ,UAAU,CAAC;AAGnD,QAAM,WAAuB;AAAA,IAC3B,GAAG;AAAA,IACH,OAAO,YAAY;AAAA,EAAA;AAGrB,6BACG,kBAAkB,UAAlB,EAA2B,OAAO,UAChC,SACH,CAAA;AAEJ,CAAC;AACD,YAAY,cAAc;"}

package/dist/es/main6.mjs

@@ -0,0 +1,35 @@
+import { earthRadius } from "./main14.mjs";
+const DEG2RAD = 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);
+  }
+  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;
+  const longitudeDiff = (point.longitude - origin.longitude) * DEG2RAD;
+  const altitudeDiff = (point.altitude || 0) - (origin.altitude || 0);
+  const x = longitudeDiff * earthRadius * Math.cos(origin.latitude * DEG2RAD);
+  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];
+}
+export {
+  averageMercatorScale,
+  coordsToVector3
+};
+//# sourceMappingURL=main6.mjs.map

package/dist/es/main6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main6.mjs","sources":["../../src/api/coords-to-vector-3.ts"],"sourcesContent":["import { earthRadius } from '../core/earth-radius';\nimport { Coords } from './coords';\n\nconst DEG2RAD = Math.PI / 180;\n\nconst mercatorScaleLookup: { [key: number]: number } = {};\n\nfunction getMercatorScale(lat: number): number {\n  const index = Math.round(lat * 1000);\n  if (mercatorScaleLookup[index] === undefined) {\n    mercatorScaleLookup[index] = 1 / Math.cos(lat * DEG2RAD);\n  }\n  return mercatorScaleLookup[index];\n}\n\nexport function averageMercatorScale(originLat: number, pointLat: number, steps = 10): number {\n  let totalScale = 0;\n  const latStep = (pointLat - originLat) / steps;\n  for (let i = 0; i <= steps; i++) {\n    const lat = originLat + latStep * i;\n    totalScale += getMercatorScale(lat);\n  }\n  return totalScale / (steps + 1);\n}\n\nexport function coordsToVector3(point: Coords, origin: Coords): [number, number, number] {\n  const latitudeDiff = (point.latitude - origin.latitude) * DEG2RAD;\n  const longitudeDiff = (point.longitude - origin.longitude) * DEG2RAD;\n  const altitudeDiff = (point.altitude || 0) - (origin.altitude || 0);\n\n  const x = longitudeDiff * earthRadius * Math.cos(origin.latitude * DEG2RAD);\n  const y = altitudeDiff;\n\n  const steps = Math.ceil(Math.abs(point.latitude - origin.latitude)) * 100 + 1;\n  const avgScale = averageMercatorScale(origin.latitude, point.latitude, steps);\n\n  const z = ((-latitudeDiff * earthRadius) / getMercatorScale(origin.latitude)) * avgScale;\n  return [x, y, z];\n}\n"],"names":[],"mappings":";AAGA,MAAM,UAAU,KAAK,KAAK;AAE1B,MAAM,sBAAiD,CAAA;AAEvD,SAAS,iBAAiB,KAAqB;AAC7C,QAAM,QAAQ,KAAK,MAAM,MAAM,GAAI;AAC/B,MAAA,oBAAoB,KAAK,MAAM,QAAW;AAC5C,wBAAoB,KAAK,IAAI,IAAI,KAAK,IAAI,MAAM,OAAO;AAAA,EACzD;AACA,SAAO,oBAAoB,KAAK;AAClC;AAEO,SAAS,qBAAqB,WAAmB,UAAkB,QAAQ,IAAY;AAC5F,MAAI,aAAa;AACX,QAAA,WAAW,WAAW,aAAa;AACzC,WAAS,IAAI,GAAG,KAAK,OAAO,KAAK;AACzB,UAAA,MAAM,YAAY,UAAU;AAClC,kBAAc,iBAAiB,GAAG;AAAA,EACpC;AACA,SAAO,cAAc,QAAQ;AAC/B;AAEgB,SAAA,gBAAgB,OAAe,QAA0C;AACvF,QAAM,gBAAgB,MAAM,WAAW,OAAO,YAAY;AAC1D,QAAM,iBAAiB,MAAM,YAAY,OAAO,aAAa;AAC7D,QAAM,gBAAgB,MAAM,YAAY,MAAM,OAAO,YAAY;AAEjE,QAAM,IAAI,gBAAgB,cAAc,KAAK,IAAI,OAAO,WAAW,OAAO;AAC1E,QAAM,IAAI;AAEJ,QAAA,QAAQ,KAAK,KAAK,KAAK,IAAI,MAAM,WAAW,OAAO,QAAQ,CAAC,IAAI,MAAM;AAC5E,QAAM,WAAW,qBAAqB,OAAO,UAAU,MAAM,UAAU,KAAK;AAE5E,QAAM,IAAM,CAAC,eAAe,cAAe,iBAAiB,OAAO,QAAQ,IAAK;AACzE,SAAA,CAAC,GAAG,GAAG,CAAC;AACjB;"}

package/dist/es/main7.mjs

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { Scene, Color4, FreeCamera, Vector3, HemisphericLight } from "@babylonjs/core";
+import { memo, useState, useRef, useEffect } from "react";
+import { useBabylonMap, BabylonMapContext } from "./main4.mjs";
+import { useCoords } from "./main15.mjs";
+import { coordsToVector3 } from "./main6.mjs";
+const NearCoordinates = memo(({ children, ...coords }) => {
+  const { latitude, longitude, altitude } = useCoords();
+  const babylonMap = useBabylonMap();
+  const pos = coordsToVector3(coords, { latitude, longitude, altitude });
+  const [subScene] = useState(() => {
+    if (!babylonMap.engine)
+      return null;
+    const sub = new Scene(babylonMap.engine);
+    sub.autoClear = false;
+    sub.clearColor = new Color4(0, 0, 0, 0);
+    return sub;
+  });
+  const cameraRef = useRef(null);
+  useEffect(() => {
+    if (!subScene)
+      return;
+    const cam = new FreeCamera("nearCoordsCam", new Vector3(pos[0], pos[1], pos[2]), subScene);
+    cam.inputs.clear();
+    cam.minZ = 0;
+    cameraRef.current = cam;
+    const light = new HemisphericLight("nearCoordsLight", new Vector3(0, 1, 0), subScene);
+    light.intensity = 1;
+    return () => {
+      cam.dispose();
+      light.dispose();
+    };
+  }, [subScene]);
+  useEffect(() => {
+    if (!cameraRef.current)
+      return;
+    cameraRef.current.position.set(pos[0], pos[1], pos[2]);
+  }, [pos]);
+  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__ */ jsx(BabylonMapContext.Provider, { value: childMap, children });
+});
+NearCoordinates.displayName = "NearCoordinates";
+export {
+  NearCoordinates
+};
+//# sourceMappingURL=main7.mjs.map

package/dist/es/main7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main7.mjs","sources":["../../src/api/near-coordinates.tsx"],"sourcesContent":["import { Color4, FreeCamera, HemisphericLight, Scene, Vector3 } from '@babylonjs/core';\nimport { memo, useEffect, useRef, useState } from 'react';\nimport { useBabylonMap, BabylonMapContext } from '../core/use-babylon-map';\nimport type { BabylonMap } from '../core/use-babylon-map';\nimport { useCoords } from '../core/use-coords';\nimport { coordsToVector3 } from './coords-to-vector-3';\n\nexport interface NearCoordinatesProps {\n  longitude: number;\n  latitude: number;\n  altitude?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * Place 3D content at a nearby coordinate (relative to the Canvas origin).\n * Uses the sub-scene approach like Coordinates but computes a relative offset\n * for the camera's world matrix.\n */\nexport const NearCoordinates = memo<NearCoordinatesProps>(({ children, ...coords }) => {\n  const { latitude, longitude, altitude } = useCoords();\n  const babylonMap = useBabylonMap();\n\n  const pos = coordsToVector3(coords, { latitude, longitude, altitude });\n\n  // Create a sub-scene for this coordinate portal\n  const [subScene] = useState(() => {\n    if (!babylonMap.engine) return null;\n    const sub = new Scene(babylonMap.engine);\n    sub.autoClear = false;\n    sub.clearColor = new Color4(0, 0, 0, 0);\n    return sub;\n  });\n\n  const cameraRef = useRef<FreeCamera | null>(null);\n\n  // Create camera + default light in sub-scene\n  useEffect(() => {\n    if (!subScene) return;\n    const cam = new FreeCamera('nearCoordsCam', new Vector3(pos[0], pos[1], pos[2]), subScene);\n    cam.inputs.clear();\n    cam.minZ = 0;\n    cameraRef.current = cam;\n\n    const light = new HemisphericLight('nearCoordsLight', new Vector3(0, 1, 0), subScene);\n    light.intensity = 1;\n\n    return () => { cam.dispose(); light.dispose(); };\n  }, [subScene]);\n\n  // Update camera position when offset changes\n  useEffect(() => {\n    if (!cameraRef.current) return;\n    cameraRef.current.position.set(pos[0], pos[1], pos[2]);\n  }, [pos]);\n\n  // Render the sub-scene each frame\n  useEffect(() => {\n    if (!subScene || !babylonMap.scene) return;\n    const mainScene = babylonMap.scene;\n\n    const observer = mainScene.onBeforeRenderObservable.add(() => {\n      if (!cameraRef.current) return;\n      // Use the same projection as the main scene but offset by local position\n      cameraRef.current.freezeProjectionMatrix(babylonMap.scene!.activeCamera!.getProjectionMatrix());\n      babylonMap.engine?.wipeCaches(true);\n      subScene.render(false);\n    });\n\n    return () => {\n      mainScene.onBeforeRenderObservable.remove(observer);\n    };\n  }, [subScene, babylonMap.scene, babylonMap]);\n\n  // Provide child context pointing at the sub-scene\n  const childMap: BabylonMap = {\n    ...babylonMap,\n    scene: subScene || undefined,\n  };\n\n  return (\n    <BabylonMapContext.Provider value={childMap}>\n      {children}\n    </BabylonMapContext.Provider>\n  );\n});\nNearCoordinates.displayName = 'NearCoordinates';\n"],"names":[],"mappings":";;;;;;AAmBO,MAAM,kBAAkB,KAA2B,CAAC,EAAE,UAAU,GAAG,aAAa;AACrF,QAAM,EAAE,UAAU,WAAW,aAAa,UAAU;AACpD,QAAM,aAAa;AAEnB,QAAM,MAAM,gBAAgB,QAAQ,EAAE,UAAU,WAAW,UAAU;AAGrE,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAChC,QAAI,CAAC,WAAW;AAAe,aAAA;AAC/B,UAAM,MAAM,IAAI,MAAM,WAAW,MAAM;AACvC,QAAI,YAAY;AAChB,QAAI,aAAa,IAAI,OAAO,GAAG,GAAG,GAAG,CAAC;AAC/B,WAAA;AAAA,EAAA,CACR;AAEK,QAAA,YAAY,OAA0B,IAAI;AAGhD,YAAU,MAAM;AACd,QAAI,CAAC;AAAU;AACf,UAAM,MAAM,IAAI,WAAW,iBAAiB,IAAI,QAAQ,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,QAAQ;AACzF,QAAI,OAAO;AACX,QAAI,OAAO;AACX,cAAU,UAAU;AAEd,UAAA,QAAQ,IAAI,iBAAiB,mBAAmB,IAAI,QAAQ,GAAG,GAAG,CAAC,GAAG,QAAQ;AACpF,UAAM,YAAY;AAElB,WAAO,MAAM;AAAE,UAAI,QAAQ;AAAG,YAAM,QAAQ;AAAA,IAAA;AAAA,EAAG,GAC9C,CAAC,QAAQ,CAAC;AAGb,YAAU,MAAM;AACd,QAAI,CAAC,UAAU;AAAS;AACd,cAAA,QAAQ,SAAS,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;AAAA,EAAA,GACpD,CAAC,GAAG,CAAC;AAGR,YAAU,MAAM;AACV,QAAA,CAAC,YAAY,CAAC,WAAW;AAAO;AACpC,UAAM,YAAY,WAAW;AAE7B,UAAM,WAAW,UAAU,yBAAyB,IAAI,MAAM;;AAC5D,UAAI,CAAC,UAAU;AAAS;AAExB,gBAAU,QAAQ,uBAAuB,WAAW,MAAO,aAAc,qBAAqB;AACnF,uBAAA,WAAA,mBAAQ,WAAW;AAC9B,eAAS,OAAO,KAAK;AAAA,IAAA,CACtB;AAED,WAAO,MAAM;AACD,gBAAA,yBAAyB,OAAO,QAAQ;AAAA,IAAA;AAAA,KAEnD,CAAC,UAAU,WAAW,OAAO,UAAU,CAAC;AAG3C,QAAM,WAAuB;AAAA,IAC3B,GAAG;AAAA,IACH,OAAO,YAAY;AAAA,EAAA;AAGrB,6BACG,kBAAkB,UAAlB,EAA2B,OAAO,UAChC,SACH,CAAA;AAEJ,CAAC;AACD,gBAAgB,cAAc;"}

package/dist/es/main8.mjs

@@ -0,0 +1,14 @@
+import { earthRadius } from "./main14.mjs";
+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 };
+}
+export {
+  vector3ToCoords
+};
+//# sourceMappingURL=main8.mjs.map