Correct the condition for using interpZoomTransitioned in StyleTransi…

…tion Fixes #2762
mapbox · Jun 21, 2016 · 6d720be · 6d720be
1 parent 5c8d47b
commit 6d720be
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 6 deletions.
diff --git a/js/style/style_layer.js b/js/style/style_layer.js
@@ -281,9 +281,9 @@ StyleLayer.prototype = util.inherit(Evented, {
     // set paint transition based on a given paint declaration
     _applyPaintDeclaration: function (name, declaration, options, globalOptions, animationLoop) {
         var oldTransition = options.transition ? this._paintTransitions[name] : undefined;
+        var spec = this._paintSpecifications[name];
 
         if (declaration === null || declaration === undefined) {
-            var spec = this._paintSpecifications[name];
             declaration = new StyleDeclaration(spec, spec.default);
         }
 
@@ -295,7 +295,7 @@ StyleLayer.prototype = util.inherit(Evented, {
         }, globalOptions, this.getPaintProperty(name + TRANSITION_SUFFIX));
 
         var newTransition = this._paintTransitions[name] =
-                new StyleTransition(declaration, oldTransition, transitionOptions);
+            new StyleTransition(spec, declaration, oldTransition, transitionOptions);
 
         if (!newTransition.instant()) {
             newTransition.loopID = animationLoop.set(newTransition.endTime - Date.now());

diff --git a/js/style/style_transition.js b/js/style/style_transition.js
@@ -8,16 +8,15 @@ module.exports = StyleTransition;
 /*
  * Represents a transition between two declarations
  */
-function StyleTransition(declaration, oldTransition, value) {
+function StyleTransition(reference, declaration, oldTransition, value) {
 
     this.declaration = declaration;
     this.startTime = this.endTime = (new Date()).getTime();
 
-    var type = declaration.type;
-    if ((type === 'string' || type === 'array') && declaration.transitionable) {
+    if (reference.function === 'piecewise-constant' && reference.transition) {
         this.interp = interpZoomTransitioned;
     } else {
-        this.interp = interpolate[type];
+        this.interp = interpolate[reference.type];
     }
 
     this.oldTransition = oldTransition;

diff --git a/test/manual/2762.html b/test/manual/2762.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel='stylesheet' href='../../dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+<script src='../../dist/mapbox-gl-dev.js'></script>
+<script>
+    var map = new mapboxgl.Map({
+        container: 'map',
+        style: {
+            "version": 8,
+            "sources": {
+                "geojson": {
+                    "type": "geojson",
+                    "data": {
+                        "type": "Point",
+                        "coordinates": [
+                            0,
+                            0
+                        ]
+                    }
+                }
+            },
+            "transition": {
+                "duration": 1000
+            },
+            "layers": [
+                {
+                    "id": "circle",
+                    "type": "circle",
+                    "source": "geojson",
+                    "paint": {
+                        "circle-translate": [
+                            -50,
+                            -50
+                        ]
+                    }
+                }
+            ]
+        }
+    });
+
+    map.on('click', function(e) {
+        map.setPaintProperty("circle", "circle-color", "red");
+        map.setPaintProperty("circle", "circle-translate", [50, 50]);
+    });
+</script>
+</body>
+</html>