diff --git a/examples/osm-vector-tiles.html b/examples/osm-vector-tiles.html index 0c565c5a9e..4abfab50ab 100644 --- a/examples/osm-vector-tiles.html +++ b/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. -tags: "vector, tiles, osm" + 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, mapzen" +cloak: + vector-tiles-5eJz6JX: Your Mapzen API key from https://mapzen.com/developers ---
diff --git a/examples/osm-vector-tiles.js b/examples/osm-vector-tiles.js index ed965ec7c7..729b56b956 100644 --- a/examples/osm-vector-tiles.js +++ b/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/' + - 'vectiles-water-areas/{z}/{x}/{y}.topojson' + url: 'https://vector.mapzen.com/osm/water/{z}/{x}/{y}.topojson?api_key=' + key }), 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/' + - 'vectiles-highroad/{z}/{x}/{y}.topojson' + url: 'https://vector.mapzen.com/osm/roads/{z}/{x}/{y}.topojson?api_key=' + key }), 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/' + - 'vectiles-buildings/{z}/{x}/{y}.topojson' + url: 'https://vector.mapzen.com/osm/buildings/{z}/{x}/{y}.topojson?api_key=' + key }), 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',