solid-map-gl 1.7.2 → 1.8.1

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

@@ -1,5 +1,5 @@
 import { createEffect, onCleanup } from 'solid-js';
-import { useMap } from '../MapGL';
+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
@@ -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,18 +16,18 @@ 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();
+    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 = (time) => {
+    const frame = () => {
         props.translate && window.requestAnimationFrame(frame);
         const params = [
             props.translate.start,
@@ -57,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(() => {
@@ -106,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,36 +1,22 @@
-import { createEffect, onCleanup } from 'solid-js';
-import { useMap } from '../MapGL';
-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 => {
-    if (!useMap())
-        return;
-    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,13 +1,11 @@
 import { onCleanup } from 'solid-js';
-import { useMap } from '../MapGL';
+import { useMapContext } from '../MapProvider';
 import { drawEvents } from '../../events';
-export const Draw = props => {
-    if (!useMap())
-        return;
-    const [map] = useMap();
+export const Draw = (props) => {
+    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 = {};
@@ -16,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 '../MapGL';
+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,17 +19,15 @@ const PATTERN = {
 };
 export const patternList = Object.keys(PATTERN);
 export const MGL_Image = props => {
-    if (!useMap())
-        return;
-    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
@@ -43,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);
             });
         });
@@ -78,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 '../MapGL';
+import { useMapContext } from '../MapProvider';
 import { useSourceId } from '../Source';
 import { layerEvents } from '../../events';
 const diff = (newProps = {}, prevProps = {}) => {
@@ -13,17 +13,15 @@ const diff = (newProps = {}, prevProps = {}) => {
     }, []);
 };
 export const Layer = props => {
-    if (!useMap())
-        return;
-    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,
@@ -31,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);
             });
@@ -53,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);
@@ -67,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);
@@ -75,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,12 +1,10 @@
 import { onCleanup, createEffect } from 'solid-js';
-import { useMap } from '../MapGL';
-export const Light = props => {
-    if (!useMap())
-        return;
-    const [map] = useMap();
+import { useMapContext } from '../MapProvider';
+export const Light = (props) => {
+    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

@@ -1,9 +1,7 @@
-import { createSignal, createEffect, onMount, onCleanup, createContext, useContext, createUniqueId, on, } 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,8 +9,7 @@ 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' &&
@@ -40,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({
@@ -60,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)));
@@ -116,7 +112,7 @@ export const MapGL = props => {
                 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],
@@ -225,7 +221,7 @@ export const MapGL = props => {
         map?.remove();
         debug('Map removed');
     });
-    return (<MapContext.Provider value={[mapRoot, userInteraction, debug]}>
+    return (<>
       <div ref={mapRef} id={props.id} class={props?.class} classList={props?.classList} style={props?.class || props?.classList
             ? null
             : props.style || {
@@ -233,6 +229,9 @@ export const MapGL = props => {
                 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,15 @@
+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 && 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,9 +1,7 @@
 import { onCleanup, createEffect, untrack } from 'solid-js';
-import { useMap } from '../MapGL';
-export const Marker = props => {
-    if (!useMap())
-        return;
-    const [map] = useMap();
+import { useMapContext } from '../MapProvider';
+export const Marker = (props) => {
+    const [ctx] = useMapContext();
     let marker = null;
     let popup = null;
     if (!props.lngLat)
@@ -12,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
@@ -30,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,18 +1,16 @@
 import { onCleanup, createEffect, untrack } from 'solid-js';
-import { useMap } from '../MapGL';
-export const Popup = props => {
-    if (!useMap())
-        return;
-    const [map] = useMap();
+import { useMapContext } from '../MapProvider';
+export const Popup = (props) => {
+    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
@@ -21,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,15 +1,13 @@
 import { onCleanup, createEffect, createContext, useContext, createUniqueId, } from 'solid-js';
-import { useMap } from '../MapGL';
+import { useMapContext } from '../MapProvider';
 import { rasterStyleList } from '../../mapStyles';
 const SourceContext = createContext();
 export const useSourceId = () => useContext(SourceContext);
 export const Source = props => {
-    if (!useMap())
-        return;
-    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 => {
@@ -32,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);
@@ -51,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);
@@ -61,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);
@@ -70,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);
@@ -79,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}>