solid-map-gl 1.8.0 → 1.8.2

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

@@ -1,5 +1,5 @@
-import { createEffect, onCleanup } from 'solid-js';
-import { useMap } from '../MapProvider';
+import { createEffect, onCleanup, createSignal } from 'solid-js';
+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
@@ -15,17 +15,19 @@ const easeQuad = {
     out: (x) => 1 - (1 - x) * (1 - x),
     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())
-        return null;
+export const Camera = (props) => {
+    const [ctx] = useMapContext();
     let animationTime = 0.1;
     let isReverse = false;
+    // Handle User Interaction
+    const [userInteraction, setUserInteraction] = createSignal(false);
+    ['mousedown', 'touchstart', 'wheel'].forEach((event) => ctx.map.on(event, (evt) => !evt.rotate && setUserInteraction(true)));
+    ['moveend', 'mouseup', 'touchend'].forEach((event) => ctx.map.on(event, (evt) => !evt.rotate && setUserInteraction(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);
@@ -45,49 +47,49 @@ export const Camera = props => {
     createEffect(() => {
         props.translate && window.requestAnimationFrame(frame);
     });
-    const options = { duration: 1000, easing: n => n };
+    const options = { duration: 1000, easing: (n) => n };
     const rotateGlobe = () => {
-        if (userInteraction)
+        if (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 || 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 +98,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

@@ -3,7 +3,7 @@ import { MapProvider } from '../MapProvider';
 import { mapEvents } from '../../events';
 import { vectorStyleList } from '../../mapStyles';
 /** Creates a new Map Container */
-export const MapGL = props => {
+export const MapGL = (props) => {
     props.id ??= createUniqueId();
     let map;
     let mapRef;
@@ -14,10 +14,7 @@ export const MapGL = props => {
         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) => {
         props.debug &&
             console.debug('%c[MapGL]', 'color: #0ea5e9', text, value || '');
@@ -37,7 +34,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({
@@ -59,8 +56,8 @@ export const MapGL = props => {
         map.once('load', () => {
             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)));
+            ['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)');
@@ -83,21 +80,21 @@ export const MapGL = props => {
             //   resizeObserver.observe(mapRef as Element)
             // }
             // Hook up events
-            mapEvents.forEach(item => {
+            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 => {
+                        map.on(event, (e) => {
                             prop(e);
                             isFirstMessage && debug(`Map '${event}' event:`, e);
                             isFirstMessage = false;
                         });
                     }
                     else {
-                        Object.keys(prop).forEach(layerId => {
-                            map.on(event, layerId, e => {
+                        Object.keys(prop).forEach((layerId) => {
+                            map.on(event, layerId, (e) => {
                                 prop[layerId](e);
                                 isFirstMessage &&
                                     debug(`Map '${event}' event on '${layerId}':`, e);
@@ -108,7 +105,7 @@ export const MapGL = props => {
                 }
             });
             // Update Viewport
-            map.on('move', event => {
+            map.on('move', (event) => {
                 const viewport = {
                     ...props.viewport,
                     id: props.id,
@@ -124,7 +121,7 @@ export const MapGL = props => {
                 setInternal(true);
                 !event.viewport && props.onViewportChange?.(viewport);
             });
-            map.on('moveend', event => {
+            map.on('moveend', (event) => {
                 !event.rotate &&
                     props.onViewportChange?.({ ...props.viewport, inTransit: false });
                 setInternal(false);
@@ -132,7 +129,7 @@ export const MapGL = props => {
         });
     });
     // Hook up viewport event
-    createEffect(on(() => props.viewport, vp => {
+    createEffect(on(() => props.viewport, (vp) => {
         if (props.id !== vp?.id || internal())
             return;
         const viewport = {
@@ -163,8 +160,8 @@ export const MapGL = props => {
         debug('Set Cursor to:', cur);
     });
     const insertLayers = (list, layers) => {
-        layers.forEach(layer => {
-            const index = list.findIndex(i => layer.metadata.smg.beforeType
+        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 =
@@ -175,13 +172,13 @@ export const MapGL = props => {
         return list;
     };
     // Update map style
-    createEffect(prev => {
+    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 oldLayers = oldStyle.layers.filter((l) => map.layerIdList.includes(l.id));
             const oldSources = Object.keys(oldStyle.sources)
-                .filter(s => map.sourceIdList.includes(s))
+                .filter((s) => map.sourceIdList.includes(s))
                 .reduce((obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }), {});
             map.setStyle(style);
             map.once('styledata', () => {
@@ -206,7 +203,7 @@ export const MapGL = props => {
         'showCollisionBoxes',
         'showPadding',
         'showOverdrawInspector',
-    ].forEach(item => {
+    ].forEach((item) => {
         createEffect(() => {
             const prop = props[item];
             if (!map || !prop)
@@ -229,9 +226,6 @@ export const MapGL = props => {
                 inset: 0,
                 'z-index': -1,
             }}/>
-      {mapLoaded() &&
-            <MapProvider map={mapLoaded()}>
-          {props.children}
-        </MapProvider>}
+      {mapLoaded() && (<MapProvider map={mapLoaded()}>{props.children}</MapProvider>)}
     </>);
 };

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

@@ -1,12 +1,9 @@
-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>);
+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>);
 };

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