mapbox-gl - npm Package Compare versions

Comparing version 0.25.1 to 0.26.0

CHANGELOG.md

@@ -1,5 +0,28 @@
-## 0.25.1 (September 29 2016)
+## 0.26.0 (October 13 2016)
 
+#### New Features & Improvements
+
+ * Add `fill-extrude-height` and `fill-extrude-base` style properties (3d buildings) :cityscape: #3223
+ * Add customizable `colorSpace` interpolation to functions #3245
+ * Add `identity` function type #3274
+ * Add depth testing for symbols with `'pitch-alignment': 'map'` #3243
+ * Add `dataloading` events for styles and sources #3306
+ * Add `Control` suffix to all controls :warning: BREAKING CHANGE :warning: #3355
+
+#### Performance Improvements
+
+ * Ensure removing style or source releases all tile resources #3359
+
 #### Bugfixes
 
+ * Fix bug causing an error when `Marker#setLngLat` is called #3294
+ * Fix bug causing incorrect coordinates in `touchend` on Android Chrome #3319
+ * Fix bug causing incorrect popup positioning at top of screen #3333
+ * Restore `tile` property to `data` events fired when a tile is removed #3328
+ * Fix bug causing "Improve this map" link to not preload map location #3356
+
+## 0.25.1 (September 30 2016)
+
+#### Bugfixes
+
   * Fix bug causing attribution to not be shown #3278
@@ -6,0 +29,0 @@ * Fix bug causing exceptions when symbol text has a trailing newline #3281

CONTRIBUTING.md

@@ -88,11 +88,8 @@ Hi, and thanks in advance for contributing to Mapbox GL. Here's how we work. Please follow these conventions when submitting an issue or pull request.
 
-## Running Tests
+## Writing & Running Tests
 
