Fetch basic default style on startup

src/app.jsx

@@ -5,7 +5,7 @@ import { Drawer, Container, Block, Fixed } from 'rebass'
 import {Map} from './map.jsx'
 import {Toolbar} from './toolbar.jsx'
 import { StyleManager } from './style.js'
-import { SettingsStore, StyleStore } from './stylestore.js'
+import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js'
 import { WorkspaceDrawer } from './workspace.jsx'
 
 import theme from './theme.js'
@@ -25,6 +25,10 @@ export default class App extends React.Component {
 			workContext: "layers",
 			currentStyle: this.styleStore.latestStyle(),
 		}
+
+		loadDefaultStyle(mapStyle => {
+			this.onStyleUpload(mapStyle)
+		})
 	}
 
 	getChildContext() {
@@ -35,10 +39,10 @@ export default class App extends React.Component {
 	}
 
 	onStyleDownload() {
-		this.styleStore.save(newStyle)
 		const mapStyle = JSON.stringify(this.state.currentStyle.toJS(), null, 4)
 		const blob = new Blob([mapStyle], {type: "application/json;charset=utf-8"});
 		saveAs(blob, mapStyle.id + ".json");
+		this.onStyleSave(mapStyle)
 	}
 
 	onStyleUpload(newStyle) {

src/stylestore.js

@@ -7,13 +7,37 @@ const storageKeys = {
 	accessToken: [storagePrefix, 'access_token'].join('')
 }
 
-const emptyStyle = {
+// Empty style is always used if no style could be restored or fetched
+const emptyStyle = ensureOptionalStyleProps(Immutable.fromJS({
 		version: 8,
 		sources: {},
 		layers: [],
+}))
+
+const defaultStyleUrl = "https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/basic-v9-cdn.json"
+
+// Fetch a default style via URL and return it or a fallback style via callback
+export function loadDefaultStyle(cb) {
+	var request = new XMLHttpRequest();
+	request.open('GET', defaultStyleUrl, true);
+
+	request.onload = () => {
+		if (request.status >= 200 && request.status < 400) {
+			cb(Immutable.fromJS(JSON.parse(request.responseText)))
+		} else {
+			cb(emptyStyle)
+		}
+	};
+
+	request.onerror = function() {
+			console.log('Could not fetch default style')
+			cb(emptyStyle)
+	};
+
+	request.send();
 }
 
-	// Return style ids and dates of all styles stored in local storage
+// Return style ids and dates of all styles stored in local storage
 function loadStoredStyles() {
 	const styles = []
 	for (let i = 0; i < localStorage.length; i++) {
@@ -78,9 +102,7 @@ export class StyleStore {
 
 	// Find the last edited style
 	latestStyle() {
-		if(this.mapStyles.length == 0) {
+		if(this.mapStyles.length == 0) return emptyStyle
-			return ensureOptionalStyleProps(Immutable.fromJS(emptyStyle))
-		}
 		const styleId = window.localStorage.getItem(storageKeys.latest)
 		const styleItem = window.localStorage.getItem(styleKey(styleId))
 		return Immutable.fromJS(JSON.parse(styleItem))