solid-map-gl 1.12.0 → 2.0.0

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

@@ -1,330 +0,0 @@
-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[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(x, y, z));
-        }
-        else {
-            THREE = await import("three");
-            worldMatrix = {
-                translateX: x,
-                translateY: y,
-                translateZ: z,
-                rotateX: Math.PI / 2,
-                rotateY: 0,
-                rotateZ: 0,
-                scale: worldScale,
-            };
-        }
-        ctx.map.addLayer({
-            id: props.id,
-            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.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(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();
-                    this.scene = new THREE.Scene();
-                    if (props.defaultLight) {
-                        this.light = new THREE.DirectionalLight(0xffffff);
-                        this.light.position.set(100, 0, 0).normalize();
-                        this.scene.add(this.light);
-                    }
-                    this.renderer = new THREE.WebGLRenderer({
-                        canvas: map.getCanvas(),
-                        context: gl,
-                        antialias: true,
-                    });
-                    this.renderer.autoClear = false;
-                }
-                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(
-                    // 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 {
-                    const rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), worldMatrix.rotateX);
-                    const rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), worldMatrix.rotateY);
-                    const rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), worldMatrix.rotateZ);
-                    const m = new THREE.Matrix4().fromArray(matrix);
-                    const l = new THREE.Matrix4()
-                        .makeTranslation(worldMatrix.translateX, worldMatrix.translateY, worldMatrix.translateZ)
-                        .scale(new THREE.Vector3(worldMatrix.scale, -worldMatrix.scale, worldMatrix.scale))
-                        .multiply(rotationX)
-                        .multiply(rotationY)
-                        .multiply(rotationZ);
-                    this.camera.projectionMatrix = m.multiply(l);
-                    this.renderer.resetState();
-                    this.renderer.render(this.scene, this.camera);
-                }
-                props.onRender && props.onRender(gl, matrix);
-                ctx.map.triggerRepaint();
-            },
-        }, props.beforeId);
-    });
-    onCleanup(() => {
-        ctx.map.getLayer(props.id) && ctx.map.removeLayer(props.id);
-    });
-    return (<LayerContext.Provider value={scene}>
-      {scene() && props.children}
-    </LayerContext.Provider>);
-};

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

@@ -1,10 +0,0 @@
-import { onCleanup, createEffect } from 'solid-js';
-import { useMapContext } from '../MapProvider';
-export const Light = (props) => {
-    const [ctx] = useMapContext();
-    // Add or Update Light Layer
-    createEffect(() => ctx.map.setLight(props.style || {}));
-    // Remove Light Layer
-    onCleanup(() => ctx.map?.setLight(null));
-    return null;
-};

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

