mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-28 16:01:15 +01:00
Show basic tilesets modal
This commit is contained in:
parent
f1a21eca0c
commit
e84be3873a
3 changed files with 104 additions and 1 deletions
82
src/modals/tilesets.jsx
Normal file
82
src/modals/tilesets.jsx
Normal file
|
@ -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
|
9
src/tilesets.json
Normal file
9
src/tilesets.json
Normal file
|
@ -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."
|
||||||
|
}
|
||||||
|
]
|
|
@ -26,6 +26,7 @@ import MdHelpOutline from 'react-icons/lib/md/help-outline'
|
||||||
import MdFindInPage from 'react-icons/lib/md/find-in-page'
|
import MdFindInPage from 'react-icons/lib/md/find-in-page'
|
||||||
|
|
||||||
import SettingsModal from './modals/settings.jsx'
|
import SettingsModal from './modals/settings.jsx'
|
||||||
|
import TilesetsModal from './modals/tilesets.jsx'
|
||||||
import style from './style.js'
|
import style from './style.js'
|
||||||
import { fullHeight } from './theme.js'
|
import { fullHeight } from './theme.js'
|
||||||
import theme from './theme.js';
|
import theme from './theme.js';
|
||||||
|
@ -50,6 +51,7 @@ export class Toolbar extends React.Component {
|
||||||
super(props)
|
super(props)
|
||||||
this.state = {
|
this.state = {
|
||||||
openSettingsModal: false,
|
openSettingsModal: false,
|
||||||
|
openTilesetsModal: false,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -93,6 +95,10 @@ export class Toolbar extends React.Component {
|
||||||
this.setState({openSettingsModal: !this.state.openSettingsModal})
|
this.setState({openSettingsModal: !this.state.openSettingsModal})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleTilesets() {
|
||||||
|
this.setState({openTilesetsModal: !this.state.openTilesetsModal})
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return <div style={{
|
return <div style={{
|
||||||
position: "fixed",
|
position: "fixed",
|
||||||
|
@ -109,6 +115,12 @@ export class Toolbar extends React.Component {
|
||||||
open={this.state.openSettingsModal}
|
open={this.state.openSettingsModal}
|
||||||
toggle={() => this.toggleSettings.bind(this)}
|
toggle={() => this.toggleSettings.bind(this)}
|
||||||
/>
|
/>
|
||||||
|
<TilesetsModal
|
||||||
|
mapStyle={this.props.mapStyle}
|
||||||
|
onStyleChanged={this.props.onStyleChanged}
|
||||||
|
open={this.state.openTilesetsModal}
|
||||||
|
toggle={() => this.toggleSettings.bind(this)}
|
||||||
|
/>
|
||||||
<InlineBlock>
|
<InlineBlock>
|
||||||
<Button style={{width: 300, textAlign: 'left'}}>
|
<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'}}/>
|
<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.downloadButton()}
|
||||||
{this.saveButton()}
|
{this.saveButton()}
|
||||||
<InlineBlock>
|
<InlineBlock>
|
||||||
<Button big={true} onClick={this.props.onOpenSettings}>
|
<Button big={true} onClick={this.toggleTilesets.bind(this)}>
|
||||||
<MdLayers />
|
<MdLayers />
|
||||||
Tilesets
|
Tilesets
|
||||||
</Button>
|
</Button>
|
||||||
|
|
Loading…
Reference in a new issue