Open style from url #34

package.json

@@ -47,7 +47,8 @@
     "react-motion": "^0.4.7",
     "react-sortable-hoc": "^0.4.5",
     "reconnecting-websocket": "^3.0.3",
-    "request": "^2.79.0"
+    "request": "^2.79.0",
+    "url": "^0.11.0"
   },
   "babel": {
     "presets": [

src/components/App.jsx

@@ -14,6 +14,7 @@ import MessagePanel from './MessagePanel'
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import validateStyleMin from 'mapbox-gl-style-spec/lib/validate_style.min'
 import style from '../libs/style.js'
+import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'
 import { loadDefaultStyle, StyleStore } from '../libs/stylestore'
 import { ApiStyleStore } from '../libs/apistore'
@@ -29,13 +30,19 @@ export default class App extends React.Component {
       onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false)
     })
 
-    this.styleStore.init(err => {
+    const styleUrl = initialStyleUrl()
-      if(err) {
+    if(styleUrl) {
-        console.log('Falling back to local storage for storing styles')
+      this.styleStore = new StyleStore()
-        this.styleStore = new StyleStore()
+      loadStyleUrl(styleUrl, mapStyle => this.onStyleChanged(mapStyle))
-      }
+    } else {
-      this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
+      this.styleStore.init(err => {
-    })
+        if(err) {
+          console.log('Falling back to local storage for storing styles')
+          this.styleStore = new StyleStore()
+        }
+        this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
+      })
+    }
 
     this.state = {
       errors: [],

src/libs/stylestore.js

@@ -1,5 +1,6 @@
 import { colorizeLayers } from './style.js'
 import style from './style.js'
+import { loadStyleUrl } from './urlopen'
 import publicSources from '../config/styles.json'
 import request from 'request'
 
@@ -14,18 +15,7 @@ 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('Falling back to default style')
+  loadStyleUrl(defaultStyleUrl, cb)
-  request({
-    url: defaultStyleUrl,
-    withCredentials: false,
-  }, (error, response, body) => {
-      if (!error && response.statusCode == 200) {
-        cb(style.ensureStyleValidity(JSON.parse(body)))
-      } else {
-        console.warn('Could not fetch default style', styleUrl)
-        cb(style.emptyStyle)
-      }
-  })
 }
 
 // Return style ids and dates of all styles stored in local storage

src/libs/urlopen.js

@@ -0,0 +1,24 @@
+import request from 'request'
+import url from 'url'
+import style from './style.js'
+
+export function initialStyleUrl() {
+  const initialUrl = url.parse(window.location.href, true)
+  console.log(initialUrl)
+  return (initialUrl.query || {}).style
+}
+
+export function loadStyleUrl(styleUrl, cb) {
+  console.log('Loading style', styleUrl)
+  request({
+    url: styleUrl,
+    withCredentials: false,
+  }, (error, response, body) => {
+      if (!error && response.statusCode == 200) {
+        cb(style.ensureStyleValidity(JSON.parse(body)))
+      } else {
+        console.warn('Could not fetch default style', styleUrl)
+        cb(style.emptyStyle)
+      }
+  })
+}