Make changes suggested during the review
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,17 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Advanced Mapbox vector tiles example
|
||||
shortdesc: Example of a Mapbox vector tiles map with custom tile grid.
|
||||
docs: >
|
||||
A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices. **Note**: No map will be visible when the access token has expired.
|
||||
tags: "mapbox, vector, tiles, mobile"
|
||||
resources:
|
||||
- resources/mapbox-streets-v6-style.js
|
||||
cloak:
|
||||
pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,73 @@
|
||||
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.proj');
|
||||
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');
|
||||
goog.require('ol.tilegrid.TileGrid');
|
||||
|
||||
|
||||
var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
|
||||
|
||||
// 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 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 = 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=' + key)
|
||||
.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({
|
||||
layers: [
|
||||
new ol.layer.VectorTile({
|
||||
preload: Infinity,
|
||||
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: new ol.tilegrid.TileGrid({
|
||||
extent: ol.proj.get('EPSG:3857').getExtent(),
|
||||
resolutions: resolutions
|
||||
}),
|
||||
tilePixelRatio: 16,
|
||||
tileUrlFunction: tileUrlFunction
|
||||
}),
|
||||
style: createMapboxStreetsV6Style()
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
minZoom: 1,
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
|
||||
// ol.style.Text are required for createMapboxStreetsV6Style()
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
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
|
||||
cloak:
|
||||
pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,42 +0,0 @@
|
||||
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');
|
||||
|
||||
|
||||
var key = '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=' + key
|
||||
}),
|
||||
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()
|
||||
@@ -3,7 +3,7 @@ template: example.html
|
||||
title: Mapbox vector tiles example
|
||||
shortdesc: Example of a Mapbox vector tiles map.
|
||||
docs: >
|
||||
A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices. **Note**: No map will be visible when the access token has expired.
|
||||
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
|
||||
|
||||
@@ -3,47 +3,19 @@ goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.format.MVT');
|
||||
goog.require('ol.layer.VectorTile');
|
||||
goog.require('ol.proj');
|
||||
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');
|
||||
goog.require('ol.tilegrid.TileGrid');
|
||||
|
||||
|
||||
var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
|
||||
|
||||
// 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 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 = 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=' + key)
|
||||
.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({
|
||||
layers: [
|
||||
new ol.layer.VectorTile({
|
||||
preload: Infinity,
|
||||
source: new ol.source.VectorTile({
|
||||
attributions: [new ol.Attribution({
|
||||
html: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
|
||||
@@ -51,12 +23,10 @@ var map = new ol.Map({
|
||||
'OpenStreetMap contributors</a>'
|
||||
})],
|
||||
format: new ol.format.MVT(),
|
||||
tileGrid: new ol.tilegrid.TileGrid({
|
||||
extent: ol.proj.get('EPSG:3857').getExtent(),
|
||||
resolutions: resolutions
|
||||
}),
|
||||
tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
|
||||
tilePixelRatio: 16,
|
||||
tileUrlFunction: tileUrlFunction
|
||||
url: 'http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
|
||||
'{z}/{x}/{y}.vector.pbf?access_token=' + key
|
||||
}),
|
||||
style: createMapboxStreetsV6Style()
|
||||
})
|
||||
@@ -64,7 +34,6 @@ var map = new ol.Map({
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
minZoom: 1,
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user