solid-map-gl 1.1.28 → 1.2.2

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

@@ -1,21 +0,0 @@
-import { onMount, onCleanup, createEffect } from 'solid-js';
-import { useMap } from '../MapGL';
-const Fog = props => {
-    const map = useMap();
-    // Add Fog Layer
-    onMount(async () => {
-        !map().isStyleLoaded() && (await map().once('styledata'));
-        map().setFog(props.style);
-    });
-    // Remove Fog Layer
-    onCleanup(() => map().setFog(null));
-    // Update Visibility
-    createEffect(async () => {
-        if (props.visible === undefined)
-            return;
-        !map().isStyleLoaded() && (await map().once('styledata'));
-        map().setFog(props.visible ? props.style : null);
-    });
-    return props.children;
-};
-export default Fog;

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

@@ -1,139 +0,0 @@
-import { createSignal, createEffect, onMount, onCleanup, createContext, useContext, useTransition, createUniqueId, untrack, on, } from 'solid-js';
-import { mapEvents } from '../../events';
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl/dist/mapbox-gl.css';
-const [pending, start] = useTransition();
-const [transitionType, setTransitionType] = createSignal('flyTo');
-const MapContext = createContext();
-const useMap = () => useContext(MapContext);
-const MapGL = props => {
-    let map;
-    let mapRef;
-    let containerRef;
-    props.id = props.id || createUniqueId();
-    onMount(() => {
-        map = new mapboxgl.Map({
-            ...props.options,
-            style: props.options?.style || { version: 8, sources: {}, layers: [] },
-            container: mapRef,
-            interactive: !!props.onViewportChange,
-            bounds: props.viewport?.bounds,
-            center: props.viewport?.center,
-            zoom: props.viewport?.zoom || null,
-            pitch: props.viewport?.pitch || null,
-            bearing: props.viewport?.bearing || null,
-            fitBoundsOptions: { padding: props.viewport?.padding },
-        });
-        map.container = containerRef;
-    });
-    onCleanup(() => map.remove());
-    // Hook up events
-    createEffect(() => mapEvents.forEach(item => {
-        if (props[item]) {
-            const event = item.slice(2).toLowerCase();
-            const callback = e => props[item](e);
-            map.on(event, callback);
-            onCleanup(() => map.off(event, callback));
-        }
-    }));
-    // Update debug features
-    createEffect(() => (map.showTileBoundaries = props.showTileBoundaries));
-    createEffect(() => (map.showTerrainWireframe = props.showTerrainWireframe));
-    createEffect(() => (map.showPadding = props.showPadding));
-    createEffect(() => (map.showCollisionBoxes = props.showCollisionBoxes));
-    createEffect(() => (map.showOverdrawInspector = props.showOverdrawInspector));
-    createEffect(() => (map.getCanvas().style.cursor = props.cursorStyle));
-    // Update map style
-    createEffect(on(() => props.options.style, () => {
-        const oldStyle = map.getStyle();
-        const oldLayers = oldStyle.layers.filter(l => l.id.startsWith('cl-'));
-        const oldSources = Object.keys(oldStyle.sources)
-            .filter(s => s.startsWith('cl-'))
-            .reduce((obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }), {});
-        map.setStyle(props.options.style);
-        map.once('styledata', () => {
-            const newStyle = map.getStyle();
-            map.setStyle({
-                ...newStyle,
-                sources: { ...newStyle.sources, ...oldSources },
-                layers: [...newStyle.layers, ...oldLayers],
-            });
-        });
-    }, { defer: true }));
-    // Update projection
-    createEffect(on(() => props.options.projection, () => map.setProjection(props.options.projection), { defer: true }));
-    createEffect(() => setTransitionType(props.transitionType));
-    // 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
-    createEffect(() => {
-        if (props.id === props.viewport?.id)
-            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);
-        }
-    });
-    let index = 0;
-    createEffect(() => {
-        if (props.triggerResize) {
-            index = 0;
-            window.requestAnimationFrame(function loop() {
-                if (index < 15) {
-                    index++;
-                    window.requestAnimationFrame(loop);
-                    start(() => map.resize());
-                }
-            });
-        }
-    });
-    return (<MapContext.Provider value={() => map}>
-      <section ref={containerRef} style={{ position: 'absolute', 'z-index': 1 }}>
-        {props.children}
-      </section>
-      <div ref={mapRef} class={props.class || ''} classList={props.classList} style={{ height: '100%', width: '100%', ...props.style }}/>
-    </MapContext.Provider>);
-};
-export { MapGL as default, useMap };

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

