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?

src/components/map/MapboxGlMap.jsx

@@ -6,6 +6,7 @@ import FeatureLayerPopup from './FeatureLayerPopup'
 import FeaturePropertyPopup from './FeaturePropertyPopup'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 import style from '../../libs/style.js'
+import tokens from '../../config/tokens.json'
 import { colorHighlightedLayer } from '../../libs/highlight'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
@@ -56,8 +57,6 @@ export default class MapboxGlMap extends React.Component {
   static propTypes = {
     onDataChange: React.PropTypes.func,
     mapStyle: React.PropTypes.object.isRequired,
-    accessToken: React.PropTypes.string,
-    style: React.PropTypes.object,
     inspectModeEnabled: React.PropTypes.bool.isRequired,
     highlightedLayer: React.PropTypes.object,
   }
@@ -65,11 +64,12 @@ export default class MapboxGlMap extends React.Component {
   static defaultProps = {
     onMapLoaded: () => {},
     onDataChange: () => {},
+    mapboxAccessToken: tokens.mapbox,
   }
 
   constructor(props) {
     super(props)
-    MapboxGl.accessToken = props.accessToken
+    MapboxGl.accessToken = tokens.mapbox
     this.state = {
       map: null,
       inspect: null,
@@ -80,8 +80,9 @@ export default class MapboxGlMap extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    MapboxGl.accessToken = nextProps.accessToken
     if(!this.state.map) return
+    const metadata = nextProps.mapStyle.metadata || {}
+    MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox
 
     if(!nextProps.inspectModeEnabled) {
       //Mapbox GL now does diffing natively so we don't need to calculate

src/components/modals/SettingsModal.jsx

@@ -45,6 +45,7 @@ class SettingsModal extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Style Settings'}
     >
+      <div style={{minWidth: 350}}>
       <InputBlock label={"Name"} doc={GlSpec.$root.name.doc}>
         <StringInput {...inputProps}
           value={this.props.mapStyle.name}
@@ -71,10 +72,17 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
-      <InputBlock label={"Access Token"} doc={"Public access token for Mapbox GL."}>
+      <InputBlock label={"Mapbox Access Token"} doc={"Public access token for Mapbox services."}>
         <StringInput {...inputProps}
-          value={metadata['maputnik:access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:access_token")}
+          value={metadata['maputnik:mapbox_access_token']}
+          onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
+        />
+      </InputBlock>
+
+      <InputBlock label={"OpenMapTiles Access Token"} doc={"Public access token for the OpenMapTiles CDN."}>
+        <StringInput {...inputProps}
+          value={metadata['maputnik:openmaptiles_access_token']}
+          onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
       </InputBlock>
 
@@ -88,6 +96,7 @@ class SettingsModal extends React.Component {
           onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}
         />
       </InputBlock>
+      </div>
     </Modal>
   }
 }