react-three-map 0.4.3 → 0.5.0

package/dist/maplibre/es/main9.mjs

@@ -1,23 +1,18 @@
-import { syncCamera } from "./main6.mjs";
-import { useFunction } from "./main12.mjs";
-function useRender(origin, r3mRef, frameloop) {
-  const render = useFunction((_gl, mapCamMx) => {
-    const r3m = r3mRef.current;
-    if (!r3m.state || !r3m.map)
-      return;
-    const camera = r3m.state.camera;
-    const gl = r3m.state.gl;
-    const advance = r3m.state.advance;
-    r3m.mapCamMx = mapCamMx;
-    syncCamera(camera, origin, mapCamMx);
-    gl.resetState();
-    advance(Date.now() * 1e-3, true);
-    if (frameloop === "always")
-      r3m.map.triggerRepaint();
-  });
-  return render;
+import { Quaternion, Euler, Vector3, Matrix4 } from "three";
+const quat = new Quaternion();
+const euler = new Euler();
+const pos = new Vector3();
+const scale = new Vector3();
+const m4 = new Matrix4();
+function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }) {
+  const center = fromLngLat([longitude, latitude], altitude);
+  const scaleUnit = center.meterInMercatorCoordinateUnits();
+  pos.set(center.x, center.y, center.z || 0);
+  scale.set(scaleUnit, -scaleUnit, scaleUnit);
+  quat.setFromEuler(euler.set(-Math.PI * 0.5, 0, 0));
+  return m4.compose(pos, quat, scale).toArray();
 }
 export {
-  useRender
+  coordsToMatrix
 };
 //# sourceMappingURL=main9.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main9.mjs","sources":["../../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n  origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n  const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n    const r3m = r3mRef.current;\n    if (!r3m.state || !r3m.map) return;\n    const camera = r3m.state.camera;\n    const gl = r3m.state.gl;\n    const advance = r3m.state.advance;\n    r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n    syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (frameloop === 'always') r3m.map.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AACtB,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}
+{"version":3,"file":"main9.mjs","sources":["../../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}

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

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

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",