-There are two test suites associated with Mapbox GL JS
+See [`test/README.md`](https://github.com/mapbox/mapbox-gl-js/blob/master/test/README.md).
 
- - `npm test` runs quick unit tests
- - `npm run test-suite` runs integration tests from the [mapbox-gl-test-suite](https://github.com/mapbox/mapbox-gl-test-suite) repository
+## Writing & Running Benchmarks
 
-## Running Benchmarks
-
 See [`bench/README.md`](https://github.com/mapbox/mapbox-gl-js/blob/master/bench/README.md).
@@ -107,3 +104,3 @@
 
-* We use [rebase merging](https://git-scm.com/book/en/v2/Git-Branching-Rebasing) (as opposed to [basic merging](https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging#Basic-Merging)) to merge branches 
+* We use [rebase merging](https://git-scm.com/book/en/v2/Git-Branching-Rebasing) (as opposed to [basic merging](https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging#Basic-Merging)) to merge branches
 
@@ -110,0 +107,0 @@ ## Documentation Conventions

js/data/bucket.js

@@ -20,2 +20,3 @@ 'use strict';
         fill: require('./bucket/fill_bucket'),
+        fillextrusion: require('./bucket/fill_extrusion_bucket'),
         line: require('./bucket/line_bucket'),
@@ -25,3 +26,11 @@ circle: require('./bucket/circle_bucket'),
     };
-    return new Classes[options.layer.type](options);
+
+    var type = options.layer.type;
+    if (type === 'fill' && (!options.layer.isPaintValueFeatureConstant('fill-extrude-height') ||
+        !options.layer.isPaintValueZoomConstant('fill-extrude-height') ||
+        options.layer.getPaintValue('fill-extrude-height') !== 0)) {
+        type = 'fillextrusion';
+    }
+
+    return new Classes[type](options);
 };
@@ -168,7 +177,7 @@
 
-Bucket.prototype.destroy = function(gl) {
+Bucket.prototype.destroy = function() {
     for (var programName in this.bufferGroups) {
         var programBufferGroups = this.bufferGroups[programName];
         for (var i = 0; i < programBufferGroups.length; i++) {
-            programBufferGroups[i].destroy(gl);
+            programBufferGroups[i].destroy();
         }
@@ -175,0 +184,0 @@ }

js/data/bucket/fill_bucket.js

@@ -8,2 +8,3 @@ 'use strict';
 var classifyRings = require('../../util/classify_rings');
+var Point = require('point-geometry');
 var EARCUT_MAX_RINGS = 500;
@@ -60,6 +61,12 @@
 
+FillBucket.prototype.addVertex = function(vertexArray, x, y) {
+    return vertexArray.emplaceBack(x, y);
+};
+
 FillBucket.prototype.addFeature = function(feature) {
     var lines = loadGeometry(feature);
-    var polygons = classifyRings(lines, EARCUT_MAX_RINGS);
+    var polygons = convertCoords(classifyRings(lines, EARCUT_MAX_RINGS));
 
+    this.factor = Math.pow(2, 13);
+
     var startGroup = this.prepareArrayGroup('fill', 0);
@@ -86,2 +93,4 @@ var startIndex = startGroup.layoutVertexArray.length;
 
+    var indices = [];
+
     for (var r = 0; r < polygon.length; r++) {
@@ -93,5 +102,6 @@ var ring = polygon[r];
         for (var v = 0; v < ring.length; v++) {
-            var vertex = ring[v];
+            var v1 = ring[v];
 
-            var index = group.layoutVertexArray.emplaceBack(vertex.x, vertex.y);
+            var index = this.addVertex(group.layoutVertexArray, v1[0], v1[1], 0, 0, 1, 1, 0);
+            indices.push(index);
 
@@ -103,4 +113,4 @@ if (v >= 1) {
             // convert to format used by earcut
-            flattened.push(vertex.x);
-            flattened.push(vertex.y);
+            flattened.push(v1[0]);
+            flattened.push(v1[1]);
         }
@@ -115,1 +125,6 @@ }
 };
+
+function convertCoords(rings) {
+    if (rings instanceof Point) return [rings.x, rings.y];
+    return rings.map(convertCoords);
+}

js/data/buffer_group.js

@@ -36,19 +36,19 @@ 'use strict';
 
-BufferGroup.prototype.destroy = function(gl) {
-    this.layoutVertexBuffer.destroy(gl);
+BufferGroup.prototype.destroy = function() {
+    this.layoutVertexBuffer.destroy();
     if (this.elementBuffer) {
-        this.elementBuffer.destroy(gl);
+        this.elementBuffer.destroy();
     }
     if (this.elementBuffer2) {
-        this.elementBuffer2.destroy(gl);
+        this.elementBuffer2.destroy();
     }
     for (var n in this.paintVertexBuffers) {
-        this.paintVertexBuffers[n].destroy(gl);
+        this.paintVertexBuffers[n].destroy();
     }
     for (var j in this.vaos) {
-        this.vaos[j].destroy(gl);
+        this.vaos[j].destroy();
     }
     for (var k in this.secondVaos) {
-        this.secondVaos[k].destroy(gl);
+        this.secondVaos[k].destroy();
     }
 };

js/data/buffer.js

@@ -33,2 +33,3 @@ 'use strict';
     if (!this.buffer) {
+        this.gl = gl;
         this.buffer = gl.createBuffer();
@@ -86,5 +87,5 @@ gl.bindBuffer(type, this.buffer);
  */
-Buffer.prototype.destroy = function(gl) {
+Buffer.prototype.destroy = function() {
     if (this.buffer) {
-        gl.deleteBuffer(this.buffer);
+        this.gl.deleteBuffer(this.buffer);
     }
@@ -91,0 +92,0 @@ };

js/geo/lng_lat_bounds.js

@@ -18,4 +18,4 @@ 'use strict';
  * @class LngLatBounds
- * @param {LngLatLike} sw The southwest corner of the bounding box.
- * @param {LngLatLike} ne The northeast corner of the bounding box.
+ * @param {LngLatLike} [sw] The southwest corner of the bounding box.
+ * @param {LngLatLike} [ne] The northeast corner of the bounding box.
  * @example
@@ -22,0 +22,0 @@ * var sw = new mapboxgl.LngLat(-73.9876, 40.7661);

js/geo/lng_lat.js

@@ -21,2 +21,6 @@ 'use strict';
  * var ll = new mapboxgl.LngLat(-73.9749, 40.7736);
+ * @see [Get coordinates of the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/mouse-position/)
+ * @see [Display a popup](https://www.mapbox.com/mapbox-gl-js/example/popup/)
+ * @see [Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/)
+ * @see [Create a timeline animation](https://www.mapbox.com/mapbox-gl-js/example/timeline-animation/)
  */
@@ -23,0 +27,0 @@ function LngLat(lng, lat) {

js/geo/transform.js

@@ -471,3 +471,14 @@ 'use strict';
         this.pixelMatrixInverse = m;
+
+        // line antialiasing matrix
+        m = mat2.create();
+        mat2.scale(m, m, [1, Math.cos(this._pitch)]);
+        mat2.rotate(m, m, this.angle);
+        this.lineAntialiasingMatrix = m;
+
+        // calculate how much longer the real world distance is at the top of the screen
+        // than at the middle of the screen.
+        var topedgelength = Math.sqrt(this.height * this.height / 4  * (1 + this.altitude * this.altitude));
+        this.lineStretch = (topedgelength + (this.height / 2 * Math.tan(this._pitch))) / topedgelength - 1;
     }
 };

js/mapbox-gl.js

@@ -14,6 +14,6 @@ 'use strict';
 mapboxgl.Control = require('./ui/control/control');
-mapboxgl.Navigation = require('./ui/control/navigation');
-mapboxgl.Geolocate = require('./ui/control/geolocate');
-mapboxgl.Attribution = require('./ui/control/attribution');
-mapboxgl.Scale = require('./ui/control/scale');
+mapboxgl.NavigationControl = require('./ui/control/navigation_control');
+mapboxgl.GeolocateControl = require('./ui/control/geolocate_control');
+mapboxgl.AttributionControl = require('./ui/control/attribution_control');
+mapboxgl.ScaleControl = require('./ui/control/scale_control');
 mapboxgl.Popup = require('./ui/popup');
@@ -51,2 +51,3 @@ mapboxgl.Marker = require('./ui/marker');
  * mapboxgl.accessToken = myAccessToken;
+ * @see [Display a map](https://www.mapbox.com/mapbox-gl-js/examples/)
  */
@@ -72,2 +73,3 @@
  * mapboxgl.supported() // = true
+ * @see [Check for browser support](https://www.mapbox.com/mapbox-gl-js/example/check-for-support/)
  */

js/render/draw_background.js

@@ -27,3 +27,3 @@ 'use strict';
         // Draw texture fill
-        program = painter.useProgram('pattern');
+        program = painter.useProgram('fillPattern');
         gl.uniform1i(program.u_image, 0);
@@ -30,0 +30,0 @@ gl.uniform2fv(program.u_pattern_tl_a, imagePosA.tl);

js/render/draw_collision_debug.js

@@ -8,3 +8,3 @@ 'use strict';
     gl.enable(gl.STENCIL_TEST);
-    var program = painter.useProgram('collisionbox');
+    var program = painter.useProgram('collisionBox');
 
@@ -11,0 +11,0 @@ for (var i = 0; i < coords.length; i++) {

js/render/draw_fill.js

 'use strict';
 
-var pixelsToTileUnits = require('../source/pixels_to_tile_units');
+var setPattern = require('./set_pattern');
 
@@ -11,13 +11,9 @@ module.exports = draw;
 
-    var isOpaque;
-    if (layer.paint['fill-pattern']) {
-        isOpaque = false;
-    } else {
-        isOpaque = (
-            layer.isPaintValueFeatureConstant('fill-color') &&
-            layer.isPaintValueFeatureConstant('fill-opacity') &&
-            layer.paint['fill-color'][3] === 1 &&
-            layer.paint['fill-opacity'] === 1
-        );
-    }
+    var isOpaque = (
+        !layer.paint['fill-pattern'] &&
+        layer.isPaintValueFeatureConstant('fill-color') &&
+        layer.isPaintValueFeatureConstant('fill-opacity') &&
+        layer.paint['fill-color'][3] === 1 &&
+        layer.paint['fill-opacity'] === 1
+    );
 
@@ -38,25 +34,11 @@ // Draw fill
 
-        var isOutlineColorDefined = layer.getPaintProperty('fill-outline-color');
-        if (isOutlineColorDefined || !layer.paint['fill-pattern']) {
-            if (isOutlineColorDefined) {
-                // If we defined a different color for the fill outline, we are
-                // going to ignore the bits in 0x07 and just care about the global
-                // clipping mask.
-                painter.setDepthSublayer(2);
-            } else {
-                // Otherwise, we only want to drawFill the antialiased parts that are
-                // *outside* the current shape. This is important in case the fill
-                // or stroke color is translucent. If we wouldn't clip to outside
-                // the current shape, some pixels from the outline stroke overlapped
-                // the (non-antialiased) fill.
-                painter.setDepthSublayer(0);
-            }
-        } else {
-            // Otherwise, we only want to drawFill the antialiased parts that are
-            // *outside* the current shape. This is important in case the fill
-            // or stroke color is translucent. If we wouldn't clip to outside
-            // the current shape, some pixels from the outline stroke overlapped
-            // the (non-antialiased) fill.
-            painter.setDepthSublayer(0);
-        }
+        // If we defined a different color for the fill outline, we are
+        // going to ignore the bits in 0x07 and just care about the global
+        // clipping mask.
+        // Otherwise, we only want to drawFill the antialiased parts that are
+        // *outside* the current shape. This is important in case the fill
+        // or stroke color is translucent. If we wouldn't clip to outside
+        // the current shape, some pixels from the outline stroke overlapped
+        // the (non-antialiased) fill.
+        painter.setDepthSublayer(layer.getPaintProperty('fill-outline-color') ? 2 : 0);
 
@@ -94,4 +76,5 @@ for (var j = 0; j < coords.length; j++) {
         // Draw texture fill
-        program = painter.useProgram('pattern');
-        setPattern(image, layer.paint['fill-opacity'], tile, coord, painter, program);
+        program = painter.useProgram('fillPattern');
+        setPattern(image, tile, coord, painter, program, false);
+        gl.uniform1f(program.u_opacity, layer.paint['fill-opacity']);
 
@@ -122,13 +105,13 @@ gl.activeTexture(gl.TEXTURE0);
     if (!bucket) return;
+    var bufferGroups = bucket.bufferGroups.fill;
+    if (!bufferGroups) return;
 
     var gl = painter.gl;
-    var bufferGroups = bucket.bufferGroups.fill;
 
     var image = layer.paint['fill-pattern'];
-    var opacity = layer.paint['fill-opacity'];
     var isOutlineColorDefined = layer.getPaintProperty('fill-outline-color');
+    var program;
 
-    var program;
     if (image && !isOutlineColorDefined) {
-        program = painter.useProgram('outlinepattern');
+        program = painter.useProgram('fillOutlinePattern');
         gl.uniform2f(program.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);
@@ -139,3 +122,3 @@
         program = painter.useProgram(
-            'outline',
+            'fillOutline',
             programOptions.defines,
@@ -146,6 +129,7 @@ programOptions.vertexPragmas,
         gl.uniform2f(program.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);
-        gl.uniform1f(program.u_opacity, opacity);
         bucket.setUniforms(gl, 'fill', program, layer, {zoom: painter.transform.zoom});
     }
 
+    gl.uniform1f(program.u_opacity, layer.paint['fill-opacity']);
+
     gl.uniformMatrix4fv(program.u_matrix, false, painter.translatePosMatrix(
@@ -158,3 +142,5 @@ coord.posMatrix,
 
-    if (image) { setPattern(image, opacity, tile, coord, painter, program); }
+    if (image) {
+        setPattern(image, tile, coord, painter, program, false);
+    }
 
@@ -169,35 +155,1 @@ painter.enableTileClippingMask(coord);
 }
-
-
-function setPattern(image, opacity, tile, coord, painter, program) {
-    var gl = painter.gl;
-
-    var imagePosA = painter.spriteAtlas.getPosition(image.from, true);
-    var imagePosB = painter.spriteAtlas.getPosition(image.to, true);
-    if (!imagePosA || !imagePosB) return;
-
-    gl.uniform1i(program.u_image, 0);
-    gl.uniform2fv(program.u_pattern_tl_a, imagePosA.tl);
-    gl.uniform2fv(program.u_pattern_br_a, imagePosA.br);
-    gl.uniform2fv(program.u_pattern_tl_b, imagePosB.tl);
-    gl.uniform2fv(program.u_pattern_br_b, imagePosB.br);
-    gl.uniform1f(program.u_opacity, opacity);
-    gl.uniform1f(program.u_mix, image.t);
-
-    gl.uniform1f(program.u_tile_units_to_pixels, 1 / pixelsToTileUnits(tile, 1, painter.transform.tileZoom));
-    gl.uniform2fv(program.u_pattern_size_a, imagePosA.size);
-    gl.uniform2fv(program.u_pattern_size_b, imagePosB.size);
-    gl.uniform1f(program.u_scale_a, image.fromScale);
-    gl.uniform1f(program.u_scale_b, image.toScale);
-
-    var tileSizeAtNearestZoom = tile.tileSize * Math.pow(2, painter.transform.tileZoom - tile.coord.z);
-
-    var pixelX = tileSizeAtNearestZoom * (tile.coord.x + coord.w * Math.pow(2, tile.coord.z));
-    var pixelY = tileSizeAtNearestZoom * tile.coord.y;
-    // split the pixel coord into two pairs of 16 bit numbers. The glsl spec only guarantees 16 bits of precision.
-    gl.uniform2f(program.u_pixel_coord_upper, pixelX >> 16, pixelY >> 16);
-    gl.uniform2f(program.u_pixel_coord_lower, pixelX & 0xFFFF, pixelY & 0xFFFF);
-
-    gl.activeTexture(gl.TEXTURE0);
-    painter.spriteAtlas.bind(gl, true);
-}

js/render/draw_line.js

 'use strict';
 
 var browser = require('../util/browser');
-var mat2 = require('gl-matrix').mat2;
 var pixelsToTileUnits = require('../source/pixels_to_tile_units');
@@ -31,3 +30,2 @@
     }
-
 };
@@ -43,43 +41,15 @@
     var gl = painter.gl;
-
+    var dasharray = layer.paint['line-dasharray'];
+    var image = layer.paint['line-pattern'];
     var programOptions = bucket.paintAttributes.line[layer.id];
 
-    // the distance over which the line edge fades out.
-    // Retina devices need a smaller distance to avoid aliasing.
-    var antialiasing = 1 / browser.devicePixelRatio;
+    var program = painter.useProgram(dasharray ? 'lineSDF' : image ? 'linePattern' : 'line',
+            programOptions.defines, programOptions.vertexPragmas, programOptions.fragmentPragmas);
 
-    var blur = layer.paint['line-blur'] + antialiasing;
-    var color = layer.paint['line-color'];
+    if (!image) {
+        gl.uniform4fv(program.u_color, layer.paint['line-color']);
+    }
 
-    var tr = painter.transform;
-
-    var antialiasingMatrix = mat2.create();
-    mat2.scale(antialiasingMatrix, antialiasingMatrix, [1, Math.cos(tr._pitch)]);
-    mat2.rotate(antialiasingMatrix, antialiasingMatrix, painter.transform.angle);
-
-    // calculate how much longer the real world distance is at the top of the screen
-    // than at the middle of the screen.
-    var topedgelength = Math.sqrt(tr.height * tr.height / 4  * (1 + tr.altitude * tr.altitude));
-    var x = tr.height / 2 * Math.tan(tr._pitch);
-    var extra = (topedgelength + x) / topedgelength - 1;
-
-    var dasharray = layer.paint['line-dasharray'];
-    var image = layer.paint['line-pattern'];
-    var program, posA, posB, imagePosA, imagePosB;
-
+    var posA, posB, imagePosA, imagePosB;
     if (dasharray) {
-        program = painter.useProgram(
-            'linesdfpattern',
-            programOptions.defines,
-            programOptions.vertexPragmas,
-            programOptions.fragmentPragmas
-        );
-
-        gl.uniform1f(program.u_linewidth, layer.paint['line-width'] / 2);
-        gl.uniform1f(program.u_gapwidth, layer.paint['line-gap-width'] / 2);
-        gl.uniform1f(program.u_antialiasing, antialiasing / 2);
-        gl.uniform1f(program.u_blur, blur);
-        gl.uniform4fv(program.u_color, color);
-        gl.uniform1f(program.u_opacity, layer.paint['line-opacity']);
-
         posA = painter.lineAtlas.getDash(dasharray.from, layer.layout['line-cap'] === 'round');
@@ -95,5 +65,2 @@ posB = painter.lineAtlas.getDash(dasharray.to, layer.layout['line-cap'] === 'round');
         gl.uniform1f(program.u_mix, dasharray.t);
-        gl.uniform1f(program.u_extra, extra);
-        gl.uniform1f(program.u_offset, -layer.paint['line-offset']);
-        gl.uniformMatrix2fv(program.u_antialiasingmatrix, false, antialiasingMatrix);
 
@@ -105,9 +72,2 @@ } else if (image) {
 
-        program = painter.useProgram(
-            'linepattern',
-            programOptions.defines,
-            programOptions.vertexPragmas,
-            programOptions.fragmentPragmas
-        );
-
         gl.uniform1i(program.u_image, 0);
@@ -117,6 +77,2 @@ gl.activeTexture(gl.TEXTURE0);
 
-        gl.uniform1f(program.u_linewidth, layer.paint['line-width'] / 2);
-        gl.uniform1f(program.u_gapwidth, layer.paint['line-gap-width'] / 2);
-        gl.uniform1f(program.u_antialiasing, antialiasing / 2);
-        gl.uniform1f(program.u_blur, blur);
         gl.uniform2fv(program.u_pattern_tl_a, imagePosA.tl);
@@ -127,25 +83,16 @@ gl.uniform2fv(program.u_pattern_br_a, imagePosA.br);
         gl.uniform1f(program.u_fade, image.t);
-        gl.uniform1f(program.u_opacity, layer.paint['line-opacity']);
-        gl.uniform1f(program.u_extra, extra);
-        gl.uniform1f(program.u_offset, -layer.paint['line-offset']);
-        gl.uniformMatrix2fv(program.u_antialiasingmatrix, false, antialiasingMatrix);
+    }
 
-    } else {
-        program = painter.useProgram(
-            'line',
-            programOptions.defines,
-            programOptions.vertexPragmas,
-            programOptions.fragmentPragmas
-        );
+    // the distance over which the line edge fades out.
+    // Retina devices need a smaller distance to avoid aliasing.
+    var antialiasing = 1 / browser.devicePixelRatio;
 
-        gl.uniform1f(program.u_linewidth, layer.paint['line-width'] / 2);
-        gl.uniform1f(program.u_gapwidth, layer.paint['line-gap-width'] / 2);
-        gl.uniform1f(program.u_antialiasing, antialiasing / 2);
-        gl.uniform1f(program.u_blur, blur);
-        gl.uniform1f(program.u_extra, extra);
-        gl.uniform1f(program.u_offset, -layer.paint['line-offset']);
-        gl.uniformMatrix2fv(program.u_antialiasingmatrix, false, antialiasingMatrix);
-        gl.uniform4fv(program.u_color, color);
-        gl.uniform1f(program.u_opacity, layer.paint['line-opacity']);
-    }
+    gl.uniform1f(program.u_linewidth, layer.paint['line-width'] / 2);
+    gl.uniform1f(program.u_gapwidth, layer.paint['line-gap-width'] / 2);
+    gl.uniform1f(program.u_antialiasing, antialiasing / 2);
+    gl.uniform1f(program.u_blur, layer.paint['line-blur'] + antialiasing);
+    gl.uniform1f(program.u_opacity, layer.paint['line-opacity']);
+    gl.uniformMatrix2fv(program.u_antialiasingmatrix, false, painter.transform.lineAntialiasingMatrix);
+    gl.uniform1f(program.u_offset, -layer.paint['line-offset']);
+    gl.uniform1f(program.u_extra, painter.transform.lineStretch);
 
@@ -158,4 +105,2 @@ painter.enableTileClippingMask(coord);
 
-    var ratio = 1 / pixelsToTileUnits(tile, 1, painter.transform.zoom);
-
     if (dasharray) {
@@ -167,3 +112,3 @@ var widthA = posA.width * dasharray.fromScale;
         var gamma = painter.lineAtlas.width / (Math.min(widthA, widthB) * 256 * browser.devicePixelRatio) / 2;
-        gl.uniform1f(program.u_ratio, ratio);
+
         gl.uniform2fv(program.u_patternscale_a, scaleA);
@@ -174,3 +119,2 @@ gl.uniform2fv(program.u_patternscale_b, scaleB);
     } else if (image) {
-        gl.uniform1f(program.u_ratio, ratio);
         gl.uniform2fv(program.u_pattern_size_a, [
@@ -184,7 +128,6 @@ pixelsToTileUnits(tile, imagePosA.size[0] * image.fromScale, painter.transform.tileZoom),
         ]);
-
-    } else {
-        gl.uniform1f(program.u_ratio, ratio);
     }
 
+    gl.uniform1f(program.u_ratio, 1 / pixelsToTileUnits(tile, 1, painter.transform.zoom));
+
     bucket.setUniforms(gl, 'line', program, layer, {zoom: painter.transform.zoom});
@@ -191,0 +134,0 @@

js/render/draw_raster.js

@@ -74,3 +74,2 @@ 'use strict';
         gl.bindTexture(gl.TEXTURE_2D, tile.texture);
-        opacities[1] = 0;
     }
@@ -117,33 +116,28 @@
 function getOpacities(tile, parentTile, layer, transform) {
-    var opacity = [1, 0];
+    var opacities = [1, 0];
     var fadeDuration = layer.paint['raster-fade-duration'];
 
     if (tile.sourceCache && fadeDuration > 0) {
-        var now = new Date().getTime();
-
+        var now = Date.now();
         var sinceTile = (now - tile.timeAdded) / fadeDuration;
         var sinceParent = parentTile ? (now - parentTile.timeAdded) / fadeDuration : -1;
 
+        var source = tile.sourceCache.getSource();
         var idealZ = transform.coveringZoomLevel({
-            tileSize: tile.sourceCache.getSource().tileSize,
-            roundZoom: tile.sourceCache.getSource().roundZoom
+            tileSize: source.tileSize,
+            roundZoom: source.roundZoom
         });
-        var parentFurther = parentTile ? Math.abs(parentTile.coord.z - idealZ) > Math.abs(tile.coord.z - idealZ) : false;
 
-        if (!parentTile || parentFurther) {
-            // if no parent or parent is older
-            opacity[0] = util.clamp(sinceTile, 0, 1);
-            opacity[1] = 1 - opacity[0];
-        } else {
-            // parent is younger, zooming out
-            opacity[0] = util.clamp(1 - sinceParent, 0, 1);
-            opacity[1] = 1 - opacity[0];
-        }
+        // if no parent or parent is older, fade in; if parent is younger, fade out
+        var fadeIn = !parentTile || Math.abs(parentTile.coord.z - idealZ) > Math.abs(tile.coord.z - idealZ);
+
+        opacities[0] = util.clamp(fadeIn ? sinceTile : 1 - sinceParent, 0, 1);
+        opacities[1] = parentTile ? 1 - opacities[0] : 0;
     }
 
-    var op = layer.paint['raster-opacity'];
-    opacity[0] *= op;
-    opacity[1] *= op;
+    var opacity = layer.paint['raster-opacity'];
+    opacities[0] *= opacity;
+    opacities[1] *= opacity;
 
-    return opacity;
+    return opacities;
 }

js/render/draw_symbol.js

@@ -29,34 +29,30 @@ 'use strict';
 
-    painter.setDepthSublayer(0);
-    painter.depthMask(false);
-    gl.disable(gl.DEPTH_TEST);
-
     drawLayerSymbols(painter, sourceCache, layer, coords, false,
-            layer.paint['icon-translate'],
-            layer.paint['icon-translate-anchor'],
-            layer.layout['icon-rotation-alignment'],
-            // icon-pitch-alignment is not yet implemented
-            // and we simply inherit the rotation alignment
-            layer.layout['icon-rotation-alignment'],
-            layer.layout['icon-size'],
-            layer.paint['icon-halo-width'],
-            layer.paint['icon-halo-color'],
-            layer.paint['icon-halo-blur'],
-            layer.paint['icon-opacity'],
-            layer.paint['icon-color']);
+        layer.paint['icon-translate'],
+        layer.paint['icon-translate-anchor'],
+        layer.layout['icon-rotation-alignment'],
+        // icon-pitch-alignment is not yet implemented
+        // and we simply inherit the rotation alignment
+        layer.layout['icon-rotation-alignment'],
+        layer.layout['icon-size'],
+        layer.paint['icon-halo-width'],
+        layer.paint['icon-halo-color'],
+        layer.paint['icon-halo-blur'],
+        layer.paint['icon-opacity'],
+        layer.paint['icon-color']
+    );
 
     drawLayerSymbols(painter, sourceCache, layer, coords, true,
-            layer.paint['text-translate'],
-            layer.paint['text-translate-anchor'],
-            layer.layout['text-rotation-alignment'],
-            layer.layout['text-pitch-alignment'],
-            layer.layout['text-size'],
-            layer.paint['text-halo-width'],
-            layer.paint['text-halo-color'],
-            layer.paint['text-halo-blur'],
-            layer.paint['text-opacity'],
-            layer.paint['text-color']);
+        layer.paint['text-translate'],
+        layer.paint['text-translate-anchor'],
+        layer.layout['text-rotation-alignment'],
+        layer.layout['text-pitch-alignment'],
+        layer.layout['text-size'],
+        layer.paint['text-halo-width'],
+        layer.paint['text-halo-color'],
+        layer.paint['text-halo-blur'],
+        layer.paint['text-opacity'],
+        layer.paint['text-color']
+    );
 
-    gl.enable(gl.DEPTH_TEST);
-
     if (sourceCache.map.showCollisionBoxes) {
@@ -79,2 +75,11 @@ drawCollisionDebug(painter, sourceCache, layer, coords);
 
+    var gl = painter.gl;
+    painter.setDepthSublayer(0);
+    painter.depthMask(false);
+    if (pitchAlignment === 'map') {
+        gl.enable(gl.DEPTH_TEST);
+    } else {
+        gl.disable(gl.DEPTH_TEST);
+    }
+
     for (var j = 0; j < coords.length; j++) {
@@ -103,2 +108,4 @@ var tile = sourceCache.getTile(coords[j]);
     }
+
+    gl.enable(gl.DEPTH_TEST);
 }
@@ -140,3 +147,3 @@
 
-    var program = painter.useProgram(sdf ? 'sdf' : 'icon');
+    var program = painter.useProgram(sdf ? 'symbolSDF' : 'symbolIcon');
     gl.uniformMatrix4fv(program.u_matrix, false, painter.translatePosMatrix(posMatrix, tile, translate, translateAnchor));
@@ -143,0 +150,0 @@ gl.uniform1i(program.u_rotate_with_map, rotateWithMap);

js/render/painter.js

@@ -189,2 +189,3 @@ 'use strict';
     fill: require('./draw_fill'),
+    extrusion: require('./draw_extrusion'),
     raster: require('./draw_raster'),
@@ -277,3 +278,12 @@ background: require('./draw_background'),
     this.id = layer.id;
-    draw[layer.type](painter, sourceCache, layer, coords);
+
+    var type = layer.type;
+    if (type === 'fill' &&
+        (!layer.isPaintValueFeatureConstant('fill-extrude-height') ||
+        !layer.isPaintValueZoomConstant('fill-extrude-height') ||
+        layer.getPaintValue('fill-extrude-height') !== 0)) {
+        type = 'extrusion';
+    }
+
+    draw[type](painter, sourceCache, layer, coords);
 };
@@ -310,3 +320,3 @@
 
-Painter.prototype.saveTexture = function(texture) {
+Painter.prototype.saveTileTexture = function(texture) {
     var textures = this.reusableTextures[texture.size];
@@ -320,8 +330,29 @@ if (!textures) {
 
+Painter.prototype.saveViewportTexture = function(texture) {
+    if (!this.reusableTextures.viewport) this.reusableTextures.viewport = {};
+    this.reusableTextures.viewport.texture = texture;
+};
 
-Painter.prototype.getTexture = function(size) {
-    var textures = this.reusableTextures[size];
-    return textures && textures.length > 0 ? textures.pop() : null;
+Painter.prototype.getTileTexture = function(width, height) {
+    var widthTextures = this.reusableTextures[width];
+    if (widthTextures) {
+        var textures = widthTextures[height || width];
+        return textures && textures.length > 0 ? textures.pop() : null;
+    }
 };
 
+Painter.prototype.getViewportTexture = function(width, height) {
+    if (!this.reusableTextures.viewport) return;
+
+    var texture = this.reusableTextures.viewport.texture;
+
+    if (texture.width === width && texture.height === height) {
+        return texture;
+    } else {
+        this.gl.deleteTexture(texture);
+        this.reusableTextures.viewport.texture = null;
+        return;
+    }
+};
+
 Painter.prototype.lineWidth = function(width) {
@@ -328,0 +359,0 @@ this.gl.lineWidth(util.clamp(width, this.lineWidthRange[0], this.lineWidthRange[1]));

js/render/vertex_array_object.js

@@ -31,2 +31,3 @@ 'use strict';
         this.freshBind(gl, program, layoutVertexBuffer, elementBuffer, vertexBuffer2);
+        this.gl = gl;
     } else {
@@ -42,3 +43,3 @@ gl.extVertexArrayObject.bindVertexArrayOES(this.vao);
     if (gl.extVertexArrayObject) {
-        if (this.vao) this.destroy(gl);
+        if (this.vao) this.destroy();
         this.vao = gl.extVertexArrayObject.createVertexArrayOES();
@@ -85,8 +86,7 @@ gl.extVertexArrayObject.bindVertexArrayOES(this.vao);
 
-VertexArrayObject.prototype.destroy = function(gl) {
-    var ext = gl.extVertexArrayObject;
-    if (ext && this.vao) {
-        ext.deleteVertexArrayOES(this.vao);
+VertexArrayObject.prototype.destroy = function() {
+    if (this.vao) {
+        this.gl.extVertexArrayObject.deleteVertexArrayOES(this.vao);
         this.vao = null;
     }
 };

js/source/geojson_source.js

@@ -52,4 +52,7 @@ 'use strict';
  * });
+ * @see [Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/)
+ * @see [Add a GeoJSON line](https://www.mapbox.com/mapbox-gl-js/example/geojson-line/)
+ * @see [Create a heatmap from points](https://www.mapbox.com/mapbox-gl-js/example/heatmap/)
  */
-function GeoJSONSource(id, options, dispatcher) {
+function GeoJSONSource(id, options, dispatcher, eventedParent) {
     options = options || {};
@@ -87,2 +90,4 @@ this.id = id;
 
+    this.setEventedParent(eventedParent);
+    this.fire('dataloading', {dataType: 'source'});
     this._updateWorkerData(function done(err) {
@@ -121,2 +126,3 @@ if (err) {
 
+        this.fire('dataloading', {dataType: 'source'});
         this._updateWorkerData(function (err) {
@@ -174,3 +180,3 @@ if (err) {
 
-            tile.unloadVectorData(this.map.painter);
+            tile.unloadVectorData();
 
@@ -201,3 +207,3 @@ if (tile.aborted)
     unloadTile: function(tile) {
-        tile.unloadVectorData(this.map.painter);
+        tile.unloadVectorData();
         this.dispatcher.send('remove tile', { uid: tile.uid, source: this.id }, function() {}, tile.workerID);
@@ -204,0 +210,0 @@ },

js/source/image_source.js

@@ -44,4 +44,5 @@ 'use strict';
  * map.removeSource('some id');  // remove
+ * @see [Add an image](https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/)
  */
-function ImageSource(id, options, dispatcher) {
+function ImageSource(id, options, dispatcher, eventedParent) {
     this.id = id;
@@ -52,2 +53,4 @@ this.dispatcher = dispatcher;
 
+    this.setEventedParent(eventedParent);
+    this.fire('dataloading', {dataType: 'source'});
     ajax.getImage(options.url, function(err, image) {
@@ -134,9 +137,9 @@ if (err) return this.fire('error', {error: err});
     prepare: function() {
-        if (!this._loaded || !this.image || !this.image.complete) return;
-        if (!this.tile) return;
+        if (!this.tile || !this._loaded || !this.image || !this.image.complete) return;
+        this._prepareImage(this.map.painter.gl, this.image);
+    },
 
-        var painter = this.map.painter;
-        var gl = painter.gl;
-
+    _prepareImage: function (gl, image) {
         if (!this._prepared) {
+            this._prepared = true;
             this.tile.texture = gl.createTexture();
@@ -148,6 +151,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.tile.texture);
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.image);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
         } else {
             gl.bindTexture(gl.TEXTURE_2D, this.tile.texture);
-            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, this.image);
+            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
         }
@@ -154,0 +157,0 @@ },

js/source/raster_tile_source.js

@@ -11,6 +11,9 @@ 'use strict';
 
-function RasterTileSource(id, options, dispatcher) {
+function RasterTileSource(id, options, dispatcher, eventedParent) {
     this.id = id;
     this.dispatcher = dispatcher;
     util.extend(this, util.pick(options, ['url', 'scheme', 'tileSize']));
+
+    this.setEventedParent(eventedParent);
+    this.fire('dataloading', {dataType: 'source'});
     loadTileJSON(options, function (err, tileJSON) {
@@ -63,3 +66,3 @@ if (err) {
             var gl = this.map.painter.gl;
-            tile.texture = this.map.painter.getTexture(img.width);
+            tile.texture = this.map.painter.getTileTexture(img.width);
             if (tile.texture) {
@@ -97,4 +100,4 @@ gl.bindTexture(gl.TEXTURE_2D, tile.texture);
     unloadTile: function(tile) {
-        if (tile.texture) this.map.painter.saveTexture(tile.texture);
+        if (tile.texture) this.map.painter.saveTileTexture(tile.texture);
     }
 });

js/source/source_cache.js

@@ -30,4 +30,3 @@ 'use strict';
 
-    var source = this._source = Source.create(id, options, dispatcher);
-    source.setEventedParent(this);
+    this._source = Source.create(id, options, dispatcher, this);
 
@@ -426,3 +425,3 @@ this.on('source.load', function() {
         delete this._tiles[id];
-        this._source.fire('data', {dataType: 'tile'});
+        this._source.fire('data', { tile: tile, dataType: 'tile' });
 
@@ -429,0 +428,0 @@ if (tile.uses > 0)

js/source/source.js

@@ -22,4 +22,5 @@ 'use strict';
  */
-exports.create = function(id, source, dispatcher) {
-    source = new sourceTypes[source.type](id, source, dispatcher);
+exports.create = function(id, source, dispatcher, eventedParent) {
+    source = new sourceTypes[source.type](id, source, dispatcher, eventedParent);
+    source.setEventedParent(eventedParent);
 
@@ -26,0 +27,0 @@ if (source.id !== id) {

js/source/tile.js

@@ -80,10 +80,9 @@ 'use strict';
     /**
-     * given a data object and a GL painter, destroy and re-create
-     * all of its buffers.
+     * Replace this tile's symbol buckets with fresh data.
      * @param {Object} data
-     * @param {Object} painter
+     * @param {Style} style
      * @returns {undefined}
      * @private
      */
-    reloadSymbolData: function(data, painter, style) {
+    reloadSymbolData: function(data, style) {
         if (this.state === 'unloaded') return;
@@ -94,7 +93,6 @@
 
-        // Destroy and delete existing symbol buckets
         for (var id in this.buckets) {
             var bucket = this.buckets[id];
             if (bucket.type === 'symbol') {
-                bucket.destroy(painter.gl);
+                bucket.destroy();
                 delete this.buckets[id];
@@ -109,13 +107,9 @@ }
     /**
-     * Make sure that this tile doesn't own any data within a given
-     * painter, so that it doesn't consume any memory or maintain
-     * any references to the painter.
-     * @param {Object} painter gl painter object
+     * Release any data or WebGL resources referenced by this tile.
      * @returns {undefined}
      * @private
      */
-    unloadVectorData: function(painter) {
+    unloadVectorData: function() {
         for (var id in this.buckets) {
-            var bucket = this.buckets[id];
-            bucket.destroy(painter.gl);
+            this.buckets[id].destroy();
         }
@@ -149,3 +143,3 @@
         function done(_, data) {
-            this.reloadSymbolData(data, source.map.painter, source.map.style);
+            this.reloadSymbolData(data, source.map.style);
             source.fire('data', {tile: this, dataType: 'tile'});
@@ -152,0 +146,0 @@

js/source/vector_tile_source.js

@@ -10,3 +10,3 @@ 'use strict';
 
-function VectorTileSource(id, options, dispatcher) {
+function VectorTileSource(id, options, dispatcher, eventedParent) {
     this.id = id;
@@ -21,2 +21,5 @@ this.dispatcher = dispatcher;
 
+    this.setEventedParent(eventedParent);
+    this.fire('dataloading', {dataType: 'source'});
+
     loadTileJSON(options, function (err, tileJSON) {
@@ -102,5 +105,5 @@ if (err) {
     unloadTile: function(tile) {
-        tile.unloadVectorData(this.map.painter);
+        tile.unloadVectorData();
         this.dispatcher.send('remove tile', { uid: tile.uid, source: this.id }, null, tile.workerID);
     }
 });

js/source/video_source.js

 'use strict';
 
 var util = require('../util/util');
-var TileCoord = require('./tile_coord');
-var LngLat = require('../geo/lng_lat');
-var Point = require('point-geometry');
-var Evented = require('../util/evented');
 var ajax = require('../util/ajax');
-var EXTENT = require('../data/bucket').EXTENT;
-var RasterBoundsArray = require('../render/draw_raster').RasterBoundsArray;
-var Buffer = require('../data/buffer');
-var VertexArrayObject = require('../render/vertex_array_object');
+var ImageSource = require('./image_source');
 
@@ -46,4 +39,5 @@ module.exports = VideoSource;
  * map.removeSource('some id');  // remove
+ * @see [Add a video](https://www.mapbox.com/mapbox-gl-js/example/video-on-a-map/)
  */
-function VideoSource(id, options) {
+function VideoSource(id, options, dispatcher, eventedParent) {
     this.id = id;
@@ -53,2 +47,4 @@ this.urls = options.urls;
 
+    this.setEventedParent(eventedParent);
+    this.fire('dataloading', {dataType: 'source'});
     ajax.getVideo(options.urls, function(err, video) {
@@ -83,6 +79,3 @@ if (err) return this.fire('error', {error: err});
 
-VideoSource.prototype = util.inherit(Evented, /** @lends VideoSource.prototype */{
-    minzoom: 0,
-    maxzoom: 22,
-    tileSize: 512,
+VideoSource.prototype = util.inherit(ImageSource, /** @lends VideoSource.prototype */{
     roundZoom: true,
@@ -111,2 +104,3 @@
      *
+     * @method setCoordinates
      * @param {Array<Array<number>>} coordinates Four geographical coordinates,
@@ -118,84 +112,9 @@ *   represented as arrays of longitude and latitude numbers, which define the corners of the video.
      */
-    setCoordinates: function(coordinates) {
-        this.coordinates = coordinates;
+    // setCoordiates inherited from ImageSource
 
-        // Calculate which mercator tile is suitable for rendering the video in
-        // and create a buffer with the corner coordinates. These coordinates
-        // may be outside the tile, because raster tiles aren't clipped when rendering.
-
-        var map = this.map;
-        var cornerZ0Coords = coordinates.map(function(coord) {
-            return map.transform.locationCoordinate(LngLat.convert(coord)).zoomTo(0);
-        });
-
-        var centerCoord = this.centerCoord = util.getCoordinatesCenter(cornerZ0Coords);
-        centerCoord.column = Math.round(centerCoord.column);
-        centerCoord.row = Math.round(centerCoord.row);
-
-        this.minzoom = this.maxzoom = centerCoord.zoom;
-        this.coord = new TileCoord(centerCoord.zoom, centerCoord.column, centerCoord.row);
-        this._tileCoords = cornerZ0Coords.map(function(coord) {
-            var zoomedCoord = coord.zoomTo(centerCoord.zoom);
-            return new Point(
-                Math.round((zoomedCoord.column - centerCoord.column) * EXTENT),
-                Math.round((zoomedCoord.row - centerCoord.row) * EXTENT));
-        });
-
-        this.fire('data', {dataType: 'source'});
-        return this;
-    },
-
-    _setTile: function (tile) {
-        this._prepared = false;
-        this.tile = tile;
-        var maxInt16 = 32767;
-        var array = new RasterBoundsArray();
-        array.emplaceBack(this._tileCoords[0].x, this._tileCoords[0].y, 0, 0);
-        array.emplaceBack(this._tileCoords[1].x, this._tileCoords[1].y, maxInt16, 0);
-        array.emplaceBack(this._tileCoords[3].x, this._tileCoords[3].y, 0, maxInt16);
-        array.emplaceBack(this._tileCoords[2].x, this._tileCoords[2].y, maxInt16, maxInt16);
-
-        this.tile.buckets = {};
-
-        this.tile.boundsBuffer = new Buffer(array.serialize(), RasterBoundsArray.serialize(), Buffer.BufferType.VERTEX);
-        this.tile.boundsVAO = new VertexArrayObject();
-        this.tile.state = 'loaded';
-    },
-
     prepare: function() {
-        if (this.video.readyState < 2) return; // not enough data for current position
-        if (!this.tile) return;
-
-        var gl = this.map.painter.gl;
-        if (!this._prepared) {
-            this._prepared = true;
-            this.tile.texture = gl.createTexture();
-            gl.bindTexture(gl.TEXTURE_2D, this.tile.texture);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.video);
-        } else {
-            gl.bindTexture(gl.TEXTURE_2D, this.tile.texture);
-            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, this.video);
-        }
-
-        this._currentTime = this.video.currentTime;
+        if (!this.tile || this.video.readyState < 2) return; // not enough data for current position
+        this._prepareImage(this.map.painter.gl, this.video);
     },
 
-    loadTile: function(tile, callback) {
-        // We have a single tile -- whoose coordinates are this.coord -- that
-        // covers the video frame we want to render.  If that's the one being
-        // requested, set it up with the image; otherwise, mark the tile as
-        // `errored` to indicate that we have no data for it.
-        if (this.coord && this.coord.toString() === tile.coord.toString()) {
-            this._setTile(tile);
-            callback(null);
-        } else {
-            tile.state = 'errored';
-            callback(null);
-        }
-    },
-
     serialize: function() {
@@ -202,0 +121,0 @@ return {

js/style/parse_color.js

@@ -13,3 +13,4 @@ 'use strict';
 
-        return util.extend({}, input, {
+        if (!input.stops) return input;
+        else return util.extend({}, input, {
             stops: input.stops.map(function(stop) {
@@ -38,2 +39,5 @@ return [stop[0], parseColor(stop[1])];
 
+    } else if (Array.isArray(input)) {
+        return input;
+
     } else {
@@ -40,0 +44,0 @@ throw new Error('Invalid color ' + input);

js/style/style_declaration.js

@@ -17,2 +17,4 @@ 'use strict';
     var parsedValue = reference.type === 'color' && this.value ? parseColor(this.value) : value;
+    var specDefault = reference.default;
+    if (specDefault && reference.type === 'color') specDefault = parseColor(specDefault);
     this.calculate = MapboxGLFunction[reference.function || 'piecewise-constant'](parsedValue);
@@ -22,4 +24,8 @@ this.isFeatureConstant = this.calculate.isFeatureConstant;
 
+    if (reference.type === 'color') {
+        this.calculate = wrapColorCalculate(this.calculate);
+    }
+
     if (reference.function === 'piecewise-constant' && reference.transition) {
-        this.calculate = transitioned(this.calculate);
+        this.calculate = wrapTransitionedCalculate(this.calculate);
     }
@@ -41,3 +47,4 @@
             stops: interpolationAmountStops,
-            base: value.base
+            base: value.base,
+            colorSpace: value.colorSpace
         });
@@ -47,5 +54,12 @@ }
 
+function wrapColorCalculate(calculate) {
+    return function(globalProperties, featureProperties) {
+        var color = calculate(globalProperties, featureProperties);
+        return color && parseColor(color);
+    };
+}
+
 // This function is used to smoothly transition between discrete values, such
 // as images and dasharrays.
-function transitioned(calculate) {
+function wrapTransitionedCalculate(calculate) {
     return function(globalProperties, featureProperties) {
@@ -52,0 +66,0 @@ var z = globalProperties.zoom;

js/style/style_function.js

@@ -5,4 +5,4 @@ 'use strict';
 
-exports.interpolated = function(parameters) {
-    var inner = MapboxGLFunction.interpolated(parameters);
+exports.interpolated = function(parameters, specDefault) {
+    var inner = MapboxGLFunction.interpolated(parameters, specDefault);
     var outer = function(globalProperties, featureProperties) {
@@ -16,4 +16,4 @@ return inner(globalProperties && globalProperties.zoom, featureProperties || {});
 
-exports['piecewise-constant'] = function(parameters) {
-    var inner = MapboxGLFunction['piecewise-constant'](parameters);
+exports['piecewise-constant'] = function(parameters, specDefault) {
+    var inner = MapboxGLFunction['piecewise-constant'](parameters, specDefault);
     var outer = function(globalProperties, featureProperties) {
@@ -20,0 +20,0 @@ return inner(globalProperties && globalProperties.zoom, featureProperties || {});

js/style/style.js

@@ -6,2 +6,3 @@ 'use strict';
 var ImageSprite = require('./image_sprite');
+var Light = require('./light');
 var GlyphSource = require('../symbol/glyph_source');
@@ -47,2 +48,5 @@ var SpriteAtlas = require('../symbol/sprite_atlas');
 
+    this.setEventedParent(map);
+    this.fire('dataloading', {dataType: 'style'});
+
     var stylesheetLoaded = function(err, stylesheet) {
@@ -163,2 +167,4 @@ if (err) {
         this._updateWorkerLayers();
+
+        this.light = new Light(this.stylesheet.light);
     },
@@ -220,5 +226,9 @@
         }
+
+        this.light.updateLightTransitions(options, transition, this.animationLoop);
     },
 
     _recalculate: function(z) {
+        if (!this._loaded) return;
+
         for (var sourceId in this.sourceCaches)
@@ -239,2 +249,4 @@ this.sourceCaches[sourceId].used = false;
 
+        this.light.recalculate(z, this.zoomHistory);
+
         var maxZoomTransitionDuration = 300;
@@ -370,2 +382,3 @@ if (Math.floor(this.z) !== Math.floor(z)) {
         sourceCache.setEventedParent(null);
+        sourceCache.clearTiles();
 
@@ -591,2 +604,3 @@ if (sourceCache.onRemove) sourceCache.onRemove(this.map);
             metadata: this.stylesheet.metadata,
+            light: this.stylesheet.light,
             center: this.stylesheet.center,
@@ -686,2 +700,25 @@ zoom: this.stylesheet.zoom,
 
+    getLight: function() {
+        return this.light.getLight();
+    },
+
+    setLight: function(lightOptions, transitionOptions) {
+        this._checkLoaded();
+
+        var light = this.light.getLight();
+        var _update = false;
+        for (var key in lightOptions) {
+            if (!util.deepEqual(lightOptions[key], light[key])) {
+                _update = true;
+                break;
+            }
+        }
+        if (!_update) return this;
+
+        var transition = this.stylesheet.transition || {};
+
+        this.light.setLight(lightOptions);
+        return this.light.updateLightTransitions(transitionOptions || {transition: true}, transition, this.animationLoop);
+    },
+
     _validate: function(validate, key, value, props, options) {
@@ -700,2 +737,5 @@ if (options && options.validate === false) {
     _remove: function() {
+        for (var id in this.sourceCaches) {
+            this.sourceCaches[id].clearTiles();
+        }
         this.dispatcher.remove();
@@ -702,0 +742,0 @@ },

js/ui/camera.js

@@ -56,2 +56,3 @@ 'use strict';
      * map.setCenter([-74, 38]);
+     * @see [Move symbol with the keyboard](https://www.mapbox.com/mapbox-gl-js/example/rotating-controllable-marker/)
      */
@@ -72,2 +73,3 @@ setCenter: function(center, eventData) {
      * @returns {Map} `this`
+     * @see [Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/)
      */
@@ -186,2 +188,3 @@ panBy: function(offset, options, eventData) {
      * @returns {number} The map's current bearing, measured in degrees counter-clockwise from north.
+     * @see [Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/)
      */
@@ -291,2 +294,3 @@ getBearing: function() { return this.transform.bearing; },
      * @returns {Map} `this`
+     * @see [Fit a map to a bounding box](https://www.mapbox.com/mapbox-gl-js/example/fitbounds/)
      */
@@ -400,2 +404,3 @@ fitBounds: function(bounds, options, eventData) {
      * @returns {Map} `this`
+     * @see [Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/)
      */
@@ -552,2 +557,5 @@ easeTo: function(options, eventData) {
      * });
+     * @see [Fly to a location](https://www.mapbox.com/mapbox-gl-js/example/flyto/)
+     * @see [Slowly fly to a location](https://www.mapbox.com/mapbox-gl-js/example/flyto-options/)
+     * @see [Fly to a location based on scroll position](https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/)
      */
@@ -554,0 +562,0 @@ flyTo: function(options, eventData) {

js/ui/handler/drag_pan.js

@@ -216,3 +216,3 @@ 'use strict';
  * @instance
- * @property {MapMouseEvent | MapTouchEvent} data
+ * @property {{originalEvent: DragEvent}} data
  */
@@ -235,3 +235,3 @@
  * @instance
- * @property {MapMouseEvent | MapTouchEvent} data
+ * @property {{originalEvent: DragEvent}} data
  */

js/ui/handler/scroll_zoom.js

@@ -171,2 +171,3 @@ 'use strict';
  * @property {MapMouseEvent | MapTouchEvent} data
+ * @see [Update a choropleth layer by zoom level](https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/)
  */
@@ -173,0 +174,0 @@

js/ui/map.js

@@ -22,3 +22,3 @@ 'use strict';
 var Point = require('point-geometry');
-var Attribution = require('./control/attribution');
+var AttributionControl = require('./control/attribution_control');
 var isSupported = require('mapbox-gl-supported');
@@ -90,2 +90,5 @@
  *
+ * Tilesets hosted with Mapbox can be style-optimized if you append `?optimize=true` to the end of your style URL, like `mapbox://styles/mapbox/streets-v9?optimize=true`.
+ * Learn more about style-optimized vector tiles in our [API documentation](https://www.mapbox.com/api-documentation/#retrieve-tiles).
+ *
  * @param {boolean} [options.hash=false] If `true`, the map's position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page's URL.
@@ -101,3 +104,3 @@ *   For example, `http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60`.
  *   [Layers](https://www.mapbox.com/mapbox-gl-style-spec/#layers) in the style specification.
- * @param {boolean} [options.attributionControl=true] If `true`, an [Attribution](#Attribution) control will be added to the map.
+ * @param {boolean} [options.attributionControl=true] If `true`, an [AttributionControl](#AttributionControl) will be added to the map.
  * @param {boolean} [options.failIfMajorPerformanceCaveat=false] If `true`, map creation will fail if the performance of Mapbox
@@ -127,5 +130,5 @@ *   GL JS would be dramatically worse than expected (i.e. a software renderer would be used).
  * });
+ * @see [Display a map](https://www.mapbox.com/mapbox-gl-js/examples/)
  */
 var Map = module.exports = function(options) {
-
     options = util.extend({}, defaultOptions, options);
@@ -195,4 +198,5 @@
     if (options.style) this.setStyle(options.style);
-    if (options.attributionControl) this.addControl(new Attribution(options.attributionControl));
 
+    if (options.attributionControl) this.addControl(new AttributionControl(options.attributionControl));
+
     this.on('style.load', function() {
@@ -223,2 +227,3 @@ if (this.transform.unmodified) {
      * @returns {Map} `this`
+     * @see [Display map navigation controls](https://www.mapbox.com/mapbox-gl-js/example/navigation/)
      */
@@ -444,2 +449,3 @@ addControl: function(control) {
      * @returns {LngLat} The [`LngLat`](#LngLat) corresponding to `point`.
+     * @see [Show polygon information on click](https://www.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/)
      */
@@ -514,2 +520,5 @@ unproject: function(point) {
      * var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });
+     * @see [Get features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/)
+     * @see [Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/)
+     * @see [Center the map on a clicked symbol](https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/)
      */
@@ -602,2 +611,4 @@ queryRenderedFeatures: function() {
      * tiles due to tile buffering.
+     * @see [Filter features within map view](https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/)
+     * @see [Highlight features containing similar data](https://www.mapbox.com/mapbox-gl-js/example/query-similar-features/)
      */
@@ -614,2 +625,3 @@ querySourceFeatures: function(sourceID, params) {
      * @returns {Map} `this`
+     * @see [Change a map's style](https://www.mapbox.com/mapbox-gl-js/example/setstyle/)
      */
@@ -662,2 +674,5 @@ setStyle: function(style) {
      * @returns {Map} `this`
+     * @see [Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/)
+     * @see [Style circles using data-driven styling](https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/)
+     * @see [Set a point after Geocoder result](https://www.mapbox.com/mapbox-gl-js/example/point-from-geocoder-result/)
      */
@@ -700,2 +715,5 @@ addSource: function(id, source) {
      *   if the ID corresponds to no existing sources.
+     * @see [Create a draggable point](https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/)
+     * @see [Animate a point](https://www.mapbox.com/mapbox-gl-js/example/animate-point-along-line/)
+     * @see [Add live realtime data](https://www.mapbox.com/mapbox-gl-js/example/live-geojson/)
      */
@@ -717,2 +735,5 @@ getSource: function(id) {
      * @returns {Map} `this`
+     * @see [Create and style clusters](https://www.mapbox.com/mapbox-gl-js/example/cluster/)
+     * @see [Add a vector tile source](https://www.mapbox.com/mapbox-gl-js/example/vector-source/)
+     * @see [Add a WMS source](https://www.mapbox.com/mapbox-gl-js/example/wms/)
      */
@@ -747,2 +768,4 @@ addLayer: function(layer, before) {
      *   if the ID corresponds to no existing layers.
+     * @see [Filter symbols by toggling a list](https://www.mapbox.com/mapbox-gl-js/example/filter-markers/)
+     * @see [Filter symbols by text input](https://www.mapbox.com/mapbox-gl-js/example/filter-markers-by-input/)
      */
@@ -762,2 +785,5 @@ getLayer: function(id) {
      * map.setFilter('my-layer', ['==', 'name', 'USA']);
+     * @see [Filter features within map view](https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/)
+     * @see [Highlight features under the mouse pointer](calendar.google.com/calendar/render#main_7)
+     * @see [Create a timeline animation](https://www.mapbox.com/mapbox-gl-js/example/timeline-animation/)
      */
@@ -807,2 +833,5 @@ setFilter: function(layer, filter) {
      * map.setPaintProperty('my-layer', 'fill-color', '#faafee');
+     * @see [Change a layer's color with buttons](https://www.mapbox.com/mapbox-gl-js/example/color-switcher/)
+     * @see [Adjust a layer's opacity](https://www.mapbox.com/mapbox-gl-js/example/adjust-layer-opacity/)
+     * @see [Create a draggable point](https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/)
      */
@@ -855,2 +884,23 @@ setPaintProperty: function(layer, name, value, klass) {
     /**
+     * Sets the any combination of light values.
+     *
+     * @param {Object} options Light properties to set. Must conform to the [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/).
+     * @returns {Map} `this`
+     */
+    setLight: function(lightOptions) {
+        this.style.setLight(lightOptions);
+        this._update(true);
+        return this;
+    },
+
+    /**
+     * Returns the value of the light object.
+     *
+     * @returns {Object} light Light properties of the style.
+     */
+    getLight: function() {
+        return this.style.getLight();
+    },
+
+    /**
      * Returns the map's containing HTML element.
@@ -874,2 +924,4 @@ *
      * @returns {HTMLElement} The container of the map's `<canvas>`.
+     * @see [Create a draggable point](https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/)
+     * @see [Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/)
      */
@@ -884,2 +936,5 @@ getCanvasContainer: function() {
      * @returns {HTMLCanvasElement} The map's `<canvas>` element.
+     * @see [Measure distances](https://www.mapbox.com/mapbox-gl-js/example/measure/)
+     * @see [Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/)
+     * @see [Center the map on a clicked symbol](https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/)
      */
@@ -1032,42 +1087,37 @@ getCanvas: function() {
     _render: function() {
-        try {
-            if (this.style && this._styleDirty) {
-                this._styleDirty = false;
-                this.style.update(this._classes, this._classOptions);
-                this._classOptions = null;
-                this.style._recalculate(this.transform.zoom);
-            }
+        if (this.style && this._styleDirty) {
+            this._styleDirty = false;
+            this.style.update(this._classes, this._classOptions);
+            this._classOptions = null;
+            this.style._recalculate(this.transform.zoom);
+        }
 
-            if (this.style && this._sourcesDirty) {
-                this._sourcesDirty = false;
-                this.style._updateSources(this.transform);
-            }
+        if (this.style && this._sourcesDirty) {
+            this._sourcesDirty = false;
+            this.style._updateSources(this.transform);
+        }
 
-            this.painter.render(this.style, {
-                debug: this.showTileBoundaries,
-                showOverdrawInspector: this._showOverdrawInspector,
-                vertices: this.vertices,
-                rotating: this.rotating,
-                zooming: this.zooming
-            });
+        this.painter.render(this.style, {
+            debug: this.showTileBoundaries,
+            showOverdrawInspector: this._showOverdrawInspector,
+            vertices: this.vertices,
+            rotating: this.rotating,
+            zooming: this.zooming
+        });
 
-            this.fire('render');
+        this.fire('render');
 
-            if (this.loaded() && !this._loaded) {
-                this._loaded = true;
-                this.fire('load');
-            }
+        if (this.loaded() && !this._loaded) {
+            this._loaded = true;
+            this.fire('load');
+        }
 
-            this._frameId = null;
+        this._frameId = null;
 
-            if (!this.animationLoop.stopped()) {
-                this._styleDirty = true;
-            }
+        if (!this.animationLoop.stopped()) {
+            this._styleDirty = true;
+        }
 
-            if (this._sourcesDirty || this._repaint || this._styleDirty) {
-                this._rerender();
-            }
-
-        } catch (error) {
-            this.fire('error', {error: error});
+        if (this._sourcesDirty || this._repaint || this._styleDirty) {
+            this._rerender();
         }
@@ -1262,2 +1312,3 @@
  * @property {MapMouseEvent} data
+ * @see [Highlight features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/hover-styles/)
  */
@@ -1272,2 +1323,4 @@
  * @property {MapMouseEvent} data
+ * @see [Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/)
+ * @see [Create a draggable point](https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/)
  */
@@ -1282,2 +1335,4 @@
  * @property {MapMouseEvent} data
+ * @see [Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/)
+ * @see [Create a draggable point](https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/)
  */
@@ -1292,2 +1347,5 @@
  * @property {MapMouseEvent} data
+ * @see [Get coordinates of the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/mouse-position/)
+ * @see [Highlight features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/hover-styles/)
+ * @see [Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/)
  */
@@ -1338,2 +1396,4 @@
  * @property {MapMouseEvent} data
+ * @see [Measure distances](https://www.mapbox.com/mapbox-gl-js/example/measure/)
+ * @see [Center the map on a clicked symbol](https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/)
  */
@@ -1367,2 +1427,5 @@
  * @type {Object}
+ * @see [Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/)
+ * @see [Add live realtime data](https://www.mapbox.com/mapbox-gl-js/example/live-geojson/)
+ * @see [Animate a point](https://www.mapbox.com/mapbox-gl-js/example/animate-point-along-line/)
  */
@@ -1377,3 +1440,3 @@
  * @instance
- * @property {MapMouseEvent | MapTouchEvent} data
+ * @property {{originalEvent: DragEvent}} data
  */
@@ -1398,3 +1461,5 @@
  * @instance
- * @property {MapMouseEvent | MapTouchEvent} data
+ * @property {{originalEvent: DragEvent}} data
+ * @see [Play map locations as a slideshow](https://www.mapbox.com/mapbox-gl-js/example/playback-locations/)
+ * @see [Filter features within map view](https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/)
  */
@@ -1448,1 +1513,17 @@
   */
+
+ /**
+ * Fired immediately after the map has been removed with [`Map#remove`](#Map#remove).
+ *
+ * @event remove
+ * @memberof Map
+ * @instance
+ */
+
+  /**
+ * Fired immediately after the map has been resized.
+ *
+ * @event resize
+ * @memberof Map
+ * @instance
+ */

js/ui/marker.js

@@ -22,2 +22,3 @@ /* eslint-disable */
  *   .addTo(map);
+ * @see [Add custom icons with Markers](https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/)
  */
@@ -47,5 +48,5 @@ function Marker(element, options) {
         map.getCanvasContainer().appendChild(this._element);
-        map.on('move', this._update.bind(this));
-        map.on('moveend', this._update.bind(this, {roundPos: true}));
-        this._update({roundPos: true});
+        map.on('move', this._update);
+        map.on('moveend', this._update);
+        this._update();
 
@@ -71,2 +72,3 @@ // If we attached the `click` listener to the marker element, the popup
             this._map.off('move', this._update);
+            this._map.off('moveend', this._update);
             this._map = null;
@@ -155,8 +157,11 @@ }
 
-    _update: function (options) {
+    _update: function (e) {
         if (!this._map) return;
         var pos = this._map.project(this._lngLat)._add(this._offset);
-        if (options.roundPos) pos = pos.round();
+        // because rouding the coordinates at every `move` event causes stuttered zooming
+        // we only round them when _update is called with `moveend` or when its called with 
+        // no arguments (when the Marker is initialized or Marker#setLngLat is invoked).
+        if (!e || e.type === "moveend") pos = pos.round();
         DOM.setTransform(this._element, 'translate(' + pos.x + 'px,' + pos.y + 'px)');
     }
 };

js/ui/popup.js

@@ -49,2 +49,5 @@ 'use strict';
  *   .addTo(map);
+ * @see [Display a popup](https://www.mapbox.com/mapbox-gl-js/example/popup/)
+ * @see [Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/)
+ * @see [Display a popup on click](https://www.mapbox.com/mapbox-gl-js/example/popup-on-click/)
  */
@@ -238,3 +241,3 @@ function Popup(options) {
 
-            if (pos.y < height) {
+            if (pos.y + offset.bottom.y < height) {
                 anchor = ['top'];
@@ -241,0 +244,0 @@ } else if (pos.y > this._map.transform.height - height) {

js/util/dom.js

@@ -68,6 +68,7 @@ 'use strict';
         points = [];
-    for (var i = 0; i < e.touches.length; i++) {
+    var touches = (e.type === 'touchend') ? e.changedTouches : e.touches;
+    for (var i = 0; i < touches.length; i++) {
         points.push(new Point(
-            e.touches[i].clientX - rect.left - el.clientLeft,
-            e.touches[i].clientY - rect.top - el.clientTop
+            touches[i].clientX - rect.left - el.clientLeft,
+            touches[i].clientY - rect.top - el.clientTop
         ));
@@ -74,0 +75,0 @@ }

js/util/util.js

@@ -515,1 +515,28 @@ 'use strict';
 };
+
+/**
+ * Converts spherical coordinates to cartesian coordinates.
+ * @param {Array<number>} spherical Spherical coordinates, in [radial, azimuthal, polar]
+ *
+ * @return {Array<number>} cartesian coordinates in [x, y, z]
+ */
+
+exports.sphericalToCartesian = function(spherical) {
+    var r = spherical[0],
+        azimuthal = spherical[1],
+        polar = spherical[2];
+    // We abstract "north"/"up" (compass-wise) to be 0° when really this is 90° (π/2):
+    // correct for that here
+    azimuthal += 90;
+
+    // Convert azimuthal and polar angles to radians
+    azimuthal *= Math.PI / 180;
+    polar *= Math.PI / 180;
+
+    // spherical to cartesian (x, y, z)
+    return [
+        r * Math.cos(azimuthal) * Math.sin(polar),
+        r * Math.sin(azimuthal) * Math.sin(polar),
+        r * Math.cos(polar)
+    ];
+};

package.json

 {
   "name": "mapbox-gl",
   "description": "A WebGL interactive maps library",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "main": "js/mapbox-gl.js",
@@ -22,5 +22,5 @@ "license": "BSD-3-Clause",
     "grid-index": "^1.0.0",
-    "mapbox-gl-function": "^1.2.1",
-    "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#df162476980d9ee2ab6f8d0cf5a06e27aac60472",
-    "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#a6c95d33ff5ced2c0d7df995fd89eb557c0a353c",
+    "mapbox-gl-function": "mapbox/mapbox-gl-function#111a2b442be0689a65f5818dd2603c9b06962be0",
+    "mapbox-gl-shaders": "mapbox/mapbox-gl-shaders#44b65f8090a74cbb0319664d010b8d8a8a1512b0",
+    "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#7d330d2abf1775abc95ab8b889089cf5ff579357",
     "mapbox-gl-supported": "^1.2.0",
@@ -64,3 +64,3 @@ "package-json-versionify": "^1.0.2",
     "lodash": "^4.13.1",
-    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#c736ea5acc1094488394f3fc5e5c1f6f94279c71",
+    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#ceba0a2e2e8e5860aa2550c53bb6083387d053d3",
     "memory-fs": "^0.3.0",
@@ -109,3 +109,5 @@ "minifyify": "^7.0.1",
     "open-changed-examples": "git diff --name-only mb-pages HEAD -- docs/_posts/examples/*.html | awk '{print \"http://127.0.0.1:4000/mapbox-gl-js/example/\" substr($0,33,length($0)-37)}' | xargs open",
-    "test": "run-s lint test-unit",
+    "plugin-deploy":"set -e; node plugins/exists.js; aws s3 sync --exclude *.DS_Store --acl public-read plugins/src s3://mapbox-gl-js/plugins/; echo ' -- DEPLOYED --'",
+    "test": "run-s lint test-unit test-plugin",
+    "test-plugin":"tap test/plugins/",
     "test-suite": "run-s test-render test-query",
@@ -112,0 +114,0 @@ "test-unit": "tap --reporter dot --no-coverage test/js",

README.md

@@ -26,4 +26,4 @@ [![Build Status](https://circleci.com/gh/mapbox/mapbox-gl-js.svg?style=svg)](https://circleci.com/gh/mapbox/mapbox-gl-js) [![Coverage Status](https://coveralls.io/repos/github/mapbox/mapbox-gl-js/badge.svg?branch=master)](https://coveralls.io/github/mapbox/mapbox-gl-js?branch=master)
 <head>
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.1/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.1/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
 </head>
@@ -30,0 +30,0 @@

New alerts

GitHub dependency

Supply chain risk

Contains a dependency which resolves to a GitHub URL. Dependencies fetched from GitHub specifiers are not immutable can be used to inject untrusted code or reduce the likelihood of a reproducible install.

Found 3 instances in 1 package

NPM Shrinkwrap

Supply chain risk

Package contains a shrinkwrap file. This may allow the package to bypass normal install procedures.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 3 instances in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

GitHub dependency

Supply chain risk

Contains a dependency which resolves to a GitHub URL. Dependencies fetched from GitHub specifiers are not immutable can be used to inject untrusted code or reduce the likelihood of a reproducible install.

Found 2 instances in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

9512768

increased by61.4%

Number of package files

194

increased by30.2%

Lines of code

96907

increased by77.7%

Worsened metrics

Number of low quality alerts

18

increased by500%

Number of high supply chain risk alerts

4

increased by100%

Number of low supply chain risk alerts

67

increased by346.67%

Number of medium supply chain risk alerts

32

increased by190.91%

Dependency changes

• - Removedmapbox-gl-function@1.3.0(transitive)

• Updatedmapbox-gl-function@mapbox/mapbox-gl-function#111a2b442be0689a65f5818dd2603c9b06962be0

• Updatedmapbox-gl-shaders@mapbox/mapbox-gl-shaders#44b65f8090a74cbb0319664d010b8d8a8a1512b0

• Updatedmapbox-gl-style-spec@mapbox/mapbox-gl-style-spec#7d330d2abf1775abc95ab8b889089cf5ff579357