react-three-map 0.7.2 → 0.8.1

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

@@ -1 +1 @@
-{"version":3,"file":"main7.mjs","sources":["../../../src/core/use-coords.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { coordsToMatrix } from \"./coords-to-matrix\";\n\ntype Props = Parameters<typeof coordsToMatrix>[0];\n\n/** calculate matrix from coordinates */\nexport function useCoords({latitude, longitude, altitude, fromLngLat}: Props) {\n  const m4 = useMemo(() => coordsToMatrix({\n    latitude, longitude, altitude, fromLngLat,\n  }), [latitude, longitude, altitude, fromLngLat]);\n\n  return m4;\n}"],"names":[],"mappings":";;AAMO,SAAS,UAAU,EAAC,UAAU,WAAW,UAAU,cAAoB;AACtE,QAAA,KAAK,QAAQ,MAAM,eAAe;AAAA,IACtC;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC,GAAG,CAAC,UAAU,WAAW,UAAU,UAAU,CAAC;AAExC,SAAA;AACT;"}
+{"version":3,"file":"main7.mjs","sources":["../../../src/api/vector-3-to-coords.ts"],"sourcesContent":["import { MathUtils, Vector3Tuple } from \"three\";\nimport { Coords } from \"./coords\";\nimport { earthRadius } from \"../core/earth-radius\";\n\nexport function vector3ToCoords(position: Vector3Tuple, origin: Coords): Coords {\n  const [x, y, z] = position;\n  const latitude = origin.latitude + (-z / earthRadius) * MathUtils.RAD2DEG;\n  const longitude = origin.longitude + (x / earthRadius) * MathUtils.RAD2DEG / Math.cos(origin.latitude * MathUtils.DEG2RAD);\n  const altitude = (origin.altitude || 0) + y;\n  const coords: Coords = { latitude, longitude, altitude };\n  return coords;\n}"],"names":[],"mappings":";;AAIgB,SAAA,gBAAgB,UAAwB,QAAwB;AAC9E,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI;AAClB,QAAM,WAAW,OAAO,WAAY,CAAC,IAAI,cAAe,UAAU;AAClE,QAAM,YAAY,OAAO,YAAa,IAAI,cAAe,UAAU,UAAU,KAAK,IAAI,OAAO,WAAW,UAAU,OAAO;AACnH,QAAA,YAAY,OAAO,YAAY,KAAK;AAC1C,QAAM,SAAiB,EAAE,UAAU,WAAW,SAAS;AAChD,SAAA;AACT;"}

package/dist/maplibre/es/main8.mjs

