Add MVT support and upgrade Three.js version

dist/vizicities-worker.js

@@ -142,7 +142,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	//
 	// A multiplier of 0.1 would mean a 1:0.1 mapping between WebGL and EPSG:3857
 	// coordinates (1 EPSG:3857 metre === 0.1 WebGL units)
-	Geo.multiplier = 0.1;
+	Geo.multiplier = 1;
 	
 	Geo.project = function (latlon) {
 	  var d = Math.PI / 180;
@@ -494,6 +494,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 	
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
+	
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 	
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -514,7 +516,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _three = __webpack_require__(21);
 	
-	var _three2 = _interopRequireDefault(_three);
+	var THREE = _interopRequireWildcard(_three);
 	
 	var _engineScene = __webpack_require__(22);
 	
@@ -554,7 +556,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    this._options = (0, _lodashAssign2['default'])({}, defaults, options);
 	
 	    if (this.isOutput()) {
-	      this._object3D = new _three2['default'].Object3D();
+	      this._object3D = new THREE.Object3D();
 	
 	      this._dom3D = document.createElement('div');
 	      this._domObject3D = new _vendorCSS3DRenderer.CSS3DObject(this._dom3D);
@@ -2825,17 +2827,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	  value: true
 	});
 	
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
 	
 	var _three = __webpack_require__(21);
 	
