Use Mapzen instead of openstreetmap.us tiles

The openstreetmap.us tile service will be shut down before the end of the
month.

examples/osm-vector-tiles.html

@@ -3,7 +3,9 @@ layout: example.html
 title: OSM Vector Tiles
 shortdesc: Using OpenStreetMap vector tiles.
 docs: >
-  A simple vector tiles map with OpenStreetMap vector tiles. **Note**: The tiles used in this example are not optimized for rendering - they clip tiles exactly at the tile boundary instead of adding a buffer, and use geographic coordinates instead of tile relative pixel coordinates in view projection.
+  A simple vector tiles map with Mapzen vector tiles. **Note**: TopoJSON vector tiles are not optimized for rendering - they might clip geometries exactly at the tile boundary instead of adding a buffer, and use geographic coordinates instead of tile relative pixel coordinates in view projection.
-tags: "vector, tiles, osm"
+tags: "vector, tiles, osm, mapzen"
+cloak:
+  vector-tiles-5eJz6JX: Your Mapzen API key from https://mapzen.com/developers
 ---
 <div id="map" class="map"></div>

examples/osm-vector-tiles.js

@@ -10,6 +10,11 @@ goog.require('ol.style.Style');
 goog.require('ol.tilegrid');
 
 
+var key = 'vector-tiles-5eJz6JX';
+
+var attribution = [new ol.Attribution({
+  html: '© OpenStreetMap contributors, Who’s On First, Natural Earth, and openstreetmapdata.com'
+})];
 var format = new ol.format.TopoJSON();
 var tileGrid = ol.tilegrid.createXYZ({maxZoom: 19});
 var roadStyleCache = {};
@@ -18,7 +23,6 @@ var roadColor = {
   'minor_road': '#ccb',
   'highway': '#f39'
 };
-var landuseStyleCache = {};
 var buildingStyle = new ol.style.Style({
   fill: new ol.style.Fill({
     color: '#666',
@@ -34,10 +38,10 @@ var map = new ol.Map({
   layers: [
     new ol.layer.VectorTile({
       source: new ol.source.VectorTile({
+        attributions: attribution,
         format: format,
         tileGrid: tileGrid,
-        url: 'http://{a-c}.tile.openstreetmap.us/' +
+        url: 'https://vector.mapzen.com/osm/water/{z}/{x}/{y}.topojson?api_key=' + key
-            'vectiles-water-areas/{z}/{x}/{y}.topojson'
       }),
       style: new ol.style.Style({
         fill: new ol.style.Fill({
@@ -47,10 +51,10 @@ var map = new ol.Map({
     }),
     new ol.layer.VectorTile({
       source: new ol.source.VectorTile({
+        attributions: attribution,
         format: format,
         tileGrid: tileGrid,
-        url: 'http://{a-c}.tile.openstreetmap.us/' +
+        url: 'https://vector.mapzen.com/osm/roads/{z}/{x}/{y}.topojson?api_key=' + key
-            'vectiles-highroad/{z}/{x}/{y}.topojson'
       }),
       style: function(feature) {
         var kind = feature.get('kind');
@@ -81,56 +85,14 @@ var map = new ol.Map({
     }),
     new ol.layer.VectorTile({
       source: new ol.source.VectorTile({
+        attributions: attribution,
         format: format,
         tileGrid: tileGrid,
-        url: 'http://{a-c}.tile.openstreetmap.us/' +
+        url: 'https://vector.mapzen.com/osm/buildings/{z}/{x}/{y}.topojson?api_key=' + key
-            'vectiles-buildings/{z}/{x}/{y}.topojson'
       }),
       style: function(f, resolution) {
         return (resolution < 10) ? buildingStyle : null;
       }
-    }),
-    new ol.layer.VectorTile({
-      source: new ol.source.VectorTile({
-        format: format,
-        overlaps: false,
-        tileGrid: tileGrid,
-        url: 'http://{a-c}.tile.openstreetmap.us/' +
-            'vectiles-land-usages/{z}/{x}/{y}.topojson'
-      }),
-      visible: false,
-      style: function(feature) {
-        var kind = feature.get('kind');
-        var styleKey = kind;
-        var style = landuseStyleCache[styleKey];
-        if (!style) {
-          var color, width;
-          color = {
-            'parking': '#ddd',
-            'industrial': '#aaa',
-            'urban area': '#aaa',
-            'park': '#76C759',
-            'school': '#DA10E7',
-            'garden': '#76C759',
-            'pitch': '#D58F8D',
-            'scrub': '#3E7D28',
-            'residential': '#4C9ED9'
-          }[kind];
-          width = kind == 'highway' ? 1.5 : 1;
-          style = new ol.style.Style({
-            stroke: new ol.style.Stroke({
-              color: color,
-              width: width
-            }),
-            fill: new ol.style.Fill({
-              color: color,
-              opacity: 0.5
-            })
-          });
-          landuseStyleCache[styleKey] = style;
-        }
-        return style;
-      }
     })
   ],
   target: 'map',