Replace Bing layer with MapTiler

examples/magnify.html

@@ -6,9 +6,9 @@ docs: >
   <p>This example makes use of the <code>postrender</code> 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.</p>
   <p>Move around the map to see the effect.  Use the ↑ up and ↓ down arrow keys to adjust the magnified circle size.</p>
-tags: "magnify, image manipulation"
+tags: "magnify, image manipulation, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

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 = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 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');

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).
   </p>
-tags: "raster, pixel"
+tags: "raster, pixel, maptiler"
 resources:
   - https://unpkg.com/d3@4.12.0/build/d3.js
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div class="rel">
   <div id="map" class="map"></div>

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',
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-  imagerySet: 'Aerial'
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
+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

examples/region-growing.html

@@ -23,10 +23,10 @@ docs: >
     This example also shows how an additional function can be made available
     to the operation.
   </p>
-tags: "raster, region growing"
+tags: "raster, region growing, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map" style="cursor: pointer"></div>
 <table class="controls">

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 = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 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({

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
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

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 = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const viewExtent = [1817379, 6139595, 1827851, 6143616];
 const map = new Map({
   layers: [new TileLayer({
-    source: new BingMaps({
+    source: new XYZ({
-      key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+      attributions: attributions,
-      imagerySet: 'Aerial'
+      url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+      maxZoom: 20
     })
   }), new VectorLayer({
     declutter: true,