Support fallback tokens and replace key

src/components/App.jsx

@@ -21,6 +21,7 @@ import { loadDefaultStyle, StyleStore } from '../libs/stylestore'
 import { ApiStyleStore } from '../libs/apistore'
 import { RevisionStore } from '../libs/revisions'
 import LayerWatcher from '../libs/layerwatcher'
+import tokens from '../config/tokens.json'
 
 function updateRootSpec(spec, fieldName, newValues) {
   return {
@@ -100,7 +101,9 @@ export default class App extends React.Component {
   }
 
   updateFonts(urlTemplate) {
-    downloadGlyphsMetadata(urlTemplate, fonts => {
+    const metadata = this.state.mapStyle.metadata || {}
+    const accessToken = metadata['maputnik:openmaptiles_access_token'] || tokens.openmaptiles
+    downloadGlyphsMetadata(urlTemplate.replace('{key}', accessToken), fonts => {
       this.setState({ spec: updateRootSpec(this.state.spec, 'glyphs', fonts)})
     })
   }
@@ -189,20 +192,14 @@ export default class App extends React.Component {
   }
 
   mapRenderer() {
-    const metadata = this.state.mapStyle.metadata || {}
     const mapProps = {
-      mapStyle: this.state.mapStyle,
-      accessToken: metadata['maputnik:access_token'],
+      mapStyle: style.replaceAccessToken(this.state.mapStyle),
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
       },
-      //TODO: This would actually belong to the layout component
-      style:{
-        top: 40,
-        //left: 500,
-      }
     }
 
+    const metadata = this.state.mapStyle.metadata || {}
     const renderer = metadata['maputnik:renderer'] || 'mbgljs'
 
     // Check if OL3 code has been loaded?