Replace/remove usage of tileserver.maptiler.com

examples/layer-zoom-limits.js

@@ -1,11 +1,11 @@
 import Map from '../src/ol/Map.js';
 import OSM from '../src/ol/source/OSM.js';
+import TileJSON from '../src/ol/source/TileJSON.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 {fromLonLat, transformExtent} from '../src/ol/proj.js';
+import {fromLonLat} from '../src/ol/proj.js';
 
-const mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062];
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
 
 const map = new Map({
   target: 'map',
@@ -16,11 +16,9 @@ const map = new Map({
     }),
     new TileLayer({
       minZoom: 14, // visible at zoom levels above 14
-      source: new XYZ({
-        attributions:
-          'Tiles © USGS, rendered with ' +
-          '<a href="http://www.maptiler.com/">MapTiler</a>',
-        url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png',
+      source: new TileJSON({
+        url: 'https://api.maptiler.com/maps/outdoor/tiles.json?key=' + key,
+        tileSize: 512,
       }),
     }),
   ],
@@ -28,7 +26,6 @@ const map = new Map({
     center: fromLonLat([-112.18688965, 36.057944835]),
     zoom: 15,
     maxZoom: 18,
-    extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'),
     constrainOnlyCenter: true,
   }),
 });