@@ -1,25 +1,26 @@
-import { useCoords } from "./main7.mjs";
-import { useCreateRoot } from "./main9.mjs";
-import { useRender } from "./main10.mjs";
-function useCanvas({
-  longitude,
-  latitude,
-  altitude = 0,
-  frameloop = "always",
-  fromLngLat,
-  ...renderProps
-}) {
-  const m4 = useCoords({
+import { useCoordsToMatrix } from "./main12.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 { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });
-  const render = useRender(m4, r3mRef, frameloop);
-  return { id, onAdd, onRemove, render };
+  const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);
+  const render = useRender({ origin, frameloop, useThree, map, r3m });
+  return {
+    id: props.id,
+    beforeId: props.beforeId,
+    onRemove,
+    render,
+    type: "custom",
+    renderingMode: "3d"
+  };
 }
 export {
-  useCanvas
+  useCanvasInLayer
 };
 //# sourceMappingURL=main8.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main8.mjs","sources":["../../../src/core/use-canvas.ts"],"sourcesContent":["import { CanvasProps } from \"../api/canvas-props\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useCoords } from \"./use-coords\";\nimport { useCreateRoot } from \"./use-create-root\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends Omit<CanvasProps, 'id'|'beforeId'> {\n  fromLngLat: FromLngLat,\n}\n\nexport function useCanvas({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always',\n  fromLngLat,\n  ...renderProps\n}: useCanvasProps) {\n\n  const m4 = useCoords({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });\n\n  const render = useRender(m4, r3mRef, frameloop);\n\n  return { id, onAdd, onRemove, render }\n}"],"names":[],"mappings":";;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAW;AAAA,EAAU,WAAW;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AAEjB,QAAM,KAAK,UAAU;AAAA,IACnB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI,cAAc,EAAE,WAAW,YAAY,GAAG,YAAa,CAAA;AAE/F,QAAM,SAAS,UAAU,IAAI,QAAQ,SAAS;AAE9C,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
+{"version":3,"file":"main8.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 that you need to render as a map `<Layer>` */\nexport function useCanvasInLayer(props: CanvasProps,fromLngLat: FromLngLat, map: MapInstance) {\n\n  const {latitude, longitude, altitude, frameloop } = props;\n\n    const origin = useCoordsToMatrix({\n      latitude, longitude, altitude, fromLngLat,\n    });\n\n    const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);\n  \n    const render = useRender({origin, frameloop, useThree, map, r3m});\n  \n    return {\n      id: props.id,\n      beforeId: props.beforeId,\n      onRemove,\n      render,\n      type: 'custom',\n      renderingMode: '3d'\n    } as const\n\n}"],"names":[],"mappings":";;;AAOgB,SAAA,iBAAiB,OAAmB,YAAwB,KAAkB;AAE5F,QAAM,EAAC,UAAU,WAAW,UAAU,cAAc;AAElD,QAAM,SAAS,kBAAkB;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAEK,QAAA,EAAE,UAAU,UAAU,IAAA,IAAQ,QAAQ,YAAY,KAAK,KAAK;AAE5D,QAAA,SAAS,UAAU,EAAC,QAAQ,WAAW,UAAU,KAAK,KAAI;AAEzD,SAAA;AAAA,IACL,IAAI,MAAM;AAAA,IACV,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,eAAe;AAAA,EAAA;AAGrB;"}

package/dist/maplibre/es/main9.mjs

@@ -1,24 +1,30 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { useId, useEffect } from "react";
-import { useOnAdd } from "./main12.mjs";
-const useCreateRoot = ({
-  children,
-  frameloop,
-  fromLngLat,
-  ...renderProps
-}) => {
-  const id = useId();
-  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
+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(() => {
-    if (!mounted)
-      return;
-    if (!r3mRef.current.root)
-      return;
-    r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
-  }, [r3mRef, mounted, children]);
-  return { id, onAdd, onRemove, r3mRef };
-};
+    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 {
-  useCreateRoot
+  InitCanvasFC
 };
 //# sourceMappingURL=main9.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main9.mjs","sources":["../../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n  children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n  const id = useId();\n\n  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.render(<>\n      {children}\n    </>);\n  }, [r3mRef, mounted, children])\n\n  return { id, onAdd, onRemove, r3mRef }\n})"],"names":[],"mappings":";;;AAUO,MAAM,gBAAiB,CAAC;AAAA,EAC7B;AAAA,EAAU;AAAA,EAAW;AAAA,EAAY,GAAG;AACtC,MAAsB;AAEpB,QAAM,KAAK;AAEX,QAAM,EAAE,OAAO,UAAU,SAAS,OAAO,IAAI,SAAS,YAAY,EAAE,WAAW,GAAG,YAAa,CAAA;AAE/F,YAAU,MAAM;AACd,QAAI,CAAC;AAAS;AACV,QAAA,CAAC,OAAO,QAAQ;AAAM;AAC1B,WAAO,QAAQ,KAAK,OAAO,oBAAA,UAAA,EACxB,SACH,CAAA,CAAG;AAAA,EACF,GAAA,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
