solid-map-gl 1.7.1 → 1.8.0

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

@@ -1,5 +1,5 @@
 import { createEffect, onCleanup } from 'solid-js';
-import { useMap } from '../MapGL';
+import { useMap } from '../MapProvider';
 // linearly interpolate between two positions [x,y,z] based on time
 const lerp = (a, b, t) => a.map((_, idx) => (1.0 - t) * a[idx] + t * b[idx]);
 // sphericaly interpolate between two positions [x,y,z] based on time
@@ -9,16 +9,6 @@ const slerp = (a, b, t) => {
     return a.map((_, idx) => (Math.sin((1 - t) * theta) / Math.sin(theta)) * a[idx] +
         (Math.sin(t * theta) / Math.sin(theta)) * b[idx]);
 };
-// const slerp = (a, b, t) => {
-//   const omega = 0.075
-//   // TODO: Proper Calculation
-//   // a.map((_, idx) => a[idx] * b[idx]).reduce((m, n) => m + n)
-//   return a.map(
-//     (_, idx) =>
-//       (Math.sin((1 - t) * omega) / Math.sin(omega)) * a[idx] +
-//       (Math.sin(t * omega) / Math.sin(omega)) * b[idx]
-//   )
-// }
 // calculations from: https://easings.net
 const easeQuad = {
     in: (x) => x * x,
@@ -26,9 +16,9 @@ const easeQuad = {
     inOut: (x) => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,
 };
 export const Camera = props => {
-    if (!useMap())
-        return;
     const [map, userInteraction] = useMap();
+    if (!map())
+        return null;
     let animationTime = 0.1;
     let isReverse = false;
     const updateCameraPosition = async ([lng, lat, alt], target) => {
@@ -37,7 +27,7 @@ export const Camera = props => {
         camera.lookAtPoint(target);
         map().setFreeCameraOptions(camera);
     };
-    const frame = (time) => {
+    const frame = () => {
         props.translate && window.requestAnimationFrame(frame);
         const params = [
             props.translate.start,
@@ -55,12 +45,13 @@ export const Camera = props => {
     createEffect(() => {
         props.translate && window.requestAnimationFrame(frame);
     });
+    const options = { duration: 1000, easing: n => n };
     const rotateGlobe = () => {
-        const secPerRev = props.rotateGlobe.secPerRev || 120;
-        const maxSpinZoom = props.rotateGlobe.maxZoom || 5;
-        const slowSpinZoom = props.rotateGlobe.slowZoom || 3;
+        if (userInteraction)
+            return;
+        const { secPerRev = 120, maxSpinZoom = 5, slowSpinZoom = 3, } = props.rotateGlobe;
         const zoom = map().getZoom();
-        if (!props.rotateGlobe || userInteraction() || zoom > maxSpinZoom)
+        if (zoom > maxSpinZoom)
             return;
         let distancePerSecond = 360 / secPerRev;
         if (zoom > slowSpinZoom)
@@ -69,28 +60,22 @@ export const Camera = props => {
         center.lng = props.reverse
             ? center.lng + distancePerSecond
             : center.lng - distancePerSecond;
-        map().easeTo({ center, duration: 1000, easing: n => n }, { rotate: true });
+        map().easeTo({ center, ...options }, { rotate: true });
     };
     const rotateViewport = () => {
-        if (!props.rotateViewport || userInteraction())
+        if (!props.rotateViewport || userInteraction)
             return;
-        const secPerRev = props.rotateViewport?.secPerRev || 60;
+        const rotateViewport = props.rotateViewport;
+        const secPerRev = rotateViewport?.secPerRev || 60;
         const bearing = props.reverse
             ? map().getBearing() + 360 / secPerRev
             : map().getBearing() - 360 / secPerRev;
-        map().easeTo({
-            bearing,
-            pitch: props.rotateViewport?.pitch || 60,
-            duration: 1000,
-            around: props.rotateViewport?.around,
-            easing: n => n,
-        }, { rotate: true });
-    };
-    const onMoveEnd = evt => {
-        evt.rotate && props.rotateGlobe ? rotateGlobe() : rotateViewport();
+        const pitch = rotateViewport?.pitch || 60;
+        const around = rotateViewport?.around;
+        map().easeTo({ bearing, pitch, around, ...options }, { rotate: true });
     };
-    const onDragEnd = () => (props.rotateGlobe ? rotateGlobe() : rotateViewport());
-    map().on('moveend', onMoveEnd).on('dragend', onDragEnd);
+    const onEnd = () => (props.rotateGlobe ? rotateGlobe() : rotateViewport());
+    map().on('moveend', onEnd).on('dragend', onEnd);
     let originalCenter;
     createEffect(() => {
         if (props.rotateGlobe == undefined)
@@ -114,6 +99,6 @@ export const Camera = props => {
                 ? map().stop().resetNorthPitch()
                 : map().stop();
     });
-    onCleanup(() => map().off('moveend', onMoveEnd).off('dragend', onDragEnd));
+    onCleanup(() => map().off('moveend', onEnd).off('dragend', onEnd));
     return props.children;
 };

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

@@ -1,5 +1,5 @@
 import { createEffect, onCleanup } from 'solid-js';
-import { useMap } from '../MapGL';
+import { useMap } from '../MapProvider';
 const getControl = (lib, type, options, custom) => {
     if (custom)
         return new custom(options);
@@ -20,8 +20,6 @@ const getControl = (lib, type, options, custom) => {
     }
 };
 export const Control = props => {
-    if (!useMap())
-        return;
     const [map] = useMap();
     let control = null;
     // Add or Update Control

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

@@ -1,9 +1,7 @@
 import { onCleanup } from 'solid-js';
-import { useMap } from '../MapGL';
+import { useMap } from '../MapProvider';
 import { drawEvents } from '../../events';
-export const Draw = props => {
-    if (!useMap())
-        return;
+export const Draw = (props) => {
     const [map] = useMap();
     // Add Draw Control
     const draw = new props.lib(props.options);

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

@@ -1,5 +1,5 @@
 import { onCleanup, createSignal, createEffect, untrack, } from 'solid-js';
-import { useMap } from '../MapGL';
+import { useMap } from '../MapProvider';
 const PATTERN = {
     diagonal_l: { size: 20, path: 'M20 0 0 20M-10 10 10-10M10 30 30 10' },
     diagonal_r: { size: 20, path: 'M0 0 20 20M30 10 10-10M10 30-10 10' },
@@ -19,8 +19,6 @@ const PATTERN = {
 };
 export const patternList = Object.keys(PATTERN);
 export const MGL_Image = props => {
-    if (!useMap())
-        return;
     const [map] = useMap();
     const [size, setSize] = createSignal({ width: 0, height: 0 });
     const debug = (text, value) => {
@@ -43,7 +41,7 @@ export const MGL_Image = props => {
             : props.options;
         _loadImage(props.source || _createPattern(props.pattern), data => {
             const { width, height } = data;
-            if (!map().hasImage(props.id))
+            if (map() && !map().hasImage(props.id))
                 map().addImage(props.id, data, ops);
             if (!props.pattern &&
                 untrack(() => width === size().width && height === size().height)) {
@@ -56,7 +54,7 @@ export const MGL_Image = props => {
             }
             setSize({ width, height });
             debug('Add Image:', props.id);
-            map().on('styledata', () => {
+            map().on('style.load', () => {
                 if (map().hasImage(props.id))
                     return;
                 map().addImage(props.id, data, ops);

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

@@ -1,5 +1,5 @@
 import { onCleanup, createEffect, createUniqueId } from 'solid-js';
-import { useMap } from '../MapGL';
+import { useMap } from '../MapProvider';
 import { useSourceId } from '../Source';
 import { layerEvents } from '../../events';
 const diff = (newProps = {}, prevProps = {}) => {
@@ -13,8 +13,6 @@ const diff = (newProps = {}, prevProps = {}) => {
     }, []);
 };
 export const Layer = props => {
-    if (!useMap())
-        return;
     const [map] = useMap();
     const sourceId = props.style?.source || useSourceId();
     props.id ??= createUniqueId();
@@ -50,7 +48,7 @@ export const Layer = props => {
     // Update Style
     createEffect((prev) => {
         const style = props.style;
-        if (style === prev || !map().isStyleLoaded())
+        if (style === prev)
             return;
         if (style.layout !== prev?.layout)
             diff(style.layout, prev?.layout).forEach(([key, value]) => map().setLayoutProperty(props.id, key, value, { validate: false }));

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

@@ -1,8 +1,6 @@
 import { onCleanup, createEffect } from 'solid-js';
-import { useMap } from '../MapGL';
-export const Light = props => {
-    if (!useMap())
-        return;
+import { useMap } from '../MapProvider';
+export const Light = (props) => {
     const [map] = useMap();
     // Add or Update Light Layer
     createEffect(() => map().setLight(props.style || {}));

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

@@ -1,9 +1,7 @@
-import { createSignal, createEffect, onMount, onCleanup, createContext, useContext, createUniqueId, } from 'solid-js';
+import { createSignal, createEffect, onMount, onCleanup, createUniqueId, on, } from 'solid-js';
+import { MapProvider } from '../MapProvider';
 import { mapEvents } from '../../events';
 import { vectorStyleList } from '../../mapStyles';
-const MapContext = createContext();
-/** Provides the Mapbox Map Object */
-export const useMap = () => useContext(MapContext);
 /** Creates a new Map Container */
 export const MapGL = props => {
     props.id ??= createUniqueId();
@@ -11,13 +9,13 @@ export const MapGL = props => {
     let mapRef;
     let resizeObserver;
     let mutationObserver;
-    const [mapLoaded, setMapLoaded] = createSignal(false);
-    const [mapRoot, setMapRoot] = createSignal();
+    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 [userInteraction, setUserInteraction] = createSignal(false);
+    const [internal, setInternal] = createSignal(false);
     // debounce user interactions
     createEffect(() => props.onUserInteraction?.(userInteraction()));
     const debug = (text, value) => {
@@ -25,7 +23,7 @@ export const MapGL = props => {
             console.debug('%c[MapGL]', 'color: #0ea5e9', text, value || '');
     };
     const getStyle = (light, dark) => {
-        const style = darkMode() ? dark || light : light;
+        const style = darkMode() && dark ? dark : light;
         return typeof style === 'string' || style instanceof String
             ? style
                 ?.split(':')
@@ -59,8 +57,7 @@ export const MapGL = props => {
         map.sourceIdList = [];
         map.layerIdList = [];
         map.once('load', () => {
-            setMapRoot(map);
-            setMapLoaded(true);
+            setMapLoaded(map);
             debug('Map loaded');
             ['mousedown', 'touchstart', 'wheel'].forEach(event => map.on(event, evt => !evt.rotate && setUserInteraction(true)));
             ['moveend', 'mouseup', 'touchend'].forEach(event => map.on(event, evt => !evt.rotate && setUserInteraction(false)));
@@ -74,80 +71,81 @@ export const MapGL = props => {
             mutationObserver = new MutationObserver(() => {
                 const darkTheme = document.body.classList.contains('dark');
                 setDarkMode(darkTheme);
-                debug('Set dark theme to:', darkTheme);
+                debug('Set theme to:', darkTheme);
             });
             mutationObserver.observe(document.body, { attributes: true });
             // Listen to map container size changes
-            if (!props.disableResize) {
-                resizeObserver = new ResizeObserver(() => {
-                    map?.resize();
-                    debug('Map resized');
-                });
-                resizeObserver.observe(mapRef);
-            }
+            // if (!props.disableResize) {
+            //   resizeObserver = new ResizeObserver(() => {
+            //     map?.resize()
+            //     debug('Map resized')
+            //   })
+            //   resizeObserver.observe(mapRef as Element)
+            // }
             // Hook up events
             mapEvents.forEach(item => {
                 const prop = props[item];
+                let isFirstMessage = true;
                 if (prop) {
                     const event = item.slice(2).toLowerCase();
                     if (typeof prop === 'function') {
                         map.on(event, e => {
                             prop(e);
-                            debug(`Map '${event}' event:`, e);
+                            isFirstMessage && debug(`Map '${event}' event:`, e);
+                            isFirstMessage = false;
                         });
                     }
                     else {
                         Object.keys(prop).forEach(layerId => {
                             map.on(event, layerId, e => {
                                 prop[layerId](e);
-                                debug(`Map '${event}' event on '${layerId}':`, e);
+                                isFirstMessage &&
+                                    debug(`Map '${event}' event on '${layerId}':`, e);
+                                isFirstMessage = false;
                             });
                         });
                     }
                 }
             });
-            // Hook up viewport events
+            // Update Viewport
             map.on('move', event => {
                 const viewport = {
                     ...props.viewport,
                     id: props.id,
-                    point: { x: event.originalEvent?.x, y: event.originalEvent?.y },
+                    // 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,
                 };
-                props.onViewportChange?.(viewport);
+                setInternal(true);
+                !event.viewport && props.onViewportChange?.(viewport);
+            });
+            map.on('moveend', event => {
+                !event.rotate &&
+                    props.onViewportChange?.({ ...props.viewport, inTransit: false });
+                setInternal(false);
             });
         });
     });
-    // Update Viewport
-    createEffect(() => {
+    // Hook up viewport event
+    createEffect(on(() => props.viewport, vp => {
+        if (props.id !== vp?.id || internal())
+            return;
         const viewport = {
-            ...props.viewport,
-            padding: props.viewport?.padding || 0,
+            ...vp,
+            ...(vp.bounds
+                ? map.cameraForBounds(vp.bounds, {
+                    padding: vp?.padding,
+                })
+                : null),
         };
-        if (!map || props.id === props.viewport?.id || userInteraction())
-            return;
-        map?.stop()[props.transitionType || 'flyTo'](viewport, { viewport: true });
+        map.stop()[props.transitionType || 'flyTo'](viewport);
         debug(`Update Viewport (${props.transitionType || 'flyTo'}):`, viewport);
-    });
-    // Update boundaries
-    createEffect(prev => {
-        const bounds = props.viewport?.bounds;
-        if (map && bounds && prev !== bounds && !userInteraction()) {
-            props.onViewportChange({
-                ...props.viewport,
-                ...map?.cameraForBounds(bounds, {
-                    padding: props.viewport?.padding,
-                }),
-            });
-            debug(`Update Viewport Boundaries:`, bounds);
-        }
-        return bounds;
-    }, props.viewport?.bounds);
+    }, { defer: true }));
     // Update Projection
     createEffect(() => {
         const proj = props.options?.projection;
@@ -223,14 +221,17 @@ export const MapGL = props => {
         map?.remove();
         debug('Map removed');
     });
-    return (<MapContext.Provider value={[mapRoot, userInteraction, debug]}>
-      <div ref={mapRef} id={props.id} class={props?.class} classList={props?.classList} style={props?.style || props?.class || props?.classList
-            ? props.style
-            : {
+    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() && props.children}
-    </MapContext.Provider>);
+      {mapLoaded() &&
+            <MapProvider map={mapLoaded()}>
+          {props.children}
+        </MapProvider>}
+    </>);
 };

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

@@ -0,0 +1,12 @@
+import { createContext, useContext, createSignal } from "solid-js";
+const [map, setMap] = createSignal(null);
+const [userInteraction, setUserInteraction] = createSignal(null);
+export const MapContext = createContext([map, userInteraction]);
+export const useMap = () => useContext(MapContext);
+export const MapProvider = props => {
+    props.map && setMap(props.map);
+    props.userInteraction && setUserInteraction(props.userInteraction);
+    return (<MapContext.Provider value={[map, userInteraction]}>
+            {props.children}
+        </MapContext.Provider>);
+};

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

@@ -1,8 +1,6 @@
 import { onCleanup, createEffect, untrack } from 'solid-js';
-import { useMap } from '../MapGL';
-export const Marker = props => {
-    if (!useMap())
-        return;
+import { useMap } from '../MapProvider';
+export const Marker = (props) => {
     const [map] = useMap();
     let marker = null;
     let popup = null;

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

@@ -1,8 +1,6 @@
 import { onCleanup, createEffect, untrack } from 'solid-js';
-import { useMap } from '../MapGL';
-export const Popup = props => {
-    if (!useMap())
-        return;
+import { useMap } from '../MapProvider';
+export const Popup = (props) => {
     const [map] = useMap();
     let popup = null;
     if (!props.trackPointer && !props.lngLat)

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

@@ -1,11 +1,9 @@
 import { onCleanup, createEffect, createContext, useContext, createUniqueId, } from 'solid-js';
-import { useMap } from '../MapGL';
+import { useMap } from '../MapProvider';
 import { rasterStyleList } from '../../mapStyles';
 const SourceContext = createContext();
 export const useSourceId = () => useContext(SourceContext);
 export const Source = props => {
-    if (!useMap())
-        return;
     const [map] = useMap();
     props.id ??= createUniqueId();
     const debug = (text, value) => {

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

@@ -1,35 +1,28 @@
-import { onCleanup, createEffect, createUniqueId, } from 'solid-js';
-import { useMap } from '../MapGL';
+import { createEffect, createUniqueId } from 'solid-js';
+import { useMap } from '../MapProvider';
 import { useSourceId } from '../Source';
-export const Terrain = props => {
-    if (!useMap())
-        return;
+export const Terrain = (props) => {
     const [map] = useMap();
     let sourceId = useSourceId();
-    // Add Terrain Layer
-    if (sourceId === undefined) {
+    // Add Terrain Source if not already defined
+    if (!sourceId && !props.source) {
         sourceId = createUniqueId();
-        map().addSource(sourceId, map().isMapLibre
-            ? {
-                type: 'raster-dem',
-                url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
-                tileSize: 256,
-            }
-            : {
-                type: 'raster-dem',
-                url: 'mapbox://mapbox.terrain-rgb',
-                tileSize: 512,
-                maxzoom: 14,
-            });
+        map().addSource(sourceId, {
+            type: 'raster-dem',
+            url: map().isMapLibre
+                ? 'https://demotiles.maplibre.org/terrain-tiles/tiles.json'
+                : 'mapbox://mapbox.terrain-rgb',
+            tileSize: map().isMapLibre ? 256 : 512,
+            maxzoom: map().isMapLibre ? undefined : 14
+        });
         map().sourceIdList.push(sourceId);
     }
+    // Add or Update Terrain Layer
     createEffect(() => {
         map().setTerrain({
             exaggeration: props.exaggeration || 1,
-            source: sourceId,
+            source: props.source || sourceId,
         });
     });
-    // Remove Terrain Layer
-    onCleanup(() => map().setTerrain(null));
     return null;
 };

package/dist/source/index.jsx

@@ -1,4 +1,5 @@
-export { MapGL as default, useMap } from './components/MapGL';
+export { MapGL as default } from './components/MapGL';
+export { MapProvider, useMap } from './components/MapProvider';
 export { Source, useSourceId } from './components/Source';
 export { Layer } from './components/Layer';
 export { Atmosphere } from './components/Atmosphere';

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

@@ -1,8 +1,8 @@
 import { VoidComponent } from 'solid-js';
-import type { FogSpecification } from 'mapbox-gl/src/style-spec/types.js';
+import type { Fog } from 'mapbox-gl';
 type Props = {
     /** Fog/Atmosphere Specifications */
-    style?: FogSpecification;
+    style?: Fog;
 };
 export declare const Atmosphere: VoidComponent<Props>;
 export {};

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

@@ -1,30 +1,53 @@
 import { Component } from 'solid-js';
-import type LngLatLike from 'mapbox-gl/src/geo/lng_lat.js';
+import type { LngLatLike } from 'mapbox-gl';
+/** Options for rotating the globe. */
 interface RotateGlobeOptions {
+    /** The number of seconds per revolution. */
     secPerRev?: number;
-    maxZoom?: number;
-    slowZoom?: number;
+    /** The maximum zoom level for spinning the globe.  */
+    maxSpinZoom?: number;
+    /** The zoom level at which the spinning slows down. */
+    slowSpinZoom?: number;
 }
+/** Options for rotating the viewport. */
 interface RotateViewportOptions {
+    /** The number of seconds per revolution. */
     secPerRev?: number;
+    /** The pitch angle in degrees. */
     pitch?: number;
+    /** The center of rotation. */
     around?: LngLatLike;
 }
+/** Props for the component. */
 type Props = {
+    /** Whether to rotate the globe. */
     rotateGlobe?: boolean | RotateGlobeOptions;
+    /** Whether to rotate the viewport. */
     rotateViewport?: boolean | RotateViewportOptions;
+    /** Whether to reverse the rotation direction. */
     reverse?: boolean;
+    /** Whether to reset the rotation when stopped. */
     resetWhenStopped?: boolean;
+    /** Translation options. */
     translate?: {
+        /** The type of translation. */
         type?: 'line' | 'sphere';
+        /** The starting position. */
         start: [number, number, number];
+        /** The ending position. */
         end: [number, number, number];
+        /** The target position. */
         target: LngLatLike;
+        /** The ending target position. */
         targetEnd?: LngLatLike;
+        /** The easing function to use. */
         easing?: 'in' | 'out' | 'inOut';
+        /** Whether to loop the translation. */
         loop?: boolean;
+        /** The duration of the translation in milliseconds. */
         duration: number;
     };
+    /** The children to render. */
     children?: any;
 };
 export declare const Camera: Component<Props>;

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

@@ -1,5 +1,5 @@
 import { VoidComponent } from 'solid-js';
-import type { LightSpecification } from 'mapbox-gl/src/style-spec/types.js';
+import type { Light as LightSpecification } from 'mapbox-gl';
 type Props = {
     /** Light Specifications */
     style: LightSpecification;

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

@@ -1,11 +1,18 @@
 import { Component } from 'solid-js';
 import type { mapEventTypes } from '../../events';
+import type mapboxgl from 'mapbox-gl';
 import type { MapboxOptions } from 'mapbox-gl/src/ui/map';
 import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
 import type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js';
 import type { PaddingOptions } from 'mapbox-gl/src/geo/edge_insets.js';
 import type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js';
 import type { JSX } from 'solid-js';
+export type Map = mapboxgl.Map & {
+    mapLib: any;
+    debug: boolean;
+    sourceIdList: string[];
+    layerIdList: string[];
+};
 export type Viewport = {
     id?: string;
     point?: {
@@ -18,6 +25,7 @@ export type Viewport = {
     pitch?: number;
     bearing?: number;
     padding?: PaddingOptions;
+    inTransit?: boolean;
 };
 type Props = {
     /** ID for the map container element */
@@ -63,8 +71,6 @@ type Props = {
     /** Children within the Map Container */
     children?: any;
 } & mapEventTypes;
-/** Provides the Mapbox Map Object */
-export declare const useMap: () => MapboxMap;
 /** Creates a new Map Container */
 export declare const MapGL: Component<Props>;
 export {};

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

@@ -0,0 +1,8 @@
+import { ParentComponent } from "solid-js";
+import type { Map } from '../MapGL';
+export declare const MapContext: import("solid-js").Context<import("solid-js").Accessor<any>[]>;
+export declare const useMap: () => import("solid-js").Accessor<any>[];
+export declare const MapProvider: ParentComponent<{
+    map?: Map;
+    userInteraction?: boolean;
+}>;

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

@@ -1,7 +1,5 @@
 import { Component } from 'solid-js';
-import type { PopupOptions } from 'mapbox-gl/src/ui/popup.js';
-import type { MarkerOptions } from 'mapbox-gl/src/ui/marker.js';
-import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
+import type { PopupOptions, MarkerOptions, LngLatLike } from 'mapbox-gl';
 type Props = {
     /** Options for the Mapbox GL JS marker */
     options?: MarkerOptions & {

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

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