ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update various examples to use the Mapbox v4-API

Browse Source
This commit is contained in:
Marc Jansen
2019-09-23 16:49:51 +02:00
parent b58c78c546
commit 57822aa6ff
19 changed files with 54 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/custom-interactions.html
View File

@@ -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
---
<div id="map" class="map"></div>

3
examples/custom-interactions.js
View File

@@ -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({

3
examples/layer-extent.html
View File

@@ -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
---
<div id="map" class="map"></div>
<button type="button" class="btn btn-default" id="India">India</button>

6
examples/layer-extent.js
View File

@@ -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'
})
});

3
examples/layer-group.html
View File

@@ -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
---
<div id="map" class="map"></div>
<div id="layertree">

6
examples/layer-group.js
View File

@@ -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'
})
})

3
examples/min-max-resolution.html
View File

@@ -7,5 +7,8 @@ docs: >
<p>If you continue to zoom in, you'll see the OSM layer also disappear.</p>
<p>The rendering of the layers are here controlled using minResolution and maxResolution options.</p>
tags: "minResolution, maxResolution, resolution"
cloak:
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
value: Your Mapbox access token from https://mapbox.com/ here
---
<div id="map" class="map"></div>

3
examples/min-max-resolution.js
View File

@@ -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,

3
examples/reusable-source.html
View File

@@ -4,6 +4,9 @@ title: Reusable Source
shortdesc: Updating a tile source by changing the URL.
docs: >
You can call <code>source.setUrl()</code> 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 <code>source.refresh()</code> 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
---
<div id="map" class="map"></div>
<button class="switcher" value="0">January</button>

10
examples/reusable-source.js
View File

@@ -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();

2
examples/sea-level.js
View File

@@ -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'
})
}),

3
examples/semi-transparent-layer.html
View File

@@ -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
---
<div id="map" class="map"></div>

3
examples/semi-transparent-layer.js
View File

@@ -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

3
examples/tile-load-events.html
View File

@@ -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.</p>
tags: "tile, events, loading"
cloak:
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
value: Your Mapbox access token from https://mapbox.com/ here
---
<div class="wrapper">
<div id="map" class="map"></div>

3
examples/tile-load-events.js
View File

@@ -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'
});

3
examples/tile-transitions.html
View File

@@ -7,6 +7,9 @@ docs: >
250 ms. To disable this behavior, set the <code>transition</code> 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
---
<div id="map" class="map"></div>
<label>

3
examples/tile-transitions.js
View File

@@ -3,7 +3,8 @@ import View from '../src/ol/View.js';
import TileLayer from '../src/ol/layer/Tile.js';
import XYZ from '../src/ol/source/XYZ.js';
const url = 'https://{a-c}.tiles.mapbox.com/v3/mapbox.world-bright/{z}/{x}/{y}.png';
const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
const url = 'https://{a-c}.tiles.mapbox.com/v4/mapbox.world-bright/{z}/{x}/{y}.png?access_token=' + key;
const withTransition = new TileLayer({
source: new XYZ({url: url})

3
examples/topojson.html
View File

@@ -5,5 +5,8 @@ shortdesc: Demonstrates rendering of features from a TopoJSON topology.
docs: >
This example uses a vector layer with `ol/format/TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki).
tags: "topojson, vector, style"
cloak:
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
value: Your Mapbox access token from https://mapbox.com/ here
---
<div id="map" class="map"></div>

4
examples/topojson.js
View File

@@ -6,10 +6,10 @@ import TileJSON from '../src/ol/source/TileJSON.js';
import VectorSource from '../src/ol/source/Vector.js';
import {Fill, Stroke, Style} from '../src/ol/style.js';
const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
const raster = new TileLayer({
source: new TileJSON({
url: 'https://api.tiles.mapbox.com/v3/mapbox.world-dark.json?secure'
url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + key
})
});