solid-map-gl 1.1.26 → 1.2.0

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

@@ -1,27 +1,37 @@
-import { createSignal, createEffect, onMount, onCleanup, createContext, useContext, useTransition, createUniqueId, untrack, } from 'solid-js';
+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 [pending, start] = useTransition();
-const [transitionType, setTransitionType] = createSignal('flyTo');
 const MapContext = createContext();
-const useMap = () => useContext(MapContext);
-const MapGL = props => {
+/** 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();
-    onMount(() => {
+    const [mapRoot, setMapRoot] = createSignal();
+    const [pending, start] = useTransition();
+    const [transitionType, setTransitionType] = createSignal('flyTo');
+    onMount(async () => {
         map = new mapboxgl.Map({
             ...props.options,
+            style: vectorStyleList[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 },
+            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;
+        await map.once('styledata');
+        setMapRoot(map);
     });
     onCleanup(() => map.remove());
     // Hook up events
@@ -40,16 +50,27 @@ const MapGL = props => {
     createEffect(() => (map.showCollisionBoxes = props.showCollisionBoxes));
     createEffect(() => (map.showOverdrawInspector = props.showOverdrawInspector));
     createEffect(() => (map.getCanvas().style.cursor = props.cursorStyle));
-    // Update map style
-    createEffect(prev => {
-        prev !== props.options.style && map.setStyle(props.options.style);
-    }, props.options.style);
-    // Update projection
-    createEffect(prev => {
-        prev !== props.options.projection &&
-            map.setProjection(props.options.projection);
-    }, props.options.projection);
     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 = {
@@ -58,17 +79,18 @@ const MapGL = props => {
             zoom: map.getZoom(),
             pitch: map.getPitch(),
             bearing: map.getBearing(),
-            padding: props.viewport.padding,
-            bounds: props.viewport.bounds,
+            padding: props.viewport?.padding,
+            bounds: props.viewport?.bounds,
         };
         const callMove = event => {
             if (event.originalEvent)
-                props.onViewportChange({ ...viewport, id: props.id });
+                props.onViewportChange &&
+                    props.onViewportChange({ ...viewport, id: props.id });
             setTransitionType('jumpTo');
         };
         const callEnd = event => {
             if (event.originalEvent)
-                props.onViewportChange(viewport);
+                props.onViewportChange && props.onViewportChange(viewport);
             setTransitionType(props.transitionType);
         };
         map.on('move', callMove).on('moveend', callEnd);
@@ -76,20 +98,23 @@ const MapGL = props => {
     });
     // Update boundaries
     createEffect(prev => {
-        if (props.viewport.bounds != prev)
+        if (props.viewport?.bounds != prev)
             props.onViewportChange({
                 ...props.viewport,
-                ...map.cameraForBounds(props.viewport.bounds, {
-                    padding: props.viewport.padding,
+                ...map.cameraForBounds(props.viewport?.bounds, {
+                    padding: props.viewport?.padding,
                 }),
             });
-        return props.viewport.bounds;
-    }, props.viewport.bounds);
+        return props.viewport?.bounds;
+    }, props.viewport?.bounds);
     // Update Viewport
     createEffect(() => {
-        if (props.id === props.viewport.id)
+        if (props.id === props.viewport?.id)
             return;
-        const viewport = { ...props.viewport, padding: props.viewport.padding || 0 };
+        const viewport = {
+            ...props.viewport,
+            padding: props.viewport?.padding || 0,
+        };
         switch (untrack(transitionType)) {
             case 'easeTo':
                 map.stop().easeTo(viewport);
@@ -112,9 +137,10 @@ const MapGL = props => {
             });
         }
     });
-    return (<MapContext.Provider value={() => map}>
-      {props.children}
-      <section ref={mapRef} class={props.class || ''} classList={props.classList} style={{ height: '100%', width: '100%', ...props.style }}></section>
+    return (<MapContext.Provider value={mapRoot}>
+      <section ref={containerRef} style={{ position: 'absolute', 'z-index': 1 }}>
+        {props.children || null}
+      </section>
+      <div ref={mapRef} class={props.class || null} classList={props.classList || null} style={{ height: '100%', width: '100%', ...props.style }}/>
     </MapContext.Provider>);
 };
-export { MapGL as default, useMap };

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,13 @@
-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(() => {
+        if (!map())
+            return;
         marker = new mapboxgl.Marker(props.options)
             .setLngLat(props.lnglat)
             .setPopup(props.children
@@ -16,7 +18,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,13 @@
-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(() => {
+        if (!map())
+            return;
         popup = new mapboxgl.Popup(props.options)
             .setLngLat(props.lnglat)
             .setDOMContent(<div>{props.children}</div>)
@@ -14,9 +16,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,22 @@
+import { onCleanup, createEffect } from 'solid-js';
+import { useMap } from '../MapGL';
+export const Sky = props => {
+    const map = useMap();
+    const layerId = '_sky';
+    // Add Sky Layer
+    createEffect(() => {
+        if (!map())
+            return;
+        map().getLayer(layerId) && map().addLayer({ ...props.style, id: layerId });
+    });
+    // Remove Sky Layer
+    onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId));
+    // Update Visibility
+    createEffect(() => {
+        if (!map())
+            return;
+        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,72 @@
+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(() => {
+        if (!map())
+            return;
+        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(() => {
+        if (!map())
+            return;
+        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,23 @@
+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(() => {
+        if (!map())
+            return;
+        map().setTerrain({ ...props.style, source: sourceId });
+    });
+    // Remove Terrain Layer
+    onCleanup(() => map().setTerrain(null));
+    // Update Visibility
+    createEffect(() => {
+        if (!map())
+            return;
+        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>',
+    ],
+};