In-browser polygon tesselation

API.md

@@ -22,6 +22,7 @@ Option | Value | Description
 `style` | object | Map style and data source definition (either a JSON object or a JSON URL), described in the [style reference](https://mapbox.com/mapbox-gl-style-spec)
 `hash` | boolean | If `true`, the map will track and update the page URL according to map position (default: `false`)
 `interactive` | boolean | If `false`, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input (default: `true`)
+`classes` | array | Style class names with which to initialize the map
 
 Options that define the initial position of the map (if `hash` is set to `true`, the position will be set according to the URL and options will be used by default):
 

CHANGELOG.md

@@ -8,6 +8,9 @@ An in-progress version being developed in the `mb-pages` branch.
 * `addClass`, `removeClass`, `setClasses`, `hasClass`, and `getClasses` are now methods
   on Map.
 * `Style#cascade` is now private, pending a public style mutation API (#755).
+* The format for `featuresAt` results changed. Instead of result-per-geometry-cross-layer,
+  each result has a `layers` array with all layers that contain the feature. This avoids
+  duplication of geometry and properties in the result set.
 
 ## 0.5.2 (Jan 07 2015)
 

debug/style.json

@@ -241,9 +241,7 @@
     }
   }, {
     "id": "water_offset",
-    "type": "fill",
-    "source": "mapbox",
-    "source-layer": "water",
+    "ref": "water",
     "paint": {
       "fill-color": "white",
       "fill-opacity": 0.3,

docs/_posts/3400-01-01-api.html

@@ -137,6 +137,11 @@ <h1 id="mapbox-gl-js-api-documentation">Mapbox GL JS API Documentation</h1><h2 i
 <td>boolean</td>
 <td>If <code>false</code>, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input (default: <code>true</code>)</td>
 </tr>
+<tr>
+<td><code>classes</code></td>
+<td>array</td>
+<td>Style class names with which to initialize the map</td>
+</tr>
 </tbody>
 </table>
 <p>Options that define the initial position of the map (if <code>hash</code> is set to <code>true</code>, the position will be set according to the URL and options will be used by default):</p>

js/data/buffer/buffer.js

@@ -28,7 +28,7 @@ Buffer.prototype = {
         return this.pos / this.itemSize;
     },
 
-    setupViews() {
+    setupViews: function() {
         // set up views for each type to add data of different types to the same buffer
         this.ubytes = new Uint8Array(this.array);
         this.bytes = new Int8Array(this.array);
@@ -37,7 +37,7 @@ Buffer.prototype = {
     },
 
     // binds the buffer to a webgl context
-    bind(gl) {
+    bind: function(gl) {
         var type = gl[this.arrayType];
         if (!this.buffer) {
             this.buffer = gl.createBuffer();
@@ -51,14 +51,14 @@ Buffer.prototype = {
         }
     },
 
-    destroy(gl) {
+    destroy: function(gl) {
         if (this.buffer) {
             gl.deleteBuffer(this.buffer);
         }
     },
 
     // increase the buffer size by 50% if a new item doesn't fit
-    resize() {
+    resize: function() {
         if (this.length < this.pos + this.itemSize) {
 
             while (this.length < this.pos + this.itemSize) {

js/data/buffer/fill_elements_buffer.js

@@ -10,17 +10,15 @@ function FillElementsBuffer(buffer) {
 }
 
 FillElementsBuffer.prototype = util.inherit(Buffer, {
-    itemSize: 6, // bytes per triangle (3 * unsigned short == 6 bytes)
+    itemSize: 2, // bytes per triangle (3 * unsigned short == 6 bytes)
     arrayType: 'ELEMENT_ARRAY_BUFFER',
 
-    add(a, b, c) {
+    add: function(a) {
         var pos2 = this.pos / 2;
 
         this.resize();
 
         this.ushorts[pos2 + 0] = a;
-        this.ushorts[pos2 + 1] = b;
-        this.ushorts[pos2 + 2] = c;
 
         this.pos += this.itemSize;
     }

js/data/buffer/fill_vertex_buffer.js

@@ -12,7 +12,7 @@ function FillVertexBuffer(buffer) {
 FillVertexBuffer.prototype = util.inherit(Buffer, {
     itemSize: 4, // bytes per vertex (2 * short == 4 bytes)
 
-    add(x, y) {
+    add: function(x, y) {
         var pos2 = this.pos / 2;
 
         this.resize();

js/data/buffer/glyph_vertex_buffer.js

@@ -16,7 +16,7 @@ GlyphVertexBuffer.prototype = util.inherit(Buffer, {
     defaultLength: 2048 * 16,
     itemSize: 16,
 
-    add(x, y, ox, oy, tx, ty, angle, minzoom, range, maxzoom, labelminzoom) {
+    add: function(x, y, ox, oy, tx, ty, angle, minzoom, range, maxzoom, labelminzoom) {
         var pos = this.pos,
             pos2 = pos / 2,
             angleFactor = GlyphVertexBuffer.angleFactor;
@@ -43,7 +43,7 @@ GlyphVertexBuffer.prototype = util.inherit(Buffer, {
         this.pos += this.itemSize;
     },
 
-    bind(gl, shader) {
+    bind: function(gl, shader) {
         Buffer.prototype.bind.call(this, gl);
 
         var stride = this.itemSize;

js/data/buffer/icon_vertex_buffer.js

@@ -16,7 +16,7 @@ GlyphVertexBuffer.prototype = util.inherit(Buffer, {
     defaultLength: 2048 * 16,
     itemSize: 16,
 
-    add(x, y, ox, oy, tx, ty, angle, minzoom, range, maxzoom, labelminzoom) {
+    add: function(x, y, ox, oy, tx, ty, angle, minzoom, range, maxzoom, labelminzoom) {
         var pos = this.pos,
             pos2 = pos / 2,
             angleFactor = GlyphVertexBuffer.angleFactor;
@@ -43,7 +43,7 @@ GlyphVertexBuffer.prototype = util.inherit(Buffer, {
         this.pos += this.itemSize;
     },
 
-    bind(gl, shader) {
+    bind: function(gl, shader) {
         Buffer.prototype.bind.call(this, gl);
 
         var stride = this.itemSize;

js/data/buffer/line_element_buffer.js

@@ -13,7 +13,7 @@ LineElementBuffer.prototype = util.inherit(Buffer, {
     itemSize: 6, // bytes per triangle (3 * unsigned short == 6 bytes)
     arrayType: 'ELEMENT_ARRAY_BUFFER',
 
-    add(a, b, c) {
+    add: function(a, b, c) {
         var pos2 = this.pos / 2;
 
         this.resize();

js/data/buffer/line_vertex_buffer.js

@@ -24,7 +24,7 @@ LineVertexBuffer.prototype = util.inherit(Buffer, {
     // x, y - vertex position
     // ex, ey - extrude normal
     // tx, ty - texture normal
-    add(point, extrude, tx, ty, linesofar) {
+    add: function(point, extrude, tx, ty, linesofar) {
         var pos = this.pos,
             pos2 = pos / 2,
             index = this.index,

js/data/buffer/outline_elements_buffer.js

@@ -13,7 +13,7 @@ OutlineElementsBuffer.prototype = util.inherit(Buffer, {
     itemSize: 4, // bytes per line (2 * unsigned short == 4 bytes)
     arrayType: 'ELEMENT_ARRAY_BUFFER',
 
-    add(a, b) {
+    add: function(a, b) {
         var pos2 = this.pos / 2;
 
         this.resize();

js/data/create_bucket.js

@@ -5,8 +5,8 @@ module.exports = createBucket;
 var LineBucket = require('./line_bucket');
 var FillBucket = require('./fill_bucket');
 var SymbolBucket = require('./symbol_bucket');
-var RasterBucket = require('./raster_bucket');
 var LayoutProperties = require('../style/layout_properties');
+var featureFilter = require('feature-filter');
 
 function createBucket(layer, buffers, collision, indices) {
 
@@ -20,14 +20,18 @@ function createBucket(layer, buffers, collision, indices) {
     var BucketClass =
         layer.type === 'line' ? LineBucket :
         layer.type === 'fill' ? FillBucket :
-        layer.type === 'symbol' ? SymbolBucket :
-        layer.type === 'raster' ? RasterBucket : null;
+        layer.type === 'symbol' ? SymbolBucket : null;
 
     var bucket = new BucketClass(layoutProperties, buffers, collision, indices);
+
+    bucket.id = layer.id;
     bucket.type = layer.type;
+    bucket['source-layer'] = layer['source-layer'];
     bucket.interactive = layer.interactive;
     bucket.minZoom = layer.minzoom;
     bucket.maxZoom = layer.maxzoom;
+    bucket.filter = featureFilter(layer.filter);
+    bucket.features = [];
 
     return bucket;
 }

js/data/element_groups.js

@@ -17,6 +17,7 @@ ElementGroups.prototype.makeRoomFor = function(numVertices) {
                 this.secondElementBuffer && this.secondElementBuffer.index);
         this.groups.push(this.current);
     }
+    return this.current;
 };
 
 function ElementGroup(vertexStartIndex, elementStartIndex, secondElementStartIndex)  {

js/data/feature_tree.js

@@ -14,8 +14,8 @@ function FeatureTree(getGeometry, getType) {
     this.toBeInserted = [];
 }
 
-FeatureTree.prototype.insert = function(bbox, bucket_info, feature) {
-    bbox.info = bucket_info;
+FeatureTree.prototype.insert = function(bbox, layers, feature) {
+    bbox.layers = layers;
     bbox.feature = feature;
     this.toBeInserted.push(bbox);
 };
@@ -42,16 +42,18 @@ FeatureTree.prototype.query = function(args, callback) {
         var type = this.getType(feature);
         var geometry = this.getGeometry(feature);
 
-        if (params.bucket && matching[i].info.id !== params.bucket.id)
+        if (params.layer && matching[i].layers.indexOf(params.layer.id) < 0)
             continue;
         if (params.$type && type !== params.$type)
             continue;
         if (!geometryContainsPoint(geometry, type, new Point(x, y), radius))
             continue;
 
-        var props = this.formatResults(matching[i].info);
-        props.properties = matching[i].feature.properties;
-        props.$type = type;
+        var props = {
+            $type: type,
+            properties: matching[i].feature.properties,
+            layers: matching[i].layers
+        };
 
         if (params.geometry) {
             props._geometry = geometry;
@@ -63,21 +65,6 @@ FeatureTree.prototype.query = function(args, callback) {
     callback(null, result);
 };
 
-FeatureTree.prototype.formatResults = function(bucketInfo) {
-    var results = {
-        $type: bucketInfo.$type,
-        layer: {
-            id: bucketInfo.id,
-            type: bucketInfo.type,
-            source: bucketInfo.source,
-            'source-layer': bucketInfo['source-layer'],
-            layout: bucketInfo.layout
-        }
-    };
-    if (bucketInfo.ref) results.layer.ref = bucketInfo.ref;
-    return results;
-};
-
 function geometryContainsPoint(rings, type, p, radius) {
     if (type === 'Point') {
         return pointContainsPoint(rings, p, radius);