Fall back to defaut style

src/components/fields/PropertyGroup.jsx

@@ -56,7 +56,6 @@ export default class PropertyGroup extends React.Component {
       padding: margins[2],
       paddingRight: 0,
       backgroundColor: colors.black,
-      marginBottom: margins[2],
     }}>
       {fields}
     </div>

src/components/layers/LayerSettings.jsx

@@ -21,7 +21,6 @@ class LayerSettings extends React.Component {
       padding: margins[2],
       paddingRight: 0,
       backgroundColor: colors.black,
-      marginBottom: margins[2],
     }}>
       <InputBlock label={"Layer ID"}>
         <StringInput

src/components/modals/OpenModal.jsx

@@ -9,6 +9,7 @@ import request from 'request'
 import FileUploadIcon from 'react-icons/lib/md/file-upload'
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
 
+import style from '../../libs/style.js'
 import colors from '../../config/colors'
 import { margins, fontSizes } from '../../config/scales'
 import publicStyles from '../../config/styles.json'
@@ -75,7 +76,7 @@ class OpenModal extends React.Component {
       withCredentials: false,
     }, (error, response, body) => {
         if (!error && response.statusCode == 200) {
-          const mapStyle = JSON.parse(body)
+          const mapStyle = style.ensureMetadataExists(JSON.parse(body))
           console.log('Loaded style ', mapStyle.id)
           this.props.onStyleOpen(mapStyle)
         } else {

src/config/styles.json

@@ -1,4 +1,10 @@
 [
+  {
+    "id": "klokantech-basic",
+    "title": "Klokantech Basic",
+    "url": "https://rawgit.com/openmaptiles/klokantech-basic-gl-style/gh-pages/style-cdn.json",
+    "thumbnail": "https://camo.githubusercontent.com/5cf548fdb9fc606f4a452d14fd2a7a959155fd40/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f63697578757465726630316135326971716f366b6f6c776b312f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
+  },
   {
     "id": "dark-matter",
     "title": "Dark Matter",
@@ -17,12 +23,6 @@
     "url": "https://rawgit.com/openmaptiles/osm-bright-gl-style/gh-pages/style-cdn.json",
     "thumbnail": "https://camo.githubusercontent.com/a15e23ab59202c56502e57cde963cb7772ed3bb1/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f63697736637a7a326e30303234326b6d673668773230626f782f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
   },
-  {
-    "id": "klokantech-basic",
-    "title": "Klokantech Basic",
-    "url": "https://rawgit.com/openmaptiles/klokantech-basic-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/5cf548fdb9fc606f4a452d14fd2a7a959155fd40/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f63697578757465726630316135326971716f366b6f6c776b312f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
-  },
   {
     "id": "fiord-color",
     "title": "Fiord Color",

src/libs/stylestore.js

@@ -1,5 +1,7 @@
 import { colorizeLayers } from './style.js'
 import style from './style.js'
+import publicSources from '../config/styles.json'
+import request from 'request'
 
 const storagePrefix = "maputnik"
 const stylePrefix = 'style'
@@ -8,27 +10,22 @@ const storageKeys = {
   accessToken: [storagePrefix, 'access_token'].join(':')
 }
 
-const defaultStyleUrl = "https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/basic-v9-cdn.json"
+const defaultStyleUrl = publicSources[0].url
+
 // Fetch a default style via URL and return it or a fallback style via callback
 export function loadDefaultStyle(cb) {
-  console.log('Load default style')
+  console.log('Falling back to default style')
-  var request = new XMLHttpRequest()
+  request({
-  request.open('GET', defaultStyleUrl, true)
+    url: defaultStyleUrl,
-
+    withCredentials: false,
-  request.onload = () => {
+  }, (error, response, body) => {
-    if (request.status >= 200 && request.status < 400) {
+      if (!error && response.statusCode == 200) {
-      cb(style.ensureMetadataExists(JSON.parse(request.responseText)))
+        cb(style.ensureMetadataExists(JSON.parse(body)))
       } else {
+        console.warn('Could not fetch default style', styleUrl)
         cb(style.emptyStyle)
       }
-  }
+  })
-
-  request.onerror = function() {
-      console.log('Could not fetch default style')
-      cb(style.emptyStyle)
-  }
-
-  request.send()
 }
 
 // Return style ids and dates of all styles stored in local storage
@@ -99,16 +96,17 @@ export class StyleStore {
 
   // Find the last edited style
   latestStyle(cb) {
-    if(this.mapStyles.length === 0) return cb(style.emptyStyle)
+    if(this.mapStyles.length === 0) return loadDefaultStyle(cb)
     const styleId = window.localStorage.getItem(storageKeys.latest)
     const styleItem = window.localStorage.getItem(styleKey(styleId))
 
     if(styleItem) return cb(JSON.parse(styleItem))
-    cb(style.emptyStyle)
+    loadDefaultStyle(cb)
   }
 
   // Save current style replacing previous version
   save(mapStyle) {
+    mapStyle = style.ensureMetadataExists(mapStyle)
     const key = styleKey(mapStyle.id)
     window.localStorage.setItem(key, JSON.stringify(mapStyle))
     window.localStorage.setItem(storageKeys.latest, mapStyle.id)