+{"version":3,"file":"main9.mjs","sources":["../../../src/core/canvas-overlay/init-canvas-fc.tsx"],"sourcesContent":["import { memo, useEffect, useState } from \"react\";\nimport { createPortal } from 'react-dom';\nimport { Matrix4Tuple } from \"three\";\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: Matrix4Tuple) => void) => void,\n  frameloop?: 'always' | 'demand',\n  fromLngLat: FromLngLat,\n}\nexport const InitCanvasFC = memo<InitCanvasFCProps>((props) => {\n  const canvas = props.map.getCanvas() // eslint-disable-line @typescript-eslint/no-non-null-assertion\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  return <>\n    {createPortal((\n      <CanvasPortal {...props} />\n    ), el)}\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;AACE,SAAA,oBAAA,UAAA,EACJ,uBACE,oBAAA,cAAA,EAAc,GAAG,MAAO,CAAA,GACxB,EAAE,EACP,CAAA;AACF,CAAC;AACD,aAAa,cAAc;"}

package/dist/maplibre/types/api/canvas-props.d.ts

@@ -1,10 +1,10 @@
 import { RenderProps } from "@react-three/fiber";
 import { PropsWithChildren } from "react";
-export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+import { Coords } from "./coords";
+export interface CanvasProps extends Coords, Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
     id?: string;
     beforeId?: string;
-    longitude: number;
-    latitude: number;
-    altitude?: number;
     frameloop?: 'always' | 'demand';
+    /** render on a separated `<canvas>` that sits on top of the map provider */
+    overlay?: boolean;
 }

package/dist/maplibre/types/api/coords-to-vector-3.d.ts

@@ -0,0 +1,3 @@
+import { Vector3Tuple } from 'three';
+import { Coords } from './coords';
+export declare function coordsToVector3(point: Coords, origin: Coords): Vector3Tuple;

package/dist/maplibre/types/api/coords.d.ts

@@ -0,0 +1,5 @@
+export interface Coords {
+    longitude: number;
+    latitude: number;
+    altitude?: number;
+}

package/dist/maplibre/types/api/index.d.ts

@@ -0,0 +1,6 @@
+export * from './canvas-props';
+export * from './coordinates';
+export * from './coords';
+export * from './coords-to-vector-3';
+export * from './near-coordinates';
+export * from './vector-3-to-coords';

package/dist/maplibre/types/api/near-coordinates.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CoordinatesProps } from "./coordinates";
+export declare const NearCoordinates: import("react").NamedExoticComponent<CoordinatesProps>;

package/dist/maplibre/types/api/use-map.d.ts

@@ -1,2 +1,2 @@
 import { MapInstance } from "../core/generic-map";
-export declare const useMap: <T extends MapInstance = MapInstance>() => T | undefined;
+export declare const useMap: <T extends MapInstance = MapInstance>() => T;

package/dist/maplibre/types/api/vector-3-to-coords.d.ts

@@ -0,0 +1,3 @@
+import { Vector3Tuple } from "three";
+import { Coords } from "./coords";
+export declare function vector3ToCoords(position: Vector3Tuple, origin: Coords): Coords;

package/dist/maplibre/types/core/canvas-in-layer/use-canvas-in-layer.d.ts

@@ -0,0 +1,11 @@
+import { CanvasProps } from "../../api/canvas-props";
+import { FromLngLat, MapInstance } from "../generic-map";
+/** get all the properties that you need to render as a map `<Layer>` */
+export declare function useCanvasInLayer(props: CanvasProps, fromLngLat: FromLngLat, map: MapInstance): {
+    readonly id: string | undefined;
+    readonly beforeId: string | undefined;
+    readonly onRemove: () => void;
+    readonly render: (_gl: WebGL2RenderingContext, projViewMx: number[]) => void;
+    readonly type: "custom";
+    readonly renderingMode: "3d";
+};

package/dist/maplibre/types/core/canvas-in-layer/use-render.d.ts

@@ -0,0 +1,12 @@
+import { RootState } from "@react-three/fiber";
+import { Matrix4Tuple } from "three";
+import { UseBoundStore } from "zustand";
+import { MapInstance } from "../generic-map";
+import { R3M } from "../use-r3m";
+export declare function useRender({ map, origin, useThree, frameloop, r3m, }: {
+    map: MapInstance;
+    origin: Matrix4Tuple;
+    useThree: UseBoundStore<RootState>;
+    frameloop?: 'always' | 'demand';
+    r3m: R3M;
+}): (_gl: WebGL2RenderingContext, projViewMx: number[]) => void;

package/dist/maplibre/types/core/canvas-in-layer/use-root.d.ts

