Allow renderer switching via style metadata

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