API for mutating style properties

js/data/create_bucket.js

@@ -7,31 +7,23 @@ var FillBucket = require('./fill_bucket');
 var SymbolBucket = require('./symbol_bucket');
 var LayoutProperties = require('../style/layout_properties');
 var featureFilter = require('feature-filter');
-var StyleDeclaration = require('../style/style_declaration');
-var util = require('../util/util');
+var StyleDeclarationSet = require('../style/style_declaration_set');
 
 function createBucket(layer, buffers, collision, z) {
+    var values = new StyleDeclarationSet('layout', layer.type, layer.layout, {}).values(),
+        fakeZoomHistory = { lastIntegerZoom: Infinity, lastIntegerZoomTime: 0, lastZoom: 0 },
+        layout = {};
 
-    if (!LayoutProperties[layer.type]) {
-        //console.warn('unknown bucket type');
-        return null;
+    for (var k in values) {
+        layout[k] = values[k].calculate(z, fakeZoomHistory);
     }
 
-    var calculatedLayout = util.extend({}, layer.layout);
-    for (var k in calculatedLayout) {
-        var fakeZoomHistory = { lastIntegerZoom: Infinity, lastIntegerZoomTime: 0, lastZoom: 0 };
-        calculatedLayout[k] = new StyleDeclaration('layout', layer.type, k, calculatedLayout[k]).calculate(z, fakeZoomHistory);
-    }
-
-    var layoutProperties = new LayoutProperties[layer.type](calculatedLayout);
-    layoutProperties.zoom = z;
-
     var BucketClass =
         layer.type === 'line' ? LineBucket :
         layer.type === 'fill' ? FillBucket :
         layer.type === 'symbol' ? SymbolBucket : null;
 
-    var bucket = new BucketClass(buffers, layoutProperties, collision);
+    var bucket = new BucketClass(buffers, new LayoutProperties[layer.type](layout), collision);
 
     bucket.id = layer.id;
     bucket.type = layer.type;

js/source/geojson_source.js

@@ -57,6 +57,10 @@ GeoJSONSource.prototype = util.inherit(Evented, {
         }
     },
 
+    reload: function() {
+        this._updateData();
+    },
+
     render: Source._renderTiles,
     featuresAt: Source._vectorFeaturesAt,
 

js/source/vector_tile_source.js

@@ -37,6 +37,15 @@ VectorTileSource.prototype = util.inherit(Evented, {
         }
     },
 
+    reload: function() {
+        var ids = this._pyramid.orderedIDs();
+        for (var i = 0; i < ids.length; i++) {
+            var tile = this._pyramid.getTile(ids[i]);
+            this.dispatcher.send('reload tile', { id: tile.uid, source: this.id },
+                this._tileLoaded.bind(this, tile), tile.workerID);
+        }
+    },
+
     render: Source._renderTiles,
     featuresAt: Source._vectorFeaturesAt,
 
@@ -52,18 +61,20 @@ VectorTileSource.prototype = util.inherit(Evented, {
             depth: tile.zoom >= this.maxzoom ? this.map.options.maxZoom - tile.zoom : 1
         };
 
-        tile.workerID = this.dispatcher.send('load tile', params, function(err, data) {
-            if (tile.aborted)
-                return;
+        tile.workerID = this.dispatcher.send('load tile', params, this._tileLoaded.bind(this, tile));
+    },
+
+    _tileLoaded: function(tile, err, data) {
+        if (tile.aborted)
+            return;
 
-            if (err) {
-                this.fire('tile.error', {tile: tile});
-                return;
-            }
+        if (err) {
+            this.fire('tile.error', {tile: tile});
+            return;
+        }
 
-            tile.loadVectorData(data);
-            this.fire('tile.load', {tile: tile});
-        }.bind(this));
+        tile.loadVectorData(data);
+        this.fire('tile.load', {tile: tile});
     },
 
     _abortTile: function(tile) {

js/source/worker.js

@@ -43,13 +43,19 @@ util.extend(Worker.prototype, {
                 params.id, params.zoom, params.maxZoom,
                 params.tileSize, params.source, params.depth);
 
-            tile.parse(new vt.VectorTile(new Protobuf(new Uint8Array(data))), this.layers, this.actor, callback);
+            tile.data = new vt.VectorTile(new Protobuf(new Uint8Array(data)));
+            tile.parse(tile.data, this.layers, this.actor, callback);
 
             this.loaded[source] = this.loaded[source] || {};
             this.loaded[source][id] = tile;
         }.bind(this));
     },
 
+    'reload tile': function(params, callback) {
+        var tile = this.loaded[params.source][params.id];
+        tile.parse(tile.data, this.layers, this.actor, callback);
+    },
+
     'abort tile': function(params) {
         var source = this.loading[params.source];
         if (source && source[params.id]) {

js/source/worker_tile.js

@@ -23,10 +23,11 @@ function WorkerTile(id, zoom, maxZoom, tileSize, source, depth) {
     this.tileSize = tileSize;
     this.source = source;
     this.depth = depth;
-    this.featureTree = new FeatureTree(getGeometry, getType);
 }
 
 WorkerTile.prototype.parse = function(data, layers, actor, callback) {
+    this.featureTree = new FeatureTree(getGeometry, getType);
+
     var i, k,
         tile = this,
         layer,

js/style/style.js

@@ -89,13 +89,13 @@ Style.prototype = util.inherit(Evented, {
     },
 
     _resolve: function() {
-        var id, layer, group, ordered = [];
+        var id, layer, group;
 
         this._layers = {};
         this._groups = [];
 
         for (var i = 0; i < this.stylesheet.layers.length; i++) {
-            layer = new StyleLayer(this.stylesheet.layers[i], this.stylesheet.constants);
+            layer = new StyleLayer(this.stylesheet.layers[i], this.stylesheet.constants || {});
             this._layers[layer.id] = layer;
         }
 
@@ -107,15 +107,13 @@ Style.prototype = util.inherit(Evented, {
         // Resolve reference and paint properties.
         for (id in this._layers) {
             this._layers[id].resolveReference(this._layers);
-            this._layers[id].resolvePaint(this.stylesheet.transition);
+            this._layers[id].resolvePaint();
         }
 
         // Split into groups of consecutive top-level layers with the same source.
         for (id in this._layers) {
             layer = this._layers[id];
 
-            ordered.push(layer.json());
-
             if (!group || layer.source !== group.source) {
                 group = [];
                 group.source = layer.source;
@@ -125,6 +123,16 @@ Style.prototype = util.inherit(Evented, {
             group.push(layer);
         }
 
+        this._broadcastLayers();
+    },
+
+    _broadcastLayers: function() {
+        var ordered = [];
+
+        for (var id in this._layers) {
+            ordered.push(this._layers[id].json());
+        }
+
         this.dispatcher.broadcast('set layers', ordered);
     },
 
@@ -136,7 +144,9 @@ Style.prototype = util.inherit(Evented, {
         };
 
         for (var id in this._layers) {
-            this._layers[id].cascade(classes, options, this.animationLoop);
+            this._layers[id].cascade(classes, options,
+                this.stylesheet.transition || {},
+                this.animationLoop);
         }
 
         this.fire('change');
@@ -238,6 +248,25 @@ Style.prototype = util.inherit(Evented, {
         return this._layers[id];
     },
 
+    setPaintProperty: function(layer, name, value, klass) {
+        this.getLayer(layer).setPaintProperty(name, value, klass);
+    },
+
+    getPaintProperty: function(layer, name, klass) {
+        return this.getLayer(layer).getPaintProperty(name, klass);
+    },
+
+    setLayoutProperty: function(layer, name, value) {
+        layer = this.getLayer(layer);
+        layer.setLayoutProperty(name, value);
+        this._broadcastLayers();
+        this.sources[layer.source].reload();
+    },
+
+    getLayoutProperty: function(layer, name) {
+        return this.getLayer(layer).getLayoutProperty(name);
+    },
+
     featuresAt: function(point, params, callback) {
         var features = [];
         var error = null;

js/style/style_declaration.js

@@ -6,27 +6,17 @@ var parseCSSColor = require('csscolorparser').parseCSSColor;
 
 module.exports = StyleDeclaration;
 
-/*
- * A parsed representation of a property:value pair
- */
-function StyleDeclaration(propType, renderType, prop, value, transition) {
-    var className = [propType, '_', renderType].join('');
-    var propReference = reference[className] && reference[className][prop];
-    if (!propReference) return;
-
-    this.transition = transition;
-    this.value = this.parseValue(value, propReference);
-    this.prop = prop;
-    this.type = propReference.type;
-    this.transitionable = propReference.transition;
+function StyleDeclaration(reference, value) {
+    this.value = this.parseValue(value, reference);
+    this.type = reference.type;
+    this.transitionable = reference.transition;
 
     // immuatable representation of value. used for comparison
     this.json = JSON.stringify(value);
-
 }
 
-StyleDeclaration.prototype.calculate = function(z, zoomHistory) {
-    return typeof this.value === 'function' ? this.value(z, zoomHistory) : this.value;
+StyleDeclaration.prototype.calculate = function(z, zoomHistory, transitionDuration) {
+    return typeof this.value === 'function' ? this.value(z, zoomHistory, transitionDuration) : this.value;
 };
 
 StyleDeclaration.prototype.parseValue = function(value, propReference) {
@@ -41,7 +31,7 @@ StyleDeclaration.prototype.parseValue = function(value, propReference) {
         return value;
 
     } else if (propReference.transition) {
-        return transitionedPiecewiseConstantFunction(value.stops ? value.stops : [[0, value]], this.transition.duration);
+        return transitionedPiecewiseConstantFunction(value.stops ? value.stops : [[0, value]]);
     }
 
     if (value.stops) {
@@ -66,9 +56,9 @@ function piecewiseConstantFunction(params) {
     };
 }
 
-function transitionedPiecewiseConstantFunction(stops, duration) {
+function transitionedPiecewiseConstantFunction(stops) {
 
-    return function(z, zh) {
+    return function(z, zh, duration) {
 
         var fraction = z % 1;
         var t = Math.min((Date.now() - zh.lastIntegerZoomTime) / duration, 1);

js/style/style_declaration_set.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var util = require('../util/util');
+var reference = require('./reference');
+var StyleConstant = require('./style_constant');
+var StyleDeclaration = require('./style_declaration');
+
+var lookup = {
+    paint: {},
+    layout: {}
+};
+
+reference.layer.type.values.forEach(function(type) {
+    lookup.paint[type] = makeConstructor(reference['paint_' + type]);
+    lookup.layout[type] = makeConstructor(reference['layout_' + type]);
+});
+
+function makeConstructor(reference) {
+    function StyleDeclarationSet(properties, constants) {
+        this._values      = {};
+        this._transitions = {};
+
+        this._constants = constants;
+
+        for (var k in properties) {
+            this[k] = StyleConstant.resolve(properties[k], this._constants);
+        }
+    }
+
+    Object.keys(reference).forEach(function(k) {
+        var property = reference[k];
+
+        Object.defineProperty(StyleDeclarationSet.prototype, k, {
+            set: function(v) {
+                this._values[k] = new StyleDeclaration(property, StyleConstant.resolve(v, this._constants));
+            },
+            get: function() {
+                return this._values[k].value;
+            }
+        });
+
+        if (property.transition) {
+            Object.defineProperty(StyleDeclarationSet.prototype, k + '-transition', {
+                set: function(v) {
+                    this._transitions[k] = v;
+                },
+                get: function() {
+                    return this._transitions[k];
+                }
+            });
+        }
+    });
+
+    StyleDeclarationSet.prototype.values = function() {
+        return this._values;
+    };
+
+    StyleDeclarationSet.prototype.transition = function(k, global) {
+        var t = this._transitions[k] || {};
+        return {
+            duration: util.coalesce(t.duration, global.duration, 300),
+            delay: util.coalesce(t.delay, global.delay, 0)
+        };
+    };
+
+    StyleDeclarationSet.prototype.json = function() {
+        var result = {};
+
+        for (var v in this._values) {
+            result[v] = this._values[v].value;
+        }
+
+        for (var t in this._transitions) {
+            result[t + '-transition'] = this._transitions[v];
+        }
+
+        return result;
+    };
+
+    return StyleDeclarationSet;
+}
+
+module.exports = function(renderType, layerType, properties, constants) {
+    return new lookup[renderType][layerType](properties, constants);
+};