Deref style on open

src/components/layers/LayerEditor.jsx

@@ -119,11 +119,13 @@ export default class LayerEditor extends React.Component {
         onIdChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
       />
       case 'source': return <div>
+        {this.props.layer.filter &&
         <FilterEditor
           filter={this.props.layer.filter}
           properties={this.props.vectorLayers[this.props.layer['source-layer']]}
           onChange={f => this.onFilterChange(f)}
         />
+        }
         <SourceEditor
           source={this.props.layer.source}
           sourceLayer={this.props.layer['source-layer']}

src/components/modals/OpenModal.jsx

@@ -76,7 +76,7 @@ class OpenModal extends React.Component {
       withCredentials: false,
     }, (error, response, body) => {
         if (!error && response.statusCode == 200) {
-          const mapStyle = style.ensureMetadataExists(JSON.parse(body))
+          const mapStyle = style.ensureStyleValidity(JSON.parse(body))
           console.log('Loaded style ', mapStyle.id)
           this.props.onStyleOpen(mapStyle)
         } else {
@@ -91,7 +91,7 @@ class OpenModal extends React.Component {
     reader.readAsText(file, "UTF-8");
     reader.onload = e => {
       let mapStyle = JSON.parse(e.target.result)
-      mapStyle = style.ensureMetadataExists(mapStyle)
+      mapStyle = style.ensureStyleValidity(mapStyle)
       this.props.onStyleOpen(mapStyle);
     }
     reader.onerror = e => console.log(e.target);

src/config/styles.json

@@ -28,11 +28,5 @@
     "title": "Fiord Color",
     "url": "https://rawgit.com/openmaptiles/fiord-color-gl-style/gh-pages/style-cdn.json",
     "thumbnail": "https://camo.githubusercontent.com/605f2edc30e413b37d16a6ca1d500f265725d76d/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f6369776775693378353030317732706e7668633063327767302f7374617469632f31302e3938373235382c34362e3435333135302c332e30322c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
-  },
-  {
-    "id": "toner",
-    "title": "Toner",
-    "url": "https://rawgit.com/openmaptiles/toner-color-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://cloud.githubusercontent.com/assets/1288339/21422755/86ebe96e-c839-11e6-8337-42742dfe34a2.png"
   }
 ]

src/libs/style.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import spec from 'mapbox-gl-style-spec/reference/latest.min.js'
+import derefLayers from 'mapbox-gl-style-spec/lib/deref'
 
 // Empty style is always used if no style could be restored or fetched
-const emptyStyle = ensureMetadataExists({
+const emptyStyle = ensureStyleValidity({
   version: 8,
   sources: {},
   layers: [],
@@ -24,8 +25,17 @@ function ensureHasTimestamp(style) {
   return style
 }
 
-function ensureMetadataExists(style) {
+function ensureHasNoRefs(style) {
-  return ensureHasId(ensureHasTimestamp(style))
+  const derefedStyle = {
+    ...style,
+    layers: derefLayers(style.layers)
+  }
+  console.log(derefedStyle)
+  return derefedStyle
+}
+
+function ensureStyleValidity(style) {
+  return ensureHasNoRefs(ensureHasId(ensureHasTimestamp(style)))
 }
 
 function indexOfLayer(layers, layerId) {
@@ -38,7 +48,7 @@ function indexOfLayer(layers, layerId) {
 }
 
 export default {
-  ensureMetadataExists,
+  ensureStyleValidity,
   emptyStyle,
   indexOfLayer,
   generateId,

src/libs/stylestore.js

@@ -20,7 +20,7 @@ export function loadDefaultStyle(cb) {
     withCredentials: false,
   }, (error, response, body) => {
       if (!error && response.statusCode == 200) {
-        cb(style.ensureMetadataExists(JSON.parse(body)))
+        cb(style.ensureStyleValidity(JSON.parse(body)))
       } else {
         console.warn('Could not fetch default style', styleUrl)
         cb(style.emptyStyle)
@@ -106,7 +106,7 @@ export class StyleStore {
 
   // Save current style replacing previous version
   save(mapStyle) {
-    mapStyle = style.ensureMetadataExists(mapStyle)
+    mapStyle = style.ensureStyleValidity(mapStyle)
     const key = styleKey(mapStyle.id)
     window.localStorage.setItem(key, JSON.stringify(mapStyle))
     window.localStorage.setItem(storageKeys.latest, mapStyle.id)