solid-map-gl 1.8.0 → 1.8.1

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

@@ -1,5 +1,5 @@
 import { createEffect, onCleanup } from 'solid-js';
-import { useMap } from '../MapProvider';
+import { useMapContext } 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
@@ -16,16 +16,16 @@ const easeQuad = {
     inOut: (x) => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,
 };
 export const Camera = props => {
-    const [map, userInteraction] = useMap();
-    if (!map())
+    const [ctx] = useMapContext();
+    if (!ctx.map)
         return null;
     let animationTime = 0.1;
     let isReverse = false;
     const updateCameraPosition = async ([lng, lat, alt], target) => {
-        const camera = map().getFreeCameraOptions();
-        camera.position = map().mapLib.MercatorCoordinate.fromLngLat([lng, lat], alt);
+        const camera = ctx.map.getFreeCameraOptions();
+        camera.position = ctx.map.mapLib.MercatorCoordinate.fromLngLat([lng, lat], alt);
         camera.lookAtPoint(target);
-        map().setFreeCameraOptions(camera);
+        ctx.map.setFreeCameraOptions(camera);
     };
     const frame = () => {
         props.translate && window.requestAnimationFrame(frame);
@@ -47,47 +47,47 @@ export const Camera = props => {
     });
     const options = { duration: 1000, easing: n => n };
     const rotateGlobe = () => {
-        if (userInteraction)
+        if (ctx.userInteraction)
             return;
         const { secPerRev = 120, maxSpinZoom = 5, slowSpinZoom = 3, } = props.rotateGlobe;
-        const zoom = map().getZoom();
+        const zoom = ctx.map.getZoom();
         if (zoom > maxSpinZoom)
             return;
         let distancePerSecond = 360 / secPerRev;
         if (zoom > slowSpinZoom)
             distancePerSecond *= (maxSpinZoom - zoom) / (maxSpinZoom - slowSpinZoom);
-        const center = map().getCenter();
+        const center = ctx.map.getCenter();
         center.lng = props.reverse
             ? center.lng + distancePerSecond
             : center.lng - distancePerSecond;
-        map().easeTo({ center, ...options }, { rotate: true });
+        ctx.map.easeTo({ center, ...options }, { rotate: true });
     };
     const rotateViewport = () => {
-        if (!props.rotateViewport || userInteraction)
+        if (!props.rotateViewport || ctx.userInteraction)
             return;
         const rotateViewport = props.rotateViewport;
         const secPerRev = rotateViewport?.secPerRev || 60;
         const bearing = props.reverse
-            ? map().getBearing() + 360 / secPerRev
-            : map().getBearing() - 360 / secPerRev;
+            ? ctx.map.getBearing() + 360 / secPerRev
+            : ctx.map.getBearing() - 360 / secPerRev;
         const pitch = rotateViewport?.pitch || 60;
         const around = rotateViewport?.around;
-        map().easeTo({ bearing, pitch, around, ...options }, { rotate: true });
+        ctx.map.easeTo({ bearing, pitch, around, ...options }, { rotate: true });
     };
     const onEnd = () => (props.rotateGlobe ? rotateGlobe() : rotateViewport());
-    map().on('moveend', onEnd).on('dragend', onEnd);
+    ctx.map.on('moveend', onEnd).on('dragend', onEnd);
     let originalCenter;
     createEffect(() => {
         if (props.rotateGlobe == undefined)
             return;
         if (props.rotateGlobe) {
-            originalCenter = map().getCenter();
+            originalCenter = ctx.map.getCenter();
             rotateGlobe();
         }
         else {
             props.resetWhenStopped
-                ? map().stop().easeTo({ center: originalCenter })
-                : map().stop();
+                ? ctx.map.stop().easeTo({ center: originalCenter })
+                : ctx.map.stop();
         }
     });
     createEffect(() => {
@@ -96,9 +96,9 @@ export const Camera = props => {
         props.rotateViewport
             ? rotateViewport()
             : props.resetWhenStopped
-                ? map().stop().resetNorthPitch()
-                : map().stop();
+                ? ctx.map.stop().resetNorthPitch()
+                : ctx.map.stop();
     });
-    onCleanup(() => map().off('moveend', onEnd).off('dragend', onEnd));
+    onCleanup(() => ctx.map.off('moveend', onEnd).off('dragend', onEnd));
     return props.children;
 };

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

@@ -1,34 +1,22 @@
-import { createEffect, onCleanup } from 'solid-js';
-import { useMap } from '../MapProvider';
-const getControl = (lib, type, options, custom) => {
-    if (custom)
-        return new custom(options);
-    switch (type) {
-        case 'navigation':
-            return new lib.NavigationControl(options);
-        case 'scale':
-            return new lib.ScaleControl(options);
-        case 'attribution':
-            return new lib.AttributionControl(options);
-        case 'geolocate':
-            return new lib.GeolocateControl(options);
-        case 'fullscreen':
-            return new lib.FullscreenControl();
-        // options || { container: map().container }
-        default:
-            throw new Error(`Unknown control type: ${type}`);
-    }
-};
+import { createEffect } from 'solid-js';
+import { useMapContext } from '../MapProvider';
 export const Control = props => {
-    const [map] = useMap();
-    let control = null;
+    const [ctx] = useMapContext();
+    const controlClasses = new Map([
+        ['navigation', ctx.map.mapLib.NavigationControl],
+        ['scale', ctx.map.mapLib.ScaleControl],
+        ['attribution', ctx.map.mapLib.AttributionControl],
+        ['geolocate', ctx.map.mapLib.GeolocateControl],
+        ['fullscreen', ctx.map.mapLib.FullscreenControl],
+    ]);
+    const ControlClass = props.custom || controlClasses.get(props.type || 'navigation');
+    if (!ControlClass)
+        throw new Error(`Unknown control type: ${props.type}`);
     // Add or Update Control
     createEffect(() => {
-        control && map().hasControl(control) && map().removeControl(control);
-        control = getControl(map().mapLib, props.type, props.options, props.custom);
-        map().addControl(control, props.position);
+        const control = new ControlClass(props.options);
+        control && ctx.map.hasControl(control) && ctx.map.removeControl(control);
+        ctx.map.addControl(control, props.position);
     });
-    // Remove Control
-    onCleanup(() => map()?.removeControl(control));
     return null;
 };

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

@@ -1,11 +1,11 @@
 import { onCleanup } from 'solid-js';
-import { useMap } from '../MapProvider';
+import { useMapContext } from '../MapProvider';
 import { drawEvents } from '../../events';
 export const Draw = (props) => {
-    const [map] = useMap();
+    const [ctx] = useMapContext();
     // Add Draw Control
     const draw = new props.lib(props.options);
-    map().addControl(draw, props.position || 'top-right');
+    ctx.map.addControl(draw, props.position || 'top-right');
     props.getInstance && props.getInstance(draw);
     // Hook up events
     const eventList = {};
@@ -14,15 +14,15 @@ export const Draw = (props) => {
             const event = `draw.${item.slice(2).toLowerCase()}`;
             const fn = evt => props[item](evt);
             eventList[event] = fn;
-            map().on(event, fn);
+            ctx.map.on(event, fn);
         }
     });
     // Remove Draw Control
     onCleanup(() => {
         // Remove Events
-        Object.keys(eventList).forEach(event => map().off(event, eventList[event]));
+        Object.keys(eventList).forEach(event => ctx.map.off(event, eventList[event]));
         // Remove Control
-        map()?.removeControl(draw);
+        ctx.map?.removeControl(draw);
     });
     return null;
 };

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

