Added initial thunderforest source integration

src/components/App.jsx

@@ -250,7 +250,7 @@ export default class App extends React.Component {
 
   mapRenderer() {
     const mapProps = {
-      mapStyle: style.replaceAccessToken(this.state.mapStyle, {allowFallback: true}),
+      mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
         this.fetchSources();

src/components/modals/ExportModal.jsx

@@ -50,7 +50,7 @@ class Gist extends React.Component {
     const mapboxToken = (this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token'];
 
     const mapStyleStr = preview ?
-        styleSpec.format(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle))) :
+        styleSpec.format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle))) :
         styleSpec.format(stripAccessTokens(this.props.mapStyle));
     const styleTitle = this.props.mapStyle.name || 'Style';
     const htmlStr = `

src/components/modals/SourcesModal.jsx

@@ -236,9 +236,12 @@ class SourcesModal extends React.Component {
         <p>
           Add one of the publicly available sources to your style.
         </p>
-        <div style={{maxwidth: 500}}>
+        <div className="maputnik-public-sources" style={{maxwidth: 500}}>
         {tilesetOptions}
         </div>
+        <p>
+          <strong>Note:</strong> Some of the tilesets are not optimised for online use, and as a result the file sizes of the tiles can be quite large (heavy) for online vector rendering. Please review any tilesets before use.
+        </p>
       </div>
 
       <div className="maputnik-modal-section">

src/config/tilesets.json

@@ -8,5 +8,15 @@
     "type": "vector",
     "url": "https://free.tilehosting.com/data/v3.json?key={key}",
     "title": "OpenMapTiles"
+  },
+  "thunderforest_transport": {
+    "type": "vector",
+    "url": "https://tile.thunderforest.com/thunderforest.transport-v1.json?apikey={key}",
+    "title": "Thunderforest Transport (heavy)"
+  },
+  "thunderforest_outdoors": {
+    "type": "vector",
+    "url": "https://tile.thunderforest.com/thunderforest.outdoors-v1.json?apikey={key}",
+    "title": "Thunderforest Outdoors (heavy)"
   }
 }

src/config/tokens.json

@@ -1,4 +1,6 @@
 {
   "mapbox": "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6ImNpeHJmNXNmZTAwNHIycXBid2NqdTJibjMifQ.Dv1-GDpTWi0NP6xW9Fct1w",
-  "openmaptiles": "Og58UhhtiiTaLVlPtPgs"
+  "openmaptiles": "Og58UhhtiiTaLVlPtPgs",
+  "thunderforest_transport": "INSERT_TOKEN_HERE",
+  "thunderforest_outdoors": "INSERT_TOKEN_HERE"
 }

src/libs/style.js

@@ -54,18 +54,24 @@ function indexOfLayer(layers, layerId) {
   return null
 }
 
-function replaceAccessToken(mapStyle, opts={}) {
+function getAccessToken(key, mapStyle, opts) {
-  const omtSource = mapStyle.sources.openmaptiles
-  if(!omtSource) return mapStyle
-  if(!omtSource.hasOwnProperty("url")) return mapStyle
-
   const metadata = mapStyle.metadata || {}
-  let accessToken = metadata['maputnik:openmaptiles_access_token'];
+  let accessToken = metadata['maputnik:'+key+'_access_token'];
 
   if(opts.allowFallback && !accessToken) {
-    accessToken = tokens.openmaptiles;
+    accessToken = tokens[key];
   }
 
+  return accessToken;
+}
+
+function replaceSourceAccessToken(mapStyle, key, opts={}) {
+  const source = mapStyle.sources[key]
+  if(!source) return mapStyle
+  if(!source.hasOwnProperty("url")) return mapStyle
+
+  const accessToken = getAccessToken(key, mapStyle, opts)
+
   if(!accessToken) {
     // Early exit.
     return mapStyle;
@@ -73,24 +79,40 @@ function replaceAccessToken(mapStyle, opts={}) {
 
   const changedSources = {
     ...mapStyle.sources,
-    openmaptiles: {
+    [key]: {
-      ...omtSource,
+      ...source,
-      url: omtSource.url.replace('{key}', accessToken)
+      url: source.url.replace('{key}', accessToken)
     }
   }
   const changedStyle = {
     ...mapStyle,
-    glyphs: mapStyle.glyphs ? mapStyle.glyphs.replace('{key}', accessToken) : mapStyle.glyphs,
     sources: changedSources
   }
 
   return changedStyle
 }
 
+function replaceAccessTokens(mapStyle, opts={}) {
+  let changedStyle = mapStyle;
+
+  Object.keys(tokens).forEach((tokenKey) => {
+    changedStyle = replaceSourceAccessToken(changedStyle, tokenKey, opts);
+  })
+
+  if(mapStyle.glyphs && mapStyle.glyphs.match(/\.tileserver\.org/)) {
+    changedStyle = {
+      ...changedStyle,
+      glyphs: mapStyle.glyphs ? mapStyle.glyphs.replace('{key}', getAccessToken("openmaptiles", mapStyle, opts)) : mapStyle.glyphs
+    }
+  }
+
+  return changedStyle
+}
+
 export default {
   ensureStyleValidity,
   emptyStyle,
   indexOfLayer,
   generateId,
-  replaceAccessToken,
+  replaceAccessTokens,
 }

src/styles/_modal.scss

@@ -142,6 +142,10 @@
 }
 
 //SOURCE MODAL
+.maputnik-public-sources {
+  margin-bottom: 1.5%;
+}
+
 .maputnik-public-source {
   vertical-align: top;
   margin-top: 1.5%;