Allow renderer switching via style metadata

src/app.jsx

@@ -100,6 +100,7 @@ export default class App extends React.Component {
   }
 
   render() {
+    const renderer = this.state.currentStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs')
     const mapProps = {
       mapStyle: this.state.currentStyle,
       accessToken: this.state.accessToken,
@@ -120,8 +121,8 @@ export default class App extends React.Component {
         accessToken={this.state.accessToken}
         onAccessTokenChanged={this.onAccessTokenChanged.bind(this)}
       />
-      {this.state.mapRenderer == 'ol3' && <OpenLayers3Map {...mapProps} />}
+      {renderer == 'ol3' && <OpenLayers3Map {...mapProps} />}
-      {this.state.mapRenderer == 'gl' && <MapboxGlMap {...mapProps} />}
+      {renderer == 'mbgljs' && <MapboxGlMap {...mapProps} />}
     </div>
   }
 }

src/modals/settings.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Immutable from 'immutable'
 
+import Select from 'rebass/dist/Select'
 import Overlay from 'rebass/dist/Overlay'
 import Panel from 'rebass/dist/Panel'
 import PanelHeader from 'rebass/dist/PanelHeader'
@@ -29,6 +30,11 @@ class SettingsModal extends React.Component {
     this.props.onStyleChanged(changedStyle)
   }
 
+  onRendererChange(e) {
+    const changedStyle = this.props.mapStyle.setIn(['metadata', 'maputnik:renderer'], e.target.value)
+    this.props.onStyleChanged(changedStyle)
+  }
+
   render() {
     return <Overlay open={this.props.open} >
       <Panel theme={'secondary'}>
@@ -62,6 +68,18 @@ class SettingsModal extends React.Component {
           value={this.props.mapStyle.get('glyphs')}
           onChange={this.onChange.bind(this, "glyphs")}
         />
+        <Input
+          name="glyphs"
+          label="Glyphs URL"
+          value={this.props.mapStyle.get('glyphs')}
+          onChange={this.onChange.bind(this, "glyphs")}
+        />
+        <Select
+          label="Style Renderer"
+          name="renderer"
+          onChange={this.onRendererChange.bind(this)}
+          options={[{children: 'Mapbox GL JS', value: 'mbgljs'}, {children: 'Open Layers 3', value: 'ol3'}]}
+        />
 
         <PanelFooter>
           <Space auto />