@@ -1,5 +1,5 @@
 import { onCleanup, createSignal, createEffect, untrack, } from 'solid-js';
-import { useMap } from '../MapProvider';
+import { useMapContext } 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,15 +19,15 @@ const PATTERN = {
 };
 export const patternList = Object.keys(PATTERN);
 export const MGL_Image = props => {
-    const [map] = useMap();
+    const [ctx] = useMapContext();
     const [size, setSize] = createSignal({ width: 0, height: 0 });
     const debug = (text, value) => {
-        map().debug &&
+        ctx.map.debug &&
             console.debug('%c[MapGL]', 'color: #10b981', text, value || '');
     };
     // Remove Image
     onCleanup(() => {
-        map()?.hasImage(props.id) && map()?.removeImage(props.id);
+        ctx.map?.hasImage(props.id) && ctx.map?.removeImage(props.id);
         debug('Remove Image:', props.id);
     });
     // Add or Update Image
@@ -41,23 +41,23 @@ export const MGL_Image = props => {
             : props.options;
         _loadImage(props.source || _createPattern(props.pattern), data => {
             const { width, height } = data;
-            if (map() && !map().hasImage(props.id))
-                map().addImage(props.id, data, ops);
+            if (ctx.map && !ctx.map.hasImage(props.id))
+                ctx.map.addImage(props.id, data, ops);
             if (!props.pattern &&
                 untrack(() => width === size().width && height === size().height)) {
-                map().updateImage(props.id, data);
-                map().triggerRepaint();
+                ctx.map.updateImage(props.id, data);
+                ctx.map.triggerRepaint();
             }
             else {
-                map().removeImage(props.id);
-                map().addImage(props.id, data, ops);
+                ctx.map.removeImage(props.id);
+                ctx.map.addImage(props.id, data, ops);
             }
             setSize({ width, height });
             debug('Add Image:', props.id);
-            map().on('style.load', () => {
-                if (map().hasImage(props.id))
+            ctx.map.on('style.load', () => {
+                if (ctx.map.hasImage(props.id))
                     return;
-                map().addImage(props.id, data, ops);
+                ctx.map.addImage(props.id, data, ops);
                 debug('Re-Add Image:', props.id);
             });
         });
@@ -76,7 +76,7 @@ export const MGL_Image = props => {
         }
         if (typeof image !== 'string')
             return callback(image);
-        map().loadImage(image, async (error, imageData) => {
+        ctx.map.loadImage(image, async (error, imageData) => {
             if (error) {
                 if (typeof image == 'string' && image?.trimEnd().endsWith('.svg')) {
                     image = await (await fetch(image)).text();

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

@@ -1,5 +1,5 @@
 import { onCleanup, createEffect, createUniqueId } from 'solid-js';
-import { useMap } from '../MapProvider';
+import { useMapContext } from '../MapProvider';
 import { useSourceId } from '../Source';
 import { layerEvents } from '../../events';
 const diff = (newProps = {}, prevProps = {}) => {
@@ -13,15 +13,15 @@ const diff = (newProps = {}, prevProps = {}) => {
     }, []);
 };
 export const Layer = props => {
-    const [map] = useMap();
+    const [ctx] = useMapContext();
     const sourceId = props.style?.source || useSourceId();
     props.id ??= createUniqueId();
     const debug = (text, value) => {
-        map().debug &&
+        ctx.map.debug &&
             console.debug('%c[MapGL]', 'color: #10b981', text, value || '');
     };
     // Add Layer
-    map().addLayer(props.customLayer || {
+    ctx.map.addLayer(props.customLayer || {
         ...props.style,
         id: props.id,
         source: sourceId,
@@ -29,17 +29,17 @@ export const Layer = props => {
             smg: { beforeType: props.beforeType, beforeId: props.beforeId },
         },
     }, props.beforeType
-        ? map()
+        ? ctx.map
             .getStyle()
             .layers.find(l => l.type === props.beforeType)?.id
         : props.beforeId);
-    map().layerIdList.push(props.id);
+    ctx.map.layerIdList.push(props.id);
     debug('Add Layer:', props.id);
     // Hook up events
     layerEvents.forEach(item => {
         if (props[item]) {
             const event = item.slice(2).toLowerCase();
-            map().on(event, props.id, evt => {
+            ctx.map.on(event, props.id, evt => {
                 props[item](evt);
                 debug(`Layer '${event}' event on '${props.id}':`, evt);
             });
@@ -51,13 +51,13 @@ export const Layer = props => {
         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 }));
+            diff(style.layout, prev?.layout).forEach(([key, value]) => ctx.map.setLayoutProperty(props.id, key, value, { validate: false }));
         if (style.paint !== prev?.paint)
-            diff(style.paint, prev?.paint).forEach(([key, value]) => map().setPaintProperty(props.id, key, value, { validate: false }));
+            diff(style.paint, prev?.paint).forEach(([key, value]) => ctx.map.setPaintProperty(props.id, key, value, { validate: false }));
         if (style.minzoom !== prev?.minzoom || style.maxzoom !== prev?.maxzoom)
-            map().setLayerZoomRange(props.id, style.minzoom, style.maxzoom);
+            ctx.map.setLayerZoomRange(props.id, style.minzoom, style.maxzoom);
         if (style.filter !== prev?.filter)
-            map().setFilter(props.id, style.filter, { validate: false });
+            ctx.map.setFilter(props.id, style.filter, { validate: false });
         debug('Update Layer Style:', props.id);
         return style;
     }, props.style);
@@ -65,7 +65,7 @@ export const Layer = props => {
     createEffect((prev) => {
         if (props.visible === prev)
             return;
-        map().setLayoutProperty(props.id, 'visibility', props.visible ? 'visible' : 'none', { validate: false });
+        ctx.map.setLayoutProperty(props.id, 'visibility', props.visible ? 'visible' : 'none', { validate: false });
         debug(`Update Visibility (${props.id}):`, props.visible);
         return props.visible;
     }, props.visible);
@@ -73,26 +73,26 @@ export const Layer = props => {
     createEffect(async () => {
         if (!props.filter)
             return;
-        !map().isStyleLoaded() && (await map().once('styledata'));
-        map().setFilter(props.id, props.filter);
+        !ctx.map.isStyleLoaded() && (await ctx.map.once('styledata'));
+        ctx.map.setFilter(props.id, props.filter);
         debug(`Update Filter (${props.id}):`, props.filter);
     });
     // Update Feature State
     createEffect(async () => {
-        if (!props.featureState || !props.featureState.id)
+        if (!props.featureState || props.featureState.id === null)
             return;
-        !map().isStyleLoaded() && (await map().once('styledata'));
-        map().removeFeatureState({
+        !ctx.map.isStyleLoaded() && (await ctx.map.once('styledata'));
+        ctx.map.removeFeatureState({
             source: sourceId,
             sourceLayer: props.style['source-layer'],
         });
-        map().setFeatureState({
+        ctx.map.setFeatureState({
             source: sourceId,
             sourceLayer: props.style['source-layer'],
             id: props.featureState.id,
         }, props.featureState.state);
     });
     //Remove Layer
-    onCleanup(() => map()?.getLayer(props.id) && map()?.removeLayer(props.id));
+    onCleanup(() => ctx.map?.getLayer(props.id) && ctx.map?.removeLayer(props.id));
     return props.children;
 };

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

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

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

@@ -37,7 +37,7 @@ export const MapGL = props => {
         let mapLib = props.mapLib || (await import('mapbox-gl'));
         if (!mapLib.Map)
             mapLib = window['maplibregl'] || window['mapboxgl'];
-        if (!mapLib.supported())
+        if (!mapLib.supported?.())
             throw new Error('Mapbox GL not supported');
         debug(`Map (v${mapLib.version}) loading...`);
         map = new mapLib.Map({

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

@@ -1,12 +1,15 @@
-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);
+import { createContext, useContext } from "solid-js";
+import { createStore } from "solid-js/store";
+const [state, setState] = createStore({
+    map: null,
+    userInteraction: false
+});
+export const MapContext = createContext([state]);
+export const useMapContext = () => useContext(MapContext);
 export const MapProvider = props => {
-    props.map && setMap(props.map);
-    props.userInteraction && setUserInteraction(props.userInteraction);
-    return (<MapContext.Provider value={[map, userInteraction]}>
+    props.map && setState('map', props.map);
+    props.userInteraction && setState('userInteraction', props.userInteraction);
+    return (<MapContext.Provider value={[state]}>
             {props.children}
         </MapContext.Provider>);
 };

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

@@ -1,7 +1,7 @@
 import { onCleanup, createEffect, untrack } from 'solid-js';
-import { useMap } from '../MapProvider';
+import { useMapContext } from '../MapProvider';
 export const Marker = (props) => {
-    const [map] = useMap();
+    const [ctx] = useMapContext();
     let marker = null;
     let popup = null;
     if (!props.lngLat)
@@ -10,9 +10,9 @@ export const Marker = (props) => {
     createEffect(() => {
         const ops = { ...props.options };
         const pops = { ...props.options?.popup };
-        if (!map())
+        if (!ctx.map)
             return;
-        const mapboxgl = map().mapLib;
+        const mapboxgl = ctx.map.mapLib;
         untrack(() => {
             popup?.remove();
             popup = props.children
@@ -28,7 +28,7 @@ export const Marker = (props) => {
                 .on('drag', () => props.onLngLatChange?.(marker.getLngLat().toArray()))
                 .setDraggable(props.draggable || props.options?.draggable)
                 .setLngLat(props.lngLat)
-                .addTo(map());
+                .addTo(ctx.map);
             props.openPopup !== popup?.isOpen() && marker.togglePopup();
         });
     });

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

@@ -1,16 +1,16 @@
 import { onCleanup, createEffect, untrack } from 'solid-js';
-import { useMap } from '../MapProvider';
+import { useMapContext } from '../MapProvider';
 export const Popup = (props) => {
-    const [map] = useMap();
+    const [ctx] = useMapContext();
     let popup = null;
     if (!props.trackPointer && !props.lngLat)
         throw new Error('Popup - lngLat or trackPointer is required');
     // Add or Update Popup
     createEffect(() => {
         const ops = { ...props.options };
-        if (!map())
+        if (!ctx.map)
             return;
-        const mapboxgl = map().mapLib;
+        const mapboxgl = ctx.map.mapLib;
         untrack(() => {
             popup?.remove();
             popup = new mapboxgl.Popup(props.trackPointer
@@ -19,7 +19,7 @@ export const Popup = (props) => {
                 .setHTML(props.children || '')
                 .setLngLat(props.lngLat)
                 .on('close', () => props.onClose?.())
-                .addTo(map());
+                .addTo(ctx.map);
         });
     });
     // Update Position

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

@@ -1,13 +1,13 @@
 import { onCleanup, createEffect, createContext, useContext, createUniqueId, } from 'solid-js';
-import { useMap } from '../MapProvider';
+import { useMapContext } from '../MapProvider';
 import { rasterStyleList } from '../../mapStyles';
 const SourceContext = createContext();
 export const useSourceId = () => useContext(SourceContext);
 export const Source = props => {
-    const [map] = useMap();
+    const [ctx] = useMapContext();
     props.id ??= createUniqueId();
     const debug = (text, value) => {
-        map().debug &&
+        ctx.map.debug &&
             console.debug('%c[MapGL]', 'color: #ec4899', text, value || '');
     };
     const lookup = url => {
@@ -30,16 +30,16 @@ export const Source = props => {
         return source;
     };
     // Add Source
-    map().addSource(props.id, lookup(props.source.url));
-    map().sourceIdList.push(props.id);
+    ctx.map.addSource(props.id, lookup(props.source.url));
+    ctx.map.sourceIdList.push(props.id);
     debug('Add Source:', props.id);
     // Update Data
-    const source = map().getSource(props.id);
+    const source = ctx.map.getSource(props.id);
     switch (props.source.type) {
         case 'geojson':
             createEffect(() => {
                 const data = props.source.data;
-                if (!map().isSourceLoaded(props.id))
+                if (!ctx.map.isSourceLoaded(props.id))
                     return;
                 source.setData(data || {});
                 debug('Update GeoJSON Data:', props.id);
@@ -49,7 +49,7 @@ export const Source = props => {
             createEffect(() => {
                 const url = props.source.url;
                 const coords = props.source.coordinates;
-                if (!map().isSourceLoaded(props.id))
+                if (!ctx.map.isSourceLoaded(props.id))
                     return;
                 source.updateImage(url, coords);
                 debug('Update Image Data:', props.id);
@@ -59,7 +59,7 @@ export const Source = props => {
             createEffect(() => {
                 const url = props.source.url;
                 const tiles = props.source.tiles;
-                if (!map().isSourceLoaded(props.id))
+                if (!ctx.map.isSourceLoaded(props.id))
                     return;
                 url ? source.setUrl(url) : source.setTiles(tiles);
                 debug('Update Vector Data:', props.id);
@@ -68,7 +68,7 @@ export const Source = props => {
         case 'raster':
             createEffect(() => {
                 const src = lookup(props.source.url);
-                if (!map().isSourceLoaded(props.id))
+                if (!ctx.map.isSourceLoaded(props.id))
                     return;
                 src.url ? source.setUrl(src.url) : source.setTiles(src.tiles);
                 debug('Update Raster Data:', props.id);
@@ -77,10 +77,10 @@ export const Source = props => {
     }
     // Remove Source
     onCleanup(() => {
-        map()
+        ctx.map
             ?.getStyle()
-            .layers.forEach(layer => layer.source === props.id && map().removeLayer(layer.id));
-        map()?.getSource(props.id) && map()?.removeSource(props.id);
+            .layers.forEach(layer => layer.source === props.id && ctx.map.removeLayer(layer.id));
+        ctx.map?.getSource(props.id) && ctx.map?.removeSource(props.id);
         debug('Remove Source:', props.id);
     });
     return (<SourceContext.Provider value={props.id}>

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

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

package/dist/source/index.jsx

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

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

@@ -4,8 +4,9 @@ import type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/full
 import type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolocate_control';
 import type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control';
 import type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control';
+type ControlType = 'navigation' | 'scale' | 'attribution' | 'fullscreen' | 'geolocate';
 type Props = {
-    type?: 'navigation' | 'scale' | 'attribution' | 'fullscreen' | 'geolocate';
+    type?: ControlType;
     /** a string that specifies the type of control to be displayed. It can be one of 'navigation', 'scale', 'attribution', 'fullscreen', or 'geolocate' */
     options?: NavigationOptions | ScaleOptions | AttributionOptions | FullscreenOptions | GeolocateOptions | object;
     /** an optional object that contains options specific to the control type */

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

@@ -1,7 +1,13 @@
 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 MapContext: import("solid-js").Context<{
+    map: any;
+    userInteraction: boolean;
+}[]>;
+export declare const useMapContext: () => {
+    map: any;
+    userInteraction: boolean;
+}[];
 export declare const MapProvider: ParentComponent<{
     map?: Map;
     userInteraction?: boolean;

package/dist/types/index.d.ts

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0",
+  "version": "1.8.1",
   "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.",
@@ -56,7 +56,7 @@
     "canvas": "^2.11.2",
     "jsdom": "^22.1.0",
     "mapbox-gl": "^2.15.0",
-    "rollup": "^3.24.0",
+    "rollup": "^3.25.1",
     "rollup-plugin-import-css": "^3.2.1",
     "rollup-preset-solid": "^2.0.1",
     "solid-js": "^1.7.6",