solid-map-gl 1.13.0 → 2.0.0

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

@@ -1,273 +0,0 @@
-import { createSignal, createEffect, onMount, onCleanup, on, } from "solid-js";
-import "mapbox-gl/dist/mapbox-gl.css";
-import { MapProvider } from "../MapProvider";
-import { mapEvents } from "../../events";
-import { vectorStyleList } from "../../mapStyles";
-/** Creates a new Map Container */
-export const MapGL = (props) => {
-    let map;
-    let mapRef;
-    let resizeObserver;
-    let mutationObserver;
-    const [mapLoaded, setMapLoaded] = createSignal(null);
-    const [darkMode, setDarkMode] = createSignal((typeof window !== "undefined" &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches) ||
-        (typeof document !== "undefined" &&
-            document.body.classList.contains("dark")));
-    const [internal, setInternal] = createSignal(false);
-    const debug = (text, value) => (props.debug || props.debugEvents) &&
-        console.debug("%c[MapGL]", "color: #0ea5e9", text, value || "");
-    const getStyle = (light, dark) => {
-        const style = darkMode() && dark ? dark : light;
-        return typeof style === "string" || style instanceof String
-            ? style
-                ?.split(":")
-                .reduce((p, c) => p && p[c], vectorStyleList)
-                ?.replace("{apikey}", 
-            //@ts-ignore
-            props.apikey || import.meta.env.VITE_VECTOR_API_KEY) || style
-            : style;
-    };
-    onMount(async () => {
-        let mapLib = props.mapLib || (await import("mapbox-gl"));
-        if (!mapLib.Map)
-            mapLib = window["maplibregl"] || window["mapboxgl"];
-        if (typeof mapLib.supported === "function" && !mapLib.supported())
-            throw new Error("Mapbox GL not supported");
-        debug(`Map (v${mapLib.version}) loading...`);
-        map = new mapLib.Map({
-            accessToken: 
-            //@ts-ignore
-            props.options?.accessToken || import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
-            interactive: props.options?.interactive || !!props.onViewportChange,
-            ...props.options,
-            ...props.viewport,
-            projection: props.options?.projection,
-            container: mapRef,
-            style: getStyle(props.options?.style, props.darkStyle),
-            fitBoundsOptions: { padding: props.viewport?.padding },
-        });
-        map.debug = props.debug;
-        map.debugEvents = props.debugEvents;
-        map.sourceIdList = [];
-        map.layerIdList = [];
-        window.MapLib = mapLib;
-        // Hook up events
-        mapEvents.forEach((item) => {
-            const prop = props[item];
-            if (prop) {
-                const event = item.slice(2).toLowerCase();
-                if (typeof prop === "function") {
-                    map.on(event, (evt) => {
-                        setTimeout(() => {
-                            if (evt.clickOnLayer)
-                                return;
-                            prop(evt);
-                            props.debugEvents && debug(`Map '${event}' event:`, evt);
-                        }, 0);
-                    });
-                }
-                else {
-                    Object.keys(prop).forEach((layerId) => {
-                        map.on(event, layerId, (evt) => {
-                            setTimeout(() => {
-                                if (evt.clickOnLayer)
-                                    return;
-                                prop[layerId](evt);
-                                props.debugEvents &&
-                                    debug(`Map '${event}' event on '${layerId}':`, evt);
-                            }, 0);
-                        });
-                    });
-                }
-            }
-        });
-        map.once("load", () => {
-            setMapLoaded(map);
-            debug("Map loaded");
-            // Handle User Interaction
-            ["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)");
-            darkTheme?.addEventListener("change", () => {
-                setDarkMode(darkTheme.matches);
-                debug("Set dark theme to:", darkTheme.matches?.toString());
-            });
-            mutationObserver = new MutationObserver(() => {
-                const darkTheme = document.body.classList.contains("dark");
-                setDarkMode(darkTheme);
-                debug("Set theme to:", darkTheme);
-            });
-            mutationObserver.observe(document.body, { attributes: true });
-            // Listen to map container size changes
-            if (!props.disableResize) {
-                resizeObserver = new ResizeObserver(() => {
-                    setTimeout(() => {
-                        map?.resize();
-                    }, 0);
-                    debug("Map resized");
-                });
-                resizeObserver.observe(mapRef);
-            }
-            // Update Configuration
-            createEffect(() => {
-                for (const key in props.config) {
-                    if (!key || key === "id")
-                        continue;
-                    const id = props.config?.id || "basemap";
-                    const value = props.config[key];
-                    //@ts-ignore
-                    map?.setConfigProperty(id, key, value);
-                    debug(`Set Config (${id}:${key}) to:`, value);
-                }
-            });
-            // Update Viewport
-            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(),
-                    inTransit: true,
-                    bounds: null,
-                    //   !internal()
-                    //     ? props.viewport?.center?.lat
-                    //       ? map.getBounds()
-                    //       : [
-                    //           [
-                    //             map.getBounds().getNorthEast().lng,
-                    //             map.getBounds().getNorthEast().lat,
-                    //           ],
-                    //           [
-                    //             map.getBounds().getSouthWest().lng,
-                    //             map.getBounds().getSouthWest().lat,
-                    //           ],
-                    //         ]
-                    //     : null,
-                };
-                setInternal(true);
-                !event.viewport && props.onViewportChange?.(viewport);
-            });
-            map.on("moveend", (event) => {
-                !event.rotate &&
-                    props.onViewportChange?.({ ...props.viewport, inTransit: false });
-                setInternal(false);
-            });
-        });
-    });
-    // Hook up viewport event
-    createEffect(on(() => props.viewport, (vp) => {
-        if (props.id !== vp?.id || internal())
-            return;
-        const viewport = {
-            ...vp,
-            ...(vp.bounds
-                ? map.cameraForBounds(vp.bounds, {
-                    bearing: vp?.bearing,
-                    pitch: vp?.pitch,
-                    padding: vp?.padding,
-                })
-                : null),
-        };
-        map.stop()[props.transitionType || "flyTo"](viewport);
-        debug(`Update Viewport (${props.transitionType || "flyTo"}):`, viewport);
-    }, { defer: true }));
-    // Update Projection
-    createEffect(() => {
-        const proj = props.options?.projection;
-        if (!map || !proj)
-            return;
-        map.setProjection(proj);
-        debug("Set Projection to:", proj);
-    });
-    // Update Cursor
-    createEffect(() => {
-        const cur = props.cursorStyle;
-        if (!map || !cur)
-            return;
-        map.getCanvas().style.cursor = cur;
-        debug("Set Cursor to:", cur);
-    });
-    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)];
-        });
-        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: insertLayers(newStyle.layers, oldLayers),
-                    fog: oldStyle.fog,
-                    terrain: oldStyle.terrain,
-                });
-                debug("Set Mapstyle to:", style);
-            });
-        }
-        return style;
-    }, props.options?.style);
-    // Update debug features
-    [
-        "showTileBoundaries",
-        "showTerrainWireframe",
-        "showCollisionBoxes",
-        "showPadding",
-        "showOverdrawInspector",
-    ].forEach((item) => {
-        createEffect(() => {
-            const prop = props[item];
-            if (!map || !prop)
-                return;
-            map[item] = prop;
-            debug(`Set ${item} to:`, prop);
-        });
-    });
-    onCleanup(() => {
-        resizeObserver?.disconnect();
-        mutationObserver?.disconnect();
-        map?.remove();
-        debug("Map removed");
-    });
-    return (<div ref={mapRef} id={props.id} class={props?.class} classList={props?.classList} style={props?.class || props?.classList
-            ? null
-            : props.style || {
-                position: "absolute",
-                inset: 0,
-                "z-index": -1,
-            }}>
-      {mapLoaded() && (<MapProvider map={mapLoaded()}>
-          <style>{`.overlay{position:relative;width:100%;height:100%;pointer-events:none}.overlay>*{pointer-events:auto}`}</style>
-          <div class="overlay">{props.children}</div>
-        </MapProvider>)}
-    </div>);
-};

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

