Additional tests, documentation and example

examples/mapbox-vector-tiles-simple.css

@@ -0,0 +1,3 @@
+.map {
+  background: #f8f4f0;
+}

examples/mapbox-vector-tiles-simple.html

@@ -0,0 +1,15 @@
+---
+template: example.html
+title: Simple Mapbox vector tiles example
+shortdesc: Example of a simple Mapbox vector tiles map.
+docs: >
+  A simple vector tiles map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
+tags: "simple, mapbox, vector, tiles"
+resources:
+  - resources/mapbox-streets-v6-style.js
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/mapbox-vector-tiles-simple.js

@@ -0,0 +1,44 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.MVT');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.source.VectorTile');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+goog.require('ol.style.Text');
+
+
+// Mapbox access token - request your own at http://mapbox.com
+var accessToken =
+    'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.VectorTile({
+      source: new ol.source.VectorTile({
+        attributions: [new ol.Attribution({
+          html: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
+              '© <a href="http://www.openstreetmap.org/copyright">' +
+              'OpenStreetMap contributors</a>'
+        })],
+        format: new ol.format.MVT(),
+        tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
+        tilePixelRatio: 16,
+        url: 'http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
+            '{z}/{x}/{y}.vector.pbf?access_token=' + accessToken
+      }),
+      style: createMapboxStreetsV6Style()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
+// ol.style.Text are required for createMapboxStreetsV6Style()

examples/mapbox-vector-tiles.html

@@ -3,7 +3,7 @@ template: example.html
 title: Mapbox vector tiles example
 shortdesc: Example of a Mapbox vector tiles map.
 docs: >
-  A simple vector tiles map.
+  A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
 tags: "simple, mapbox, vector, tiles"
 resources:
   - resources/mapbox-streets-v6-style.js

examples/mapbox-vector-tiles.js

@@ -13,21 +13,36 @@ goog.require('ol.style.Text');
 goog.require('ol.tilegrid.TileGrid');
 
 
-// Mapbox access token - request your own at http://mabobox.com
+// Mapbox access token - request your own at http://mapbox.com
 var accessToken =
     'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
 
-// For how many zoom levels do we want to use the same vector tile?
+// For how many zoom levels do we want to use the same vector tiles?
+// 1 means "use tiles from all zoom levels". 2 means "use the same tiles for 2
+// subsequent zoom levels".
 var reuseZoomLevels = 2;
-// Offset from web mercator zoom level 0
-var zOffset = 1;
 
+// Offset of loaded tiles from web mercator zoom level 0.
+// 0 means "At map zoom level 0, use tiles from zoom level 0". 1 means "At map
+// zoom level 0, use tiles from zoom level 1".
+var zoomOffset = 1;
+
+// Calculation of tile urls
 var resolutions = [];
-for (var z = zOffset / reuseZoomLevels; z <= 22 / reuseZoomLevels; ++z) {
+for (var z = zoomOffset / reuseZoomLevels; z <= 22 / reuseZoomLevels; ++z) {
   resolutions.push(156543.03392804097 / Math.pow(2, z * reuseZoomLevels));
 }
+function tileUrlFunction(tileCoord) {
+  return ('http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
+      '{z}/{x}/{y}.vector.pbf?access_token=' + accessToken)
+      .replace('{z}', String(tileCoord[0] * reuseZoomLevels + zoomOffset))
+      .replace('{x}', String(tileCoord[1]))
+      .replace('{y}', String(-tileCoord[2] - 1))
+      .replace('{a-d}', 'abcd'.substr(
+          ((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
+}
 
-var map  = new ol.Map({
+var map = new ol.Map({
   layers: [
     new ol.layer.VectorTile({
       preload: Infinity,
@@ -37,22 +52,13 @@ var map  = new ol.Map({
               '© <a href="http://www.openstreetmap.org/copyright">' +
               'OpenStreetMap contributors</a>'
         })],
-        rightHandedPolygons: true,
         format: new ol.format.MVT(),
         tileGrid: new ol.tilegrid.TileGrid({
           extent: ol.proj.get('EPSG:3857').getExtent(),
           resolutions: resolutions
         }),
         tilePixelRatio: 16,
-        tileUrlFunction: function(tileCoord) {
-          return ('http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
-              '{z}/{x}/{y}.vector.pbf?access_token=' + accessToken)
-              .replace('{z}', String(tileCoord[0] * reuseZoomLevels + zOffset))
-              .replace('{x}', String(tileCoord[1]))
-              .replace('{y}', String(-tileCoord[2] - 1))
-              .replace('{a-d}', 'abcd'.substr(
-                  ((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
-        }
+        tileUrlFunction: tileUrlFunction
       }),
       style: createMapboxStreetsV6Style()
     })
@@ -64,3 +70,6 @@ var map  = new ol.Map({
     zoom: 3
   })
 });
+
+// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
+// ol.style.Text are required for createMapboxStreetsV6Style()