Add maxWorkers option

debug/index.html

@@ -58,7 +58,8 @@
     zoom: 12.5,
     center: [-77.01866, 38.888],
     style: 'mapbox://styles/mapbox/streets-v8',
-    hash: true
+    hash: true,
+    workerCount: 3
 });
 
 map.addControl(new mapboxgl.Navigation());

js/style/style.js

@@ -19,9 +19,9 @@ var StyleFunction = require('./style_function');
 
 module.exports = Style;
 
-function Style(stylesheet, animationLoop) {
+function Style(stylesheet, animationLoop, workerCount) {
     this.animationLoop = animationLoop || new AnimationLoop();
-    this.dispatcher = new Dispatcher(Math.max(browser.hardwareConcurrency - 1, 1), this);
+    this.dispatcher = new Dispatcher(workerCount || 1, this);
     this.spriteAtlas = new SpriteAtlas(512, 512);
     this.lineAtlas = new LineAtlas(256, 512);
 

js/ui/map.js

@@ -52,7 +52,8 @@ var defaultOptions = {
     failIfMajorPerformanceCaveat: false,
     preserveDrawingBuffer: false,
 
-    trackResize: true
+    trackResize: true,
+    workerCount: Math.max(browser.hardwareConcurrency - 1, 1)
 };
 
 /**
@@ -97,6 +98,7 @@ var defaultOptions = {
  * @param {number} [options.zoom] The zoom level of the map's initial viewport.
  * @param {number} [options.bearing] The bearing (rotation) of the map's initial viewport measured in degrees counter-clockwise from north.
  * @param {number} [options.pitch] The pitch of the map's initial viewport measured in degrees.
+ * @param {number} [options.workerCount=navigator.hardwareConcurrency] The number of WebWorkers the map should use to process vector tile data.
  * @example
  * var map = new mapboxgl.Map({
  *   container: 'map',
@@ -109,10 +111,16 @@ var defaultOptions = {
 var Map = module.exports = function(options) {
 
     options = util.extend({}, defaultOptions, options);
+
+    if (options.workerCount < 1) {
+        throw new Error('workerCount must an integer greater than or equal to 1.');
+    }
+
     this._interactive = options.interactive;
     this._failIfMajorPerformanceCaveat = options.failIfMajorPerformanceCaveat;
     this._preserveDrawingBuffer = options.preserveDrawingBuffer;
     this._trackResize = options.trackResize;
+    this._workerCount = options.workerCount;
 
     if (typeof options.container === 'string') {
         this._container = document.getElementById(options.container);
@@ -586,7 +594,7 @@ util.extend(Map.prototype, /** @lends Map.prototype */{
         } else if (style instanceof Style) {
             this.style = style;
         } else {
-            this.style = new Style(style, this.animationLoop);
+            this.style = new Style(style, this.animationLoop, this._workerCount);
         }
 
         this.style

test/js/style/style.test.js

@@ -9,7 +9,6 @@ var Style = require('../../../js/style/style');
 var VectorTileSource = require('../../../js/source/vector_tile_source');
 var StyleLayer = require('../../../js/style/style_layer');
 var util = require('../../../js/util/util');
-var browser = require('../../../js/util/browser');
 
 function createStyleJSON(properties) {
     return util.extend({
@@ -1123,8 +1122,8 @@ test('Style#query*Features', function(t) {
 });
 
 test('Style creates correct number of workers', function(t) {
-    var style = new Style(createStyleJSON());
-    t.equal(style.dispatcher.actors.length, browser.hardwareConcurrency - 1);
+    var style = new Style(createStyleJSON(), null, 3);
+    t.equal(style.dispatcher.actors.length, 3);
     t.ok(style);
     t.end();
 });

test/js/ui/map.test.js

@@ -6,6 +6,7 @@ var window = require('../../../js/util/browser').window;
 var Map = require('../../../js/ui/map');
 var Style = require('../../../js/style/style');
 var LngLat = require('../../../js/geo/lng_lat');
+var browser = require('../../../js/util/browser');
 var sinon = require('sinon');
 
 var fixed = require('../../testutil/fixed');
@@ -930,6 +931,21 @@ test('Map', function(t) {
         t.end();
     });
 
+    t.test('workerCount option', function(t) {
+        var map = createMap({});
+        // TODO: it's not great to check this private member here; better would
+        // be to mock Style and then just check that the correct workerCount
+        // param is being passed.
+        t.equal(map._workerCount, browser.hardwareConcurrency - 1, 'workerCount defaults to hardwareConcurrency - 1');
+        map = createMap({ workerCount: 3 });
+        t.equal(map._workerCount, 3, 'workerCount option is used');
+        t.throws(function () {
+            createMap({ workerCount: 0 });
+        });
+        t.end();
+    });
+
+
     t.end();
 });