solid-map-gl 1.11.2 → 1.12.0

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

@@ -1,24 +1,44 @@
-import { onCleanup, createUniqueId, onMount } from 'solid-js';
-import { useMapContext } from '../MapProvider';
+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) => {
     const [ctx] = useMapContext();
+    const [scene, setScene] = createSignal(null);
     onMount(async () => {
         props.id = props.id || createUniqueId();
-        const worldOriginMercator = window.MapLib.MercatorCoordinate.fromLngLat(props.origin ? [props.origin[0], props.origin[1]] : [0, 0], props.origin ? props.origin[2] : 0);
+        const worldOriginMercator = window.MapLib.MercatorCoordinate.fromLngLat([props.origin[0] || 0, props.origin[1] || 0], props.origin[2] || 0);
         const worldScale = worldOriginMercator.meterInMercatorCoordinateUnits();
+        const { x, y, z } = worldOriginMercator;
         let worldMatrix = null;
         let BABYLON = null;
         let THREE = null;
         if (props.babylon) {
-            BABYLON = await import('@babylonjs/core');
-            worldMatrix = BABYLON.Matrix.Compose(new BABYLON.Vector3(worldScale, worldScale, worldScale), BABYLON.Quaternion.FromEulerAngles(Math.PI / 2, 0, 0), new BABYLON.Vector3(worldOriginMercator.x, worldOriginMercator.y, worldOriginMercator.z));
+            BABYLON = await import("@babylonjs/core");
+            worldMatrix = BABYLON.Matrix.Compose(new BABYLON.Vector3(worldScale, worldScale, worldScale), BABYLON.Quaternion.FromEulerAngles(Math.PI / 2, 0, 0), new BABYLON.Vector3(x, y, z));
         }
         else {
-            THREE = await import('three');
+            THREE = await import("three");
             worldMatrix = {
-                translateX: worldOriginMercator.x,
-                translateY: worldOriginMercator.y,
-                translateZ: worldOriginMercator.z,
+                translateX: x,
+                translateY: y,
+                translateZ: z,
                 rotateX: Math.PI / 2,
                 rotateY: 0,
                 rotateZ: 0,
@@ -27,20 +47,44 @@ export const Layer3D = (props) => {
         }
         ctx.map.addLayer({
             id: props.id,
-            type: 'custom',
-            renderingMode: '3d',
+            type: "custom",
+            renderingMode: "3d",
             onAdd(map, gl) {
                 if (props.babylon) {
                     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.detachControl();
-                    this.scene.beforeRender = () => engine.wipeCaches(true);
-                    this.scene.activeCamera = new BABYLON.Camera('Camera', new BABYLON.Vector3(), this.scene);
+                    // this.scene.autoClearDepthAndStencil = false;
+                    // this.scene.detachControl();
+                    this.scene.preventDefaultOnPointerDown = false;
+                    this.scene.preventDefaultOnPointerUp = false;
+                    // 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());
+                    // 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(1, 0, 0), this.scene);
+                        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();
@@ -59,13 +103,202 @@ export const Layer3D = (props) => {
                 }
                 this.map = map;
                 props.onAdd && props.onAdd(this.scene, this.map, gl);
+                setScene(this.scene);
             },
             render(gl, matrix) {
                 if (props.babylon) {
-                    this.scene.activeCamera.freezeProjectionMatrix(worldMatrix.multiply(BABYLON.Matrix.FromArray(matrix)));
-                    const { x, y, z } = this.map.getFreeCameraOptions().position;
-                    this.scene.activeCamera.position =
-                        BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(x, y, z), this.scene.activeCamera.getProjectionMatrix().clone().invert());
+                    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(),
+                    // );
                     this.scene.render(false);
                 }
                 else {
@@ -86,10 +319,12 @@ export const Layer3D = (props) => {
                 props.onRender && props.onRender(gl, matrix);
                 ctx.map.triggerRepaint();
             },
-        });
+        }, props.beforeId);
     });
     onCleanup(() => {
         ctx.map.getLayer(props.id) && ctx.map.removeLayer(props.id);
     });
-    return null;
+    return (<LayerContext.Provider value={scene}>
+      {scene() && props.children}
+    </LayerContext.Provider>);
 };

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

@@ -1,12 +1,12 @@
-import { onCleanup, createEffect, splitProps } from 'solid-js';
-import { useMapContext } from '../MapProvider';
+import { onCleanup, createEffect, splitProps } from "solid-js";
+import { useMapContext } from "../MapProvider";
 export const Popup = (props) => {
     if (!props.trackPointer && !props.lngLat)
-        throw new Error('Popup - lngLat or trackPointer is required');
+        throw new Error("Popup - lngLat or trackPointer is required");
     const [update, create] = splitProps(props, [
-        'lngLat',
-        'children',
-        'trackPointer',
+        "lngLat",
+        "children",
+        "trackPointer",
     ]);
     const [ctx] = useMapContext();
     let popup;
@@ -15,20 +15,20 @@ export const Popup = (props) => {
         if (!ctx.map)
             return;
         popup?.remove();
-        popup = new window.MAPLIB.Popup({
+        popup = new window.MapLib.Popup({
             closeOnClick: false,
             focusAfterOpen: false,
             ...create.options,
         })
-            .on('open', () => create.onOpen?.())
-            .on('close', () => create.onClose?.())
+            .on("open", () => create.onOpen?.())
+            .on("close", () => create.onClose?.())
             .addTo(ctx.map);
         // Update Position
         createEffect(() => update.trackPointer
             ? popup.trackPointer()
             : popup.setLngLat(update.lngLat));
         // Update Content
-        createEffect(() => typeof update.children === 'string'
+        createEffect(() => typeof update.children === "string"
             ? popup.setHTML(update.children)
             : popup.setDOMContent(update.children));
     });

package/dist/source/index.jsx

@@ -1,14 +1,14 @@
-export { MapGL as default } from './components/MapGL';
-export { MapProvider, useMapContext } from './components/MapProvider';
-export { Source, useSourceId } from './components/Source';
-export { Layer } from './components/Layer';
-export { Layer3D } from './components/Layer3D';
-export { Atmosphere } from './components/Atmosphere';
-export { Terrain } from './components/Terrain';
-export { Control } from './components/Control';
-export { Marker } from './components/Marker';
-export { Popup } from './components/Popup';
-export { MGL_Image as Image, patternList } from './components/Image';
-export { Camera } from './components/Camera';
-export { Light } from './components/Light';
-export { Draw } from './components/Draw';
+export { MapGL as default } from "./components/MapGL";
+export { MapProvider, useMapContext } from "./components/MapProvider";
+export { Source, useSourceId } from "./components/Source";
+export { Layer } from "./components/Layer";
+export { Layer3D, useScene } from "./components/Layer3D";
+export { Atmosphere } from "./components/Atmosphere";
+export { Terrain } from "./components/Terrain";
+export { Control } from "./components/Control";
+export { Marker } from "./components/Marker";
+export { Popup } from "./components/Popup";
+export { MGL_Image as Image, patternList } from "./components/Image";
+export { Camera } from "./components/Camera";
+export { Light } from "./components/Light";
+export { Draw } from "./components/Draw";

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/index.d.ts

@@ -0,0 +1,6 @@
+import draw_point from "./point";
+import draw_polygon from "./polygon";
+import draw_line_string from "./line_string";
+import draw_radius from "./radius";
+import draw_rectangle from "./rectangle";
+export { draw_point, draw_polygon, draw_line_string, draw_radius, draw_rectangle, };

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/Layer3D/index.d.ts

@@ -1,4 +1,4 @@
-import { VoidComponent } from 'solid-js';
+import { Component, JSX } from "solid-js";
 declare global {
     interface Window {
         BABYLON?: any;
@@ -12,6 +12,11 @@ type Props = {
     babylon?: boolean;
     onAdd?: (scene: any, map: any, gl: any) => void;
     onRender?: (gl: any, matrix: any) => void;
+    children?: JSX.Element | JSX.Element[];
+    /** A string that specifies the type of layer before which the current layer should be inserted. */
+    beforeId?: string;
+    disableProjectionMatrix?: boolean;
 };
-export declare const Layer3D: VoidComponent<Props>;
+export declare const useScene: () => any;
+export declare const Layer3D: Component<Props>;
 export {};

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

@@ -1,5 +1,5 @@
-import { Component } from 'solid-js';
-import type { PopupOptions, LngLatLike } from 'mapbox-gl';
+import { Component } from "solid-js";
+import type { PopupOptions, LngLatLike } from "mapbox-gl";
 type Props = {
     /** Options for configuring the popup */
     options?: PopupOptions;

package/dist/types/index.d.ts

@@ -1,16 +1,16 @@
-export { MapGL as default } from './components/MapGL';
-export { MapProvider, useMapContext } from './components/MapProvider';
-export { Source, useSourceId } from './components/Source';
-export { Layer } from './components/Layer';
-export { Layer3D } from './components/Layer3D';
-export { Atmosphere } from './components/Atmosphere';
-export { Terrain } from './components/Terrain';
-export { Control } from './components/Control';
-export { Marker } from './components/Marker';
-export { Popup } from './components/Popup';
-export { MGL_Image as Image, patternList } from './components/Image';
-export { Camera } from './components/Camera';
-export { Light } from './components/Light';
-export { Draw } from './components/Draw';
-export type { Viewport } from './components/MapGL';
-export type { Color } from './components/Image';
+export { MapGL as default } from "./components/MapGL";
+export { MapProvider, useMapContext } from "./components/MapProvider";
+export { Source, useSourceId } from "./components/Source";
+export { Layer } from "./components/Layer";
+export { Layer3D, useScene } from "./components/Layer3D";
+export { Atmosphere } from "./components/Atmosphere";
+export { Terrain } from "./components/Terrain";
+export { Control } from "./components/Control";
+export { Marker } from "./components/Marker";
+export { Popup } from "./components/Popup";
+export { MGL_Image as Image, patternList } from "./components/Image";
+export { Camera } from "./components/Camera";
+export { Light } from "./components/Light";
+export { Draw } from "./components/Draw";
+export type { Viewport } from "./components/MapGL";
+export type { Color } from "./components/Image";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.11.2",
+  "version": "1.12.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.6",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@types/mapbox-gl": "^3.1.0",
-    "@vitest/coverage-v8": "^1.3.1",
-    "jsdom": "^24.0.0",
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@types/mapbox-gl": "^3.4.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "jsdom": "^26.1.0",
     "jsdom-worker": "^0.3.0",
-    "rollup": "^4.12.1",
-    "rollup-plugin-import-css": "^3.5.0",
-    "rollup-preset-solid": "^2.0.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5",
-    "vite-plugin-solid": "^2.10.1",
-    "vitest": "^1.3.1"
+    "rollup": "^4.46.1",
+    "rollup-plugin-import-css": "^4.0.1",
+    "rollup-preset-solid": "^3.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-solid": "^2.11.7",
+    "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"
   }
 }