@@ -1,22 +0,0 @@
-import { onMount, onCleanup, createEffect } from 'solid-js';
-import { useMap } from '../MapGL';
-const Sky = props => {
-    const map = useMap();
-    const layerId = '_sky';
-    // Add Sky Layer
-    onMount(async () => {
-        !map().isStyleLoaded() && (await map().once('styledata'));
-        !map().getLayer(layerId) && map().addLayer({ ...props.style, id: layerId });
-    });
-    // Remove Sky Layer
-    onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId));
-    // Update Visibility
-    createEffect(async () => {
-        if (props.visible === undefined)
-            return;
-        !map().isStyleLoaded() && (await map().once('styledata'));
-        map().setLayoutProperty(layerId, 'visibility', props.visible ? 'visible' : 'none');
-    });
-    return props.children;
-};
-export default Sky;

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

@@ -1,32 +0,0 @@
-import { onMount, onCleanup, createEffect, createContext, useContext, createUniqueId, } from 'solid-js';
-import { useMap } from '../MapGL';
-const SourceContext = createContext();
-const useSource = () => useContext(SourceContext);
-const SourceComponent = props => {
-    const map = useMap();
-    props.id = props.id || createUniqueId();
-    // Add Source
-    onMount(async () => {
-        !map().isStyleLoaded() && (await map().once('styledata'));
-        !map().getSource(props.id) && map().addSource(props.id, props.source);
-    });
-    // Remove Source
-    onCleanup(() => {
-        map()
-            .getStyle()
-            .layers.forEach(layer => layer.source === props.id && map().removeLayer(layer.id));
-        map().getSource(props.id) && map().removeSource(props.id);
-    });
-    // Update GeoJSON Data
-    createEffect(async () => {
-        if (props.source.type !== 'geojson' && !props.source.data)
-            return;
-        map().style &&
-            map().getSource(props.id) &&
-            map().getSource(props.id).setData(props.source.data);
-    });
-    return (<SourceContext.Provider value={{ id: props.id }}>
-      {props.children}
-    </SourceContext.Provider>);
-};
-export { SourceComponent as default, useSource };

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

@@ -1,23 +0,0 @@
-import { onMount, onCleanup, createEffect } from 'solid-js';
-import { useMap } from '../MapGL';
-import { useSource } from '../Source';
-const Terrain = props => {
-    const map = useMap();
-    const source = useSource();
-    // Add Terrain Layer
-    onMount(async () => {
-        !map().isStyleLoaded() && (await map().once('styledata'));
-        map().setTerrain({ ...props.style, source: source.id });
-    });
-    // Remove Terrain Layer
-    onCleanup(() => map().setTerrain(null));
-    // Update Visibility
-    createEffect(async () => {
-        if (props.visible === undefined)
-            return;
-        !map().isStyleLoaded() && (await map().once('styledata'));
-        map().setTerrain(props.visible ? props.style : null);
-    });
-    return props.children;
-};
-export default Terrain;

package/dist/source/index.jsx

@@ -1,10 +0,0 @@
-export { default, useMap } from './components/MapGL';
-export { default as Source } from './components/Source';
-export { default as Layer } from './components/Layer';
-export { default as Fog } from './components/Fog';
-export { default as Sky } from './components/Sky';
-export { default as Terrain } from './components/Terrain';
-export { default as Control } from './components/Control';
-export { default as Marker } from './components/Marker';
-export { default as Popup } from './components/Popup';
-export { default as Image } from './components/Image';

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

@@ -1,8 +0,0 @@
-import { Component } from 'solid-js';
-import type { SourceSpecification } from 'mapbox-gl/src/style-spec/types.js';
-declare const useSource: () => Source;
-declare const SourceComponent: Component<{
-    id?: string;
-    source: SourceSpecification;
-}>;
-export { SourceComponent as default, useSource };

package/dist/types/index.d.ts

@@ -1,11 +0,0 @@
-export { default, useMap } from './components/MapGL';
-export { default as Source } from './components/Source';
-export { default as Layer } from './components/Layer';
-export { default as Fog } from './components/Fog';
-export { default as Sky } from './components/Sky';
-export { default as Terrain } from './components/Terrain';
-export { default as Control } from './components/Control';
-export { default as Marker } from './components/Marker';
-export { default as Popup } from './components/Popup';
-export { default as Image } from './components/Image';
-export type { Viewport } from './components/MapGL';