combine text and icon render types into symbol render type

debug/style-v3.json

@@ -530,7 +530,7 @@
     "source-layer": "poi_label",
     "filter": { "maki": "park" },
     "render": {
-      "type": "icon"
+      "type": "symbol"
     },
     "style": {}
   }, {
@@ -539,7 +539,7 @@
     "source-layer": "country_label",
     "filter": { "$type": "Point" },
     "render": {
-      "type": "text",
+      "type": "symbol",
       "text-field": "{{name}}",
       "text-font": "Open Sans Regular, Arial Unicode MS Regular",
       "text-max-size": 16,
@@ -557,7 +557,7 @@
     "source-layer": "place_label",
     "filter": { "$type": "Point" },
     "render": {
-      "type": "text",
+      "type": "symbol",
       "text-field": "{{name}}",
       "text-font": "Open Sans Semibold, Arial Unicode MS Regular",
       "text-max-size": 18,
@@ -575,7 +575,8 @@
     "source-layer": "road_label",
     "filter": { "$type": "LineString" },
     "render": {
-      "type": "text",
+      "type": "symbol",
+      "symbol-placement": "line",
       "text-field": "{{name}}",
       "text-font": "Open Sans Regular, Arial Unicode MS Regular",
       "text-max-size": 12,
@@ -601,11 +602,21 @@
     "source": "mapbox.mapbox-streets-v5",
     "source-layer": "poi_label",
     "render": {
-      "type": "icon",
+      "type": "symbol",
       "icon-size": 12,
-      "icon-image": "{{maki}}-12"
+      "icon-image": "{{maki}}-12",
+      "text-font": "Open Sans Regular, Arial Unicode MS Regular",
+      "text-max-size": 10,
+      "text-translate": [0, 1.2],
+      "text-path": "horizontal",
+      "text-max-width": 7,
+      "text-optional": true,
+      "text-field": "{{name}}"
     },
     "style": {
+      "text-size": 10,
+      "text-color": "#333",
+      "text-halo-color": "#eee",
       "icon-rotate-anchor": "viewport"
     }
   }, {
@@ -614,12 +625,11 @@
     "source-layer": "road",
     "filter": { "oneway": 1, "$type": "LineString" },
     "render": {
-      "type": "icon",
+      "type": "symbol",
+      "symbol-placement": "line",
       "icon-image": "bicycle-12",
       "icon-spacing": 200
     },
-    "style": {
-      "icon-rotate-anchor": "map"
-    }
+    "style": {}
   }]
 }

js/geometry/createbucket.js

@@ -4,19 +4,25 @@ module.exports = createBucket;
 
 var LineBucket = require('./linebucket.js');
 var FillBucket = require('./fillbucket.js');
-var PointBucket = require('./pointbucket.js');
-var TextBucket = require('./textbucket.js');
+var SymbolBucket = require('./symbolbucket.js');
+var RenderProperties = require('../style/renderproperties.js');
+
+function createBucket(info, collision, indices, buffers) {
+
+    if (!RenderProperties[info.type]) {
+        //console.warn('unknown bucket type');
+        return;
+    }
+
+    info = new RenderProperties[info.type](info);
 
-function createBucket(info, placement, indices, buffers) {
     if (info.type === 'line') {
-        return new LineBucket(info, buffers, placement, indices);
+        return new LineBucket(info, buffers, collision, indices);
     } else if (info.type === 'fill') {
-        return new FillBucket(info, buffers, placement, indices);
-    } else if (info.type === 'icon') {
-        return new PointBucket(info, buffers, placement, indices);
-    } else if (info.type === 'text') {
-        return new TextBucket(info, buffers, placement, indices);
+        return new FillBucket(info, buffers, collision, indices);
+    } else if (info.type === 'symbol') {
+        return new SymbolBucket(info, buffers, collision, indices);
     } else {
-        console.warn('unknown bucket type');
+        //console.warn('unknown bucket type');
     }
 }

js/geometry/fillbucket.js

@@ -26,7 +26,7 @@ FillBucket.prototype.addFeature = function(lines) {
 
 FillBucket.prototype.addFill = function(vertices) {
     if (vertices.length < 3) {
-        // console.warn('a fill must have at least three vertices');
+        //console.warn('a fill must have at least three vertices');
         return;
     }
 

js/geometry/glyphvertexbuffer.js

@@ -28,14 +28,15 @@ GlyphVertexBuffer.prototype.add = function(x, y, ox, oy, tx, ty, angle, minzoom,
     this.shorts[pos2 + 2] = Math.round(ox * 64); // use 1/64 pixels for placement
     this.shorts[pos2 + 3] = Math.round(oy * 64);
 
-    this.ubytes[pos + 8] = Math.floor(tx / 4);
-    this.ubytes[pos + 9] = Math.floor(ty / 4);
-    this.ubytes[pos + 10] = Math.floor((labelminzoom || 0) * 10);
-    this.ubytes[pos + 11] = Math.floor((minzoom || 0) * 10); // 1/10 zoom levels: z16 == 160.
-    this.ubytes[pos + 12] = Math.floor(Math.min(maxzoom || 25, 25) * 10); // 1/10 zoom levels: z16 == 160.
-    this.ubytes[pos + 13] = Math.round(angle * angleFactor) % 256;
-    this.ubytes[pos + 14] = Math.max(Math.round(range[0] * angleFactor), 0) % 256;
-    this.ubytes[pos + 15] = Math.min(Math.round(range[1] * angleFactor), 255) % 256;
+    this.ubytes[pos + 8] = Math.floor((labelminzoom || 0) * 10);
+    this.ubytes[pos + 9] = Math.floor((minzoom || 0) * 10); // 1/10 zoom levels: z16 == 160.
+    this.ubytes[pos + 10] = Math.floor(Math.min(maxzoom || 25, 25) * 10); // 1/10 zoom levels: z16 == 160.
+    this.ubytes[pos + 11] = Math.round(angle * angleFactor) % 256;
+    this.ubytes[pos + 12] = Math.max(Math.round(range[0] * angleFactor), 0) % 256;
+    this.ubytes[pos + 13] = Math.min(Math.round(range[1] * angleFactor), 255) % 256;
+
+    this.ubytes[pos + 14] = Math.floor(tx / 4);
+    this.ubytes[pos + 15] = Math.floor(ty / 4);
 
     this.pos += this.itemSize;
 };

js/geometry/iconvertexbuffer.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var Buffer = require('./buffer.js');
+
+module.exports = GlyphVertexBuffer;
+
+function GlyphVertexBuffer(buffer) {
+    Buffer.call(this, buffer);
+}
+
+GlyphVertexBuffer.prototype = Object.create(Buffer.prototype);
+
+GlyphVertexBuffer.prototype.defaultLength = 2048 * 20;
+GlyphVertexBuffer.prototype.itemSize = 20;
+
+// Converts the 0..2pi to an int16 range
+GlyphVertexBuffer.angleFactor = 128 / Math.PI;
+
+GlyphVertexBuffer.prototype.add = function(x, y, ox, oy, tx, ty, angle, minzoom, range, maxzoom, labelminzoom) {
+    var pos = this.pos,
+        pos2 = pos / 2,
+        angleFactor = GlyphVertexBuffer.angleFactor;
+
+    this.resize();
+
+    this.shorts[pos2 + 0] = x;
+    this.shorts[pos2 + 1] = y;
+    this.shorts[pos2 + 2] = Math.round(ox * 64); // use 1/64 pixels for placement
+    this.shorts[pos2 + 3] = Math.round(oy * 64);
+
+    this.ubytes[pos + 8] = Math.floor((labelminzoom || 0) * 10);
+    this.ubytes[pos + 9] = Math.floor((minzoom || 0) * 10); // 1/10 zoom levels: z16 == 160.
+    this.ubytes[pos + 10] = Math.floor(Math.min(maxzoom || 25, 25) * 10); // 1/10 zoom levels: z16 == 160.
+    this.ubytes[pos + 11] = Math.round(angle * angleFactor) % 256;
+    this.ubytes[pos + 12] = Math.max(Math.round(range[0] * angleFactor), 0) % 256;
+    this.ubytes[pos + 13] = Math.min(Math.round(range[1] * angleFactor), 255) % 256;
+
+    this.shorts[pos2 + 8] = tx;
+    this.shorts[pos2 + 9] = ty;
+
+    this.pos += this.itemSize;
+};

js/geometry/linebucket.js

@@ -28,7 +28,7 @@ LineBucket.prototype.addFeature = function(lines) {
 
 LineBucket.prototype.addLine = function(vertices, join, cap, miterLimit, roundLimit) {
     if (vertices.length < 2) {
-        // console.warn('a line must have at least two vertices');
+        //console.warn('a line must have at least two vertices');
         return;
     }