@@ -0,0 +1,7 @@
+import { CanvasProps } from "../../api/canvas-props";
+import { FromLngLat, MapInstance } from "../generic-map";
+export declare function useRoot(fromLngLat: FromLngLat, map: MapInstance, { frameloop, longitude, latitude, altitude, ...props }: CanvasProps): {
+    onRemove: () => void;
+    useThree: import("zustand").UseBoundStore<import("@react-three/fiber").RootState>;
+    r3m: import("../use-r3m").R3M<MapInstance>;
+};

package/dist/maplibre/types/core/canvas-overlay/canvas-portal.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Matrix4Tuple } from "three";
+import { CanvasProps } from "../../api/canvas-props";
+import { FromLngLat, MapInstance } from "../generic-map";
+interface CanvasPortalProps extends CanvasProps {
+    setOnRender: (callback: () => (mx: Matrix4Tuple) => void) => void;
+    map: MapInstance;
+    fromLngLat: FromLngLat;
+}
+export declare const CanvasPortal: import("react").NamedExoticComponent<CanvasPortalProps>;
+export {};

package/dist/maplibre/types/core/canvas-overlay/init-canvas-fc.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Matrix4Tuple } from "three";
+import { CanvasProps } from "../../api/canvas-props";
+import { FromLngLat, MapInstance } from "../generic-map";
+interface InitCanvasFCProps extends CanvasProps {
+    map: MapInstance;
+    setOnRender: (callback: () => (mx: Matrix4Tuple) => void) => void;
+    frameloop?: 'always' | 'demand';
+    fromLngLat: FromLngLat;
+}
+export declare const InitCanvasFC: import("react").NamedExoticComponent<InitCanvasFCProps>;
+export {};

package/dist/maplibre/types/core/canvas-overlay/init-r3m.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { FromLngLat, MapInstance } from "../generic-map";
+import { Coords } from "../../api/coords";
+interface InitR3MProps extends Coords {
+    map: MapInstance;
+    fromLngLat: FromLngLat;
+}
+/** Initialises the `R3M` hook */
+export declare const InitR3M: import("react").NamedExoticComponent<InitR3MProps>;
+export {};

package/dist/maplibre/types/core/canvas-overlay/render.d.ts

@@ -0,0 +1 @@
+export type Render = (gl: WebGLRenderingContext, matrix: number[]) => void;

package/dist/maplibre/types/core/canvas-overlay/sync-camera-fc.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Matrix4Tuple } from "three";
+import { Coords } from "../../api/coords";
+import { MapInstance } from "../generic-map";
+interface SyncCameraFCProps extends Coords {
+    setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void;
+    /** on `useFrame` it will manually render (used by `<Coordinates>`) */
+    manualRender?: boolean;
+    onReady?: () => void;
+    map: MapInstance;
+}
+/** React Component (FC) to sync the Three camera with the map provider */
+export declare const SyncCameraFC: import("react").NamedExoticComponent<SyncCameraFCProps>;
+export {};

package/dist/maplibre/types/core/coords-to-matrix.d.ts

@@ -1,8 +1,6 @@
 import { FromLngLat } from "./generic-map";
+import { Coords } from "../api/coords";
 /** calculate Matrix4 from coordinates */
-export declare function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {
-    longitude: number;
-    latitude: number;
-    altitude: number;
+export declare function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: Coords & {
     fromLngLat: FromLngLat;
 }): import("three").Matrix4Tuple;

package/dist/maplibre/types/core/earth-radius.d.ts

@@ -0,0 +1 @@
+export declare const earthRadius = 6378137;

package/dist/maplibre/types/core/events.d.ts

@@ -0,0 +1,4 @@
+import { Canvas } from "@react-three/fiber";
+type Events = Parameters<typeof Canvas>[0]['events'];
+export declare const events: Events;
+export {};

package/dist/maplibre/types/core/use-coords-to-matrix.d.ts

@@ -0,0 +1,5 @@
+import { coordsToMatrix } from "./coords-to-matrix";
+type Props = Parameters<typeof coordsToMatrix>[0];
+/** calculate matrix from coordinates */
+export declare function useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat }: Props): import("three").Matrix4Tuple;
+export {};

package/dist/maplibre/types/core/use-coords.d.ts

