Replace/remove usage of tileserver.maptiler.com

examples/xyz-retina.js

@@ -3,11 +3,12 @@ import OSM from '../src/ol/source/OSM.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
-import {transform, transformExtent} from '../src/ol/proj.js';
+import {transform} from '../src/ol/proj.js';
 
-const mapMinZoom = 1;
-const mapMaxZoom = 15;
-const mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062];
+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 map = new Map({
   target: 'map',
@@ -16,15 +17,12 @@ const map = new Map({
       source: new OSM(),
     }),
     new TileLayer({
-      extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'),
       source: new XYZ({
-        attributions:
-          'Tiles © USGS, rendered with ' +
-          '<a href="http://www.maptiler.com/">MapTiler</a>',
-        url: 'https://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png',
+        attributions: attributions,
+        url:
+          'https://api.maptiler.com/maps/outdoor/256/{z}/{x}/{y}@2x.png?key=' +
+          key,
         tilePixelRatio: 2, // THIS IS IMPORTANT
-        minZoom: mapMinZoom,
-        maxZoom: mapMaxZoom,
       }),
     }),
   ],