Replace Bing layer with MapTiler

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