Allow download style

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",

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 <div style={{ fontFamily: theme.fontFamily, color: theme.color }}>
-			<Toolbar onStyleUpload={this.onStyleUpload.bind(this)} />
+			<Toolbar onStyleUpload={this.onStyleUpload.bind(this)} onStyleDownload={this.onStyleDownload.bind(this)} />
 			<WorkspaceDrawer styleManager={this.state.styleManager}/>
 			<div className={layout.map}>
 				<Map styleManager={this.state.styleManager} />

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]

src/theme.js

@@ -10,7 +10,7 @@ const baseColors = {
 	lowgray: '#dcdcdc',
 	white: '#fff',
 	blue: '#00d9f7',
-	green: '#0f8',
+	green: '#B4C7AD',
 	orange: '#fb3',
 	red: '#f04',
 }

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 = <Block>
+				<Button onClick={this.props.onStyleDownload} big={true}>
+					<Tooltip inverted rounded title="Download style">
+						<MdFileDownload />
+					</Tooltip>
+				</Button>
+			</Block>
+		}
+
+		console.log(this.state)
 		return <Container style={{
 			zIndex: 100,
 			position: "fixed",
@@ -36,16 +59,14 @@ export class Toolbar extends React.Component {
 		}>
 			<Block>
 				  <FileReaderInput onChange={this.onUpload}>
-					<Button big={true}>
+					<Button big={true} theme={this.state.styleUploaded ? "default" : "success"}>
-						<Tooltip inverted rounded title="Save">
+						<Tooltip inverted rounded title="Upload style">
-							<MdSave />
+						  <MdFileUpload />
 						</Tooltip>
 					</Button>
 					</FileReaderInput>
 			</Block>
-			<Block>
+			{downloadButton}
-				<Button big={true}><MdFolderOpen /></Button>
-			</Block>
 			<Block>
 				<Button big={true}>
 					<Tooltip inverted rounded title="Layers">
@@ -53,12 +74,6 @@ export class Toolbar extends React.Component {
           </Tooltip>
 				</Button>
 			</Block>
-			<Block>
-				<Button big={true}><MdPalette /></Button>
-			</Block>
-			<Block>
-				<Button big={true}><MdSettings /></Button>
-			</Block>
 		</Container>
 	}
 }