-	var _three2 = _interopRequireDefault(_three);
+	var THREE = _interopRequireWildcard(_three);
 	
 	// This can be imported from anywhere and will still reference the same scene,
 	// though there is a helper reference in Engine.scene
 	
 	exports['default'] = (function () {
-	  var scene = new _three2['default'].Scene();
+	  var scene = new THREE.Scene();
 	
 	  // TODO: Re-enable when this works with the skybox
 	  // scene.fog = new THREE.Fog(0xffffff, 1, 15000);
@@ -2852,7 +2854,7 @@ return /******/ (function(modules) { // webpackBootstrap
 		value: true
 	});
 	
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
 	
 	// jscs:disable
 	/* eslint-disable */
@@ -2864,11 +2866,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _three = __webpack_require__(21);
 	
-	var _three2 = _interopRequireDefault(_three);
+	var THREE = _interopRequireWildcard(_three);
 	
 	var CSS3DObject = function CSS3DObject(element) {
 	
-		_three2['default'].Object3D.call(this);
+		THREE.Object3D.call(this);
 	
 		this.element = element;
 		this.element.style.position = 'absolute';
@@ -2882,7 +2884,7 @@ return /******/ (function(modules) { // webpackBootstrap
 		});
 	};
 	
-	CSS3DObject.prototype = Object.create(_three2['default'].Object3D.prototype);
+	CSS3DObject.prototype = Object.create(THREE.Object3D.prototype);
 	CSS3DObject.prototype.constructor = CSS3DObject;
 	
 	var CSS3DSprite = function CSS3DSprite(element) {
@@ -2897,12 +2899,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var CSS3DRenderer = function CSS3DRenderer() {
 	
-		console.log('THREE.CSS3DRenderer', _three2['default'].REVISION);
+		console.log('THREE.CSS3DRenderer', THREE.REVISION);
 	
 		var _width, _height;
 		var _widthHalf, _heightHalf;
 	
-		var matrix = new _three2['default'].Matrix4();
+		var matrix = new THREE.Matrix4();
 	
 		var cache = {
 			camera: { fov: 0, style: '' },
@@ -3025,7 +3027,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 		this.render = function (scene, camera) {
 	
-			var fov = 0.5 / Math.tan(_three2['default'].Math.degToRad(camera.fov * 0.5)) * _height;
+			var fov = 0.5 / Math.tan(THREE.Math.degToRad(camera.fov * 0.5)) * _height;
 	
 			if (cache.camera.fov !== fov) {
 	
@@ -3063,9 +3065,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	exports.CSS3DSprite = CSS3DSprite;
 	exports.CSS3DRenderer = CSS3DRenderer;
 	
-	_three2['default'].CSS3DObject = CSS3DObject;
+	THREE.CSS3DObject = CSS3DObject;
-	_three2['default'].CSS3DSprite = CSS3DSprite;
+	THREE.CSS3DSprite = CSS3DSprite;
-	_three2['default'].CSS3DRenderer = CSS3DRenderer;
+	THREE.CSS3DRenderer = CSS3DRenderer;
 
 /***/ }),
 /* 24 */
@@ -3075,7 +3077,7 @@ return /******/ (function(modules) { // webpackBootstrap
 		value: true
 	});
 	
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
 	
 	// jscs:disable
 	/* eslint-disable */
@@ -3086,11 +3088,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _three = __webpack_require__(21);
 	
-	var _three2 = _interopRequireDefault(_three);
+	var THREE = _interopRequireWildcard(_three);
 	
 	var CSS2DObject = function CSS2DObject(element) {
 	
-		_three2['default'].Object3D.call(this);
+		THREE.Object3D.call(this);
 	
 		this.element = element;
 		this.element.style.position = 'absolute';
@@ -3104,23 +3106,23 @@ return /******/ (function(modules) { // webpackBootstrap
 		});
 	};
 	
-	CSS2DObject.prototype = Object.create(_three2['default'].Object3D.prototype);
+	CSS2DObject.prototype = Object.create(THREE.Object3D.prototype);
 	CSS2DObject.prototype.constructor = CSS2DObject;
 	
 	//
 	
 	var CSS2DRenderer = function CSS2DRenderer() {
 	
-		console.log('THREE.CSS2DRenderer', _three2['default'].REVISION);
+		console.log('THREE.CSS2DRenderer', THREE.REVISION);
 	
 		var _width, _height;
 		var _widthHalf, _heightHalf;
 	
-		var vector = new _three2['default'].Vector3();
+		var vector = new THREE.Vector3();
-		var viewMatrix = new _three2['default'].Matrix4();
+		var viewMatrix = new THREE.Matrix4();
-		var viewProjectionMatrix = new _three2['default'].Matrix4();
+		var viewProjectionMatrix = new THREE.Matrix4();
 	
-		var frustum = new _three2['default'].Frustum();
+		var frustum = new THREE.Frustum();
 	
 		var domElement = document.createElement('div');
 		domElement.style.overflow = 'hidden';
@@ -3144,7 +3146,7 @@ return /******/ (function(modules) { // webpackBootstrap
 			if (object instanceof CSS2DObject) {
 	
 				vector.setFromMatrixPosition(object.matrixWorld);
-				vector.applyProjection(viewProjectionMatrix);
+				vector.applyMatrix4(viewProjectionMatrix);
 	
 				var element = object.element;
 				var style = 'translate(-50%,-50%) translate(' + (vector.x * _widthHalf + _widthHalf) + 'px,' + (-vector.y * _heightHalf + _heightHalf) + 'px)';
@@ -3184,7 +3186,7 @@ return /******/ (function(modules) { // webpackBootstrap
 			viewMatrix.copy(camera.matrixWorldInverse.getInverse(camera.matrixWorld));
 			viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, viewMatrix);
 	
-			frustum.setFromMatrix(new _three2['default'].Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
+			frustum.setFromMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
 	
 			renderObject(scene, camera);
 		};
@@ -3193,8 +3195,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	exports.CSS2DObject = CSS2DObject;
 	exports.CSS2DRenderer = CSS2DRenderer;
 	
-	_three2['default'].CSS2DObject = CSS2DObject;
+	THREE.CSS2DObject = CSS2DObject;
-	_three2['default'].CSS2DRenderer = CSS2DRenderer;
+	THREE.CSS2DRenderer = CSS2DRenderer;
 
 /***/ }),
 /* 25 */
@@ -3340,10 +3342,34 @@ return /******/ (function(modules) { // webpackBootstrap
 	        var geojson = _geojson;
 	        var transferrables = [];
 	
+	        var layers = [];
+	
+	        if (_this._options.layers) {
+	          layers = _this._options.layers;
+	        }
+	
+	        // TODO: Allow filter method to be run here
 	        if (typeof geojson !== 'string') {
-	          _this._geojson = geojson = _utilBuffer2['default'].stringToUint8Array(JSON.stringify(geojson));
+	          // TODO: De-dupe with non-object processing in next section
+	          var fc = _utilGeoJSON2['default'].collectFeatures(geojson, layers, _this._options.topojson);
+	          var features = fc.features;
+	
+	          // Run filter, if provided
+	          if (_this._options.filter) {
+	            fc.features = features.filter(_this._options.filter);
+	          }
+	
+	          if (_this._options.onEachFeature) {
+	            var feature;
+	            for (var i = 0; i < features.length; i++) {
+	              feature = features[i];
+	              _this._options.onEachFeature(feature);
+	            };
+	          }
+	
+	          _this._geojson = geojson = _utilBuffer2['default'].stringToUint8Array(JSON.stringify(fc));
 	          transferrables.push(geojson.buffer);
-	          _this._execWorker(geojson, _this._options.topojson, _this._world._originPoint, style, _this._options.interactive, pointGeometry, transferrables).then(function () {
+	          _this._execWorker(geojson, _this._options.topojson, _this._options.headers, _this._world._originPoint, style, _this._options.interactive, pointGeometry, transferrables).then(function () {
 	            resolve();
 	          })['catch'](reject);
 	        } else if (typeof _this._options.filter === 'function' || typeof _this._options.onEachFeature === 'function') {
@@ -3353,7 +3379,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            //   return;
 	            // }
 	
-	            var fc = _utilGeoJSON2['default'].collectFeatures(res, _this._options.topojson);
+	            var fc = _utilGeoJSON2['default'].collectFeatures(res, layers, _this._options.topojson);
 	            var features = fc.features;
 	
 	            // Run filter, if provided
@@ -3909,10 +3935,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: function Process(geojson, topojson, headers, originPoint, _style, _properties, _pointGeometry) {
 	      return new Promise(function (resolve, reject) {
 	        GeoJSONWorkerLayer.ProcessGeoJSON(geojson, headers).then(function (res) {
+	          var geojson = res;
+	
+	          if (!geojson.features) {
 	            // Collects features into a single FeatureCollection
 	            //
 	            // Also converts TopoJSON to GeoJSON if instructed
-	          var geojson = _utilGeoJSON2['default'].collectFeatures(res, topojson);
+	            geojson = _utilGeoJSON2['default'].collectFeatures(geojson, topojson);
+	          }
 	
 	          // TODO: Check that GeoJSON is valid / usable
 	
@@ -4035,6 +4065,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	            }
 	
 	            if (geometry.type === 'Point' || geometry.type === 'MultiPoint') {
+	              if (!pointGeometry) {
+	                console.warn('Skipping point geometry as no function provided');
+	                continue;
+	              }
+	
 	              coordinates = _geometryPointLayer2['default'].isSingle(coordinates) ? [coordinates] : coordinates;
 	
 	              var converted = coordinates.map(function (coordinate) {
@@ -5084,17 +5119,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	  value: true
 	});
 	
-	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
-	
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 	
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
+	
 	/*
 	 * GeoJSON helpers for handling data and generating objects
 	 */
 	
 	var _three = __webpack_require__(21);
 	
-	var _three2 = _interopRequireDefault(_three);
+	var THREE = _interopRequireWildcard(_three);
 	
 	var _topojson2 = __webpack_require__(29);
 	
@@ -5121,8 +5156,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	// See: http://lists.geojson.org/pipermail/geojson-geojson.org/2009-June/000489.html
 	
 	// Light and dark colours used for poor-mans AO gradient on object sides
-	var light = new _three2['default'].Color(0xffffff);
+	var light = new THREE.Color(0xffffff);
-	var shadow = new _three2['default'].Color(0x666666);
+	var shadow = new THREE.Color(0x666666);
 	
 	var GeoJSON = (function () {
 	  var defaultStyle = {
@@ -5131,25 +5166,29 @@ return /******/ (function(modules) { // webpackBootstrap
 	    outlineColor: '#000000',
 	    transparent: false,
 	    opacity: 1,
-	    blending: _three2['default'].NormalBlending,
+	    blending: THREE.NormalBlending,
 	    height: 0,
 	    lineOpacity: 1,
 	    lineTransparent: false,
 	    lineColor: '#ffffff',
 	    lineWidth: 1,
-	    lineBlending: _three2['default'].NormalBlending
+	    lineBlending: THREE.NormalBlending
 	  };
 	
 	  // Attempts to merge together multiple GeoJSON Features or FeatureCollections
 	  // into a single FeatureCollection
-	  var collectFeatures = function collectFeatures(data, _topojson) {
+	  var collectFeatures = function collectFeatures(data, layers, _topojson) {
 	    var collections = [];
 	
 	    if (_topojson) {
-	      // TODO: Allow TopoJSON objects to be overridden as an option
-	
 	      // If not overridden, merge all features from all objects
 	      for (var tk in data.objects) {
+	        if (layers.length > 0) {
+	          if (!layers.includes(tk)) {
+	            continue;
+	          }
+	        }
+	
 	        collections.push(topojson.feature(data, data.objects[tk]));
 	      }
 	
@@ -5162,6 +5201,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	        // If not overridden, merge all features from all objects
 	        for (var gk in data) {
+	          if (layers.length > 0) {
+	            if (!layers.includes(gk)) {
+	              continue;
+	            }
+	          }
+	
 	          if (!data[gk].type) {
 	            continue;
 	          }
@@ -7085,7 +7130,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  value: true
 	});
 	
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
 	
 	/*
 	 * BufferGeometry helpers
@@ -7093,7 +7138,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _three = __webpack_require__(21);
 	
-	var _three2 = _interopRequireDefault(_three);
+	var THREE = _interopRequireWildcard(_three);
 	
 	var _textEncoding = __webpack_require__(38);
 	
@@ -7228,7 +7273,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  };
 	
 	  var createLineGeometry = function createLineGeometry(lines, offset) {
-	    var geometry = new _three2['default'].BufferGeometry();
+	    var geometry = new THREE.BufferGeometry();
 	
 	    var vertices = new Float32Array(lines.verticesCount * 3);
 	    var colours = new Float32Array(lines.verticesCount * 3);
@@ -7277,11 +7322,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 	
 	    // itemSize = 3 because there are 3 values (components) per vertex
-	    geometry.addAttribute('position', new _three2['default'].BufferAttribute(vertices, 3));
+	    geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
-	    geometry.addAttribute('color', new _three2['default'].BufferAttribute(colours, 3));
+	    geometry.addAttribute('color', new THREE.BufferAttribute(colours, 3));
 	
 	    if (pickingIds) {
-	      geometry.addAttribute('pickingId', new _three2['default'].BufferAttribute(pickingIds, 1));
+	      geometry.addAttribute('pickingId', new THREE.BufferAttribute(pickingIds, 1));
 	    }
 	
 	    geometry.computeBoundingBox();
@@ -7291,7 +7336,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	  // TODO: Make picking IDs optional
 	  var createGeometry = function createGeometry(attributes, offset) {
-	    var geometry = new _three2['default'].BufferGeometry();
+	    var geometry = new THREE.BufferGeometry();
 	
 	    // Three components per vertex per face (3 x 3 = 9)
 	    var vertices = new Float32Array(attributes.facesCount * 9);
@@ -7304,12 +7349,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	      pickingIds = new Float32Array(attributes.facesCount * 3);
 	    }
 	
-	    var pA = new _three2['default'].Vector3();
+	    var pA = new THREE.Vector3();
-	    var pB = new _three2['default'].Vector3();
+	    var pB = new THREE.Vector3();
-	    var pC = new _three2['default'].Vector3();
+	    var pC = new THREE.Vector3();
 	
-	    var cb = new _three2['default'].Vector3();
+	    var cb = new THREE.Vector3();
-	    var ab = new _three2['default'].Vector3();
+	    var ab = new THREE.Vector3();
 	
 	    var index;
 	    var _faces;
@@ -7415,12 +7460,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 	
 	    // itemSize = 3 because there are 3 values (components) per vertex
-	    geometry.addAttribute('position', new _three2['default'].BufferAttribute(vertices, 3));
+	    geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
-	    geometry.addAttribute('normal', new _three2['default'].BufferAttribute(normals, 3));
+	    geometry.addAttribute('normal', new THREE.BufferAttribute(normals, 3));
-	    geometry.addAttribute('color', new _three2['default'].BufferAttribute(colours, 3));
+	    geometry.addAttribute('color', new THREE.BufferAttribute(colours, 3));
 	
 	    if (pickingIds) {
-	      geometry.addAttribute('pickingId', new _three2['default'].BufferAttribute(pickingIds, 1));
+	      geometry.addAttribute('pickingId', new THREE.BufferAttribute(pickingIds, 1));
 	    }
 	
 	    geometry.computeBoundingBox();
@@ -10894,6 +10939,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 	
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
+	
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 	
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -10926,7 +10973,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _three = __webpack_require__(21);
 	
-	var _three2 = _interopRequireDefault(_three);
+	var THREE = _interopRequireWildcard(_three);
 	
 	var _geoGeo = __webpack_require__(1);
 	
@@ -10972,7 +11019,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        color: '#ffffff',
 	        transparent: false,
 	        opacity: 1,
-	        blending: _three2['default'].NormalBlending,
+	        blending: THREE.NormalBlending,
 	        height: 0
 	      }
 	    };
@@ -11001,7 +11048,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          // Otherwise, assume another component will eventually add a mesh to
 	          // the picking scene
 	          if (_this.isOutput()) {
-	            _this._pickingMesh = new _three2['default'].Object3D();
+	            _this._pickingMesh = new THREE.Object3D();
 	            _this.addToPicking(_this._pickingMesh);
 	          }
 	
@@ -11236,12 +11283,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	          height = _geoGeo2['default'].metresToWorld(options.style.height, options.pointScale);
 	        }
 	
-	        var colour = new _three2['default'].Color();
+	        var colour = new THREE.Color();
 	        colour.set(options.style.color);
 	
 	        // Light and dark colours used for poor-mans AO gradient on object sides
-	        var light = new _three2['default'].Color(0xffffff);
+	        var light = new THREE.Color(0xffffff);
-	        var shadow = new _three2['default'].Color(0x666666);
+	        var shadow = new THREE.Color(0x666666);
 	
 	        var flat = true;
 	
@@ -11328,7 +11375,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          };
 	
 	          if (options.style.outline) {
-	            var outlineColour = new _three2['default'].Color();
+	            var outlineColour = new THREE.Color();
 	            outlineColour.set(options.style.outlineColor || 0x000000);
 	
 	            outlineAttributes.push(PolygonLayer.Set2DOutline(_coordinates, outlineColour));
@@ -11410,29 +11457,29 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'SetMesh',
 	    value: function SetMesh(attributes, attributeLengths, flat, style, options, skybox) {
-	      var geometry = new _three2['default'].BufferGeometry();
+	      var geometry = new THREE.BufferGeometry();
 	
 	      for (var key in attributes) {
-	        geometry.addAttribute(key.slice(0, -1), new _three2['default'].BufferAttribute(attributes[key], attributeLengths[key]));
+	        geometry.addAttribute(key.slice(0, -1), new THREE.BufferAttribute(attributes[key], attributeLengths[key]));
 	      }
 	
 	      geometry.computeBoundingBox();
 	
 	      var material;
-	      if (options.polygonMaterial && options.polygonMaterial instanceof _three2['default'].Material) {
+	      if (options.polygonMaterial && options.polygonMaterial instanceof THREE.Material) {
 	        material = options.polygonMaterial;
 	      } else if (!skybox) {
-	        material = new _three2['default'].MeshPhongMaterial({
+	        material = new THREE.MeshPhongMaterial({
-	          vertexColors: _three2['default'].VertexColors,
+	          vertexColors: THREE.VertexColors,
-	          side: _three2['default'].BackSide,
+	          side: THREE.BackSide,
 	          transparent: style.transparent,
 	          opacity: style.opacity,
 	          blending: style.blending
 	        });
 	      } else {
-	        material = new _three2['default'].MeshStandardMaterial({
+	        material = new THREE.MeshStandardMaterial({
-	          vertexColors: _three2['default'].VertexColors,
+	          vertexColors: THREE.VertexColors,
-	          side: _three2['default'].BackSide,
+	          side: THREE.BackSide,
 	          transparent: style.transparent,
 	          opacity: style.opacity,
 	          blending: style.blending
@@ -11449,7 +11496,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      if (typeof options.onPolygonMesh === 'function') {
 	        mesh = options.onPolygonMesh(geometry, material);
 	      } else {
-	        mesh = new _three2['default'].Mesh(geometry, material);
+	        mesh = new THREE.Mesh(geometry, material);
 	
 	        mesh.castShadow = true;
 	        mesh.receiveShadow = true;
@@ -11466,9 +11513,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	      if (options.interactive) {
 	        material = new _enginePickingMaterial2['default']();
-	        material.side = _three2['default'].BackSide;
+	        material.side = THREE.BackSide;
 	
-	        var pickingMesh = new _three2['default'].Mesh(geometry, material);
+	        var pickingMesh = new THREE.Mesh(geometry, material);
 	      }
 	
 	      return Promise.resolve({
@@ -11538,12 +11585,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	        pickingIds = new Float32Array(polygon.facesCount * 3);
 	      }
 	
-	      var pA = new _three2['default'].Vector3();
+	      var pA = new THREE.Vector3();
-	      var pB = new _three2['default'].Vector3();
+	      var pB = new THREE.Vector3();
-	      var pC = new _three2['default'].Vector3();
+	      var pC = new THREE.Vector3();
 	
-	      var cb = new _three2['default'].Vector3();
+	      var cb = new THREE.Vector3();
-	      var ab = new _three2['default'].Vector3();
+	      var ab = new THREE.Vector3();
 	
 	      var index;
 	
@@ -11695,9 +11742,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 	
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
+	
 	var _three = __webpack_require__(21);
 	
-	var _three2 = _interopRequireDefault(_three);
+	var THREE = _interopRequireWildcard(_three);
 	
 	var _PickingShader = __webpack_require__(44);
 	
@@ -11706,7 +11755,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	// FROM: https://github.com/brianxu/GPUPicker/blob/master/GPUPicker.js
 	
 	var PickingMaterial = function PickingMaterial() {
-	  _three2['default'].ShaderMaterial.call(this, {
+	  THREE.ShaderMaterial.call(this, {
 	    uniforms: {
 	      size: {
 	        type: 'f',
@@ -11725,7 +11774,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  this.linePadding = 2;
 	};
 	
-	PickingMaterial.prototype = Object.create(_three2['default'].ShaderMaterial.prototype);
+	PickingMaterial.prototype = Object.create(THREE.ShaderMaterial.prototype);
 	
 	PickingMaterial.prototype.constructor = PickingMaterial;
 	
@@ -11776,6 +11825,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 	
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
+	
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 	
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -11810,7 +11861,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _three = __webpack_require__(21);
 	
-	var _three2 = _interopRequireDefault(_three);
+	var THREE = _interopRequireWildcard(_three);
 	
 	var _geoGeo = __webpack_require__(1);
 	
@@ -11849,7 +11900,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        lineTransparent: false,
 	        lineColor: '#ffffff',
 	        lineWidth: 1,
-	        lineBlending: _three2['default'].NormalBlending
+	        lineBlending: THREE.NormalBlending
 	      }
 	    };
 	
@@ -11880,7 +11931,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          // Otherwise, assume another component will eventually add a mesh to
 	          // the picking scene
 	          if (_this.isOutput()) {
-	            _this._pickingMesh = new _three2['default'].Object3D();
+	            _this._pickingMesh = new THREE.Object3D();
 	            _this.addToPicking(_this._pickingMesh);
 	          }
 	
@@ -12090,7 +12141,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          height = _geoGeo2['default'].metresToWorld(options.style.lineHeight, options.pointScale);
 	        }
 	
-	        var colour = new _three2['default'].Color();
+	        var colour = new THREE.Color();
 	        colour.set(options.style.lineColor);
 	
 	        var flat = true;
@@ -12139,20 +12190,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'SetMesh',
 	    value: function SetMesh(attributes, attributeLengths, flat, style, options) {
-	      var geometry = new _three2['default'].BufferGeometry();
+	      var geometry = new THREE.BufferGeometry();
 	
 	      for (var key in attributes) {
-	        geometry.addAttribute(key.slice(0, -1), new _three2['default'].BufferAttribute(attributes[key], attributeLengths[key]));
+	        geometry.addAttribute(key.slice(0, -1), new THREE.BufferAttribute(attributes[key], attributeLengths[key]));
 	      }
 	
 	      geometry.computeBoundingBox();
 	
 	      var material;
-	      if (options.polylineMaterial && options.polylineMaterial instanceof _three2['default'].Material) {
+	      if (options.polylineMaterial && options.polylineMaterial instanceof THREE.Material) {
 	        material = options.polylineMaterial;
 	      } else {
-	        material = new _three2['default'].LineBasicMaterial({
+	        material = new THREE.LineBasicMaterial({
-	          vertexColors: _three2['default'].VertexColors,
+	          vertexColors: THREE.VertexColors,
 	          linewidth: style.lineWidth,
 	          transparent: style.lineTransparent,
 	          opacity: style.lineOpacity,
@@ -12166,7 +12217,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      if (typeof options.onPolylineMesh === 'function') {
 	        mesh = options.onPolylineMesh(geometry, material);
 	      } else {
-	        mesh = new _three2['default'].LineSegments(geometry, material);
+	        mesh = new THREE.LineSegments(geometry, material);
 	
 	        if (style.lineRenderOrder !== undefined) {
 	          material.depthWrite = false;
@@ -12184,7 +12235,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        // Make the line wider / easier to pick
 	        material.linewidth = style.lineWidth + material.linePadding;
 	
-	        var pickingMesh = new _three2['default'].LineSegments(geometry, material);
+	        var pickingMesh = new THREE.LineSegments(geometry, material);
 	      }
 	
 	      return Promise.resolve({
@@ -12279,6 +12330,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 	
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
+	
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 	
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -12319,7 +12372,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	var _three = __webpack_require__(21);
 	
-	var _three2 = _interopRequireDefault(_three);
+	var THREE = _interopRequireWildcard(_three);
 	
 	var _geoGeo = __webpack_require__(1);
 	
@@ -12389,7 +12442,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          // Otherwise, assume another component will eventually add a mesh to
 	          // the picking scene
 	          if (_this.isOutput()) {
-	            _this._pickingMesh = new _three2['default'].Object3D();
+	            _this._pickingMesh = new THREE.Object3D();
 	            _this.addToPicking(_this._pickingMesh);
 	          }
 	
@@ -12596,29 +12649,29 @@ return /******/ (function(modules) { // webpackBootstrap
 	          height = _geoGeo2['default'].metresToWorld(options.style.pointHeight, options.pointScale);
 	        }
 	
-	        var colour = new _three2['default'].Color();
+	        var colour = new THREE.Color();
 	        colour.set(options.style.pointColor);
 	
 	        // Use default geometry if none has been provided or the provided geometry
 	        // isn't valid
-	        if (!options.pointGeometry || !options.pointGeometry instanceof _three2['default'].Geometry || !options.pointGeometry instanceof _three2['default'].BufferGeometry) {
+	        if (!options.pointGeometry || !options.pointGeometry instanceof THREE.Geometry || !options.pointGeometry instanceof THREE.BufferGeometry) {
 	          // Debug geometry for points is a thin bar
 	          //
 	          // TODO: Allow point geometry to be customised / overridden
 	          var geometryWidth = _geoGeo2['default'].metresToWorld(25, options.pointScale);
 	          var geometryHeight = _geoGeo2['default'].metresToWorld(200, options.pointScale);
-	          var _geometry = new _three2['default'].BoxGeometry(geometryWidth, geometryHeight, geometryWidth);
+	          var _geometry = new THREE.BoxGeometry(geometryWidth, geometryHeight, geometryWidth);
 	
 	          // Shift geometry up so it sits on the ground
 	          _geometry.translate(0, geometryHeight * 0.5, 0);
 	
 	          // Pull attributes out of debug geometry
-	          geometry = new _three2['default'].BufferGeometry().fromGeometry(_geometry);
+	          geometry = new THREE.BufferGeometry().fromGeometry(_geometry);
 	        } else {
-	          if (options.geometry instanceof _three2['default'].BufferGeometry) {
+	          if (options.geometry instanceof THREE.BufferGeometry) {
 	            geometry = options.pointGeometry;
 	          } else {
-	            geometry = new _three2['default'].BufferGeometry().fromGeometry(options.pointGeometry);
+	            geometry = new THREE.BufferGeometry().fromGeometry(options.pointGeometry);
 	          }
 	        }
 	
@@ -12663,28 +12716,28 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'SetMesh',
 	    value: function SetMesh(attributes, attributeLengths, flat, style, options, skybox) {
-	      var geometry = new _three2['default'].BufferGeometry();
+	      var geometry = new THREE.BufferGeometry();
 	
 	      for (var key in attributes) {
-	        geometry.addAttribute(key.slice(0, -1), new _three2['default'].BufferAttribute(attributes[key], attributeLengths[key]));
+	        geometry.addAttribute(key.slice(0, -1), new THREE.BufferAttribute(attributes[key], attributeLengths[key]));
 	      }
 	
 	      geometry.computeBoundingBox();
 	
 	      var material;
-	      if (options.pointMaterial && options.pointMaterial instanceof _three2['default'].Material) {
+	      if (options.pointMaterial && options.pointMaterial instanceof THREE.Material) {
 	        material = options.pointMaterial;
 	      } else if (!skybox) {
-	        material = new _three2['default'].MeshPhongMaterial({
+	        material = new THREE.MeshPhongMaterial({
-	          vertexColors: _three2['default'].VertexColors,
+	          vertexColors: THREE.VertexColors,
 	          // side: THREE.BackSide,
 	          transparent: style.transparent,
 	          opacity: style.opacity,
 	          blending: style.blending
 	        });
 	      } else {
-	        material = new _three2['default'].MeshStandardMaterial({
+	        material = new THREE.MeshStandardMaterial({
-	          vertexColors: _three2['default'].VertexColors,
+	          vertexColors: THREE.VertexColors,
 	          // side: THREE.BackSide,
 	          transparent: style.transparent,
 	          opacity: style.opacity,
@@ -12702,7 +12755,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      if (typeof options.onPolygonMesh === 'function') {
 	        mesh = options.onPolygonMesh(geometry, material);
 	      } else {
-	        mesh = new _three2['default'].Mesh(geometry, material);
+	        mesh = new THREE.Mesh(geometry, material);
 	
 	        mesh.castShadow = true;
 	        mesh.receiveShadow = true;
@@ -12715,9 +12768,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 	      if (options.interactive) {
 	        material = new _enginePickingMaterial2['default']();
-	        material.side = _three2['default'].BackSide;
+	        material.side = THREE.BackSide;
 	
-	        var pickingMesh = new _three2['default'].Mesh(geometry, material);
+	        var pickingMesh = new THREE.Mesh(geometry, material);
 	      }
 	
 	      return Promise.resolve({

examples/all-the-things/main.js

@@ -17,8 +17,8 @@ VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}
   attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
 }).addTo(world);
 
-// Buildings and roads from Mapzen (polygons and linestrings)
+// Buildings and roads from Tilezen (polygons and linestrings)
-var topoJSONTileLayer = VIZI.topoJSONTileLayer('https://tile.mapzen.com/mapzen/vector/v1/buildings,roads/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
+VIZI.mvtTileLayer('https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=-P8vfoBlQHWiTrDduihXhA', {
   interactive: false,
   style: function(feature) {
     var height;
@@ -39,6 +39,7 @@ var topoJSONTileLayer = VIZI.topoJSONTileLayer('https://tile.mapzen.com/mapzen/v
       lineRenderOrder: 2
     };
   },
+  layers: ['buildings', 'roads'],
   filter: function(feature) {
     // Don't show points
     return feature.geometry.type !== 'Point';

examples/basic-geojson/main.js

@@ -16,8 +16,8 @@ VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}
   console.log('Added image tile layer to world');
 });
 
-// Buildings from Mapzen
+// Buildings from Tilezen
-VIZI.topoJSONTileLayer('https://tile.mapzen.com/mapzen/vector/v1/buildings/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
+VIZI.geoJSONTileLayer('https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.json?api_key=-P8vfoBlQHWiTrDduihXhA', {
   interactive: false,
   style: function(feature) {
     var height;
@@ -32,6 +32,7 @@ VIZI.topoJSONTileLayer('https://tile.mapzen.com/mapzen/vector/v1/buildings/{z}/{
       height: height
     };
   },
+  layers: ['buildings'],
   filter: function(feature) {
     // Don't show points
     return feature.geometry.type !== 'Point';

examples/basic-mvt/index.html

@@ -0,0 +1,18 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
+  <title>Basic ViziCities Example</title>
+  <link rel="stylesheet" href="main.css">
+  <link rel="stylesheet" href="../../dist/vizicities.css">
+</head>
+<body>
+  <div id="world"></div>
+
+  <script src="../vendor/three.min.js"></script>
+  <script src="../vendor/TweenMax.min.js"></script>
+  <script src="../../dist/vizicities.min.js"></script>
+
+  <script src="main.js"></script>
+</body>
+</html>

examples/basic-mvt/main.js

@@ -0,0 +1,43 @@
+// Manhattan
+var coords = [40.739940, -73.988801];
+
+var world = VIZI.world('world', {
+  skybox: false,
+  postProcessing: false
+}).setView(coords);
+
+// Add controls
+VIZI.Controls.orbit().addTo(world);
+
+// CartoDB basemap
+VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
+  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
+}).addTo(world).then(function() {
+  console.log('Added image tile layer to world');
+});
+
+// Buildings from Tilezen
+VIZI.mvtTileLayer('https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=-P8vfoBlQHWiTrDduihXhA', {
+  interactive: false,
+  style: function(feature) {
+    var height;
+
+    if (feature.properties.height) {
+      height = feature.properties.height;
+    } else {
+      height = 10 + Math.random() * 10;
+    }
+
+    return {
+      height: height
+    };
+  },
+  layers: ['buildings'],
+  filter: function(feature) {
+    // Don't show points
+    return feature.geometry.type !== 'Point';
+  },
+  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://whosonfirst.mapzen.com#License">Who\'s On First</a>.'
+}).addTo(world).then(function() {
+  console.log('Added MVT layer to world');
+});

examples/colour-by-height/main.js

@@ -17,8 +17,8 @@ VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}
 // Chroma scale for height-based colours
 var colourScale = chroma.scale('YlOrBr').domain([0,200]);
 
-// Buildings from Mapzen
+// Buildings from Tilezen
-VIZI.topoJSONTileLayer('https://tile.mapzen.com/mapzen/vector/v1/buildings/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
+VIZI.geoJSONTileLayer('https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.json?api_key=-P8vfoBlQHWiTrDduihXhA', {
   interactive: false,
   style: function(feature) {
     var height;
@@ -36,6 +36,7 @@ VIZI.topoJSONTileLayer('https://tile.mapzen.com/mapzen/vector/v1/buildings/{z}/{
       height: height
     };
   },
+  layers: ['buildings'],
   filter: function(feature) {
     // Don't show points
     return feature.geometry.type !== 'Point';

examples/geojson/main.js

@@ -14,8 +14,8 @@ VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}
   attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
 }).addTo(world);
 
-// Mapzen GeoJSON tile including points, linestrings and polygons
+// Tilezen GeoJSON tile including points, linestrings and polygons
-VIZI.geoJSONLayer('https://tile.mapzen.com/mapzen/vector/v1/roads,pois,buildings/14/4824/6159.json', {
+VIZI.geoJSONLayer('https://tile.nextzen.org/tilezen/vector/v1/all/14/4824/6159.json?api_key=-P8vfoBlQHWiTrDduihXhA', {
   output: true,
   style: {
     color: '#ff0000',

examples/web-workers-all-the-things/main.js

@@ -21,8 +21,8 @@ world.createWorkers(7).then(function() {
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
   }).addTo(world);
 
-  // Buildings and roads from Mapzen (polygons and linestrings)
+  // Buildings and roads from Tilezen (polygons and linestrings)
-  var topoJSONTileLayer = VIZI.topoJSONTileLayer('https://tile.mapzen.com/mapzen/vector/v1/buildings,roads/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
+  VIZI.mvtTileLayer('https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=-P8vfoBlQHWiTrDduihXhA', {
     workers: true,
     interactive: false,
     style: function(feature) {
@@ -44,6 +44,7 @@ world.createWorkers(7).then(function() {
         lineRenderOrder: 2
       };
     },
+    layers: ['buildings', 'roads'],
     filter: function(feature) {
       // Don't show points
       return feature.geometry.type !== 'Point';

examples/web-workers-basic-geojson/main.css

@@ -0,0 +1,4 @@
+* { margin: 0; padding: 0; }
+html, body { height: 100%; overflow: hidden;}
+
+#world { height: 100%; }

examples/web-workers-basic-geojson/main.js

@@ -20,8 +20,8 @@ world.createWorkers(7).then(function() {
     console.log('Added image tile layer to world');
   });;
 
-  // Buildings from Mapzen
+  // Buildings from Tilezen
-  VIZI.topoJSONTileLayer('https://tile.mapzen.com/mapzen/vector/v1/buildings/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
+  VIZI.geoJSONTileLayer('https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.json?api_key=-P8vfoBlQHWiTrDduihXhA', {
     workers: true,
     interactive: false,
     style: function(feature) {
@@ -37,6 +37,7 @@ world.createWorkers(7).then(function() {
         height: height
       };
     },
+    layers: ['buildings'],
     filter: function(feature) {
       // Don't show points
       return feature.geometry.type !== 'Point';

examples/web-workers-basic-mvt/index.html

@@ -0,0 +1,18 @@
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
+  <title>Web Workers Basic ViziCities Example</title>
+  <link rel="stylesheet" href="main.css">
+  <link rel="stylesheet" href="../../dist/vizicities.css">
+</head>
+<body>
+  <div id="world"></div>
+
+  <script src="../vendor/three.min.js"></script>
+  <script src="../vendor/TweenMax.min.js"></script>
+  <script src="../../dist/vizicities.min.js"></script>
+
+  <script src="main.js"></script>
+</body>
+</html>

examples/web-workers-basic-mvt/main.css

@@ -0,0 +1,4 @@
+* { margin: 0; padding: 0; }
+html, body { height: 100%; overflow: hidden;}
+
+#world { height: 100%; }

examples/web-workers-basic-mvt/main.js

@@ -0,0 +1,50 @@
+// Manhattan
+var coords = [40.739940, -73.988801];
+
+var world = VIZI.world('world', {
+  skybox: false,
+  postProcessing: false
+}).setView(coords);
+
+// Add controls
+VIZI.Controls.orbit().addTo(world);
+
+// Leave a single CPU for the main browser thread
+world.createWorkers(7).then(function() {
+  console.log('Workers ready');
+
+  // CartoDB basemap
+  VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
+  }).addTo(world).then(function() {
+    console.log('Added image tile layer to world');
+  });
+
+  // Buildings from Mapzen
+  VIZI.mvtTileLayer('https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=-P8vfoBlQHWiTrDduihXhA', {
+    workers: true,
+    interactive: false,
+    style: function(feature) {
+      var height;
+
+      if (feature.properties.height) {
+        height = feature.properties.height;
+      } else {
+        height = 10 + Math.random() * 10;
+      }
+
+      return {
+        height: height
+      };
+    },
+    layers: ['buildings'],
+    // TODO: Work out why this isn't filtering out points
+    filter: function(feature) {
+      // Don't show points
+      return feature.geometry.type !== 'Point';
+    },
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://whosonfirst.mapzen.com#License">Who\'s On First</a>.'
+  }).addTo(world).then(function() {
+    console.log('Added MVT layer to world');
+  });
+});

examples/web-workers-basic-mvt/vizicities-worker.js

@@ -0,0 +1,61 @@
+importScripts('../vendor/three.min.js');
+
+// Special version of ViziCities without controls (no DOM errors)
+importScripts('../../dist/vizicities-worker.min.js');
+
+const DEBUG = false;
+
+if (DEBUG) { console.log('Worker started', Date.now()); }
+
+// Send startup message to main thread
+postMessage({
+  type: 'startup',
+  payload: Date.now()
+});
+
+// Recieve message from main thread
+onmessage = function(event) {
+  if (!event.data.method) {
+    postMessage({
+      type: 'error',
+      payload: 'No method provided'
+    });
+
+    return;
+  }
+
+  var time = Date.now();
+  if (DEBUG) { console.log('Message received from main thread', time, event.data); }
+  // if (DEBUG) console.log('Time to receive message', time - event.data);
+
+  // Run method
+  // if (!methods[event.data.method]) {
+  //   postMessage({
+  //     type: 'error',
+  //     payload: 'Method not found'
+  //   });
+
+  //   return;
+  // }
+
+  var methods = event.data.method.split('.');
+
+  var _method = VIZI[methods[0]];
+
+  if (methods.length > 1) {
+    for (var i = 1; i < methods.length; i++) {
+      _method = _method[methods[i]];
+    }
+  }
+
+  // Call method with given arguments
+  _method.apply(this, event.data.args).then(function(result) {
+    if (DEBUG) { console.log('Message sent from worker', Date.now()); }
+
+    // Return results
+    postMessage({
+      type: 'result',
+      payload: result.data
+    }, result.transferrables);
+  });
+};

examples/web-workers-geojson/main.js

@@ -18,8 +18,8 @@ world.createWorkers(7).then(function() {
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
   }).addTo(world);
 
-  // Mapzen GeoJSON tile including points, linestrings and polygons
+  // Tilezen GeoJSON tile including points, linestrings and polygons
-  VIZI.geoJSONWorkerLayer('https://tile.mapzen.com/mapzen/vector/v1/roads,pois,buildings/14/4824/6159.json', {
+  VIZI.geoJSONLayer('https://tile.nextzen.org/tilezen/vector/v1/all/14/4824/6159.json?api_key=-P8vfoBlQHWiTrDduihXhA', {
     output: true,
     style: {
       color: '#ff0000',

examples/web-workers-outlines/main.js

@@ -20,8 +20,8 @@ world.createWorkers(7).then(function() {
     console.log('Added image tile layer to world');
   });
 
-  // Buildings from Mapzen
+  // Buildings from Tilezen
-  VIZI.topoJSONTileLayer('https://tile.mapzen.com/mapzen/vector/v1/buildings/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
+  VIZI.geoJSONTileLayer('https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.json?api_key=-P8vfoBlQHWiTrDduihXhA', {
     workers: true,
     interactive: false,
     maxLOD: 17,
@@ -38,6 +38,7 @@ world.createWorkers(7).then(function() {
         // outlineWidth: 2
       }
     },
+    layers: ['buildings'],
     filter: function(feature) {
       // Don't show points
       return feature.geometry.type !== 'Point';

package.json

@@ -80,6 +80,7 @@
     ]
   },
   "dependencies": {
+    "@mapbox/vector-tile": "^1.3.1",
     "earcut": "^2.0.8",
     "eventemitter3": "^1.1.1",
     "geojson-merge": "^0.1.0",
@@ -87,11 +88,12 @@
     "lodash.assign": "^4.0.2",
     "lodash.throttle": "^4.0.0",
     "lru-cache": "^4.0.0",
+    "pbf": "^3.1.0",
     "promise-polyfill": "^6.0.2",
     "reqwest": "^2.0.5",
     "shortid": "^2.2.6",
     "text-encoding": "^0.6.1",
-    "three": "^0.74.0",
+    "three": "^0.101.1",
     "topojson": "^1.6.24",
     "xhr2": "^0.1.3"
   }

src/controls/Controls.Orbit.js

@@ -1,5 +1,5 @@
 import EventEmitter from 'eventemitter3';
-import THREE from 'three';
+import * as THREE from 'three';
 import OrbitControls from '../vendor/OrbitControls';
 import TweenLite from 'TweenLite';
 

src/engine/Camera.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 // This can only be accessed from Engine.camera if you want to reference the
 // same scene in multiple places

src/engine/DOMRenderer2D.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import {CSS2DRenderer} from '../vendor/CSS2DRenderer';
 import DOMScene2D from './DOMScene2D';
 

src/engine/DOMRenderer3D.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import {CSS3DRenderer} from '../vendor/CSS3DRenderer';
 import DOMScene3D from './DOMScene3D';
 

src/engine/DOMScene2D.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 // This can be imported from anywhere and will still reference the same scene,
 // though there is a helper reference in Engine.scene

src/engine/DOMScene3D.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 // This can be imported from anywhere and will still reference the same scene,
 // though there is a helper reference in Engine.scene

src/engine/EffectComposer.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import EffectComposer from '../vendor/EffectComposer';
 
 export default function(renderer, container) {

src/engine/Engine.js

@@ -1,5 +1,5 @@
 import EventEmitter from 'eventemitter3';
-import THREE from 'three';
+import * as THREE from 'three';
 import Scene from './Scene';
 import DOMScene3D from './DOMScene3D';
 import DOMScene2D from './DOMScene2D';

src/engine/Picking.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import {point as Point} from '../geo/Point';
 import PickingScene from './PickingScene';
 import throttle from 'lodash.throttle';

src/engine/PickingMaterial.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import PickingShader from './PickingShader';
 
 // FROM: https://github.com/brianxu/GPUPicker/blob/master/GPUPicker.js

src/engine/PickingScene.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 // This can be imported from anywhere and will still reference the same scene,
 // though there is a helper reference in Engine.pickingScene

src/engine/Renderer.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import Scene from './Scene';
 
 // This can only be accessed from Engine.renderer if you want to reference the

src/engine/Scene.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 // This can be imported from anywhere and will still reference the same scene,
 // though there is a helper reference in Engine.scene

src/geo/Geo.js

@@ -23,7 +23,7 @@ Geo.ECC2 = 0.081819191 * 0.081819191;
 //
 // A multiplier of 0.1 would mean a 1:0.1 mapping between WebGL and EPSG:3857
 // coordinates (1 EPSG:3857 metre === 0.1 WebGL units)
-Geo.multiplier = 0.1;
+Geo.multiplier = 1;
 
 Geo.project = function(latlon) {
   var d = Math.PI / 180;

src/layer/GeoJSONLayer.js

@@ -23,6 +23,7 @@ class GeoJSONLayer extends LayerGroup {
       interactive: false,
       topojson: false,
       filter: null,
+      layers: null,
       onEachFeature: null,
       polygonMaterial: null,
       onPolygonMesh: null,
@@ -99,10 +100,16 @@ class GeoJSONLayer extends LayerGroup {
   // worker script at a later stage
   _processData(data) {
     return new Promise((resolve) => {
+      var layers = [];
+
+      if (this._options.layers) {
+        layers = this._options.layers;
+      }
+
       // Collects features into a single FeatureCollection
       //
       // Also converts TopoJSON to GeoJSON if instructed
-      this._geojson = GeoJSON.collectFeatures(data, this._options.topojson);
+      this._geojson = GeoJSON.collectFeatures(data, layers, this._options.topojson);
 
       // TODO: Check that GeoJSON is valid / usable
 

src/layer/GeoJSONWorkerLayer.js

@@ -75,10 +75,34 @@ class GeoJSONWorkerLayer extends Layer {
       var geojson = _geojson;
       var transferrables = [];
 
+      var layers = [];
+
+      if (this._options.layers) {
+        layers = this._options.layers;
+      }
+
+      // TODO: Allow filter method to be run here
       if (typeof geojson !== 'string') {
-        this._geojson = geojson = Buffer.stringToUint8Array(JSON.stringify(geojson));
+        // TODO: De-dupe with non-object processing in next section
+        var fc = GeoJSON.collectFeatures(geojson, layers, this._options.topojson);
+        var features = fc.features;
+
+        // Run filter, if provided
+        if (this._options.filter) {
+          fc.features = features.filter(this._options.filter);
+        }
+
+        if (this._options.onEachFeature) {
+          var feature;
+          for (var i = 0; i < features.length; i++) {
+            feature = features[i];
+            this._options.onEachFeature(feature);
+          };
+        }
+
+        this._geojson = geojson = Buffer.stringToUint8Array(JSON.stringify(fc));
         transferrables.push(geojson.buffer);
-        this._execWorker(geojson, this._options.topojson, this._world._originPoint, style, this._options.interactive, pointGeometry, transferrables).then(() => {
+        this._execWorker(geojson, this._options.topojson, this._options.headers, this._world._originPoint, style, this._options.interactive, pointGeometry, transferrables).then(() => {
           resolve();
         }).catch(reject);
       } else if (typeof this._options.filter === 'function' || typeof this._options.onEachFeature === 'function') {
@@ -88,7 +112,7 @@ class GeoJSONWorkerLayer extends Layer {
           //   return;
           // }
 
-          var fc = GeoJSON.collectFeatures(res, this._options.topojson);
+          var fc = GeoJSON.collectFeatures(res, layers, this._options.topojson);
           var features = fc.features;
 
           // Run filter, if provided
@@ -571,10 +595,14 @@ class GeoJSONWorkerLayer extends Layer {
   static Process(geojson, topojson, headers, originPoint, _style, _properties, _pointGeometry) {
     return new Promise((resolve, reject) => {
       GeoJSONWorkerLayer.ProcessGeoJSON(geojson, headers).then((res) => {
+        var geojson = res;
+
+        if (!geojson.features) {
           // Collects features into a single FeatureCollection
           //
           // Also converts TopoJSON to GeoJSON if instructed
-        var geojson = GeoJSON.collectFeatures(res, topojson);
+          geojson = GeoJSON.collectFeatures(geojson, topojson);
+        }
 
         // TODO: Check that GeoJSON is valid / usable
 
@@ -697,6 +725,11 @@ class GeoJSONWorkerLayer extends Layer {
           }
 
           if (geometry.type === 'Point' || geometry.type === 'MultiPoint') {
+            if (!pointGeometry) {
+              console.warn('Skipping point geometry as no function provided');
+              continue;
+            }
+
             coordinates = (PointLayer.isSingle(coordinates)) ? [coordinates] : coordinates;
 
             var converted = coordinates.map(coordinate => {

src/layer/Layer.js

@@ -1,7 +1,7 @@
 import EventEmitter from 'eventemitter3';
 import extend from 'lodash.assign';
 import shortid from 'shortid';
-import THREE from 'three';
+import * as THREE from 'three';
 import Scene from '../engine/Scene';
 import {CSS3DObject} from '../vendor/CSS3DRenderer';
 import {CSS2DObject} from '../vendor/CSS2DRenderer';

src/layer/environment/EnvironmentLayer.js

@@ -1,6 +1,6 @@
 import Layer from '../Layer';
 import extend from 'lodash.assign';
-import THREE from 'three';
+import * as THREE from 'three';
 import Skybox from './Skybox';
 
 // TODO: Make sure nothing is left behind in the heap after calling destroy()

src/layer/environment/Sky.js

@@ -17,7 +17,7 @@
  * Three.js integration by zz85 http://twitter.com/blurspline
 */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 THREE.ShaderLib[ 'sky' ] = {
 

src/layer/environment/Skybox.js

@@ -1,6 +1,7 @@
-import THREE from 'three';
+import * as THREE from 'three';
 import Sky from './Sky';
 import throttle from 'lodash.throttle';
+import Geo from '../../geo/Geo';
 
 // TODO: Make sure nothing is left behind in the heap after calling destroy()
 
@@ -29,7 +30,7 @@ class Skybox {
     this._light = light;
 
     this._settings = {
-      distance: 38000,
+      distance: 38000 * Geo.multiplier,
       turbidity: 10,
       reileigh: 2,
       mieCoefficient: 0.005,
@@ -77,7 +78,7 @@ class Skybox {
     // this._sunSphere.visible = true;
 
     var skyboxUniforms = {
-      cubemap: { type: 't', value: cubeTarget }
+      cubemap: { type: 't', value: cubeTarget.texture }
     };
 
     var skyboxMat = new THREE.ShaderMaterial({
@@ -138,11 +139,11 @@ class Skybox {
     this._updateUniforms();
 
     // TODO: Only do this when the cubemap has actually changed
-    this._cubeCamera.updateCubeMap(this._world._engine._renderer, this._skyScene);
+    this._cubeCamera.update(this._world._engine._renderer, this._skyScene);
   }
 
   getRenderTarget() {
-    return this._cubeCamera.renderTarget;
+    return this._cubeCamera.renderTarget.texture;
   }
 
   setInclination(inclination) {

src/layer/geometry/PointLayer.js

@@ -24,7 +24,7 @@
 
 import Layer from '../Layer';
 import extend from 'lodash.assign';
-import THREE from 'three';
+import * as THREE from 'three';
 import Geo from '../../geo/Geo';
 import {latLon as LatLon} from '../../geo/LatLon';
 import {point as Point} from '../../geo/Point';

src/layer/geometry/PolygonLayer.js

@@ -16,7 +16,7 @@
 
 import Layer from '../Layer';
 import extend from 'lodash.assign';
-import THREE from 'three';
+import * as THREE from 'three';
 import Geo from '../../geo/Geo';
 import {latLon as LatLon} from '../../geo/LatLon';
 import {point as Point} from '../../geo/Point';

src/layer/geometry/PolylineLayer.js

@@ -18,7 +18,7 @@
 
 import Layer from '../Layer';
 import extend from 'lodash.assign';
-import THREE from 'three';
+import * as THREE from 'three';
 import Geo from '../../geo/Geo';
 import {latLon as LatLon} from '../../geo/LatLon';
 import {point as Point} from '../../geo/Point';

src/layer/tile/GeoJSONTile.js

@@ -2,7 +2,7 @@ import Tile from './Tile';
 import {geoJSONLayer as GeoJSONLayer} from '../GeoJSONLayer';
 import {geoJSONWorkerLayer as GeoJSONWorkerLayer} from '../GeoJSONWorkerLayer';
 import BoxHelper from '../../vendor/BoxHelper';
-import THREE from 'three';
+import * as THREE from 'three';
 import reqwest from 'reqwest';
 import {point as Point} from '../../geo/Point';
 import {latLon as LatLon} from '../../geo/LatLon';
@@ -85,13 +85,13 @@ class GeoJSONTile extends Tile {
 
   // Request data for the tile
   requestTileAsync() {
-    // Making this asynchronous really speeds up the LOD framerate
-    setTimeout(() => {
     if (!this._mesh) {
       this._mesh = this._createMesh();
       // this._shadowCanvas = this._createShadowCanvas();
     }
 
+    // Making this asynchronous really speeds up the LOD framerate
+    setTimeout(() => {
       this._requestTile();
     }, 0);
   }
@@ -355,6 +355,16 @@ class GeoJSONTile extends Tile {
   }
 
   _abortRequest() {
+    if (this._ready) {
+      return;
+    }
+
+    if (this._options.fetch && this._controller) {
+      this._controller.abort();
+      this._aborted = true;
+      return;
+    }
+
     if ((!this._request && !this._options.workers) || this._ready) {
       return;
     }

src/layer/tile/GeoJSONTileLayer.js

@@ -2,7 +2,8 @@ import TileLayer from './TileLayer';
 import extend from 'lodash.assign';
 import GeoJSONTile from './GeoJSONTile';
 import throttle from 'lodash.throttle';
-import THREE from 'three';
+import * as THREE from 'three';
+import Geo from '../../geo/Geo';
 
 // TODO: Offer on-the-fly slicing of static, non-tile-based GeoJSON files into a
 // tile grid using geojson-vt
@@ -38,7 +39,7 @@ class GeoJSONTileLayer extends TileLayer {
   constructor(path, options) {
     var defaults = {
       maxLOD: 14,
-      distance: 30000,
+      distance: 100000 * Geo.multiplier,
       workers: false
     };
 

src/layer/tile/ImageTile.js

@@ -1,6 +1,6 @@
 import Tile from './Tile';
 import BoxHelper from '../../vendor/BoxHelper';
-import THREE from 'three';
+import * as THREE from 'three';
 
 // TODO: Make sure nothing is left behind in the heap after calling destroy()
 

src/layer/tile/ImageTileLayer.js

@@ -2,8 +2,9 @@ import TileLayer from './TileLayer';
 import ImageTile from './ImageTile';
 import ImageTileLayerBaseMaterial from './ImageTileLayerBaseMaterial';
 import throttle from 'lodash.throttle';
-import THREE from 'three';
+import * as THREE from 'three';
 import extend from 'lodash.assign';
+import Geo from '../../geo/Geo';
 
 // TODO: Make sure nothing is left behind in the heap after calling destroy()
 
@@ -59,7 +60,7 @@ import extend from 'lodash.assign';
 class ImageTileLayer extends TileLayer {
   constructor(path, options) {
     var defaults = {
-      distance: 300000
+      distance: 300000 * Geo.multiplier
     };
 
     options = extend({}, defaults, options);

src/layer/tile/ImageTileLayerBaseMaterial.js

@@ -1,4 +1,4 @@
-import THREE from 'three';
+import * as THREE from 'three';
 
 export default function(colour, skyboxTarget) {
   var canvas = document.createElement('canvas');

src/layer/tile/MVTTile.js

@@ -0,0 +1,95 @@
+import GeoJSONTile from './GeoJSONTile';
+import extend from 'lodash.assign';
+
+import Pbf from 'pbf';
+import {VectorTile} from '@mapbox/vector-tile';
+
+// TODO: Process raw MVT data rather than convert to GeoJSON
+// TODO: Make it so full request and processing cycle occurs within a worker
+
+class MVTTile extends GeoJSONTile {
+  constructor(quadcode, path, layer, options) {
+    var defaults = {
+      mvt: true,
+      fetch: true
+    };
+
+    options = extend({}, defaults, options);
+
+    super(quadcode, path, layer, options);
+
+    this._controller;
+    this._signal;
+  }
+
+  _requestTile() {
+    var urlParams = {
+      x: this._tile[0],
+      y: this._tile[1],
+      z: this._tile[2]
+    };
+
+    var url = this._getTileURL(urlParams);
+
+    if ('AbortController' in window) {
+      // Abort any previous requests
+      if (this._controller) {
+        this._controller.abort();
+      }
+
+      // Create a fresh abort controller so old ones don't cause problems
+      this._controller = new AbortController();
+      this._signal = this._controller.signal;
+    }
+
+    this._aborted = false;
+
+    fetch(url, {
+      signal: this._signal
+    }).then((response) => {
+      return response.arrayBuffer();
+    }).then((data) => {
+      var buffer = new Pbf(data);
+      var vt = new VectorTile(buffer);
+
+      var fc = {type: 'FeatureCollection', features: []};
+
+      var layers = [];
+
+      if (this._options.layers) {
+        layers = this._options.layers;
+      }
+
+      // Process defined layers (otherwise all)
+      for (var key in vt.layers) {
+        if (layers.length > 0) {
+          if (!layers.includes(key)) {
+            continue;
+          }
+        }
+
+        var layer = vt.layers[key];
+        for (var f = 0; f < layer.length; f++) {
+          var feature = layer.feature(f);
+          fc.features.push(feature.toGeoJSON(urlParams.x, urlParams.y, urlParams.z));
+        }
+      }
+
+      this._processTileData(fc);
+    }).catch((err) => {
+      if (err.name === 'AbortError') {
+        return;
+      }
+
+      console.error(err);
+    });
+  }
+}
+
+export default MVTTile;
+
+var noNew = function(path, options) {
+  return new MVTTile(path, options);
+};
+
+export {noNew as mvtTile};

src/layer/tile/MVTTileLayer.js

@@ -0,0 +1,34 @@
+import GeoJSONTileLayer from './GeoJSONTileLayer';
+import MVTTile from './MVTTile';
+import extend from 'lodash.assign';
+
+class MVTTileLayer extends GeoJSONTileLayer {
+  constructor(path, options) {
+    var defaults = {
+      mvt: true,
+      maxLOD: 16
+    };
+
+    options = extend({}, defaults, options);
+
+    super(path, options);
+  }
+
+  _createTile(quadcode, layer) {
+    var newOptions = extend({}, this.defaults, this._options, {
+      outputToScene: false
+    });
+
+    delete newOptions.attribution;
+
+    return new MVTTile(quadcode, this._path, layer, newOptions);
+  }
+}
+
+export default MVTTileLayer;
+
+var noNew = function(path, options) {
+  return new MVTTileLayer(path, options);
+};
+
+export {noNew as mvtTileLayer};

src/layer/tile/Tile.js

@@ -1,6 +1,6 @@
 import {point as Point} from '../../geo/Point';
 import {latLon as LatLon} from '../../geo/LatLon';
-import THREE from 'three';
+import * as THREE from 'three';
 
 // TODO: Make sure nothing is left behind in the heap after calling destroy()
 

src/layer/tile/TileLayer.js

@@ -1,7 +1,7 @@
 import Layer from '../Layer';
 import extend from 'lodash.assign';
 import TileCache from './TileCache';
-import THREE from 'three';
+import * as THREE from 'three';
 
 // TODO: Consider removing picking from TileLayer instances as there aren't
 // (m)any situations where it would be practical
@@ -73,7 +73,7 @@ class TileLayer extends Layer {
     this._tileList = [];
 
     // TODO: Work out why changing the minLOD causes loads of issues
-    this._minLOD = 3;
+    this._minLOD = this._options.minLOD || 3;
     this._maxLOD = this._options.maxLOD;
 
     this._frustum = new THREE.Frustum();

src/util/Buffer.js

@@ -2,7 +2,7 @@
  * BufferGeometry helpers
  */
 
-import THREE from 'three';
+import * as THREE from 'three';
 import {TextEncoder, TextDecoder} from 'text-encoding';
 
 var Buffer = (function() {

src/util/GeoJSON.js

@@ -2,7 +2,7 @@
  * GeoJSON helpers for handling data and generating objects
  */
 
-import THREE from 'three';
+import * as THREE from 'three';
 import * as topojson from 'topojson';
 import geojsonMerge from 'geojson-merge';
 import earcut from 'earcut';
@@ -38,14 +38,18 @@ var GeoJSON = (function() {
 
   // Attempts to merge together multiple GeoJSON Features or FeatureCollections
   // into a single FeatureCollection
-  var collectFeatures = function(data, _topojson) {
+  var collectFeatures = function(data, layers, _topojson) {
     var collections = [];
 
     if (_topojson) {
-      // TODO: Allow TopoJSON objects to be overridden as an option
-
       // If not overridden, merge all features from all objects
       for (var tk in data.objects) {
+        if (layers.length > 0) {
+          if (!layers.includes(tk)) {
+            continue;
+          }
+        }
+
         collections.push(topojson.feature(data, data.objects[tk]));
       }
 
@@ -58,6 +62,12 @@ var GeoJSON = (function() {
 
         // If not overridden, merge all features from all objects
         for (var gk in data) {
+          if (layers.length > 0) {
+            if (!layers.includes(gk)) {
+              continue;
+            }
+          }
+
           if (!data[gk].type) {
             continue;
           }

src/vendor/BoxHelper.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author mrdoob / http://mrdoob.com/

src/vendor/CSS2DRenderer.js

@@ -5,7 +5,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 var CSS2DObject = function ( element ) {
 
@@ -67,7 +67,7 @@ var CSS2DRenderer = function () {
 		if ( object instanceof CSS2DObject ) {
 
 			vector.setFromMatrixPosition( object.matrixWorld );
-			vector.applyProjection( viewProjectionMatrix );
+			vector.applyMatrix4( viewProjectionMatrix );
 
 			var element = object.element;
 			var style = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';

src/vendor/CSS3DRenderer.js

@@ -6,7 +6,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 var CSS3DObject = function ( element ) {
 

src/vendor/CopyShader.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/EffectComposer.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 import CopyShader from './CopyShader';
 import ShaderPass from './ShaderPass';
 import MaskPass, {ClearMaskPass} from './MaskPass';

src/vendor/FXAAShader.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/HorizontalTiltShiftShader.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/MaskPass.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/OrbitControls.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 import Hammer from 'hammerjs';
 
 /**

src/vendor/RenderPass.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vendor/ShaderPass.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/
@@ -54,7 +54,7 @@ ShaderPass.prototype = {
 
 		if ( this.uniforms[ this.textureID ] ) {
 
-			this.uniforms[ this.textureID ].value = readBuffer;
+			this.uniforms[ this.textureID ].value = readBuffer.texture;
 
 		}
 

src/vendor/VerticalTiltShiftShader.js

@@ -1,7 +1,7 @@
 // jscs:disable
 /* eslint-disable */
 
-import THREE from 'three';
+import * as THREE from 'three';
 
 /**
  * @author alteredq / http://alteredqualia.com/

src/vizicities.js

@@ -9,7 +9,9 @@ import EnvironmentLayer, {environmentLayer} from './layer/environment/Environmen
 import ImageTileLayer, {imageTileLayer} from './layer/tile/ImageTileLayer';
 import GeoJSONTileLayer, {geoJSONTileLayer} from './layer/tile/GeoJSONTileLayer';
 import TopoJSONTileLayer, {topoJSONTileLayer} from './layer/tile/TopoJSONTileLayer';
+import MVTTileLayer, {mvtTileLayer} from './layer/tile/MVTTileLayer';
 import GeoJSONTile, {geoJSONTile} from './layer/tile/GeoJSONTile';
+import MVTTile, {mvtTile} from './layer/tile/MVTTile';
 import GeoJSONLayer, {geoJSONLayer} from './layer/GeoJSONLayer';
 import TopoJSONLayer, {topoJSONLayer} from './layer/TopoJSONLayer';
 import GeoJSONWorkerLayer, {geoJSONWorkerLayer} from './layer/GeoJSONWorkerLayer';
@@ -43,8 +45,12 @@ const VIZI = {
   geoJSONTileLayer: geoJSONTileLayer,
   GeoJSONTile: GeoJSONTile,
   geoJSONTile: geoJSONTile,
+  MVTTile: MVTTile,
+  mvtTile: mvtTile,
   TopoJSONTileLayer: TopoJSONTileLayer,
   topoJSONTileLayer: topoJSONTileLayer,
+  MVTTileLayer: MVTTileLayer,
+  mvtTileLayer: mvtTileLayer,
   GeoJSONLayer: GeoJSONLayer,
   geoJSONLayer: geoJSONLayer,
   TopoJSONLayer: TopoJSONLayer,