@@ -1,9 +0,0 @@
-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,57 +0,0 @@
-import { onCleanup, createEffect, splitProps } from 'solid-js';
-import { useMapContext } from '../MapProvider';
-export const Marker = (props) => {
-    if (!props.lngLat)
-        throw new Error('Marker - lngLat is required');
-    const [update, create_popup, create_marker] = splitProps(props, ['lngLat', 'children', 'showPopup', 'draggable'], ['popup', 'onOpen', 'onClose']);
-    const [ctx] = useMapContext();
-    let marker = null;
-    let popup = null;
-    const LNGLAT = update.lngLat;
-    // Add or Update Popup
-    createEffect(() => {
-        if (!ctx.map)
-            return;
-        popup?.remove();
-        popup = new window.MapLib.Popup({
-            closeOnClick: false,
-            focusAfterOpen: false,
-            ...create_popup.popup,
-        })
-            .on('open', () => create_popup.onOpen?.())
-            .on('close', () => create_popup.onClose?.());
-        // Update Popup Content
-        createEffect(() => {
-            if (update.children === undefined)
-                return;
-            typeof update.children === 'string'
-                ? popup?.setHTML(update.children)
-                : popup?.setDOMContent(update.children);
-            marker?.setPopup(popup);
-        });
-        // Toggle Popup
-        createEffect(() => update.showPopup !== popup?.isOpen() && marker?.togglePopup());
-    });
-    // Add or Update Marker
-    createEffect(() => {
-        if (!ctx.map)
-            return;
-        marker?.remove();
-        marker = new window.MapLib.Marker(create_marker.options)
-            .on('dragstart', () => create_marker.onDragStart?.())
-            .on('dragend', () => create_marker.onDragEnd?.())
-            .on('drag', () => create_marker.onDrag?.(marker?.getLngLat().toArray()))
-            .setPopup(popup)
-            .setLngLat(LNGLAT)
-            .addTo(ctx.map);
-        // Toggle Popup
-        createEffect(() => update.showPopup !== popup?.isOpen() && marker?.togglePopup());
-    });
-    // Update Position
-    createEffect(() => marker?.setLngLat(update.lngLat));
-    // Update Draggable
-    createEffect(() => marker?.setDraggable(update.draggable));
-    // Remove Marker
-    onCleanup(() => marker?.remove());
-    return null;
-};

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

