Add Map#getStyle method

fixes #1982
mapbox · Feb 5, 2016 · 7631f32 · 7631f32
1 parent e745190
commit 7631f32
Show file tree

Hide file tree

Showing 17 changed files with 360 additions and 25 deletions.
diff --git a/debug/site.js b/debug/site.js
@@ -11,7 +11,7 @@ var map = new mapboxgl.Map({
 
 map.addControl(new mapboxgl.Navigation());
 
-map.on('style.load', function() {
+map.on('load', function() {
     map.addSource('geojson', {
         "type": "geojson",
         "data": "/debug/route.json"

diff --git a/js/source/geojson_source.js b/js/source/geojson_source.js
@@ -127,6 +127,13 @@ GeoJSONSource.prototype = util.inherit(Evented, /** @lends GeoJSONSource.prototy
         }
     },
 
+    serialize: function() {
+        return {
+            type: 'geojson',
+            data: this._data
+        };
+    },
+
     getVisibleCoordinates: Source._getVisibleCoordinates,
     getTile: Source._getTile,
 

diff --git a/js/source/image_source.js b/js/source/image_source.js
@@ -31,6 +31,9 @@ module.exports = ImageSource;
  * map.removeSource('some id');  // remove
  */
 function ImageSource(options) {
+    this.urls = options.urls;
+    this.coordinates = options.coordinates;
+
     ajax.getImage(options.url, function(err, image) {
         // @TODO handle errors via event.
         if (err) return;
@@ -148,5 +151,13 @@ ImageSource.prototype = util.inherit(Evented, {
 
     featuresIn: function(bbox, params, callback) {
         return callback(null, []);
+    },
+
+    serialize: function() {
+        return {
+            type: 'image',
+            urls: this.urls,
+            coordinates: this.coordinates
+        };
     }
 });
diff --git a/js/source/raster_tile_source.js b/js/source/raster_tile_source.js
@@ -39,6 +39,14 @@ RasterTileSource.prototype = util.inherit(Evented, {
         // noop
     },
 
+    serialize: function() {
+        return {
+            type: 'raster',
+            url: this.url,
+            tileSize: this.tileSize
+        };
+    },
+
     getVisibleCoordinates: Source._getVisibleCoordinates,
     getTile: Source._getTile,
 

diff --git a/js/source/vector_tile_source.js b/js/source/vector_tile_source.js
@@ -9,6 +9,7 @@ module.exports = VectorTileSource;
 
 function VectorTileSource(options) {
     util.extend(this, util.pick(options, ['url', 'tileSize']));
+    this._options = util.extend({ type: 'vector' }, options);
 
     if (this.tileSize !== 512) {
         throw new Error('vector tile sources must have a tileSize of 512');
@@ -45,6 +46,10 @@ VectorTileSource.prototype = util.inherit(Evented, {
         }
     },
 
+    serialize: function() {
+        return util.extend({}, this._options);
+    },
+
     getVisibleCoordinates: Source._getVisibleCoordinates,
     getTile: Source._getTile,
 

diff --git a/js/source/video_source.js b/js/source/video_source.js
@@ -33,6 +33,9 @@ module.exports = VideoSource;
  * map.removeSource('some id');  // remove
  */
 function VideoSource(options) {
+    this.urls = options.urls;
+    this.coordinates = options.coordinates;
+
     ajax.getVideo(options.urls, function(err, video) {
         // @TODO handle errors via event.
         if (err) return;
@@ -168,5 +171,13 @@ VideoSource.prototype = util.inherit(Evented, /** @lends VideoSource.prototype *
 
     featuresIn: function(bbox, params, callback) {
         return callback(null, []);
+    },
+
+    serialize: function() {
+        return {
+            type: 'video',
+            urls: this.urls,
+            coordinates: this.coordinates
+        };
     }
 });
diff --git a/js/style/style.js b/js/style/style.js
@@ -172,7 +172,7 @@ Style.prototype = util.inherit(Evented, {
 
     _broadcastLayers: function() {
         this.dispatcher.broadcast('set layers', this._order.map(function(id) {
-            return this._layers[id].serialize();
+            return this._layers[id].serialize({includeRefProperties: true});
         }, this));
     },
 
@@ -384,6 +384,27 @@ Style.prototype = util.inherit(Evented, {
         return this.getLayer(layer).getPaintProperty(name, klass);
     },
 
+    serialize: function() {
+        return util.filterObject({
+            version: this.stylesheet.version,
+            name: this.stylesheet.name,
+            metadata: this.stylesheet.metadata,
+            center: this.stylesheet.center,
+            zoom: this.stylesheet.zoom,
+            bearing: this.stylesheet.bearing,
+            pitch: this.stylesheet.pitch,
+            sprite: this.stylesheet.sprite,
+            glyphs: this.stylesheet.glyphs,
+            transition: this.stylesheet.transition,
+            sources: util.mapObject(this.sources, function(source) {
+                return source.serialize();
+            }),
+            layers: this._order.map(function(id) {
+                return this._layers[id].serialize();
+            }, this)
+        }, function(value) { return value !== undefined; });
+    },
+
     featuresAt: function(coord, params, callback) {
         this._queryFeatures('featuresAt', coord, params, callback);
     },
@@ -415,7 +436,9 @@ Style.prototype = util.inherit(Evented, {
                     return this._layers[feature.layer] !== undefined;
                 }.bind(this))
                 .map(function(feature) {
-                    feature.layer = this._layers[feature.layer].serialize();
+                    feature.layer = this._layers[feature.layer].serialize({
+                        includeRefProperties: true
+                    });
                     return feature;
                 }.bind(this)));
         }.bind(this));

diff --git a/js/style/style_declaration.js b/js/style/style_declaration.js
@@ -10,22 +10,20 @@ function StyleDeclaration(reference, value) {
     this.transitionable = reference.transition;
 
     if (value == null) {
-        value = reference.default;
+        this.value = reference.default;
+    } else {
+        this.value = value;
     }
 
     // immutable representation of value. used for comparison
-    this.json = JSON.stringify(value);
+    this.json = JSON.stringify(this.value);
 
-    if (this.type === 'color') {
-        this.value = parseColor(value);
-    } else {
-        this.value = value;
-    }
+    var parsedValue = this.type === 'color' ? parseColor(this.value) : value;
 
     if (reference.function === 'interpolated') {
-        this.calculate = MapboxGLFunction.interpolated(this.value);
+        this.calculate = MapboxGLFunction.interpolated(parsedValue);
     } else {
-        this.calculate = MapboxGLFunction['piecewise-constant'](this.value);
+        this.calculate = MapboxGLFunction['piecewise-constant'](parsedValue);
         if (reference.transition) {
             this.calculate = transitioned(this.calculate);
         }

diff --git a/js/style/style_layer.js b/js/style/style_layer.js
@@ -197,27 +197,34 @@ StyleLayer.prototype = {
         }
     },
 
-    serialize: function() {
+    serialize: function(options) {
         var output = {
             'id': this.id,
             'ref': this.ref,
             'metadata': this.metadata,
-            'type': this.type,
-            'source': this.source,
-            'source-layer': this.sourceLayer,
             'minzoom': this.minzoom,
             'maxzoom': this.maxzoom,
-            'filter': this.filter,
-            'interactive': this.interactive,
-            'layout': util.mapObject(this._layoutDeclarations, getDeclarationValue)
+            'interactive': this.interactive
         };
 
         for (var klass in this._paintDeclarations) {
             var key = klass === '' ? 'paint' : 'paint.' + key;
             output[key] = util.mapObject(this._paintDeclarations[klass], getDeclarationValue);
         }
 
-        return output;
+        if (!this.ref || (options && options.includeRefProperties)) {
+            util.extend(output, {
+                'type': this.type,
+                'source': this.source,
+                'source-layer': this.sourceLayer,
+                'filter': this.filter,
+                'layout': util.mapObject(this._layoutDeclarations, getDeclarationValue)
+            });
+        }
+
+        return util.filterObject(output, function(value, key) {
+            return value !== undefined && !(key === 'layout' && !Object.keys(value).length);
+        });
     }
 };
 

diff --git a/js/ui/map.js b/js/ui/map.js
@@ -448,6 +448,15 @@ util.extend(Map.prototype, /** @lends Map.prototype */{
         return this;
     },
 
+    /**
+     * Get a style object that can be used to recreate the map's style
+     *
+     * @returns {Object} style
+     */
+    getStyle: function() {
+        return this.style.serialize();
+    },
+
     /**
      * Add a source to the map style.
      *

diff --git a/js/util/util.js b/js/util/util.js
@@ -429,3 +429,20 @@ exports.mapObject = function(input, iterator, context) {
     }
     return output;
 };
+
+/**
+ * Create an object by filtering out values of an existing object
+ * @param {Object} input
+ * @param {Function} iterator
+ * @returns {Object}
+ * @private
+ */
+exports.filterObject = function(input, iterator, context) {
+    var output = {};
+    for (var key in input) {
+        if (iterator.call(context || this, input[key], key, input)) {
+            output[key] = input[key];
+        }
+    }
+    return output;
+};
diff --git a/test/js/source/geojson_source.test.js b/test/js/source/geojson_source.test.js
@@ -180,3 +180,34 @@ test('GeoJSONSource#update', function(t) {
         });
     });
 });
+
+test('GeoJSONSource#serialize', function(t) {
+
+    t.test('serialize source with inline data', function(t) {
+        var source = new GeoJSONSource({data: hawkHill});
+        t.deepEqual(source.serialize(), {
+            type: 'geojson',
+            data: hawkHill
+        });
+        t.end();
+    });
+
+    t.test('serialize source with url', function(t) {
+        var source = new GeoJSONSource({data: 'local://data.json'});
+        t.deepEqual(source.serialize(), {
+            type: 'geojson',
+            data: 'local://data.json'
+        });
+        t.end();
+    });
+
+    t.test('serialize source with updated data', function(t) {
+        var source = new GeoJSONSource({data: {}});
+        source.setData(hawkHill);
+        t.deepEqual(source.serialize(), {
+            type: 'geojson',
+            data: hawkHill
+        });
+        t.end();
+    });
+});
diff --git a/test/js/source/vector_tile_source.test.js b/test/js/source/vector_tile_source.test.js
@@ -70,7 +70,36 @@ test('VectorTileSource', function(t) {
         });
     });
 
+    t.test('serialize', function(t) {
+        var source = new VectorTileSource({
+            url: "http://example.com"
+        });
+        t.deepEqual(source.serialize(), {
+            type: 'vector',
+            url: "http://example.com"
+        });
+        t.end();
+    });
+
+    t.test('serialize TileJSON', function(t) {
+        var source = new VectorTileSource({
+            minzoom: 1,
+            maxzoom: 10,
+            attribution: "Mapbox",
+            tiles: ["http://example.com/{z}/{x}/{y}.png"]
+        });
+        t.deepEqual(source.serialize(), {
+            type: 'vector',
+            minzoom: 1,
+            maxzoom: 10,
+            attribution: "Mapbox",
+            tiles: ["http://example.com/{z}/{x}/{y}.png"]
+        });
+        t.end();
+    });
+
     t.test('after', function(t) {
         server.close(t.end);
     });
+
 });
diff --git a/test/js/style/style.test.js b/test/js/style/style.test.js
@@ -846,7 +846,7 @@ test('Style#featuresAt', function(t) {
             t.test('includes paint properties', function(t) {
                 featuresInOrAt({}, function(err, results) {
                     t.error(err);
-                    t.deepEqual(results[0].layer.paint['line-color'], [ 1, 0, 0, 1 ]);
+                    t.deepEqual(results[0].layer.paint['line-color'], 'red');
                     t.end();
                 });
             });