solid-map-gl 1.5.3 → 1.6.1

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

@@ -1,34 +1,36 @@
-import { createEffect, onCleanup, createSignal } from 'solid-js';
+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}`);
+    }
+};
 export const Control = props => {
-    const map = useMap();
-    const [control, setControl] = createSignal(null);
-    // Add Control
-    createEffect(async () => {
-        const mapLib = map().mapLib;
-        const getControl = (type, options) => {
-            if (props.custom)
-                return new props.custom(options);
-            switch (type) {
-                case 'navigation':
-                    return new mapLib.NavigationControl(options);
-                case 'scale':
-                    return new mapLib.ScaleControl(options);
-                case 'attribution':
-                    return new mapLib.AttributionControl(options);
-                case 'geolocate':
-                    return new mapLib.GeolocateControl(options);
-                case 'fullscreen':
-                    return new mapLib.FullscreenControl();
-                // options || { container: map().container }
-                default:
-                    throw new Error(`Unknown control type: ${type}`);
-            }
-        };
-        const control = getControl(props.type, props.options);
-        control && map()?.addControl(control, props.position);
-        setControl(control);
+    if (!useMap())
+        return;
+    const [map] = useMap();
+    let control = null;
+    // 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);
     });
-    onCleanup(() => map()?.removeControl(control()));
-    return props.children;
+    // Remove Control
+    onCleanup(() => map()?.removeControl(control));
+    return null;
 };

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

@@ -19,10 +19,12 @@ const PATTERN = {
 };
 export const patternList = Object.keys(PATTERN);
 export const Image = props => {
-    const map = useMap()();
+    if (!useMap())
+        return;
+    const [map] = useMap();
     const [size, setSize] = createSignal({ width: 0, height: 0 });
     // Remove Image
-    onCleanup(() => map && map.hasImage(props.id) && map.removeImage(props.id));
+    onCleanup(() => map()?.hasImage(props.id) && map()?.removeImage(props.id));
     // Add or Update Image
     createEffect(() => {
         if (!props.id)
@@ -34,16 +36,16 @@ export const Image = props => {
             : props.options;
         _loadImage(props.image || _createPattern(props.pattern), data => {
             const { width, height } = data;
-            if (!map.hasImage(props.id))
-                map.addImage(props.id, data, ops);
+            if (!map().hasImage(props.id))
+                map().addImage(props.id, data, ops);
             if (!props.pattern &&
                 untrack(() => width === size().width && height === size().height)) {
-                map.updateImage(props.id, data);
-                map.triggerRepaint();
+                map().updateImage(props.id, data);
+                map().triggerRepaint();
             }
             else {
-                map.removeImage(props.id);
-                map.addImage(props.id, data, ops);
+                map().removeImage(props.id);
+                map().addImage(props.id, data, ops);
             }
             setSize({ width, height });
         });
@@ -52,7 +54,7 @@ export const Image = props => {
     const _loadImage = (image, callback) => {
         if (typeof image !== 'string')
             return callback(image);
-        map.loadImage(image, (error, imageData) => {
+        map().loadImage(image, (error, imageData) => {
             if (error)
                 throw error;
             return callback(imageData);

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

@@ -13,46 +13,64 @@ const diff = (newProps = {}, prevProps = {}) => {
     }, []);
 };
 export const Layer = props => {
-    const map = useMap();
-    const sourceId = useSourceId();
+    if (!useMap())
+        return;
+    const [map] = useMap();
+    const sourceId = props.style.source || useSourceId();
     props.id = props.id || createUniqueId();
-    //Remove Layer
-    onCleanup(() => map && map().getLayer(props.id) && map().removeLayer(props.id));
+    const debug = (text, value) => {
+        map().debug &&
+            console.debug('%c[MapGL]', 'color: #10b981', text, value || '');
+    };
+    // Add Layer
+    // if (!map().getLayer(props.id)) {
+    map().addLayer(props.customLayer || {
+        ...props.style,
+        id: props.id,
+        source: sourceId,
+        metadata: {
+            smg: { beforeType: props.beforeType, beforeId: props.beforeId },
+        },
+    }, props.beforeType
+        ? map()
+            .getStyle()
+            .layers.find(l => l.type === props.beforeType)?.id
+        : props.beforeId);
+    map().layerIdList.push(props.id);
+    debug('Add Layer:', props.id);
     // Hook up events
-    createEffect(() => layerEvents.forEach(item => {
+    layerEvents.forEach(item => {
         if (props[item]) {
             const event = item.slice(2).toLowerCase();
-            const callback = e => props[item](e);
-            map()?.on(event, props.id, callback);
-            onCleanup(() => map()?.off(event, props.id, callback));
+            map().on(event, props.id, evt => {
+                props[item](evt);
+                debug(`Layer '${event}' event on '${props.id}':`, evt);
+            });
         }
-    }));
+    });
+    // }
     // Update Style
     createEffect((prev) => {
-        if (!props.style ||
-            !map().style ||
-            !map().getSource(sourceId) ||
-            !map().getLayer(props.id))
+        const style = props.style;
+        if (style === prev || !map().isStyleLoaded())
             return;
-        if (props.style.layout !== prev?.layout)
-            diff(props.style.layout, prev?.layout).forEach(([key, value]) => map().setLayoutProperty(props.id, key, value, { validate: false }));
-        if (props.style.paint !== prev?.paint)
-            diff(props.style.paint, prev?.paint).forEach(([key, value]) => map().setPaintProperty(props.id, key, value, { validate: false }));
-        if (props.style.minzoom !== prev?.minzoom ||
-            props.style.maxzoom !== prev?.maxzoom)
-            map().setLayerZoomRange(props.id, props.style.minzoom, props.style.maxzoom);
-        if (props.style.filter !== prev?.filter)
-            map().setFilter(props.id, props.style.filter, { validate: false });
-        return props.style;
+        if (style.layout !== prev?.layout)
+            diff(style.layout, prev?.layout).forEach(([key, value]) => 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 }));
+        if (style.minzoom !== prev?.minzoom || style.maxzoom !== prev?.maxzoom)
+            map().setLayerZoomRange(props.id, style.minzoom, style.maxzoom);
+        if (style.filter !== prev?.filter)
+            map().setFilter(props.id, style.filter, { validate: false });
+        debug('Update Layer Style:', props.id);
+        return style;
     }, props.style);
     // Update Visibility
     createEffect((prev) => {
-        if (props.visible === undefined ||
-            props.visible === prev ||
-            !map().getSource(sourceId) ||
-            !map().getLayer(props.id))
+        if (props.visible === prev)
             return;
         map().setLayoutProperty(props.id, 'visibility', props.visible ? 'visible' : 'none', { validate: false });
+        debug(`Update Visibility (${props.id}):`, props.visible);
         return props.visible;
     }, props.visible);
     // Update Filter
@@ -61,6 +79,7 @@ export const Layer = props => {
             return;
         !map().isStyleLoaded() && (await map().once('styledata'));
         map().setFilter(props.id, props.filter);
+        debug(`Update Filter (${props.id}):`, props.filter);
     });
     // Update Feature State
     createEffect(async () => {
@@ -77,21 +96,7 @@ export const Layer = props => {
             id: props.featureState.id,
         }, props.featureState.state);
     });
-    // Add Layer
-    createEffect(() => {
-        !map().getLayer(props.id) &&
-            map().addLayer(props.customLayer || {
-                ...props.style,
-                id: props.id,
-                source: sourceId,
-                metadata: {
-                    smg: { beforeType: props.beforeType, beforeId: props.beforeId },
-                },
-            }, props.beforeType
-                ? map()
-                    ?.getStyle()
-                    .layers.find(l => l.type === props.beforeType)?.id
-                : props.beforeId);
-    });
+    //Remove Layer
+    onCleanup(() => map()?.getLayer(props.id) && map()?.removeLayer(props.id));
     return props.children;
 };

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

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

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

@@ -1,4 +1,4 @@
-import { createSignal, createEffect, onMount, onCleanup, createContext, useContext, createUniqueId, untrack, } from 'solid-js';
+import { createSignal, createEffect, onMount, onCleanup, createContext, useContext, createUniqueId, } from 'solid-js';
 import { mapEvents } from '../../events';
 import { vectorStyleList } from '../../mapStyles';
 const MapContext = createContext();
@@ -7,12 +7,17 @@ export const useMap = () => useContext(MapContext);
 /** Creates a new Map Container */
 export const MapGL = props => {
     props.id = props.id || createUniqueId();
+    let map;
+    let resizeObserver;
     const [mapRoot, setMapRoot] = createSignal();
-    const [transitionType, setTransitionType] = createSignal('flyTo');
-    const [darkMode, setDarkMode] = createSignal(typeof window !== 'undefined' &&
-        (window.matchMedia('(prefers-color-scheme: dark)').matches ||
-            document.body.classList.contains('dark')));
-    const debug = (text, value) => props.debug && console.debug(`${text}: %c${value}`, 'color: #00F');
+    const [darkMode, setDarkMode] = createSignal(false);
+    const [userInteraction, setUserInteraction] = createSignal(false);
+    // debounce user interactions
+    createEffect(() => props.onUserInteraction?.(userInteraction()));
+    const debug = (text, value) => {
+        props.debug &&
+            console.debug('%c[MapGL]', 'color: #0ea5e9', text, value || '');
+    };
     const mapRef = (<div id={props.id} class={props?.class} classList={props?.classList} style={props?.style || props?.class || props?.classList
             ? props.style
             : { position: 'absolute', inset: 0, ...props.style }}/>);
@@ -31,168 +36,183 @@ export const MapGL = props => {
         let mapLib = props.mapLib || (await import('mapbox-gl'));
         if (!mapLib.Map)
             mapLib = window['maplibregl'] || window['mapboxgl'];
-        const map = new mapLib.Map({
+        if (!mapLib.supported())
+            throw new Error('Mapbox GL not supported');
+        debug(`Map (v${mapLib.version}) loading...`);
+        map = new mapLib.Map({
             accessToken: 
             //@ts-ignore
-            import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
-            interactive: !!props.onViewportChange,
+            props.options.accessToken || import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
+            interactive: props.options.interactive || !!props.onViewportChange,
             ...props.options,
-            style: getStyle(props.options?.style, props.darkStyle),
+            ...props.viewport,
             container: mapRef,
-            bounds: props.viewport?.bounds,
-            center: props.viewport?.center,
-            zoom: props.viewport?.zoom || null,
-            pitch: props.viewport?.pitch || null,
-            bearing: props.viewport?.bearing || null,
+            style: getStyle(props.options?.style, props.darkStyle),
             fitBoundsOptions: { padding: props.viewport?.padding },
         });
         map.mapLib = mapLib;
         map.debug = props.debug;
-        // map.container = containerRef
-        map.once('load', () => setMapRoot(map));
-        onCleanup(() => map?.remove());
-        // Listen to map container size changes
-        const resizeObserver = new ResizeObserver(() => map.resize());
-        createEffect(() => props.disableResize
-            ? resizeObserver.disconnect()
-            : resizeObserver.observe(mapRef));
+        map.sourceIdList = [];
+        map.layerIdList = [];
+        map.once('load', () => {
+            setMapRoot(map);
+            debug('Map loaded');
+        });
+        ['mousedown', 'touchstart', 'wheel'].forEach(event => map.on(event, () => setUserInteraction(true)));
+        map.on('moveend', evt => !evt.rotate && setUserInteraction(false));
         // Listen to dark theme changes
-        const darkTheme = window.matchMedia('(prefers-color-scheme: dark)');
-        darkTheme.addEventListener('change', () => setDarkMode(darkTheme.matches));
-        const bodyClassObserver = new MutationObserver(() => setDarkMode(document.body.classList.contains('dark')));
-        bodyClassObserver.observe(document.body, { attributes: true });
+        const darkTheme = typeof window !== 'undefined' &&
+            window.matchMedia('(prefers-color-scheme: dark)');
+        darkTheme?.addEventListener('change', () => {
+            setDarkMode(darkTheme.matches);
+            debug('Set dark theme to:', darkTheme.matches?.toString());
+        });
+        new MutationObserver(() => {
+            const darkTheme = document.body.classList.contains('dark');
+            setDarkMode(darkTheme);
+            debug('Set dark theme to:', darkTheme);
+        }).observe(document.body, { attributes: true });
+        // Listen to map container size changes
+        // !props.disableResize &&
+        //   new ResizeObserver(() => {
+        //     map?.resize()
+        //     debug('Map resized')
+        //   }).observe(mapRef as Element)
         // Hook up events
-        createEffect(() => mapEvents.forEach(item => {
+        mapEvents.forEach(item => {
             const prop = props[item];
             if (prop) {
                 const event = item.slice(2).toLowerCase();
                 if (typeof prop === 'function') {
-                    const callback = e => prop(e);
-                    map.on(event, callback);
-                    onCleanup(() => map?.off(event, callback));
+                    map.on(event, e => {
+                        prop(e);
+                        debug(`Map '${event}' event:`, e);
+                    });
                 }
                 else {
                     Object.keys(prop).forEach(layerId => {
-                        const callback = e => prop[layerId](e);
-                        map.on(event, layerId, callback);
-                        onCleanup(() => map?.off(event, layerId, callback));
+                        map.on(event, layerId, e => {
+                            prop[layerId](e);
+                            debug(`Map '${event}' event on '${layerId}':`, e);
+                        });
                     });
                 }
             }
-        }));
-        // Update debug features
-        createEffect(() => {
-            map.showTileBoundaries = props.showTileBoundaries;
-            map.showTerrainWireframe = props.showTerrainWireframe;
-            map.showPadding = props.showPadding;
-            map.showCollisionBoxes = props.showCollisionBoxes;
-            map.showOverdrawInspector = props.showOverdrawInspector;
         });
-        // Update cursor
-        createEffect(prev => {
-            if (props.cursorStyle === prev)
-                return;
-            debug('Update Cursor to', props.cursorStyle);
-            map.getCanvas().style.cursor = props.cursorStyle;
-            return props.cursorStyle;
-        });
-        //Update transition type
-        createEffect(prev => {
-            if (props.transitionType === prev)
-                return;
-            debug('Update Transition to', props.transitionType);
-            setTransitionType(props.transitionType);
-            return props.transitionType;
+        // Hook up viewport events
+        map.on('move', event => {
+            const viewport = {
+                ...props.viewport,
+                id: props.id,
+                point: { x: event.originalEvent?.x, y: event.originalEvent?.y },
+                center: props.viewport.center.lat
+                    ? map.getCenter()
+                    : [map.getCenter().lng, map.getCenter().lat],
+                zoom: map.getZoom(),
+                pitch: map.getPitch(),
+                bearing: map.getBearing(),
+            };
+            props.onViewportChange && props.onViewportChange(viewport);
         });
-        // Update projection
-        createEffect(prev => {
-            if (props.options?.projection === prev)
-                return;
-            debug('Update Projection to', props.options?.projection.name);
-            map.setProjection(props.options?.projection);
-            return props.options?.projection;
+    });
+    // Update Viewport
+    createEffect(() => {
+        const viewport = {
+            ...props.viewport,
+            padding: props.viewport?.padding || 0,
+        };
+        if (!map || props.id === props.viewport?.id || userInteraction())
+            return;
+        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);
+    // Update Projection
+    createEffect(prev => {
+        const proj = props.options?.projection;
+        if (prev !== proj) {
+            map.setProjection(proj);
+            debug('Set Projection to:', proj);
+        }
+        return proj;
+    }, props.options?.projection);
+    // Update cursor
+    createEffect(() => {
+        if (!props.cursorStyle || !map)
+            return;
+        map.getCanvas().style.cursor = props.cursorStyle;
+        debug('Set Cursor to:', props.cursorStyle);
+    });
+    const insertLayers = (list, layers) => {
+        layers.forEach(layer => {
+            const index = list.findIndex(i => layer.metadata.smg.beforeType
+                ? i.type === layer.metadata.smg.beforeType
+                : i.id === layer.metadata.smg.beforeId);
+            list =
+                index === -1
+                    ? [...list, layer]
+                    : [...list.slice(0, index), layer, ...list.slice(index + 1)];
         });
-        // Update map style
-        createEffect(prev => {
-            const style = getStyle(props.options?.style, props.darkStyle);
-            if (style === prev)
-                return;
-            let oldLayers = [];
-            let oldSources = {};
-            debug('Update Mapstyle to', style);
-            if (map.isStyleLoaded()) {
-                const oldStyle = map.getStyle();
-                oldLayers = oldStyle.layers.filter(l => l.id.startsWith('cl-'));
-                oldSources = Object.keys(oldStyle.sources)
-                    .filter(s => s.startsWith('cl-'))
-                    .reduce((obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }), {});
-            }
+        return list;
+    };
+    // Update map style
+    createEffect(prev => {
+        const style = getStyle(props.options?.style, props.darkStyle);
+        if (map?.isStyleLoaded() && prev !== style) {
+            const oldStyle = map.getStyle();
+            const oldLayers = oldStyle.layers.filter(l => map.layerIdList.includes(l.id));
+            const oldSources = Object.keys(oldStyle.sources)
+                .filter(s => map.sourceIdList.includes(s))
+                .reduce((obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }), {});
             map.setStyle(style);
             map.once('styledata', () => {
+                if (!oldLayers)
+                    return;
                 const newStyle = map.getStyle();
                 map.setStyle({
                     ...newStyle,
                     sources: { ...newStyle.sources, ...oldSources },
-                    layers: [...newStyle.layers, ...oldLayers],
+                    layers: insertLayers(newStyle.layers, oldLayers),
                 });
             });
-            return style;
-        }, props.options?.style);
-        // Hook up viewport events
-        createEffect(() => {
-            const viewport = {
-                id: null,
-                center: map.getCenter(),
-                zoom: map.getZoom(),
-                pitch: map.getPitch(),
-                bearing: map.getBearing(),
-                padding: props.viewport?.padding,
-                bounds: props.viewport?.bounds,
-            };
-            const callMove = event => {
-                if (event.originalEvent)
-                    props.onViewportChange &&
-                        props.onViewportChange({ ...viewport, id: props.id });
-                setTransitionType('jumpTo');
-            };
-            const callEnd = event => {
-                if (event.originalEvent)
-                    props.onViewportChange && props.onViewportChange(viewport);
-                setTransitionType(props.transitionType);
-            };
-            map.on('move', callMove).on('moveend', callEnd);
-            onCleanup(() => map?.off('move', callMove).off('moveend', callEnd));
-        });
-        // Update boundaries
-        createEffect(prev => {
-            if (props.viewport?.bounds != prev)
-                props.onViewportChange({
-                    ...props.viewport,
-                    ...map.cameraForBounds(props.viewport?.bounds, {
-                        padding: props.viewport?.padding,
-                    }),
-                });
-            return props.viewport?.bounds;
-        }, props.viewport?.bounds);
-        // Update Viewport
+            debug('Set Mapstyle to:', style);
+        }
+        return style;
+    }, props.options?.style);
+    [
+        'showTileBoundaries',
+        'showTerrainWireframe',
+        'showCollisionBoxes',
+        'showPadding',
+        'showOverdrawInspector',
+    ].forEach(item => {
         createEffect(() => {
-            if (props.id === props.viewport?.id)
+            const prop = props[item];
+            if (!map)
                 return;
-            const viewport = {
-                ...props.viewport,
-                padding: props.viewport?.padding || 0,
-            };
-            switch (untrack(transitionType)) {
-                case 'easeTo':
-                    map.stop().easeTo(viewport);
-                case 'jumpTo':
-                    map.stop().jumpTo(viewport);
-                default:
-                    map.stop().flyTo(viewport);
-            }
+            map[item] = prop;
+            debug(`Set ${item} to:`, prop);
         });
     });
-    return (<MapContext.Provider value={mapRoot}>
+    onCleanup(() => {
+        resizeObserver?.disconnect();
+        map?.remove();
+        debug('Map removed');
+    });
+    return (<MapContext.Provider value={[mapRoot, userInteraction, debug]}>
       {mapRoot() && props.children}
       {mapRef}
     </MapContext.Provider>);