Show basic tilesets modal

src/modals/tilesets.jsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import Immutable from 'immutable'
+
+import Overlay from 'rebass/dist/Overlay'
+import Panel from 'rebass/dist/Panel'
+import PanelHeader from 'rebass/dist/PanelHeader'
+import PanelFooter from 'rebass/dist/PanelFooter'
+import Button from 'rebass/dist/Button'
+import Text from 'rebass/dist/Text'
+import Media from 'rebass/dist/Media'
+import Close from 'rebass/dist/Close'
+import Space from 'rebass/dist/Space'
+import Input from 'rebass/dist/Input'
+import Toolbar from 'rebass/dist/Toolbar'
+import NavItem from 'rebass/dist/NavItem'
+
+import publicTilesets from '../tilesets.json'
+import theme from '../theme.js'
+
+class TilesetsModal extends React.Component {
+  static propTypes = {
+    mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
+    onStyleChanged: React.PropTypes.func.isRequired,
+    open: React.PropTypes.bool.isRequired,
+    toggle: React.PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  onChange(property, e) {
+    const changedStyle = this.props.mapStyle.set(property, e.target.value)
+    this.props.onStyleChanged(changedStyle)
+  }
+
+  render() {
+    const tilesetOptions = publicTilesets.map(tileset => {
+      return <div key={tileset.id} style={{
+        padding: theme.scale[0],
+        borderBottom: 1,
+        borderTop: 1,
+        borderLeft: 2,
+        borderRight: 0,
+        borderStyle: "solid",
+        borderColor: theme.borderColor,
+      }}>
+        <Toolbar>
+          <NavItem style={{fontWeight: 400}}>
+            #{tileset.id}
+          </NavItem>
+          <Space auto x={1} />
+        </Toolbar>
+        {tileset.url}
+      </div>
+    })
+
+    return <Overlay open={this.props.open} >
+      <Panel theme={'secondary'}>
+        <PanelHeader theme={'default'}>
+          Tilesets
+          <Space auto />
+          <Close onClick={this.props.toggle('modalOpen')} />
+        </PanelHeader>
+        <br />
+
+        <h2>Choose Public Tileset</h2>
+        {tilesetOptions}
+
+        <PanelFooter>
+          <Space auto />
+          <Button theme={'default'}
+            onClick={this.props.toggle('modalOpen')}
+            children='Close!'
+          />
+        </PanelFooter>
+      </Panel>
+    </Overlay>
+  }
+}
+
+export default TilesetsModal

src/tilesets.json

@@ -0,0 +1,9 @@
+[
+  {
+    "id": "mapbox-streets",
+    "type": "vector",
+    "url": "mapbox://mapbox.mapbox-streets-v7",
+    "title": "Mapbox Streets",
+    "description": "Mapbox Streets provides a vector tileset for complex general-purpose maps."
+  }
+]

src/toolbar.jsx

@@ -26,6 +26,7 @@ import MdHelpOutline from 'react-icons/lib/md/help-outline'
 import MdFindInPage from 'react-icons/lib/md/find-in-page'
 
 import SettingsModal from './modals/settings.jsx'
+import TilesetsModal from './modals/tilesets.jsx'
 import style from './style.js'
 import { fullHeight } from './theme.js'
 import theme from './theme.js';
@@ -50,6 +51,7 @@ export class Toolbar extends React.Component {
     super(props)
     this.state = {
       openSettingsModal: false,
+      openTilesetsModal: false,
     }
   }
 
@@ -93,6 +95,10 @@ export class Toolbar extends React.Component {
     this.setState({openSettingsModal: !this.state.openSettingsModal})
   }
 
+  toggleTilesets() {
+    this.setState({openTilesetsModal: !this.state.openTilesetsModal})
+  }
+
   render() {
     return <div style={{
       position: "fixed",
@@ -109,6 +115,12 @@ export class Toolbar extends React.Component {
         open={this.state.openSettingsModal}
         toggle={() => this.toggleSettings.bind(this)}
       />
+      <TilesetsModal
+        mapStyle={this.props.mapStyle}
+        onStyleChanged={this.props.onStyleChanged}
+        open={this.state.openTilesetsModal}
+        toggle={() => this.toggleSettings.bind(this)}
+      />
       <InlineBlock>
           <Button style={{width: 300, textAlign: 'left'}}>
             <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 40, height: 40, paddingRight: 5, verticalAlign: 'middle'}}/>
@@ -126,7 +138,7 @@ export class Toolbar extends React.Component {
       {this.downloadButton()}
       {this.saveButton()}
       <InlineBlock>
-        <Button big={true} onClick={this.props.onOpenSettings}>
+        <Button big={true} onClick={this.toggleTilesets.bind(this)}>
           <MdLayers />
           Tilesets
         </Button>