@@ -1,38 +0,0 @@
-import { onCleanup, createEffect, splitProps } from "solid-js";
-import { useMapContext } from "../MapProvider";
-export const Popup = (props) => {
-    if (!props.trackPointer && !props.lngLat)
-        throw new Error("Popup - lngLat or trackPointer is required");
-    const [update, create] = splitProps(props, [
-        "lngLat",
-        "children",
-        "trackPointer",
-    ]);
-    const [ctx] = useMapContext();
-    let popup;
-    // Update Popup
-    createEffect(() => {
-        if (!ctx.map)
-            return;
-        popup?.remove();
-        popup = new window.MapLib.Popup({
-            closeOnClick: false,
-            focusAfterOpen: false,
-            ...create.options,
-        })
-            .on("open", () => create.onOpen?.())
-            .on("close", () => create.onClose?.())
-            .addTo(ctx.map);
-        // Update Position
-        createEffect(() => update.trackPointer
-            ? popup.trackPointer()
-            : popup.setLngLat(update.lngLat));
-        // Update Content
-        createEffect(() => typeof update.children === "string"
-            ? popup.setHTML(update.children)
-            : popup.setDOMContent(update.children));
-    });
-    // Remove Popup
-    onCleanup(() => popup?.remove());
-    return null;
-};

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

