solid-map-gl 1.1.27 → 1.2.1

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

@@ -1,21 +1,26 @@
 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: props.options?.style || { version: 8, sources: {}, layers: [] },
-            container: mapRef,
+            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,
@@ -25,6 +30,8 @@ const MapGL = props => {
             fitBoundsOptions: { padding: props.viewport?.padding },
         });
         map.container = containerRef;
+        await map.once('styledata');
+        setMapRoot(map);
     });
     onCleanup(() => map.remove());
     // Hook up events
@@ -37,20 +44,28 @@ const MapGL = props => {
         }
     }));
     // 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));
+    createEffect(() => {
+        if (!mapRoot())
+            return;
+        mapRoot().showTileBoundaries = props.showTileBoundaries;
+        mapRoot().showTerrainWireframe = props.showTerrainWireframe;
+        mapRoot().showPadding = props.showPadding;
+        mapRoot().showCollisionBoxes = props.showCollisionBoxes;
+        mapRoot().showOverdrawInspector = props.showOverdrawInspector;
+        mapRoot().getCanvas().style.cursor = props.cursorStyle;
+    });
+    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, () => {
+    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(props.options.style);
+        map.setStyle(vectorStyleList[style] ||
+            style || { version: 8, sources: {}, layers: [] });
         map.once('styledata', () => {
             const newStyle = map.getStyle();
             map.setStyle({
@@ -60,9 +75,6 @@ const MapGL = props => {
             });
         });
     }, { 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 = {
@@ -76,12 +88,13 @@ const MapGL = props => {
         };
         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);
@@ -128,11 +141,10 @@ const MapGL = props => {
             });
         }
     });
-    return (<MapContext.Provider value={() => map}>
-      <section ref={containerRef} style={{ height: '100%', width: '100%' }}>
-        {props.children}
-        <div ref={mapRef} class={props.class || ''} classList={props.classList} style={{ height: '100%', width: '100%', ...props.style }}/>
+    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>);
 };
-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,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>',
+    ],
+};