From 0384181ee11a7c27bddb983ea5986c2d26c5d905 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 27 Jul 2018 16:25:53 +0100
Subject: [PATCH] Added final bits for thunderforest integration

---
 src/components/App.jsx                  |  4 ++--
 src/components/modals/ExportModal.jsx   | 10 ++++++++--
 src/components/modals/SettingsModal.jsx |  8 ++++++++
 src/libs/style.js                       |  4 ++++
 src/styles/_modal.scss                  |  1 +
 5 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index 943879bd..da0aef4b 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -22,7 +22,7 @@ import SurveyModal from './modals/SurveyModal'
 
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
 import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import style from '../libs/style.js'
+import style from '../libs/style'
 import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
 import { loadDefaultStyle, StyleStore } from '../libs/stylestore'
@@ -407,7 +407,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}),
       options: this.state.mapOptions,
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx
index 92477c38..f7d997a1 100644
--- a/src/components/modals/ExportModal.jsx
+++ b/src/components/modals/ExportModal.jsx
@@ -10,7 +10,7 @@ import Button from '../Button'
 import Modal from './Modal'
 import MdFileDownload from 'react-icons/lib/md/file-download'
 import TiClipboard from 'react-icons/lib/ti/clipboard'
-import style from '../../libs/style.js'
+import style from '../../libs/style'
 import GitHub from 'github-api'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 
@@ -235,7 +235,7 @@ class ExportModal extends React.Component {
   }
 
   downloadStyle() {
-    const tokenStyle = styleSpec.format(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle)));
+    const tokenStyle = styleSpec.format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle)));
 
     const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"});
     saveAs(blob, this.props.mapStyle.id + ".json");
@@ -280,6 +280,12 @@ class ExportModal extends React.Component {
               onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
             />
           </InputBlock>
+          <InputBlock label={"Thunderforest Access Token: "}>
+            <StringInput
+              value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
+              onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+            />
+          </InputBlock>
         </p>
 
         <Button onClick={this.downloadStyle.bind(this)}>
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index 3f8790dc..b7da0a11 100644
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -94,6 +94,14 @@ class SettingsModal extends React.Component {
         />
       </InputBlock>
 
+      <InputBlock label={"Thunderforest Access Token"} doc={"Public access token for Thunderforest services."}>
+        <StringInput {...inputProps}
+          data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
+          value={metadata['maputnik:thunderforest_access_token']}
+          onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+        />
+      </InputBlock>
+
       <InputBlock label={"Style Renderer"} doc={"Choose the default Maputnik renderer for this style."}>
         <SelectInput {...inputProps}
           data-wd-key="modal-settings.maputnik:renderer" 
diff --git a/src/libs/style.js b/src/libs/style.js
index 8da157f2..e3f75d7e 100644
--- a/src/libs/style.js
+++ b/src/libs/style.js
@@ -55,6 +55,10 @@ function indexOfLayer(layers, layerId) {
 }
 
 function getAccessToken(key, mapStyle, opts) {
+  if(key === "thunderforest_transport" || key === "thunderforest_outdoors") {
+    key = "thunderforest";
+  }
+
   const metadata = mapStyle.metadata || {}
   let accessToken = metadata['maputnik:'+key+'_access_token'];
 
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 931a3017..deada7f1 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -154,6 +154,7 @@
 
 .maputnik-public-source-id {
   font-weight: 400;
+  text-align: left;
 }
 
 .maputnik-active-source-type-editor {