Merge pull request #476 from pathmapper/fix_issue_404

Use access token for fetchSources

src/components/App.jsx

@@ -49,6 +49,25 @@ function normalizeSourceURL (url, apiToken="") {
   }
 }
 
+function setFetchAccessToken(url, mapStyle) {
+  const matchesTilehosting = url.match(/\.tilehosting\.com/);
+  const matchesThunderforest = url.match(/\.thunderforest\.com/);
+  if (matchesTilehosting) {
+    const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true})
+    if (accessToken) {
+      return url.replace('{key}', accessToken)
+    }
+  }
+  else if (matchesThunderforest) {
+    const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true})
+    if (accessToken) {
+      return url.replace('{key}', accessToken)
+    }
+  }
+  else {
+    return url;
+  }
+}
 
 function updateRootSpec(spec, fieldName, newValues) {
   return {
@@ -398,6 +417,12 @@ export default class App extends React.Component {
           console.warn("Failed to normalizeSourceURL: ", err);
         }
 
+        try {
+          url = setFetchAccessToken(url, this.state.mapStyle)
+        } catch(err) {
+          console.warn("Failed to setFetchAccessToken: ", err);
+        }
+
         fetch(url, {
           mode: 'cors',
         })

src/libs/style.js

@@ -119,5 +119,6 @@ export default {
   emptyStyle,
   indexOfLayer,
   generateId,
+  getAccessToken,
   replaceAccessTokens,
 }