diff --git a/examples/magnify.html b/examples/magnify.html index c8fa04f13a..b022529961 100644 --- a/examples/magnify.html +++ b/examples/magnify.html @@ -6,9 +6,9 @@ docs: >

This example makes use of the postrender event listener to oversample imagery in a circle around the pointer location. Listeners for this event have access to the Canvas context and can manipulate image data.

Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the magnified circle size.

-tags: "magnify, image manipulation" +tags: "magnify, image manipulation, maptiler" cloak: - - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5 - value: Your Bing Maps Key from http://www.bingmapsportal.com/ here + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ ---
diff --git a/examples/magnify.js b/examples/magnify.js index f3822688ec..17c3a6c963 100644 --- a/examples/magnify.js +++ b/examples/magnify.js @@ -2,13 +2,20 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; import {fromLonLat} from '../src/ol/proj.js'; -import BingMaps from '../src/ol/source/BingMaps.js'; +import XYZ from '../src/ol/source/XYZ.js'; import {getRenderPixel} from '../src/ol/render.js'; -const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'; +const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; +const attributions = '© MapTiler ' + + '© OpenStreetMap contributors'; const imagery = new TileLayer({ - source: new BingMaps({key: key, imagerySet: 'Aerial'}) + source: new XYZ({ + attributions: attributions, + url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + crossOrigin: '' + }) }); const container = document.getElementById('map'); diff --git a/examples/raster.html b/examples/raster.html index 27783106d9..9b56c95cdb 100644 --- a/examples/raster.html +++ b/examples/raster.html @@ -18,12 +18,12 @@ docs: > those pixels based on a threshold value (values above the threshold are green and those below are transparent).

-tags: "raster, pixel" +tags: "raster, pixel, maptiler" resources: - https://unpkg.com/d3@4.12.0/build/d3.js cloak: - - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5 - value: Your Bing Maps Key from http://www.bingmapsportal.com/ here + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ ---
diff --git a/examples/raster.js b/examples/raster.js index f3b08e912e..b62bb8796d 100644 --- a/examples/raster.js +++ b/examples/raster.js @@ -1,7 +1,7 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -import BingMaps from '../src/ol/source/BingMaps.js'; +import XYZ from '../src/ol/source/XYZ.js'; import RasterSource from '../src/ol/source/Raster.js'; const minVgi = 0; @@ -46,9 +46,16 @@ function summarize(value, counts) { /** * Use aerial imagery as the input data for the raster source. */ -const bing = new BingMaps({ - key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5', - imagerySet: 'Aerial' + +const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; +const attributions = '© MapTiler ' + + '© OpenStreetMap contributors'; + +const aerial = new XYZ({ + attributions: attributions, + url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + crossOrigin: '' }); @@ -57,7 +64,7 @@ const bing = new BingMaps({ * be colored green. */ const raster = new RasterSource({ - sources: [bing], + sources: [aerial], /** * Run calculations on pixel data. * @param {Array} pixels List of pixels (one per source). @@ -110,7 +117,7 @@ raster.on('afteroperations', function(event) { const map = new Map({ layers: [ new TileLayer({ - source: bing + source: aerial }), new ImageLayer({ source: raster diff --git a/examples/region-growing.html b/examples/region-growing.html index f84faf786c..17e1aca740 100644 --- a/examples/region-growing.html +++ b/examples/region-growing.html @@ -23,10 +23,10 @@ docs: > This example also shows how an additional function can be made available to the operation.

-tags: "raster, region growing" +tags: "raster, region growing, maptiler" cloak: - - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5 - value: Your Bing Maps Key from http://www.bingmapsportal.com/ here + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ ---
diff --git a/examples/region-growing.js b/examples/region-growing.js index 0503ff7127..9d0a9a3a26 100644 --- a/examples/region-growing.js +++ b/examples/region-growing.js @@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; import {fromLonLat} from '../src/ol/proj.js'; -import BingMaps from '../src/ol/source/BingMaps.js'; +import XYZ from '../src/ol/source/XYZ.js'; import RasterSource from '../src/ol/source/Raster.js'; function growRegion(inputs, data) { @@ -72,10 +72,17 @@ function next4Edges(edge) { ]; } -const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'; +const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; +const attributions = '© MapTiler ' + + '© OpenStreetMap contributors'; const imagery = new TileLayer({ - source: new BingMaps({key: key, imagerySet: 'Aerial'}) + source: new XYZ({ + attributions: attributions, + url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + crossOrigin: '' + }) }); const raster = new RasterSource({ diff --git a/examples/street-labels.html b/examples/street-labels.html index e62a2b9236..e3fb58e883 100644 --- a/examples/street-labels.html +++ b/examples/street-labels.html @@ -4,9 +4,9 @@ title: Street Labels shortdesc: Render street names. docs: > Example showing the use of a text style with `placement: 'line'` to render text along a path. -tags: "vector, label, streets" +tags: "vector, label, streets, maptiler" cloak: - - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5 - value: Your Bing Maps Key from http://www.bingmapsportal.com/ here + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ ---
diff --git a/examples/street-labels.js b/examples/street-labels.js index d05a70bfc3..c3b7910f18 100644 --- a/examples/street-labels.js +++ b/examples/street-labels.js @@ -3,7 +3,7 @@ import View from '../src/ol/View.js'; import {getCenter} from '../src/ol/extent.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import BingMaps from '../src/ol/source/BingMaps.js'; +import XYZ from '../src/ol/source/XYZ.js'; import VectorSource from '../src/ol/source/Vector.js'; import {Fill, Style, Text} from '../src/ol/style.js'; @@ -17,12 +17,17 @@ const style = new Style({ }) }); +const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; +const attributions = '© MapTiler ' + + '© OpenStreetMap contributors'; + const viewExtent = [1817379, 6139595, 1827851, 6143616]; const map = new Map({ layers: [new TileLayer({ - source: new BingMaps({ - key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5', - imagerySet: 'Aerial' + source: new XYZ({ + attributions: attributions, + url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20 }) }), new VectorLayer({ declutter: true,