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>
   }
 }

src/config/tokens.json

@@ -0,0 +1,4 @@
+{
+  "mapbox": "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6ImNpeHJmNXNmZTAwNHIycXBid2NqdTJibjMifQ.Dv1-GDpTWi0NP6xW9Fct1w",
+  "openmaptiles": "Og58UhhtiiTaLVlPtPgs"
+}

src/libs/style.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import spec from 'mapbox-gl-style-spec/reference/latest.min.js'
 import derefLayers from 'mapbox-gl-style-spec/lib/deref'
+import tokens from '../config/tokens.json'
 
 // Empty style is always used if no style could be restored or fetched
 const emptyStyle = ensureStyleValidity({
@@ -54,9 +55,32 @@ function indexOfLayer(layers, layerId) {
   return null
 }
 
+function replaceAccessToken(mapStyle) {
+  const omtSource = mapStyle.sources.openmaptiles
+  if(!omtSource) return mapStyle
+
+  const metadata = mapStyle.metadata || {}
+  const accessToken = metadata['maputnik:openmaptiles_access_token'] || tokens.openmaptiles
+  const changedSources = {
+    ...mapStyle.sources,
+    openmaptiles: {
+      ...omtSource,
+      url: omtSource.url.replace('{key}', accessToken)
+    }
+  }
+  const changedStyle = {
+    ...mapStyle,
+    glyphs: mapStyle.glyphs.replace('{key}', accessToken),
+    sources: changedSources
+  }
+
+  return changedStyle
+}
+
 export default {
   ensureStyleValidity,
   emptyStyle,
   indexOfLayer,
   generateId,
+  replaceAccessToken,
 }