Fetch basic default style on startup

This commit is contained in:
lukasmartinelli 2016-09-10 16:37:41 +02:00
parent 2cc4055416
commit f444ebf65d
2 changed files with 33 additions and 7 deletions

View file

@ -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) {

View file

@ -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) {
return ensureOptionalStyleProps(Immutable.fromJS(emptyStyle))
}
if(this.mapStyles.length == 0) return emptyStyle
const styleId = window.localStorage.getItem(storageKeys.latest)
const styleItem = window.localStorage.getItem(styleKey(styleId))
return Immutable.fromJS(JSON.parse(styleItem))