From 57822aa6ff8de3fbd69cb9deda36ff01c2d6d43b Mon Sep 17 00:00:00 2001 From: Marc Jansen Date: Mon, 23 Sep 2019 16:49:51 +0200 Subject: [PATCH] Update various examples to use the Mapbox v4-API --- examples/custom-interactions.html | 3 +++ examples/custom-interactions.js | 3 ++- examples/layer-extent.html | 3 +++ examples/layer-extent.js | 6 ++++-- examples/layer-group.html | 3 +++ examples/layer-group.js | 6 ++++-- examples/min-max-resolution.html | 3 +++ examples/min-max-resolution.js | 3 ++- examples/reusable-source.html | 3 +++ examples/reusable-source.js | 10 ++++++---- examples/sea-level.js | 2 +- examples/semi-transparent-layer.html | 3 +++ examples/semi-transparent-layer.js | 3 ++- examples/tile-load-events.html | 3 +++ examples/tile-load-events.js | 3 ++- examples/tile-transitions.html | 3 +++ examples/tile-transitions.js | 3 ++- examples/topojson.html | 3 +++ examples/topojson.js | 4 ++-- 19 files changed, 54 insertions(+), 16 deletions(-) diff --git a/examples/custom-interactions.html b/examples/custom-interactions.html index 908520101b..54933be8d6 100644 --- a/examples/custom-interactions.html +++ b/examples/custom-interactions.html @@ -6,5 +6,8 @@ docs: > This example demonstrates creating a custom interaction by subclassing `ol/interaction/Pointer`. Note that the built in interaction `ol/interaction/Translate` might be a better option for moving features. tags: "drag, feature, vector, editing, custom, interaction" +cloak: + - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q + value: Your Mapbox access token from https://mapbox.com/ here ---
diff --git a/examples/custom-interactions.js b/examples/custom-interactions.js index 7992733dcb..9fa87a1b5f 100644 --- a/examples/custom-interactions.js +++ b/examples/custom-interactions.js @@ -123,13 +123,14 @@ const polygonFeature = new Feature( new Polygon([[[-3e6, -1e6], [-3e6, 1e6], [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]])); +const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; const map = new Map({ interactions: defaultInteractions().extend([new Drag()]), layers: [ new TileLayer({ source: new TileJSON({ - url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json' + url: 'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?access_token=' + key }) }), new VectorLayer({ diff --git a/examples/layer-extent.html b/examples/layer-extent.html index 74169f8cd9..1fd7af1af7 100644 --- a/examples/layer-extent.html +++ b/examples/layer-extent.html @@ -7,6 +7,9 @@ docs: > modify the extent of the overlay layer. Use the controls above to limit rendering based on an extent (approximate country bounds). tags: "extent, tilejson" +cloak: +- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q + value: Your Mapbox access token from https://mapbox.com/ here ---
diff --git a/examples/layer-extent.js b/examples/layer-extent.js index 458261f081..6aa6a45075 100644 --- a/examples/layer-extent.js +++ b/examples/layer-extent.js @@ -15,9 +15,11 @@ const extents = { Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625]) }; +const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; + const base = new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v3/mapbox.world-light.json?secure', + url: 'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' + key, crossOrigin: 'anonymous' }) }); @@ -25,7 +27,7 @@ const base = new TileLayer({ const overlay = new TileLayer({ extent: extents.India, source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v3/mapbox.world-black.json?secure', + url: 'https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=' + key, crossOrigin: 'anonymous' }) }); diff --git a/examples/layer-group.html b/examples/layer-group.html index 33c9518f7c..79b7be5c79 100644 --- a/examples/layer-group.html +++ b/examples/layer-group.html @@ -7,6 +7,9 @@ docs: > tags: "tilejson, input, bind, group, layergroup" resources: - https://code.jquery.com/jquery-2.2.3.min.js +cloak: + - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q + value: Your Mapbox access token from https://mapbox.com/ here ---
diff --git a/examples/layer-group.js b/examples/layer-group.js index f918ad5242..112dc7d951 100644 --- a/examples/layer-group.js +++ b/examples/layer-group.js @@ -5,6 +5,8 @@ import {fromLonLat} from '../src/ol/proj.js'; import OSM from '../src/ol/source/OSM.js'; import TileJSON from '../src/ol/source/TileJSON.js'; +const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; + const map = new Map({ layers: [ new TileLayer({ @@ -13,13 +15,13 @@ const map = new Map({ layers: [ new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v3/mapbox.20110804-hoa-foodinsecurity-3month.json?secure', + url: 'https://api.tiles.mapbox.com/v4/mapbox.20110804-hoa-foodinsecurity-3month.json?secure&access_token=' + key, crossOrigin: 'anonymous' }) }), new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v3/mapbox.world-borders-light.json?secure', + url: 'https://api.tiles.mapbox.com/v4/mapbox.world-borders-light.json?secure&access_token=' + key, crossOrigin: 'anonymous' }) }) diff --git a/examples/min-max-resolution.html b/examples/min-max-resolution.html index 06c45289ca..980cf6b987 100644 --- a/examples/min-max-resolution.html +++ b/examples/min-max-resolution.html @@ -7,5 +7,8 @@ docs: >

If you continue to zoom in, you'll see the OSM layer also disappear.

The rendering of the layers are here controlled using minResolution and maxResolution options.

tags: "minResolution, maxResolution, resolution" +cloak: + - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q + value: Your Mapbox access token from https://mapbox.com/ here ---
diff --git a/examples/min-max-resolution.js b/examples/min-max-resolution.js index 623504a20c..062c22b837 100644 --- a/examples/min-max-resolution.js +++ b/examples/min-max-resolution.js @@ -4,6 +4,7 @@ import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; import TileJSON from '../src/ol/source/TileJSON.js'; +const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; /** * Create the map. @@ -17,7 +18,7 @@ const map = new Map({ }), new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure', + url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?secure&access_token=' + key, crossOrigin: 'anonymous' }), minResolution: 2000, diff --git a/examples/reusable-source.html b/examples/reusable-source.html index e93074b7f6..e3e72b2991 100644 --- a/examples/reusable-source.html +++ b/examples/reusable-source.html @@ -4,6 +4,9 @@ title: Reusable Source shortdesc: Updating a tile source by changing the URL. docs: > You can call source.setUrl() to update the URL for a tile source. Note that when you change the URL for a tile source, existing tiles will not be replaced until new tiles are loaded. If you are interested instead in clearing currently rendered tiles, you can call the source.refresh() method. Alternatively, you can use two separate sources if you want to remove rendered tiles and start over loading new tiles. +cloak: + - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q + value: Your Mapbox access token from https://mapbox.com/ here ---
diff --git a/examples/reusable-source.js b/examples/reusable-source.js index caa3221961..862ee919f9 100644 --- a/examples/reusable-source.js +++ b/examples/reusable-source.js @@ -3,11 +3,13 @@ import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; import XYZ from '../src/ol/source/XYZ.js'; +const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const baseUrl = 'https://{a-c}.tiles.mapbox.com/v4'; const urls = [ - 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png', - 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png', - 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png', - 'https://{a-c}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png' + baseUrl + '/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png?access_token=' + key, + baseUrl + '/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png?access_token=' + key, + baseUrl + '/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png?access_token=' + key, + baseUrl + '/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png?access_token=' + key ]; const source = new XYZ(); diff --git a/examples/sea-level.js b/examples/sea-level.js index 7217a3fcba..bb8fb5b5ab 100644 --- a/examples/sea-level.js +++ b/examples/sea-level.js @@ -37,7 +37,7 @@ const map = new Map({ layers: [ new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v3/mapbox.world-light.json?secure', + url: 'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' + key, crossOrigin: 'anonymous' }) }), diff --git a/examples/semi-transparent-layer.html b/examples/semi-transparent-layer.html index 3a96d2b9cc..e56b772cfe 100644 --- a/examples/semi-transparent-layer.html +++ b/examples/semi-transparent-layer.html @@ -5,5 +5,8 @@ shortdesc: Example of a map with a semi-transparent layer. docs: > This example will display a tiled MaxBox layer semi-transparently over an OSM background. The OSM layer is changed to back and white by using a CSS filter. tags: "transparent, osm, tilejson" +cloak: + - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q + value: Your Mapbox access token from https://mapbox.com/ here ---
diff --git a/examples/semi-transparent-layer.js b/examples/semi-transparent-layer.js index 776653a781..e2ff9941b0 100644 --- a/examples/semi-transparent-layer.js +++ b/examples/semi-transparent-layer.js @@ -5,6 +5,7 @@ import {fromLonLat} from '../src/ol/proj.js'; import OSM from '../src/ol/source/OSM.js'; import TileJSON from '../src/ol/source/TileJSON.js'; +const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; const map = new Map({ layers: [ @@ -14,7 +15,7 @@ const map = new Map({ }), new TileLayer({ source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.json?secure', + url: 'https://api.tiles.mapbox.com/v4/mapbox.va-quake-aug.json?secure&access_token=' + key, crossOrigin: 'anonymous', // this layer has transparency, so do not fade tiles: transition: 0 diff --git a/examples/tile-load-events.html b/examples/tile-load-events.html index 93af51b646..96554f88c8 100644 --- a/examples/tile-load-events.html +++ b/examples/tile-load-events.html @@ -9,6 +9,9 @@ docs: > progress. This example registers listeners for these events and renders a tile loading progress bar at the bottom of the map.

tags: "tile, events, loading" +cloak: + - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q + value: Your Mapbox access token from https://mapbox.com/ here ---
diff --git a/examples/tile-load-events.js b/examples/tile-load-events.js index c87e410c5a..80244d455e 100644 --- a/examples/tile-load-events.js +++ b/examples/tile-load-events.js @@ -77,8 +77,9 @@ Progress.prototype.hide = function() { const progress = new Progress(document.getElementById('progress')); +const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; const source = new TileJSON({ - url: 'https://api.tiles.mapbox.com/v3/mapbox.world-bright.json?secure', + url: 'https://api.tiles.mapbox.com/v4/mapbox.world-bright.json?secure&access_token=' + key, crossOrigin: 'anonymous' }); diff --git a/examples/tile-transitions.html b/examples/tile-transitions.html index ae366f9a93..ad5109893b 100644 --- a/examples/tile-transitions.html +++ b/examples/tile-transitions.html @@ -7,6 +7,9 @@ docs: > 250 ms. To disable this behavior, set the transition option of the tile source to 0. tags: "fade, transition" +cloak: + - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q + value: Your Mapbox access token from https://mapbox.com/ here ---