diff --git a/src/modals/tilesets.jsx b/src/modals/tilesets.jsx
new file mode 100644
index 00000000..13f876ab
--- /dev/null
+++ b/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
+
+
+ #{tileset.id}
+
+
+
+ {tileset.url}
+
+ })
+
+ return
+
+
+ Tilesets
+
+
+
+
+
+ Choose Public Tileset
+ {tilesetOptions}
+
+
+
+
+
+
+
+ }
+}
+
+export default TilesetsModal
diff --git a/src/tilesets.json b/src/tilesets.json
new file mode 100644
index 00000000..4aa638bb
--- /dev/null
+++ b/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."
+ }
+]
diff --git a/src/toolbar.jsx b/src/toolbar.jsx
index 7ce18977..c8ef2fa7 100644
--- a/src/toolbar.jsx
+++ b/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 this.toggleSettings.bind(this)}
/>
+
this.toggleSettings.bind(this)}
+ />