@@ -1,272 +0,0 @@
-import { createSignal, createEffect, onMount, onCleanup, on, } from "solid-js";
-import { MapProvider } from "../MapProvider";
-import { mapEvents } from "../../events";
-import { vectorStyleList } from "../../mapStyles";
-/** Creates a new Map Container */
-export const MapGL = (props) => {
-    let map;
-    let mapRef;
-    let resizeObserver;
-    let mutationObserver;
-    const [mapLoaded, setMapLoaded] = createSignal(null);
-    const [darkMode, setDarkMode] = createSignal((typeof window !== "undefined" &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches) ||
-        (typeof document !== "undefined" &&
-            document.body.classList.contains("dark")));
-    const [internal, setInternal] = createSignal(false);
-    const debug = (text, value) => (props.debug || props.debugEvents) &&
-        console.debug("%c[MapGL]", "color: #0ea5e9", text, value || "");
-    const getStyle = (light, dark) => {
-        const style = darkMode() && dark ? dark : light;
-        return typeof style === "string" || style instanceof String
-            ? style
-                ?.split(":")
-                .reduce((p, c) => p && p[c], vectorStyleList)
-                ?.replace("{apikey}", 
-            //@ts-ignore
-            props.apikey || import.meta.env.VITE_VECTOR_API_KEY) || style
-            : style;
-    };
-    onMount(async () => {
-        let mapLib = props.mapLib || (await import("mapbox-gl"));
-        if (!mapLib.Map)
-            mapLib = window["maplibregl"] || window["mapboxgl"];
-        if (typeof mapLib.supported === "function" && !mapLib.supported())
-            throw new Error("Mapbox GL not supported");
-        debug(`Map (v${mapLib.version}) loading...`);
-        map = new mapLib.Map({
-            accessToken: 
-            //@ts-ignore
-            props.options?.accessToken || import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
-            interactive: props.options?.interactive || !!props.onViewportChange,
-            ...props.options,
-            ...props.viewport,
-            projection: props.options?.projection,
-            container: mapRef,
-            style: getStyle(props.options?.style, props.darkStyle),
-            fitBoundsOptions: { padding: props.viewport?.padding },
-        });
-        map.debug = props.debug;
-        map.debugEvents = props.debugEvents;
-        map.sourceIdList = [];
-        map.layerIdList = [];
-        window.MapLib = mapLib;
-        // Hook up events
-        mapEvents.forEach((item) => {
-            const prop = props[item];
-            if (prop) {
-                const event = item.slice(2).toLowerCase();
-                if (typeof prop === "function") {
-                    map.on(event, (evt) => {
-                        setTimeout(() => {
-                            if (evt.clickOnLayer)
-                                return;
-                            prop(evt);
-                            props.debugEvents && debug(`Map '${event}' event:`, evt);
-                        }, 0);
-                    });
-                }
-                else {
-                    Object.keys(prop).forEach((layerId) => {
-                        map.on(event, layerId, (evt) => {
-                            setTimeout(() => {
-                                if (evt.clickOnLayer)
-                                    return;
-                                prop[layerId](evt);
-                                props.debugEvents &&
-                                    debug(`Map '${event}' event on '${layerId}':`, evt);
-                            }, 0);
-                        });
-                    });
-                }
-            }
-        });
-        map.once("load", () => {
-            setMapLoaded(map);
-            debug("Map loaded");
-            // Handle User Interaction
-            ["mousedown", "touchstart", "wheel"].forEach((event) => map.on(event, (evt) => !evt.rotate && props.onUserInteraction?.(true)));
-            ["moveend", "mouseup", "touchend"].forEach((event) => map.on(event, (evt) => !evt.rotate && props.onUserInteraction?.(false)));
-            // Listen to dark theme changes
-            const darkTheme = typeof window !== "undefined" &&
-                window?.matchMedia("(prefers-color-scheme: dark)");
-            darkTheme?.addEventListener("change", () => {
-                setDarkMode(darkTheme.matches);
-                debug("Set dark theme to:", darkTheme.matches?.toString());
-            });
-            mutationObserver = new MutationObserver(() => {
-                const darkTheme = document.body.classList.contains("dark");
-                setDarkMode(darkTheme);
-                debug("Set theme to:", darkTheme);
-            });
-            mutationObserver.observe(document.body, { attributes: true });
-            // Listen to map container size changes
-            if (!props.disableResize) {
-                resizeObserver = new ResizeObserver(() => {
-                    setTimeout(() => {
-                        map?.resize();
-                    }, 0);
-                    debug("Map resized");
-                });
-                resizeObserver.observe(mapRef);
-            }
-            // Update Configuration
-            createEffect(() => {
-                for (const key in props.config) {
-                    if (!key || key === "id")
-                        continue;
-                    const id = props.config?.id || "basemap";
-                    const value = props.config[key];
-                    //@ts-ignore
-                    map?.setConfigProperty(id, key, value);
-                    debug(`Set Config (${id}:${key}) to:`, value);
-                }
-            });
-            // Update Viewport
-            map.on("move", (event) => {
-                const viewport = {
-                    ...props.viewport,
-                    id: props.id,
-                    point: {
-                        x: event.originalEvent?.x,
-                        y: event.originalEvent?.y,
-                    },
-                    center: props.viewport?.center?.lat
-                        ? map.getCenter()
-                        : [map.getCenter().lng, map.getCenter().lat],
-                    zoom: map.getZoom(),
-                    pitch: map.getPitch(),
-                    bearing: map.getBearing(),
-                    inTransit: true,
-                    bounds: null,
-                    //   !internal()
-                    //     ? props.viewport?.center?.lat
-                    //       ? map.getBounds()
-                    //       : [
-                    //           [
-                    //             map.getBounds().getNorthEast().lng,
-                    //             map.getBounds().getNorthEast().lat,
-                    //           ],
-                    //           [
-                    //             map.getBounds().getSouthWest().lng,
-                    //             map.getBounds().getSouthWest().lat,
-                    //           ],
-                    //         ]
-                    //     : null,
-                };
-                setInternal(true);
-                !event.viewport && props.onViewportChange?.(viewport);
-            });
-            map.on("moveend", (event) => {
-                !event.rotate &&
-                    props.onViewportChange?.({ ...props.viewport, inTransit: false });
-                setInternal(false);
-            });
-        });
-    });
-    // Hook up viewport event
-    createEffect(on(() => props.viewport, (vp) => {
-        if (props.id !== vp?.id || internal())
-            return;
-        const viewport = {
-            ...vp,
-            ...(vp.bounds
-                ? map.cameraForBounds(vp.bounds, {
-                    bearing: vp?.bearing,
-                    pitch: vp?.pitch,
-                    padding: vp?.padding,
-                })
-                : null),
-        };
-        map.stop()[props.transitionType || "flyTo"](viewport);
-        debug(`Update Viewport (${props.transitionType || "flyTo"}):`, viewport);
-    }, { defer: true }));
-    // Update Projection
-    createEffect(() => {
-        const proj = props.options?.projection;
-        if (!map || !proj)
-            return;
-        map.setProjection(proj);
-        debug("Set Projection to:", proj);
-    });
-    // Update Cursor
-    createEffect(() => {
-        const cur = props.cursorStyle;
-        if (!map || !cur)
-            return;
-        map.getCanvas().style.cursor = cur;
-        debug("Set Cursor to:", cur);
-    });
-    const insertLayers = (list, layers) => {
-        layers.forEach((layer) => {
-            const index = list.findIndex((i) => layer.metadata.smg.beforeType
-                ? i.type === layer.metadata.smg.beforeType
-                : i.id === layer.metadata.smg.beforeId);
-            list =
-                index === -1
-                    ? [...list, layer]
-                    : [...list.slice(0, index), layer, ...list.slice(index + 1)];
-        });
-        return list;
-    };
-    // Update map style
-    createEffect((prev) => {
-        const style = getStyle(props.options?.style, props.darkStyle);
-        if (map?.isStyleLoaded() && prev !== style) {
-            const oldStyle = map.getStyle();
-            const oldLayers = oldStyle.layers.filter((l) => map.layerIdList.includes(l.id));
-            const oldSources = Object.keys(oldStyle.sources)
-                .filter((s) => map.sourceIdList.includes(s))
-                .reduce((obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }), {});
-            map.setStyle(style);
-            map.once("styledata", () => {
-                if (!oldLayers)
-                    return;
-                const newStyle = map.getStyle();
-                map.setStyle({
-                    ...newStyle,
-                    sources: { ...newStyle.sources, ...oldSources },
-                    layers: insertLayers(newStyle.layers, oldLayers),
-                    fog: oldStyle.fog,
-                    terrain: oldStyle.terrain,
-                });
-                debug("Set Mapstyle to:", style);
-            });
-        }
-        return style;
-    }, props.options?.style);
-    // Update debug features
-    [
-        "showTileBoundaries",
-        "showTerrainWireframe",
-        "showCollisionBoxes",
-        "showPadding",
-        "showOverdrawInspector",
-    ].forEach((item) => {
-        createEffect(() => {
-            const prop = props[item];
-            if (!map || !prop)
-                return;
-            map[item] = prop;
-            debug(`Set ${item} to:`, prop);
-        });
-    });
-    onCleanup(() => {
-        resizeObserver?.disconnect();
-        mutationObserver?.disconnect();
-        map?.remove();
-        debug("Map removed");
-    });
-    return (<div ref={mapRef} id={props.id} class={props?.class} classList={props?.classList} style={props?.class || props?.classList
-            ? null
-            : props.style || {
-                position: "absolute",
-                inset: 0,
-                "z-index": -1,
-            }}>
-      {mapLoaded() && (<MapProvider map={mapLoaded()}>
-          <style>{`.overlay{position:relative;width:100%;height:100%;pointer-events:none}.overlay>*{pointer-events:auto}`}</style>
-          <div class="overlay">{props.children}</div>
-        </MapProvider>)}
-    </div>);
-};

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

@@ -1,9 +0,0 @@
-import { createContext, useContext } from 'solid-js';
-import { createStore } from 'solid-js/store';
-const [state, setState] = createStore({ map: null });
-export const MapContext = createContext([state]);
-export const useMapContext = () => useContext(MapContext);
-export const MapProvider = (props) => {
-    props.map && setState('map', props.map);
-    return (<MapContext.Provider value={[state]}>{props.children}</MapContext.Provider>);
-};