@@ -1,5 +1,7 @@
-import { coordsToMatrix } from "./coords-to-matrix";
-type Props = Parameters<typeof coordsToMatrix>[0];
-/** calculate matrix from coordinates */
-export declare function useCoords({ latitude, longitude, altitude, fromLngLat }: Props): import("three").Matrix4Tuple;
-export {};
+import { RootState } from "@react-three/fiber";
+import { UseBoundStore } from 'zustand';
+import { Coords } from "../api/coords";
+export declare function useCoords(): Coords;
+export declare function useSetCoords({ longitude, latitude, altitude }: Coords): void;
+export declare function useSetRootCoords(store: UseBoundStore<RootState>, { longitude, latitude, altitude }: Coords): void;
+export declare function setCoords(store: UseBoundStore<RootState>, coords: Coords): void;

package/dist/maplibre/types/core/use-r3m.d.ts

@@ -0,0 +1,22 @@
+import { RootState } from "@react-three/fiber";
+import { Matrix4Tuple } from "three";
+import { UseBoundStore } from 'zustand';
+import { FromLngLat, MapInstance } from "./generic-map";
+export interface R3M<T extends MapInstance = MapInstance> {
+    /** Map provider */
+    map: T;
+    /** view projection matrix coming from the map provider */
+    viewProjMx: Matrix4Tuple;
+    fromLngLat: FromLngLat;
+}
+export declare function useR3M<T extends MapInstance>(): R3M<T>;
+/** init `useR3M` hook */
+export declare function useInitR3M<T extends MapInstance>(props: {
+    map: T;
+    fromLngLat: FromLngLat;
+}): void;
+export declare function initR3M<T extends MapInstance>({ store, ...props }: {
+    map: T;
+    fromLngLat: FromLngLat;
+    store: UseBoundStore<RootState>;
+}): R3M<T>;

package/dist/maplibre/types/{maplibre → mapbox}/canvas.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CanvasProps } from "../api/canvas-props";
-/** react`-three-fiber` canvas inside `MapLibre` */
+/** react`-three-fiber` canvas inside `Mapbox` */
 export declare const Canvas: import("react").NamedExoticComponent<CanvasProps>;

package/dist/maplibre/types/maplibre.index.d.ts

@@ -1,5 +1,4 @@
 import type { Map } from 'maplibre-gl';
-export * from './api/canvas-props';
-export * from './api/coordinates';
-export * from './maplibre/canvas';
-export declare const useMap: () => Map | undefined;
+export * from './api';
+export * from './mapbox/canvas';
+export declare const useMap: () => Map;

package/dist/types/api/canvas-props.d.ts

@@ -1,10 +1,10 @@
 import { RenderProps } from "@react-three/fiber";
 import { PropsWithChildren } from "react";
-export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+import { Coords } from "./coords";
+export interface CanvasProps extends Coords, Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
     id?: string;
     beforeId?: string;
-    longitude: number;
-    latitude: number;
-    altitude?: number;
     frameloop?: 'always' | 'demand';
+    /** render on a separated `<canvas>` that sits on top of the map provider */
+    overlay?: boolean;
 }

package/dist/types/api/coords-to-vector-3.d.ts

@@ -0,0 +1,3 @@
+import { Vector3Tuple } from 'three';
+import { Coords } from './coords';
+export declare function coordsToVector3(point: Coords, origin: Coords): Vector3Tuple;

package/dist/types/api/coords.d.ts

@@ -0,0 +1,5 @@
+export interface Coords {
+    longitude: number;
+    latitude: number;
+    altitude?: number;
+}

package/dist/types/api/index.d.ts

@@ -0,0 +1,6 @@
+export * from './canvas-props';
+export * from './coordinates';
+export * from './coords';
+export * from './coords-to-vector-3';
+export * from './near-coordinates';
+export * from './vector-3-to-coords';

package/dist/types/api/near-coordinates.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CoordinatesProps } from "./coordinates";
+export declare const NearCoordinates: import("react").NamedExoticComponent<CoordinatesProps>;

package/dist/types/api/use-map.d.ts

