Correctly load previously saved style

src/app.jsx

@@ -29,10 +29,9 @@ export default class App extends React.Component {
 			workContext: "layers",
 			currentStyle: this.styleStore.latestStyle(),
 		}
-
+		if(this.state.currentStyle.get('layers').size === 0) {
-		loadDefaultStyle(mapStyle => {
+			loadDefaultStyle(mapStyle => this.onStyleUpload(mapStyle))
-			this.onStyleUpload(mapStyle)
+		}
-		})
 	}
 
 	getChildContext() {
@@ -57,6 +56,7 @@ export default class App extends React.Component {
 	onStyleSave() {
 		const snapshotStyle = this.state.currentStyle.set('modified', new Date().toJSON())
 		this.setState({ currentStyle: snapshotStyle })
+		this.styleStore.save(snapshotStyle)
 	}
 
 	onStyleChanged(newStyle) {

src/style.js

@@ -27,7 +27,6 @@ function fromJSON(jsonStyle) {
 
 function ensureHasId(style) {
 	if(style.has('id')) return style
-	console.log('has no id', style.toJS())
 	return style.set('id', Math.random().toString(36).substr(2, 9))
 }
 

src/stylestore.js

@@ -10,21 +10,22 @@ const storageKeys = {
 }
 
 // Empty style is always used if no style could be restored or fetched
-const emptyStyle = style.fromJSON({
+const emptyStyle = style.ensureMetadataExists(style.fromJSON({
 		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) {
+	console.log('Load default style')
 	var request = new XMLHttpRequest()
 	request.open('GET', defaultStyleUrl, true)
 
 	request.onload = () => {
 		if (request.status >= 200 && request.status < 400) {
-			cb(style.fromJSON(request.responseText))
+			cb(style.ensureMetadataExists(style.fromJSON(request.responseText)))
 		} else {
 			cb(emptyStyle)
 		}
@@ -102,7 +103,6 @@ export class StyleStore {
 
 	// Save current style replacing previous version
 	save(mapStyle) {
-		mapStyle = style.ensureMetadataExists(mapStyle)
 		const key = styleKey(mapStyle.get('id'))
 		window.localStorage.setItem(key, JSON.stringify(style.toJSON(mapStyle)))
 		window.localStorage.setItem(storageKeys.latest, mapStyle.get('id'))

src/toolbar.jsx

@@ -48,7 +48,9 @@ export class Toolbar extends React.Component {
 		const reader = new FileReader();
 		reader.readAsText(file, "UTF-8");
 		reader.onload = e => {
-			this.props.onStyleUpload(style.fromJSON(JSON.parse(e.target.result)));
+			let mapStyle = style.fromJSON(JSON.parse(e.target.result))
+			mapStyle = style.ensureMetadataExists(mapStyle)
+			this.props.onStyleUpload(mapStyle);
 		}
 		reader.onerror = e => console.log(e.target);
 	}