diff --git a/src/app.jsx b/src/app.jsx
index b352912..e401191 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -45,6 +45,12 @@ export default class App extends React.Component {
this.setState({ currentStyle: savedStyle })
}
+ onStyleSave() {
+ const snapshotStyle = this.state.currentStyle.set('modified', new Date().toJSON())
+ const savedStyle = this.styleStore.save(snapshotStyle)
+ this.setState({ currentStyle: savedStyle })
+ }
+
onStyleChanged(newStyle) {
this.setState({ currentStyle: newStyle })
}
@@ -60,6 +66,7 @@ export default class App extends React.Component {
render() {
return
diff --git a/src/map.jsx b/src/map.jsx
index cec370a..e3dcbfe 100644
--- a/src/map.jsx
+++ b/src/map.jsx
@@ -2,18 +2,31 @@ import React from 'react'
import MapboxGl from 'mapbox-gl';
import diffStyles from 'mapbox-gl-style-spec/lib/diff'
import theme from './theme.js'
+import Immutable from 'immutable'
export class Map extends React.Component {
static propTypes = {
- mapStyle: React.PropTypes.object.isRequired
+ mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired,
}
componentWillReceiveProps(nextProps) {
- const map = this.state.map
- if(map) {
+ // If the id has changed a new style has been uplaoded and
+ // it is safer to do a full new render
+ const mapIdChanged = this.props.mapStyle.get('id') !== nextProps.mapStyle.get('id')
+ if(mapIdChanged) {
+ this.state.map.setStyle(nextProps.mapStyle.toJS())
+ return
+ }
+
+ // TODO: If there is no map yet we need to apply the changes later?
+ // How to deal with that?
+ if(this.state.map) {
+ //TODO: Write own diff algo that operates on immutable collections
+ // Should be able to improve performance since we can only compare
+ // by reference
const changes = diffStyles(this.props.mapStyle.toJS(), nextProps.mapStyle.toJS())
changes.forEach(change => {
- map[change.command].apply(map, change.args);
+ this.state.map[change.command].apply(this.state.map, change.args);
});
}
}
@@ -23,7 +36,9 @@ export class Map extends React.Component {
}
componentDidMount() {
+ //TODO: Read MapboxGL token from settings
MapboxGl.accessToken = "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w";
+
const map = new MapboxGl.Map({
container: this.container,
style: this.props.mapStyle.toJS(),
diff --git a/src/stylestore.js b/src/stylestore.js
index bc7b00f..7da20b9 100644
--- a/src/stylestore.js
+++ b/src/stylestore.js
@@ -69,7 +69,7 @@ export class StyleStore {
// Find the last edited style
latestStyle() {
if(this.mapStyles.length == 0) {
- return Immutable.fromJS(emptyStyle)
+ return ensureOptionalStyleProps(Immutable.fromJS(emptyStyle))
}
const styleId = window.localStorage.getItem(storage.keys.latest)
const styleItem = window.localStorage.getItem(styleKey(styleId))
diff --git a/src/toolbar.jsx b/src/toolbar.jsx
index 64083ed..f11b39f 100644
--- a/src/toolbar.jsx
+++ b/src/toolbar.jsx
@@ -3,7 +3,12 @@ import FileReaderInput from 'react-file-reader-input';
import { Button, Text } from 'rebass';
import { Menu, NavItem, Tooltip, Container, Block, Fixed } from 'rebass'
-import { MdFileDownload, MdFileUpload, MdSettings, MdPalette, MdLayers, MdSave, MdFolderOpen} from 'react-icons/lib/md';
+
+import MdFileDownload from 'react-icons/lib/md/file-download'
+import MdFileUpload from 'react-icons/lib/md/file-upload'
+import MdSettings from 'react-icons/lib/md/settings'
+import MdLayers from 'react-icons/lib/md/layers'
+import MdSave from 'react-icons/lib/md/save'
import theme from './theme.js';
@@ -11,13 +16,13 @@ export class Toolbar extends React.Component {
static propTypes = {
onStyleUpload: React.PropTypes.func.isRequired,
onStyleDownload: React.PropTypes.func.isRequired,
+ onStyleSave: React.PropTypes.func,
onOpenSettings: React.PropTypes.func,
onOpenLayers: React.PropTypes.func,
}
constructor(props) {
super(props);
- this.onUpload = this.onUpload.bind(this);
this.state = {
styleUploaded: false
}
@@ -39,7 +44,7 @@ export class Toolbar extends React.Component {
render() {
let downloadButton = null
- if(this.state.styleUploaded) {
+ if(this.props.styleUploaded) {
downloadButton =