@@ -1,2 +1,2 @@
 import { MapInstance } from "../core/generic-map";
-export declare const useMap: <T extends MapInstance = MapInstance>() => T | undefined;
+export declare const useMap: <T extends MapInstance = MapInstance>() => T;

package/dist/types/api/vector-3-to-coords.d.ts

@@ -0,0 +1,3 @@
+import { Vector3Tuple } from "three";
+import { Coords } from "./coords";
+export declare function vector3ToCoords(position: Vector3Tuple, origin: Coords): Coords;

package/dist/types/core/canvas-in-layer/use-canvas-in-layer.d.ts

@@ -0,0 +1,11 @@
+import { CanvasProps } from "../../api/canvas-props";
+import { FromLngLat, MapInstance } from "../generic-map";
+/** get all the properties that you need to render as a map `<Layer>` */
+export declare function useCanvasInLayer(props: CanvasProps, fromLngLat: FromLngLat, map: MapInstance): {
+    readonly id: string | undefined;
+    readonly beforeId: string | undefined;
+    readonly onRemove: () => void;
+    readonly render: (_gl: WebGL2RenderingContext, projViewMx: number[]) => void;
+    readonly type: "custom";
+    readonly renderingMode: "3d";
+};

package/dist/types/core/canvas-in-layer/use-render.d.ts

@@ -0,0 +1,12 @@
+import { RootState } from "@react-three/fiber";
+import { Matrix4Tuple } from "three";
+import { UseBoundStore } from "zustand";
+import { MapInstance } from "../generic-map";
+import { R3M } from "../use-r3m";
+export declare function useRender({ map, origin, useThree, frameloop, r3m, }: {
+    map: MapInstance;
+    origin: Matrix4Tuple;
+    useThree: UseBoundStore<RootState>;
+    frameloop?: 'always' | 'demand';
+    r3m: R3M;
+}): (_gl: WebGL2RenderingContext, projViewMx: number[]) => void;

package/dist/types/core/canvas-in-layer/use-root.d.ts

@@ -0,0 +1,7 @@
+import { CanvasProps } from "../../api/canvas-props";
+import { FromLngLat, MapInstance } from "../generic-map";
+export declare function useRoot(fromLngLat: FromLngLat, map: MapInstance, { frameloop, longitude, latitude, altitude, ...props }: CanvasProps): {
+    onRemove: () => void;
+    useThree: import("zustand").UseBoundStore<import("@react-three/fiber").RootState>;
+    r3m: import("../use-r3m").R3M<MapInstance>;
+};

package/dist/types/core/canvas-overlay/canvas-portal.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Matrix4Tuple } from "three";
+import { CanvasProps } from "../../api/canvas-props";
+import { FromLngLat, MapInstance } from "../generic-map";
+interface CanvasPortalProps extends CanvasProps {
+    setOnRender: (callback: () => (mx: Matrix4Tuple) => void) => void;
+    map: MapInstance;
+    fromLngLat: FromLngLat;
+}
+export declare const CanvasPortal: import("react").NamedExoticComponent<CanvasPortalProps>;
+export {};

package/dist/types/core/canvas-overlay/init-canvas-fc.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Matrix4Tuple } from "three";
+import { CanvasProps } from "../../api/canvas-props";
+import { FromLngLat, MapInstance } from "../generic-map";
+interface InitCanvasFCProps extends CanvasProps {
+    map: MapInstance;
+    setOnRender: (callback: () => (mx: Matrix4Tuple) => void) => void;
+    frameloop?: 'always' | 'demand';
+    fromLngLat: FromLngLat;
+}
+export declare const InitCanvasFC: import("react").NamedExoticComponent<InitCanvasFCProps>;
+export {};

package/dist/types/core/canvas-overlay/init-r3m.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { FromLngLat, MapInstance } from "../generic-map";
+import { Coords } from "../../api/coords";
+interface InitR3MProps extends Coords {
+    map: MapInstance;
+    fromLngLat: FromLngLat;
+}
+/** Initialises the `R3M` hook */
+export declare const InitR3M: import("react").NamedExoticComponent<InitR3MProps>;
+export {};

package/dist/types/core/canvas-overlay/render.d.ts

