solid-map-gl 1.1.28 → 1.2.2

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

@@ -0,0 +1,149 @@
+import { createSignal, createEffect, onMount, onCleanup, createContext, useContext, useTransition, createUniqueId, untrack, on, } from 'solid-js';
+import { mapEvents } from '../../events';
+import { vectorStyleList } from '../../styles';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+const MapContext = createContext();
+/** Provides the Mapbox Map Object */
+export const useMap = () => useContext(MapContext);
+/** Creates a new Map Container */
+export const MapGL = props => {
+    let map;
+    let mapRef;
+    let containerRef;
+    props.id = props.id || createUniqueId();
+    const [mapRoot, setMapRoot] = createSignal();
+    const [pending, start] = useTransition();
+    const [transitionType, setTransitionType] = createSignal('flyTo');
+    onMount(() => {
+        map = new mapboxgl.Map({
+            ...props.options,
+            style: vectorStyleList[props.options?.style] ||
+                props.options?.style || { version: 8, sources: {}, layers: [] },
+            container: mapRef || 'map',
+            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;
+        map.once('styledata').then(() => setMapRoot(map));
+        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;
+            map.showTerrainWireframe = props.showTerrainWireframe;
+            map.showPadding = props.showPadding;
+            map.showCollisionBoxes = props.showCollisionBoxes;
+            map.showOverdrawInspector = props.showOverdrawInspector;
+        });
+        // Update cursor
+        createEffect(() => (map.getCanvas().style.cursor = props.cursorStyle));
+        //Update transition type
+        createEffect(() => setTransitionType(props.transitionType));
+        // Update projection
+        createEffect(on(() => props.options?.projection, proj => map.setProjection(proj), { defer: true }));
+        // Update map style
+        createEffect(on(() => props.options?.style, 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(vectorStyleList[style] ||
+                style || { version: 8, sources: {}, layers: [] });
+            map.once('styledata', () => {
+                const newStyle = map.getStyle();
+                map.setStyle({
+                    ...newStyle,
+                    sources: { ...newStyle.sources, ...oldSources },
+                    layers: [...newStyle.layers, ...oldLayers],
+                });
+            });
+        }, { defer: true }));
+        // 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={mapRoot}>
+      <section ref={containerRef} style={{ position: 'absolute', 'z-index': 1 }}>
+        {mapRoot() ? props.children : null}
+      </section>
+      <div id='map' ref={mapRef} class={props.class || null} classList={props.classList || null} style={{ height: '100%', width: '100%', ...props.style }}/>
+    </MapContext.Provider>);
+};

package/dist/{types → index}/components/Marker/index.d.ts

@@ -1,8 +1,8 @@
 import { Component } from 'solid-js';
 import type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js';
 import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
