maputnik/src/components/App.jsx

183 lines
5 KiB
React
Raw Normal View History

import React from 'react'
2016-12-20 11:44:22 +01:00
import { saveAs } from 'file-saver'
2016-09-15 09:13:23 +02:00
import Drawer from 'rebass/dist/Drawer'
import Container from 'rebass/dist/Container'
import Block from 'rebass/dist/Block'
import Fixed from 'rebass/dist/Fixed'
2016-12-20 11:44:22 +01:00
import MapboxGlMap from './map/MapboxGlMap.jsx'
import OpenLayers3Map from './map/OpenLayers3Map.jsx'
import LayerList from './layers/LayerList.jsx'
import LayerEditor from './layers/LayerEditor.jsx'
import Toolbar from './Toolbar.jsx'
2016-12-20 11:44:22 +01:00
import style from '../libs/style.js'
import { loadDefaultStyle, SettingsStore, StyleStore } from '../libs/stylestore.js'
import { ApiStyleStore } from '../libs/apistore.js'
import LayerWatcher from '../libs/layerwatcher.js'
import theme from '../config/rebass.js'
import colors from '../config/colors.js'
2015-06-15 15:21:19 +02:00
export default class App extends React.Component {
static childContextTypes = {
rebass: React.PropTypes.object,
reactIconBase: React.PropTypes.object
}
constructor(props) {
super(props)
2016-12-19 21:21:10 +01:00
this.layerWatcher = new LayerWatcher()
this.styleStore = new ApiStyleStore()
this.styleStore.supported(isSupported => {
if(!isSupported) {
console.log('Falling back to local storage for storing styles')
this.styleStore = new StyleStore()
}
this.styleStore.latestStyle(mapStyle => this.onStyleUpload(mapStyle))
2016-12-03 23:28:43 +01:00
})
this.settingsStore = new SettingsStore()
this.state = {
accessToken: this.settingsStore.accessToken,
2016-12-17 15:44:42 +01:00
mapStyle: style.emptyStyle,
2016-12-20 16:08:49 +01:00
selectedLayerIndex: 0,
}
}
onReset() {
this.styleStore.purge()
loadDefaultStyle(mapStyle => this.onStyleUpload(mapStyle))
}
getChildContext() {
return {
rebass: theme,
reactIconBase: { size: 20 }
}
}
onStyleDownload() {
2016-12-20 16:08:49 +01:00
const mapStyle = this.state.mapStyle
const blob = new Blob([JSON.stringify(mapStyle, null, 4)], {type: "application/json;charset=utf-8"});
saveAs(blob, mapStyle.id + ".json");
this.onStyleSave()
}
onStyleUpload(newStyle) {
2016-12-20 16:08:49 +01:00
console.log('upload', newStyle)
const savedStyle = this.styleStore.save(newStyle)
2016-12-17 15:44:42 +01:00
this.setState({ mapStyle: savedStyle })
}
onStyleSave() {
2016-12-20 16:08:49 +01:00
const snapshotStyle = this.state.mapStyle.modified = new Date().toJSON()
2016-12-17 15:44:42 +01:00
this.setState({ mapStyle: snapshotStyle })
2016-12-03 23:28:43 +01:00
console.log('Save')
this.styleStore.save(snapshotStyle)
}
onStyleChanged(newStyle) {
2016-12-17 15:44:42 +01:00
this.setState({ mapStyle: newStyle })
}
onAccessTokenChanged(newToken) {
this.settingsStore.accessToken = newToken
this.setState({ accessToken: newToken })
}
2016-12-17 14:53:16 +01:00
onLayersChanged(changedLayers) {
2016-12-20 16:08:49 +01:00
const changedStyle = {
...this.state.mapStyle,
layers: [changedLayers]
}
this.setState({ mapStyle: newStyle })
2016-12-17 21:25:00 +01:00
}
onLayerChanged(layer) {
2016-12-20 16:08:49 +01:00
const changedStyle = {
...this.state.mapStyle,
layers: {
...this.state.mapStyle.layers,
[layer.id]: layer
}
}
this.setState({ mapStyle: changedStyle })
2016-12-17 21:25:00 +01:00
}
2016-12-17 14:53:16 +01:00
mapRenderer() {
2016-12-16 15:14:20 +01:00
const mapProps = {
2016-12-17 15:44:42 +01:00
mapStyle: this.state.mapStyle,
2016-12-16 15:14:20 +01:00
accessToken: this.state.accessToken,
2016-12-19 21:21:10 +01:00
onMapLoaded: (map) => {
this.layerWatcher.map = map
}
2016-12-16 15:14:20 +01:00
}
2016-12-20 16:08:49 +01:00
const metadata = this.state.mapStyle.metadata || {}
const renderer = metadata['maputnik:renderer'] || 'mbgljs'
2016-12-17 14:53:16 +01:00
if(renderer === 'ol3') {
return <OpenLayers3Map {...mapProps} />
} else {
return <MapboxGlMap {...mapProps} />
}
}
2016-12-17 16:09:37 +01:00
onLayerSelected(layerId) {
2016-12-20 16:08:49 +01:00
const layers = this.state.mapStyle.layers
for (let i = 0; i < layers.length; i++) {
if(layers[i].id === layerId) {
this.setState({ selectedLayerIndex: i })
break
}
}
2016-12-17 16:09:37 +01:00
}
2016-12-17 14:53:16 +01:00
render() {
2016-12-20 16:08:49 +01:00
const layers = this.state.mapStyle.layers || []
const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null
return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
<Toolbar
2016-12-17 15:44:42 +01:00
mapStyle={this.state.mapStyle}
2016-12-17 14:53:16 +01:00
onStyleChanged={this.onStyleChanged.bind(this)}
onStyleSave={this.onStyleSave.bind(this)}
onStyleUpload={this.onStyleUpload.bind(this)}
onStyleDownload={this.onStyleDownload.bind(this)}
/>
2016-12-17 14:53:16 +01:00
<div style={{
2016-12-17 21:25:00 +01:00
position: 'absolute',
bottom: 0,
height: "100%",
2016-12-17 14:53:16 +01:00
top: 50,
left: 0,
zIndex: 100,
2016-12-17 16:43:25 +01:00
width: 180,
2016-12-17 14:53:16 +01:00
overflow: "hidden",
backgroundColor: colors.gray
}}>
<LayerList
onLayersChanged={this.onLayersChanged.bind(this)}
2016-12-17 16:09:37 +01:00
onLayerSelected={this.onLayerSelected.bind(this)}
2016-12-20 16:08:49 +01:00
layers={layers}
2016-12-17 14:53:16 +01:00
/>
</div>
2016-12-17 15:44:42 +01:00
<div style={{
2016-12-17 21:25:00 +01:00
position: 'absolute',
bottom: 0,
height: "100%",
2016-12-17 15:44:42 +01:00
top: 50,
2016-12-17 16:43:25 +01:00
left: 180,
2016-12-17 15:44:42 +01:00
zIndex: 100,
width: 300,
backgroundColor: colors.gray}
}>
2016-12-20 16:08:49 +01:00
{selectedLayer && <LayerEditor layer={selectedLayer} onLayerChanged={this.onLayerChanged.bind(this)} sources={this.layerWatcher.sources} vectorLayers={this.layerWatcher.vectorLayers}/>}
2016-12-17 15:44:42 +01:00
</div>
2016-12-17 14:53:16 +01:00
{this.mapRenderer()}
</div>
}
2016-09-08 19:47:29 +02:00
}
2016-09-21 08:41:02 +02:00