@@ -0,0 +1 @@
+export type Render = (gl: WebGLRenderingContext, matrix: number[]) => void;

package/dist/types/core/canvas-overlay/sync-camera-fc.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Matrix4Tuple } from "three";
+import { Coords } from "../../api/coords";
+import { MapInstance } from "../generic-map";
+interface SyncCameraFCProps extends Coords {
+    setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void;
+    /** on `useFrame` it will manually render (used by `<Coordinates>`) */
+    manualRender?: boolean;
+    onReady?: () => void;
+    map: MapInstance;
+}
+/** React Component (FC) to sync the Three camera with the map provider */
+export declare const SyncCameraFC: import("react").NamedExoticComponent<SyncCameraFCProps>;
+export {};

package/dist/types/core/coords-to-matrix.d.ts

@@ -1,8 +1,6 @@
 import { FromLngLat } from "./generic-map";
+import { Coords } from "../api/coords";
 /** calculate Matrix4 from coordinates */
-export declare function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {
-    longitude: number;
-    latitude: number;
-    altitude: number;
+export declare function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: Coords & {
     fromLngLat: FromLngLat;
 }): import("three").Matrix4Tuple;

package/dist/types/core/earth-radius.d.ts

@@ -0,0 +1 @@
+export declare const earthRadius = 6378137;

package/dist/types/core/events.d.ts

@@ -0,0 +1,4 @@
+import { Canvas } from "@react-three/fiber";
+type Events = Parameters<typeof Canvas>[0]['events'];
+export declare const events: Events;
+export {};

package/dist/types/core/use-coords-to-matrix.d.ts

@@ -0,0 +1,5 @@
+import { coordsToMatrix } from "./coords-to-matrix";
+type Props = Parameters<typeof coordsToMatrix>[0];
+/** calculate matrix from coordinates */
+export declare function useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat }: Props): import("three").Matrix4Tuple;
+export {};

package/dist/types/core/use-coords.d.ts

@@ -1,5 +1,7 @@
-import { coordsToMatrix } from "./coords-to-matrix";
-type Props = Parameters<typeof coordsToMatrix>[0];
-/** calculate matrix from coordinates */
-export declare function useCoords({ latitude, longitude, altitude, fromLngLat }: Props): import("three").Matrix4Tuple;
-export {};
+import { RootState } from "@react-three/fiber";
+import { UseBoundStore } from 'zustand';
+import { Coords } from "../api/coords";
+export declare function useCoords(): Coords;
+export declare function useSetCoords({ longitude, latitude, altitude }: Coords): void;
+export declare function useSetRootCoords(store: UseBoundStore<RootState>, { longitude, latitude, altitude }: Coords): void;
+export declare function setCoords(store: UseBoundStore<RootState>, coords: Coords): void;

package/dist/types/core/use-r3m.d.ts

@@ -0,0 +1,22 @@
+import { RootState } from "@react-three/fiber";
+import { Matrix4Tuple } from "three";
+import { UseBoundStore } from 'zustand';
+import { FromLngLat, MapInstance } from "./generic-map";
+export interface R3M<T extends MapInstance = MapInstance> {
+    /** Map provider */
+    map: T;
+    /** view projection matrix coming from the map provider */
+    viewProjMx: Matrix4Tuple;
+    fromLngLat: FromLngLat;
+}
+export declare function useR3M<T extends MapInstance>(): R3M<T>;
+/** init `useR3M` hook */
+export declare function useInitR3M<T extends MapInstance>(props: {
+    map: T;
+    fromLngLat: FromLngLat;
+}): void;
+export declare function initR3M<T extends MapInstance>({ store, ...props }: {
+    map: T;
+    fromLngLat: FromLngLat;
+    store: UseBoundStore<RootState>;
+}): R3M<T>;

package/dist/types/mapbox.index.d.ts

@@ -1,5 +1,4 @@
 import type { Map } from 'mapbox-gl';
-export * from './api/canvas-props';
-export * from './api/coordinates';
+export * from './api';
 export * from './mapbox/canvas';
-export declare const useMap: () => Map | undefined;
+export declare const useMap: () => Map;