diff --git a/package.json b/package.json index 419fe64..2483747 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "license": "MIT", "homepage": "https://github.com/lukasmartinelli/mapolo#readme", "dependencies": { + "file-saver": "^1.3.2", "mapbox-gl": "^0.23.0", "mapbox-gl-style-spec": "^8.8.0", "node-sass": "^3.9.2", diff --git a/src/app.jsx b/src/app.jsx index fc0d92e..89adb40 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,4 +1,5 @@ import React from 'react' +import {saveAs} from 'file-saver' import { Drawer, Container, Block, Fixed } from 'rebass' import {Map} from './map.jsx' @@ -49,6 +50,12 @@ export default class App extends React.Component { } } + onStyleDownload() { + const mapStyle = this.state.styleManager.exportStyle() + const blob = new Blob([mapStyle], {type: "application/json;charset=utf-8"}); + saveAs(blob, "glstyle.json"); + } + onStyleUpload(newStyle) { this.setState({ styleManager: new StyleManager(newStyle) }) } @@ -64,7 +71,7 @@ export default class App extends React.Component { render() { return
- +
diff --git a/src/style.js b/src/style.js index 8f3cbf5..4b7b577 100644 --- a/src/style.js +++ b/src/style.js @@ -19,6 +19,10 @@ export class StyleManager { console.log(command) } + exportStyle() { + return JSON.stringify(this.mapStyle, null, 4) + } + layer(layerId) { console.log(this.mapStyle) return this.mapStyle.layers[layerId] diff --git a/src/theme.js b/src/theme.js index 280a217..e39d04b 100644 --- a/src/theme.js +++ b/src/theme.js @@ -10,7 +10,7 @@ const baseColors = { lowgray: '#dcdcdc', white: '#fff', blue: '#00d9f7', - green: '#0f8', + green: '#B4C7AD', orange: '#fb3', red: '#f04', } diff --git a/src/toolbar.jsx b/src/toolbar.jsx index 1f2c950..486fb47 100644 --- a/src/toolbar.jsx +++ b/src/toolbar.jsx @@ -3,14 +3,22 @@ import FileReaderInput from 'react-file-reader-input'; import { Button, Text } from 'rebass'; import { Menu, NavItem, Tooltip, Container, Block, Fixed } from 'rebass' -import {MdSettings, MdPalette, MdLayers, MdSave, MdFolderOpen} from 'react-icons/lib/md'; +import { MdFileDownload, MdFileUpload, MdSettings, MdPalette, MdLayers, MdSave, MdFolderOpen} from 'react-icons/lib/md'; import theme from './theme.js'; export class Toolbar extends React.Component { + static propTypes = { + onStyleUpload: React.PropTypes.func.isRequired, + onStyleDownload: React.PropTypes.func.isRequired + } + constructor(props) { super(props); this.onUpload = this.onUpload.bind(this); + this.state = { + styleUploaded: false + } } onUpload(_, files) { @@ -20,11 +28,26 @@ export class Toolbar extends React.Component { reader.onload = e => { const style = JSON.parse(e.target.result); this.props.onStyleUpload(style); + this.setState({ + styleUploaded: true + }) } reader.onerror = e => console.log(e.target); } render() { + let downloadButton = null + if(this.state.styleUploaded) { + downloadButton = + + + } + + console.log(this.state) return - - - - + {downloadButton} - - - - - - } }