Replace Bing layers with MapTiler

examples/layer-swipe.js

@@ -1,21 +1,27 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
 import OSM from '../src/ol/source/OSM.js';
+import XYZ from '../src/ol/source/XYZ.js';
 
 const osm = new TileLayer({
   source: new OSM()
 });
-const bing = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'Aerial'
+
+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 aerial = new TileLayer({
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
   })
 });
 
 const map = new Map({
-  layers: [osm, bing],
+  layers: [osm, aerial],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -25,7 +31,7 @@ const map = new Map({
 
 const swipe = document.getElementById('swipe');
 
-bing.on('prerender', function(event) {
+aerial.on('prerender', function(event) {
   const ctx = event.context;
   const width = ctx.canvas.width * (swipe.value / 100);
 
@@ -35,7 +41,7 @@ bing.on('prerender', function(event) {
   ctx.clip();
 });
 
-bing.on('postrender', function(event) {
+aerial.on('postrender', function(event) {
   const ctx = event.context;
   ctx.restore();
 });