@@ -1,89 +0,0 @@
-import { onCleanup, createEffect, createContext, useContext, createUniqueId, } from 'solid-js';
-import { useMapContext } from '../MapProvider';
-import { rasterStyleList } from '../../mapStyles';
-const SourceContext = createContext();
-export const useSourceId = () => useContext(SourceContext);
-export const Source = props => {
-    const [ctx] = useMapContext();
-    props.id ??= createUniqueId();
-    const debug = (text, value) => {
-        ctx.map.debug &&
-            console.debug('%c[MapGL]', 'color: #ec4899', text, value || '');
-    };
-    const lookup = url => {
-        const s = url?.split(':').reduce((p, c) => p && p[c], rasterStyleList);
-        const source = s
-            ? {
-                ...props.source,
-                url: '',
-                tiles: [
-                    s
-                        .replace('{apikey}', //@ts-ignore
-                    props.source.apikey || import.meta.env.VITE_RASTER_API_KEY)
-                        .replace('{r}', window.devicePixelRatio > 1 ? '@2x' : ''),
-                ],
-                attribution: rasterStyleList[url.split(':')[0]]._copy,
-            }
-            : props.source;
-        source.tiles &&
-            (source.tiles = ['a', 'b', 'c'].map(i => source.tiles[0].replace('{s}', i)));
-        return source;
-    };
-    // Add Source
-    ctx.map.addSource(props.id, lookup(props.source.url));
-    ctx.map.sourceIdList.push(props.id);
-    debug('Add Source:', props.id);
-    // Update Data
-    const source = ctx.map.getSource(props.id);
-    switch (props.source.type) {
-        case 'geojson':
-            createEffect(() => {
-                const data = props.source.data;
-                if (!ctx.map.isSourceLoaded(props.id))
-                    return;
-                source.setData(data || {});
-                debug('Update GeoJSON Data:', props.id);
-            });
-            break;
-        case 'image':
-            createEffect(() => {
-                const url = props.source.url;
-                const coords = props.source.coordinates;
-                if (!ctx.map.isSourceLoaded(props.id))
-                    return;
-                source.updateImage(url, coords);
-                debug('Update Image Data:', props.id);
-            });
-            break;
-        case 'vector':
-            createEffect(() => {
-                const url = props.source.url;
-                const tiles = props.source.tiles;
-                if (!ctx.map.isSourceLoaded(props.id))
-                    return;
-                url ? source.setUrl(url) : source.setTiles(tiles);
-                debug('Update Vector Data:', props.id);
-            });
-            break;
-        case 'raster':
-            createEffect(() => {
-                const src = lookup(props.source.url);
-                if (!ctx.map.isSourceLoaded(props.id))
-                    return;
-                src.url ? source.setUrl(src.url) : source.setTiles(src.tiles);
-                debug('Update Raster Data:', props.id);
-            });
-            break;
-    }
-    // Remove Source
-    onCleanup(() => {
-        ctx.map
-            ?.getStyle()
-            .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}>
-      {props.children}
-    </SourceContext.Provider>);
-};

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

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

package/dist/source/events.js

@@ -1,78 +0,0 @@
-const mapEvents = [
-    'onMouseDown',
-    'onMouseUp',
-    'onMouseOver',
-    'onMouseOut',
-    'onMouseMove',
-    'onMouseEnter',
-    'onMouseLeave',
-    'onPreClick',
-    'onClick',
-    'onDblClick',
-    'onContextMenu',
-    'onTouchStart',
-    'onTouchEnd',
-    'onTouchCancel',
-    'onWheel',
-    'onResize',
-    'onRemove',
-    'onTouchMove',
-    'onMoveStart',
-    'onMove',
-    'onMoveEnd',
-    'onDragStart',
-    'onDrag',
-    'onDragEnd',
-    'onZoomStart',
-    'onZoom',
-    'onZoomEnd',
-    'onRotateStart',
-    'onRotate',
-    'onRotatEnd',
-    'onPitchStart',
-    'onPitch',
-    'onPitchEnd',
-    'onBoxZoomStart',
-    'onBoxZoomEnd',
-    'onBoxZoomCancel',
-    'onWebglContextLost',
-    'onWebglContextRestored',
-    'onLoad',
-    'onRender',
-    'onIdle',
-    'onError',
-    'onData',
-    'onStyleData',
-    'onSourceData',
-    'onDataLoading',
-    'onStyleDataLoading',
-    'onSourceDataLoading',
-    'onStyleImageMissing',
-];
-const layerEvents = [
-    'onMouseDown',
-    'onMouseUp',
-    'onMouseOver',
-    'onMouseOut',
-    'onMouseMove',
-    'onMouseEnter',
-    'onMouseLeave',
-    'onClick',
-    'onDblClick',
-    'onContextMenu',
-    'onTouchStart',
-    'onTouchEnd',
-    'onTouchCancel',
-];
-const drawEvents = [
-    'onCreate',
-    'onDelete',
-    'onCombine',
-    'onUncombine',
-    'onUpdate',
-    'onSelectionchange',
-    'onModechange',
-    'onRender',
-    'onActionable',
-];
-export { mapEvents, layerEvents, drawEvents };

package/dist/source/index.jsx

@@ -1,14 +0,0 @@
-export { MapGL as default } from "./components/MapGL";
-export { MapProvider, useMapContext } from "./components/MapProvider";
-export { Source, useSourceId } from "./components/Source";
-export { Layer } from "./components/Layer";
-export { Layer3D, useScene } from "./components/Layer3D";
-export { Atmosphere } from "./components/Atmosphere";
-export { Terrain } from "./components/Terrain";
-export { Control } from "./components/Control";
-export { Marker } from "./components/Marker";
-export { Popup } from "./components/Popup";
-export { MGL_Image as Image, patternList } from "./components/Image";
-export { Camera } from "./components/Camera";
-export { Light } from "./components/Light";
-export { Draw } from "./components/Draw";