solid-map-gl 1.11.3 → 1.13.0

package/dist/source/components/Layer3D/index.jsx

@@ -1,5 +1,21 @@
 import { onCleanup, createUniqueId, createSignal, onMount, createContext, useContext, } from "solid-js";
 import { useMapContext } from "../MapProvider";
+const deg2rad = (degrees) => {
+    return (degrees * Math.PI) / 180;
+};
+const latLng2Mercator = (lat, lng, altitude) => {
+    const R = 6378137.0; // earth radius in meters
+    const x = R * deg2rad(lng);
+    const y = R * Math.log(Math.tan(Math.PI / 4 + deg2rad(lat) / 2));
+    return [x, y, altitude];
+};
+const latLng2Cartesian = ({ lat, lng }, altitude = 0) => {
+    const R = 6378137.0; // earth radius in meters
+    const x = R * Math.cos(deg2rad(lat)) * Math.cos(deg2rad(lng));
+    const y = R * Math.cos(deg2rad(lat)) * Math.sin(deg2rad(lng));
+    const z = altitude; // + R * Math.sin(deg2rad(lat));
+    return { x, y, z };
+};
 const LayerContext = createContext();
 export const useScene = () => useContext(LayerContext);
 export const Layer3D = (props) => {
@@ -38,20 +54,37 @@ export const Layer3D = (props) => {
                     const engine = new BABYLON.Engine(gl, true, {
                         useHighPrecisionMatrix: true,
                     }, true);
+                    // this.index = 0;
                     this.scene = new BABYLON.Scene(engine);
                     this.scene.autoClear = false;
-                    this.scene.autoClearDepthAndStencil = false;
+                    // this.scene.autoClearDepthAndStencil = false;
                     // this.scene.detachControl();
                     this.scene.preventDefaultOnPointerDown = false;
                     this.scene.preventDefaultOnPointerUp = false;
-                    this.scene.beforeRender = () => engine.wipeCaches(true);
-                    this.scene.activeCamera = new BABYLON.UniversalCamera("Camera", BABYLON.Vector3.Zero(), this.scene);
+                    // this.scene.beforeRender = () => engine.wipeCaches(true);
+                    const camera = new BABYLON.UniversalCamera("Camera", BABYLON.Vector3.Zero());
+                    camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
+                    camera.inertia = 0;
+                    // this.scene.activeCamera.setTarget(new BABYLON.Vector3(-1, 0, 0));
+                    // this.scene.activeCamera.rotationQuaternion =
+                    //   BABYLON.Quaternion.Identity();
+                    // this.scene.activeCamera.updateUpVectorFromRotation = true;
+                    // this.scene.activeCamera.noRotationConstraint = true;
+                    // this.scene.activeCamera.inputs.addMouseWheel();
                     // this.scene.activeCamera.setTarget(BABYLON.Vector3.Zero());
-                    // this.camera.inputs.addMouseWheel()
-                    // this.scene.activeCamera.attachControl(gl, true);
+                    // setTimeout(() => {
+                    //   this.scene.activeCamera.setPosition(
+                    //     new BABYLON.Vector3(100, 100, 100),
+                    //   );
+                    // }, 2000);
+                    // this.scene.activeCamera.attachControl(gl.canvas, true);
                     this.scene.ambientColor = new BABYLON.Color3(1, 1, 1);
                     if (props.defaultLight)
                         new BABYLON.HemisphericLight("Light", new BABYLON.Vector3(100, 10, 0), this.scene);
+                    // this.scene.root_node = new BABYLON.TransformNode("rootNode");
+                    // this.scene.root_node.lookAt(BABYLON.Vector3.Down());
+                    // this.scene.root_node.addRotation(0, 0, Math.PI / 2);
+                    // const axis = new BABYLON.AxesViewer(this.scene, 100);
                 }
                 else {
                     this.camera = new THREE.Camera();
@@ -74,12 +107,194 @@ export const Layer3D = (props) => {
             },
             render(gl, matrix) {
                 if (props.babylon) {
-                    this.scene.activeCamera.freezeProjectionMatrix(props.disableProjectionMatrix
-                        ? BABYLON.Matrix.FromArray(matrix)
-                        : worldMatrix.multiply(BABYLON.Matrix.FromArray(matrix)));
-                    // const { x, y, z } = this.map.getFreeCameraOptions().position;
-                    // this.scene.activeCamera.setPosition(new BABYLON.Vector3(x, y, z));
-                    // console.log(this.scene.activeCamera);
+                    this.scene.activeCamera.freezeProjectionMatrix(
+                    // props.disableProjectionMatrix
+                    //   ? BABYLON.Matrix.FromArray(matrix)
+                    worldMatrix.multiply(BABYLON.Matrix.FromArray(matrix)));
+                    // this.scene.activeCamera.position =
+                    //   BABYLON.Vector3.TransformCoordinates(
+                    //     new BABYLON.Vector3(),
+                    //     worldMatrix.multiply(BABYLON.Matrix.FromArray(matrix)).invert(),
+                    //   );
+                    // this.scene.activeCamera.rotation.z = matrix[0];
+                    // this.scene.activeCamera.rotation.x = matrix[1];
+                    // this.scene.activeCamera.rotation.y = matrix[2];
+                    // console.log(this.scene.activeCamera.getProjectionMatrix(), matrix);
+                    // const m = matrix;
+                    // const transform = BABYLON.Matrix.FromArray(matrix);
+                    // console.log(transform);
+                    //
+                    // const center = this.map.getCenter();
+                    // const zoom = this.map.getZoom();
+                    // const scale = Math.pow(2, zoom);
+                    // const centerX = center.lng * scale;
+                    // const centerZ = center.lat * scale;
+                    // this.scene.activeCamera.position.x = centerX;
+                    // this.scene.activeCamera.position.z = centerZ;
+                    // this.scene.activeCamera.getWorldMatrix().copyFrom(transform);
+                    const pitch = this.map.getPitch() * (Math.PI / 180);
+                    const bearing = this.map.getBearing() * (Math.PI / 180);
+                    // this.scene.activeCamera.rotation.x = Math.asin(pitch);
+                    // this.scene.activeCamera.rotation.y = Math.atan(bearing / pitch);
+                    // this.scene.activeCamera.rotation.z = -bearing;
+                    // this.scene.activeCamera
+                    //   .getWorldMatrix()
+                    //   .invertToRef(this.scene.activeCamera.getViewMatrix());
+                    // const cameraMatrix = BABYLON.Matrix.FromArray(matrix); //.invert();
+                    // const scaling = BABYLON.Vector3.Zero(),
+                    //   rotation = BABYLON.Vector3.Zero(),
+                    //   transform = BABYLON.Vector3.Zero();
+                    // cameraMatrix.decompose(scaling, rotation, transform);
+                    // const scaling2 = BABYLON.Vector3.Zero(),
+                    //   rotation2 = BABYLON.Vector3.Zero(),
+                    //   transform2 = BABYLON.Vector3.Zero();
+                    // worldMatrix.decompose(scaling2, rotation2, transform2);
+                    // const lng2 =
+                    //   props.origin[0] -
+                    //   this.map.getFreeCameraOptions().position.toLngLat().lng;
+                    // const lat2 =
+                    //   props.origin[1] -
+                    //   this.map.getFreeCameraOptions().position.toLngLat().lat;
+                    //
+                    // const pos = this.map.getFreeCameraOptions().position.toLngLat();
+                    // const orient = this.map.getFreeCameraOptions().orientation;
+                    // const camPos = latLng2Cartesian(
+                    //   this.map.getFreeCameraOptions().position.toLngLat(),
+                    //   this.map.getFreeCameraOptions().position.toAltitude(),
+                    // );
+                    // const orgPos = latLng2Cartesian({
+                    //   lng: props.origin[0],
+                    //   lat: props.origin[1],
+                    // });
+                    // const o = this.map.getFreeCameraOptions().orientation;
+                    // const orient = latLng2Cartesian(
+                    //   new window.MapLib.MercatorCoordinate(
+                    //     ...this.map.getFreeCameraOptions().orientation,
+                    //   ).toLngLat(),
+                    // );
+                    // console
+                    //   .log
+                    // this.map.getFreeCameraOptions().orientation,
+                    // this.map.getFreeCameraOptions().position.toLngLat(),
+                    //   orgX,
+                    //   camX,
+                    // camPos,
+                    // orgPos,
+                    // x,
+                    // this.scene.activeCamera.minZ,
+                    // this.scene.activeCamera.maxZ,
+                    // this.map.getFreeCameraOptions(),
+                    // this.map.getFreeCameraOptions().position.toAltitude(),
+                    // camPos.z,
+                    // orgPos.z,
+                    // camPos.z - orgPos.z,
+                    // this.scene.activeCamera.rotationQuaternion,
+                    // matrix,
+                    // camPos.z - orgPos.z,
+                    // camPos.x - orgPos.x,
+                    // camPos.y - orgPos.y,
+                    // camPos.z - orgPos.z,
+                    // this.index,
+                    // orient,
+                    // orient.x - orgPos.x,
+                    // new BABYLON.Vector3(...orient),
+                    // camY,
+                    // camZ,
+                    // pos.lng,
+                    // x2,
+                    // y2,
+                    // z2,
+                    // transform,
+                    // matrix,
+                    // cameraMatrix._m,
+                    // cameraMatrix,
+                    // new mapboxgl.MercatorCoordinate(
+                    //   transform.x,
+                    //   transform.y,
+                    //   transform.z,
+                    // ).toLngLat(),
+                    // worldOriginMercator.toLngLat(),
+                    // this.map.getFreeCameraOptions().position.toLngLat(),
+                    // this.map.getFreeCameraOptions().orientation,
+                    // BABYLON.Quaternion.FromArray(
+                    //   this.map.getFreeCameraOptions().orientation,
+                    // ),
+                    // this.scene.activeCamera.rotationQuaternion,
+                    // BABYLON.Vector3.FromArray(
+                    //   this.map.getFreeCameraOptions().orientation,
+                    // ),
+                    // ();
+                    // this.scene.activeCamera.freezeProjectionMatrix(
+                    //   props.disableProjectionMatrix
+                    //     ? BABYLON.Matrix.FromArray(matrix)
+                    //     : worldMatrix.multiply(BABYLON.Matrix.FromArray(matrix)),
+                    // );
+                    //
+                    // const { x, y } = this.map.project(
+                    //   new mapboxgl.MercatorCoordinate(pos.x, pos.y, pos.z).toLngLat(),
+                    // );
+                    // this.scene.activeCamera.position.y = 0; //-(camPos.x - orgPos.x);
+                    // this.scene.activeCamera.position.x = 0; //-(camPos.y - orgPos.y);
+                    // this.scene.activeCamera.position.z = -camPos.z; // - orgPos.z;
+                    // console.log(this.scene.activeCamera.position);
+                    // const [x, y, z, w] = this.map.getFreeCameraOptions().orientation;
+                    // let rotation_y = Math.atan(z / x);
+                    // if (x < 0) rotation_y += Math.PI;
+                    // rotation_y = Math.PI / 2 - rotation_y;
+                    // const rotation_x = Math.asin(-y);
+                    // const camera_up_before_rotatez = new BABYLON.Vector3(
+                    //   -Math.cos(rotation_y),
+                    //   0,
+                    //   Math.sin(rotation_y),
+                    // );
+                    // const rotation_z = Math.acos(
+                    //   camera_up.x * camera_up_before_rotatez.x +
+                    //     camera_up.y * camera_up_before_rotatez.y +
+                    //     camera_up.z * camera_up_before_rotatez.z,
+                    // );
+                    // rotation_z = Math.PI / 2 - rotation_z;
+                    // if (camera_up.y < 0) rotation_z = Math.PI - rotation_z;
+                    //
+                    // this.scene.activeCamera.rotation.x = rotation_x;
+                    // this.scene.activeCamera.rotation.y = rotation_y;
+                    // this.scene.activeCamera.rotationQuaternion =
+                    //   // BABYLON.Quaternion.Identity();
+                    //   // BABYLON.Quaternion.FromEulerAngles(1, 0, 0);
+                    //   BABYLON.Quaternion.FromArray([-x, y, -z, w]);
+                    // this.scene.activeCamera.alpha = -z;
+                    // this.scene.activeCamera.alpha = -z;
+                    // this.scene.activeCamera.radius = x; //Math.PI / 2 + this.index;
+                    // this.scene.activeCamera.radius = y;
+                    // this.index += 0.001;
+                    // BABYLON.Quaternion.RotationYawPitchRoll(-1, 1, -1);
+                    // BABYLON.Vector3.Zero();
+                    // BABYLON.Vector3.FromArray(
+                    //   this.map.getFreeCameraOptions().orientation,
+                    // );
+                    // this.scene.activeCamera.setTarget(
+                    //   BABYLON.Vector3.Zero(),
+                    //   // new BABYLON.Vector3(
+                    //   //   orient.x - orgPos.x,
+                    //   //   0, // orient.y - orgPos.y,
+                    //   //   0, // orient.z - orgPos.z,
+                    //   // ),
+                    // );
+                    // const o2 = this.map.project(
+                    //   new mapboxgl.MercatorCoordinate(
+                    //     orient[0],
+                    //     orient[1],
+                    //     orient[2],
+                    //   ).toLngLat(),
+                    // );
+                    // this.camera.setTarget(new BABYLON.Vector3(o2.x, o2.y, o2.z));
+                    // console.log(
+                    //   this.map.getCamera(),
+                    //   this.map.project(
+                    //     new mapboxgl.MercatorCoordinate(pos.x, pos.y, pos.z).toLngLat(),
+                    //   ),
+                    //   this.map.getFreeCameraOptions().orientation,
+                    // );
+                    // console.log(this.scene.activeCamera.position);
                     // this.camera.position = BABYLON.Vector3.TransformCoordinates(
                     //   new BABYLON.Vector3(x, y, z),
                     //   this.scene.activeCamera.getProjectionMatrix().clone().invert(),

package/dist/source/components/MapGL/index.jsx

@@ -1,4 +1,5 @@
 import { createSignal, createEffect, onMount, onCleanup, on, } from "solid-js";
+import "mapbox-gl/dist/mapbox-gl.css";
 import { MapProvider } from "../MapProvider";
 import { mapEvents } from "../../events";
 import { vectorStyleList } from "../../mapStyles";

package/dist/types/components/Draw/drawingStyles.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    id: string;
+    type: string;
+    filter: (string | string[])[];
+    layout: {
+        "text-field": string[];
+        "text-anchor": string[];
+        "text-offset": (string | string[] | number[])[];
+        "text-size": number;
+        "text-allow-overlap": boolean;
+        "text-ignore-placement": boolean;
+    };
+    paint: {
+        "text-halo-color": string;
+        "text-halo-width": number;
+        "text-halo-blur": number;
+        "text-color": string;
+    };
+}[];
+export default _default;

package/dist/types/components/Draw/index.d.ts

@@ -1,14 +1,16 @@
-import { VoidComponent } from 'solid-js';
-import type { drawEventTypes } from '../../events';
+import { VoidComponent } from "solid-js";
+import type { drawEventTypes } from "../../events";
 type Props = {
     /** Draw Library */
     lib: any;
     /** Draw Options */
     options?: object;
     /** Draw Control Position */
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     /** Draw Control Instance */
     getInstance?: (object: any) => void;
+    showLength?: boolean;
+    showArea?: boolean;
 } & drawEventTypes;
 export declare const Draw: VoidComponent<Props>;
 export {};

package/dist/types/components/Draw/modes/line_string.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/types/components/Draw/modes/multi_point.d.ts

@@ -0,0 +1,2 @@
+declare const MultiPointMode: {};
+export default MultiPointMode;

package/dist/types/components/Draw/modes/point.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/types/components/Draw/modes/polygon.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/types/components/Draw/modes/radius.d.ts

@@ -0,0 +1,2 @@
+declare const RadiusMode: any;
+export default RadiusMode;

package/dist/types/components/Draw/modes/rectangle.d.ts

@@ -0,0 +1,2 @@
+declare const RectangleMode: any;
+export default RectangleMode;

package/dist/types/components/Draw/modes/rectangle_assisted.d.ts

@@ -0,0 +1,18 @@
+declare const RectangleAssistedMode: {
+    onSetup: (opts: any) => {
+        rectangle: any;
+        currentVertexPosition: number;
+    };
+    onTap: (state: any, e: any) => void;
+    onClick: (state: any, e: any) => any;
+    onMouseMove: (state: any, e: any) => void;
+    deegrees2meters(px: any): number[];
+    meters2degress(px: any): number[];
+    calculateOrientedAnglePolygon: (state: any) => void;
+    calculatepXY3: (state: any, e: any, tmp: any) => any;
+    onKeyUp: (state: any, e: any) => any;
+    onStop: (state: any) => void;
+    toDisplayFeatures: (state: any, geojson: any, display: any) => any;
+    onTrash: (state: any) => void;
+};
+export default RectangleAssistedMode;

package/dist/types/components/MapGL/index.d.ts

@@ -1,4 +1,5 @@
 import { Component } from "solid-js";
+import "mapbox-gl/dist/mapbox-gl.css";
 import type { mapEventTypes } from "../../events";
 import type mapboxgl from "mapbox-gl";
 import type { MapboxOptions } from "mapbox-gl/src/ui/map";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.11.3",
+  "version": "1.13.0",
   "name": "solid-map-gl",
   "description": "Solid Component Library for Mapbox GL JS",
   "info": "Solid Component Library for Mapbox GL JS. Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL. This project is intended to be as close as possible to the Mapbox GL JS API.",
@@ -54,19 +54,19 @@
   ],
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
-    "@solidjs/testing-library": "^0.8.8",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@types/mapbox-gl": "^3.1.0",
-    "@vitest/coverage-v8": "^1.6.0",
-    "jsdom": "^24.1.0",
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@types/mapbox-gl": "^3.4.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "jsdom": "^26.1.0",
     "jsdom-worker": "^0.3.0",
-    "rollup": "^4.18.0",
-    "rollup-plugin-import-css": "^3.5.0",
-    "rollup-preset-solid": "^2.0.1",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11",
-    "vite-plugin-solid": "^2.10.2",
-    "vitest": "^1.6.0"
+    "rollup": "^4.47.1",
+    "rollup-plugin-import-css": "^4.0.2",
+    "rollup-preset-solid": "^3.0.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.3",
+    "vite-plugin-solid": "^2.11.8",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@babylonjs/core": "^6.24.0",
@@ -81,5 +81,12 @@
     "three": {
       "optional": true
     }
+  },
+  "dependencies": {
+    "@turf/area": "^7.2.0",
+    "@turf/center-of-mass": "^7.2.0",
+    "@turf/centroid": "^7.2.0",
+    "@turf/length": "^7.2.0",
+    "@turf/midpoint": "^7.2.0"
   }
 }