-declare const Marker: Component<{
+export declare const Marker: Component<{
     options?: MarkerSpecification;
     lnglat: LngLatLike;
+    children?: any;
 }>;
-export default Marker;

package/dist/{source → index}/components/Marker/index.jsx

@@ -1,11 +1,11 @@
-import { onMount, onCleanup, createEffect } from 'solid-js';
+import { onCleanup, createEffect } from 'solid-js';
 import { useMap } from '../MapGL';
 import mapboxgl from 'mapbox-gl';
-const Marker = props => {
+export const Marker = props => {
     const map = useMap();
     let marker = null;
     // Add Marker
-    onMount(async () => {
+    createEffect(() => {
         marker = new mapboxgl.Marker(props.options)
             .setLngLat(props.lnglat)
             .setPopup(props.children
@@ -16,7 +16,6 @@ const Marker = props => {
     // Remove Marker
     onCleanup(() => marker.remove());
     // Update Position
-    createEffect(() => marker.setLngLat(props.lnglat));
+    createEffect(() => marker && marker.setLngLat(props.lnglat));
     return <></>;
 };
-export default Marker;

package/dist/{types → index}/components/Popup/index.d.ts

@@ -1,8 +1,8 @@
 import { Component } from 'solid-js';
 import type { PopupSpecification } from 'mapbox-gl/src/style-spec/types.js';
 import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
-declare const Popup: Component<{
+export declare const Popup: Component<{
     options?: PopupSpecification;
     lnglat: LngLatLike;
+    children?: any;
 }>;
-export default Popup;

package/dist/{source → index}/components/Popup/index.jsx

@@ -1,11 +1,11 @@
-import { onMount, onCleanup, createEffect } from 'solid-js';
+import { onCleanup, createEffect } from 'solid-js';
 import { useMap } from '../MapGL';
 import mapboxgl from 'mapbox-gl';
-const Popup = props => {
+export const Popup = props => {
     const map = useMap();
     let popup = null;
     // Add Popup
-    onMount(async () => {
+    createEffect(() => {
         popup = new mapboxgl.Popup(props.options)
             .setLngLat(props.lnglat)
             .setDOMContent(<div>{props.children}</div>)
@@ -14,9 +14,8 @@ const Popup = props => {
     // Remove Popup
     onCleanup(() => popup.remove());
     // Update Position
-    createEffect(() => popup.setLngLat(props.lnglat));
+    createEffect(() => popup && popup.setLngLat(props.lnglat));
     // Update Content
-    createEffect(() => popup.setDOMContent(<div>{props.children}</div>));
+    createEffect(() => popup && popup.setDOMContent(<div>{props.children}</div>));
     return <></>;
 };
-export default Popup;

package/dist/{types → index}/components/Sky/index.d.ts

@@ -1,7 +1,7 @@
 import { Component } from 'solid-js';
 import type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js';
-declare const Sky: Component<{
+export declare const Sky: Component<{
     style: StyleSpecification;
     visible?: boolean;
+    children?: any;
 }>;
-export default Sky;

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from 'solid-js';
+import type { SourceSpecification } from 'mapbox-gl/src/style-spec/types.js';
+export declare const useSourceId: () => string;
+export declare const Source: Component<{
+    /** @optional Source ID for referencing non nexted Layers */
+    id?: string;
+    /** @see https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/ */
+    source: SourceSpecification;
+    children?: any;
+}>;

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

@@ -0,0 +1,68 @@
+import { onCleanup, createEffect, createContext, useContext, createUniqueId, } from 'solid-js';
+import { useMap } from '../MapGL';
+import { rasterStyleList } from '../../styles';
+const SourceContext = createContext();
+export const useSourceId = () => useContext(SourceContext);
+export const Source = props => {
+    const map = useMap();
+    props.id = props.id || createUniqueId();
+    const lookup = url => rasterStyleList[url]
+        ? {
+            ...props.source,
+            url: '',
+            tiles: [
+                rasterStyleList[url][0].replace('{apikey}', props.source.apikey),
+            ],
+            attribution: rasterStyleList[url][1],
+        }
+        : props.source;
+    // Add Source
+    createEffect(() => {
+        const source = lookup(props.source.url);
+        source.tiles &&
+            (source.tiles = ['a', 'b', 'c'].map(i => source.tiles[0].replace('{s}', i)));
+        !map().getSource(props.id) && map().addSource(props.id, 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
+    createEffect(() => {
+        const source = map().getSource(props.id);
+        if (!source)
+            return;
+        // Update GeoJSON Data
+        if (props.source.type === 'geojson' && props.source.data)
+            source.setData(props.source.data);
+        // Update Image URL
+        if (props.source.type === 'image' &&
+            (props.source.url || props.source.coordinates))
+            source.updateImage(props.source.url, props.source.coordinates);
+        // Update Vector URL or Tiles
+        if (props.source.type === 'vector' &&
+            (props.source.url || props.source.tiles))
+            props.source.url
+                ? source.setUrl(props.source.url)
+                : source.setTiles(props.source.tiles);
+        // Update Raster URL or Tiles
+        if (props.source.type === 'raster' &&
+            (props.source.url || props.source.tiles)) {
+            const src = lookup(props.source.url);
+            src.tiles &&
+                (src.tiles = ['a', 'b', 'c'].map(i => src.tiles[0].replace('{s}', i)));
+            source._tileJSONRequest?.cancel();
+            source.url = src.url;
+            source.scheme = src.scheme;
+            source._options = { ...source._options, ...src };
+            map().style._sourceCaches[`other:${props.id}`]?.clearTiles();
+            source.load();
+        }
+    });
+    return (<SourceContext.Provider value={props.id}>
+      {props.children}
+    </SourceContext.Provider>);
+};

package/dist/{types → index}/components/Terrain/index.d.ts

@@ -1,7 +1,7 @@
 import { Component } from 'solid-js';
 import type { TerrainSpecification } from 'mapbox-gl/src/style-spec/types.js';
-declare const Terrain: Component<{
+export declare const Terrain: Component<{
     style: TerrainSpecification;
     visible?: boolean;
+    children?: any;
 }>;
-export default Terrain;

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

@@ -0,0 +1,19 @@
+import { onCleanup, createEffect } from 'solid-js';
+import { useMap } from '../MapGL';
+import { useSourceId } from '../Source';
+export const Terrain = props => {
+    const map = useMap();
+    const sourceId = useSourceId();
+    // Add Terrain Layer
+    createEffect(() => {
+        map().setTerrain({ ...props.style, source: sourceId });
+    });
+    // Remove Terrain Layer
+    onCleanup(() => map().setTerrain(null));
+    // Update Visibility
+    createEffect(() => {
+        props.visible !== undefined &&
+            map().setTerrain(props.visible ? props.style : null);
+    });
+    return props.children;
+};

package/dist/index/index.d.ts

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

package/dist/index/index.jsx

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

package/dist/index/styles.d.ts

@@ -0,0 +1,56 @@
+export declare const vectorStyleList: {
+    'mb:light': string;
+    'mb:dark': string;
+    'mb:streets': string;
+    'mb:outdoor': string;
+    'mb:sat': string;
+    'mb:sat-streets': string;
+    'mb:nav': string;
+    'mb:nav-night': string;
+    'mb:basic': string;
+    'mb:monochrome': string;
+    'mb:leshine': string;
+    'mb:icecream': string;
+    'mb:cali': string;
+    'mb:northstar': string;
+    'mb:mineral': string;
+    'mb:moonlight': string;
+    'mb:frank': string;
+    'mb:minimo': string;
+    'mb:decimal': string;
+    'mb:standard': string;
+    'mb:blueprint': string;
+    'mb:bubble': string;
+    'mb:pencil': string;
+    'mb:swiss-ski': string;
+    'mb:vintage': string;
+    'mb:whaam': string;
+    'mb:neon': string;
+    'mb:camoflauge': string;
+    'mb:emerald': string;
+    'mb:runner': string;
+    'mb:x-ray': string;
+};
+export declare const rasterStyleList: {
+    'osm:org': string[];
+    'osm:human': string[];
+    'osm:cycle': string[];
+    'carto:voyager': string[];
+    'carto:positron': string[];
+    'carto:dark': string[];
+    'open:topo': string[];
+    'stamen:toner': string[];
+    'stamen:toner-lite': string[];
+    'stamen:watercolor': string[];
+    'stamen:terrain': string[];
+    'tf:cycle': string[];
+    'tf:trans': string[];
+    'tf:trans-dark': string[];
+    'tf:landscape': string[];
+    'tf:outdoors': string[];
+    'tf:neighbourhood': string[];
+    'tf:spinal': string[];
+    'tf:pioneer': string[];
+    'tf:atlas': string[];
+    'tf:mobile': string[];
+};

package/dist/index/styles.js

@@ -0,0 +1,121 @@
+const mapBase = 'mapbox://styles/mapbox';
+const gitBase = 'https://raw.githubusercontent.com';
+export const vectorStyleList = {
+    'mb:light': `${mapBase}/light-v10`,
+    'mb:dark': `${mapBase}/dark-v10`,
+    'mb:streets': `${mapBase}/streets-v11`,
+    'mb:outdoor': `${mapBase}/outdoors-v11`,
+    'mb:sat': `${mapBase}/satellite-v9`,
+    'mb:sat-streets': `${mapBase}/satellite-streets-v11`,
+    'mb:nav': `${mapBase}/navigation-guidance-day-v4`,
+    'mb:nav-night': `${mapBase}/navigation-guidance-night-v4`,
+    'mb:basic': `${mapBase}/cjf4m44iw0uza2spb3q0a7s41`,
+    'mb:monochrome': `${mapBase}/cjv6rzz4j3m4b1fqcchuxclhb`,
+    'mb:leshine': `${mapBase}/cjcunv5ae262f2sm9tfwg8i0w`,
+    'mb:icecream': `${mapBase}/cj7t3i5yj0unt2rmt3y4b5e32`,
+    'mb:cali': `${mapBase}/cjerxnqt3cgvp2rmyuxbeqme7`,
+    'mb:northstar': `${mapBase}/cj44mfrt20f082snokim4ungi`,
+    'mb:mineral': `${mapBase}/cjtep62gq54l21frr1whf27ak`,
+    'mb:moonlight': `${mapBase}/cj3kbeqzo00022smj7akz3o1e`,
+    'mb:frank': `${mapBase}-map-design/ckshxkppe0gge18nz20i0nrwq`,
+    'mb:minimo': `${mapBase}-map-design/cksjc2nsq1bg117pnekb655h1`,
+    'mb:decimal': `${mapBase}-map-design/ck4014y110wt61ctt07egsel6`,
+    'mb:standard': `${mapBase}-map-design/ckr0svm3922ki18qntevm857n`,
+    'mb:blueprint': `${mapBase}-map-design/cks97e1e37nsd17nzg7p0308g`,
+    'mb:bubble': `${mapBase}-map-design/cksysy2nl62zp17quosctdtcc`,
+    'mb:pencil': `${mapBase}-map-design/cks9iema71es417mlrft4go2k`,
+    'mb:swiss-ski': `${gitBase}/mapbox/mapbox-gl-swiss-ski-style/master/cij1zoclj002y8rkkdjl69psd.json`,
+    'mb:vintage': `${gitBase}/mapbox/mapbox-gl-vintage-style/master/cif5p01n202nisaktvljx9mv3.json`,
+    'mb:whaam': `${gitBase}/mapbox/mapbox-gl-whaam-style/master/cii8323c8004w0nlvtss3dbm2.json`,
+    'mb:neon': `${gitBase}/NatEvatt/awesome-mapbox-gl-styles/master/styles/Neon/style.json`,
+    'mb:camoflauge': `${gitBase}/jingsam/mapbox-gl-styles/master/Camouflage.json`,
+    'mb:emerald': `${gitBase}/jingsam/mapbox-gl-styles/master/Emerald.json`,
+    'mb:runner': `${gitBase}/jingsam/mapbox-gl-styles/master/Runner.json`,
+    'mb:x-ray': `${gitBase}/jingsam/mapbox-gl-styles/master/X-ray.json`,
+};
+export const rasterStyleList = {
+    'osm:org': [
+        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+        'Map &copy; <a href="https://www.openstreetmap.org"><em>OpenStreetMap</em></a>',
+    ],
+    'osm:human': [
+        'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
+        'Map &copy; <a href="http://hot.openstreetmap.org"><em>Humanitarian OpenStreetMap Team</em></a>',
+    ],
+    'osm:cycle': [
+        'https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
+        'Maps &copy; <a href="https://www.cyclosm.org" target="_blank"><em>CyclOSM</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'carto:voyager': [
+        'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png',
+        'Maps &copy; <a href="https://carto.com/attribution"><em>Carto</em></a>',
+    ],
+    'carto:positron': [
+        'https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png',
+        'Maps &copy; <a href="https://carto.com/attribution"><em>Carto</em></a>',
+    ],
+    'carto:dark': [
+        'https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png',
+        'Maps &copy; <a href="https://carto.com/attribution"><em>Carto</em></a>',
+    ],
+    'open:topo': [
+        'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
+        'Maps &copy; <a href="https://opentopomap.org/credits"><em>OpenTopoMap</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'stamen:toner': [
+        'https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png',
+        'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'stamen:toner-lite': [
+        'https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png',
+        'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'stamen:watercolor': [
+        'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
+        'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'stamen:terrain': [
+        'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',
+        'Maps &copy; <a href="https://stamen.com" target="_blank"><em>Stamen Design</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'tf:cycle': [
+        'https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}@2x.png?apikey={apikey}',
+        'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'tf:trans': [
+        'https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey={apikey}',
+        'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'tf:trans-dark': [
+        'https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png?apikey={apikey}',
+        'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'tf:landscape': [
+        'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey={apikey}',
+        'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'tf:outdoors': [
+        'https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}',
+        'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'tf:neighbourhood': [
+        'https://{s}.tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey={apikey}',
+        'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'tf:spinal': [
+        'https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apikey={apikey}',
+        'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'tf:pioneer': [
+        'https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey={apikey}',
+        'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'tf:atlas': [
+        'https://{s}.tile.thunderforest.com/atlas/{z}/{x}/{y}.png?apikey={apikey}',
+        'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+    'tf:mobile': [
+        'https://{s}.tile.thunderforest.com/mobile-atlas/{z}/{x}/{y}.png?apikey={apikey}',
+        'Maps &copy; <a href="https://thunderforest.com" target="_blank"><em>Thunderforest</em></a>, Data &copy; <a href="http://www.openstreetmap.org/copyright" target="_blank"><em>OpenStreetMap</em></a>',
+    ],
+};

package/package.json

@@ -1,9 +1,8 @@
 {
-  "version": "1.1.28",
+  "version": "1.2.2",
   "name": "solid-map-gl",
   "description": "Solid Component Library for Mapbox GL JS",
   "info": "Solid Component Library for Mapbox GL JS. Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL. This project is intended to be as close as possible to the Mapbox GL JS API.",
-  "homepage": "https://determined-mirzakhani-29bbc7.netlify.app",
   "author": "kaihuebner",
   "contributors": [
     {
@@ -18,26 +17,30 @@
     "mapbox-gl",
     "mapbox-gl-js",
     "mapbox",
-    "solidjs",
-    "solidhack",
-    "best_ecosystem"
+    "solidjs"
   ],
   "license": "MIT",
   "type": "module",
   "files": [
     "dist"
   ],
+  "source": "dist/index/index.jsx",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "solid": "./dist/source/index.jsx",
-      "default": "./dist/esm/index.js"
+      "solid": "./dist/index/index.jsx",
+      "default": "./dist/esm/index.js",
+      "import": "./dist/esm/index.js",
+      "browser": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "node": "./dist/cjs/index.js"
     }
   },
   "scripts": {
     "build": "rollup -c",
+    "watch": "rollup -c -w",
     "test": "vitest"
   },
   "repository": {
@@ -49,20 +52,19 @@
     "not ie 11"
   ],
   "dependencies": {
-    "mapbox-gl": "^2.8.0",
-    "solid-js": "^1.3.14"
+    "mapbox-gl": "^2.8.2",
+    "solid-js": "1.4.2"
   },
   "devDependencies": {
-    "canvas": "^2.9.1",
     "jsdom": "^19.0.0",
-    "rollup": "^2.70.1",
+    "rollup": "^2.74.1",
     "rollup-plugin-import-css": "^3.0.3",
     "rollup-plugin-uglify": "^6.0.4",
     "rollup-preset-solid": "^1.4.0",
     "solid-testing-library": "^0.3.0",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.1",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.9",
     "vite-plugin-solid": "^2.2.6",
-    "vitest": "^0.9.3"
+    "vitest": "^0.12.9"
   }
 }