2016-09-09 00:10:54 +02:00
|
|
|
import React from 'react'
|
2016-12-20 11:44:22 +01:00
|
|
|
import { saveAs } from 'file-saver'
|
2016-09-09 00:10:54 +02:00
|
|
|
|
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-09-09 00:10:54 +02:00
|
|
|
|
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 {
|
2016-12-16 14:49:25 +01:00
|
|
|
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()
|
2016-12-16 14:49:25 +01:00
|
|
|
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
|
|
|
})
|
2016-12-16 14:49:25 +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,
|
2016-12-16 14:49:25 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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
|
2016-12-16 14:49:25 +01:00
|
|
|
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)
|
2016-12-16 14:49:25 +01:00
|
|
|
const savedStyle = this.styleStore.save(newStyle)
|
2016-12-17 15:44:42 +01:00
|
|
|
this.setState({ mapStyle: savedStyle })
|
2016-12-16 14:49:25 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
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')
|
2016-12-16 14:49:25 +01:00
|
|
|
this.styleStore.save(snapshotStyle)
|
|
|
|
}
|
|
|
|
|
|
|
|
onStyleChanged(newStyle) {
|
2016-12-17 15:44:42 +01:00
|
|
|
this.setState({ mapStyle: newStyle })
|
2016-12-16 14:49:25 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
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
|
2016-12-20 14:50:38 +01:00
|
|
|
|
2016-12-16 14:49:25 +01:00
|
|
|
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-16 14:49:25 +01:00
|
|
|
/>
|
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()}
|
2016-12-16 14:49:25 +01:00
|
|
|
</div>
|
|
|
|
}
|
2016-09-08 19:47:29 +02:00
|
|
|
}
|
2016-09-21 08:41:02 +02:00
|
|
|
|