Replace/remove usage of tileserver.maptiler.com

examples/layer-zoom-limits.html

@@ -9,5 +9,8 @@ docs: >
   be used to set limits.  This example shows an OSM layer at zoom levels 14 and lower and a USGS layer at
   zoom levels higher than 14.
 tags: "minZoom, maxZoom, layer"
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

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,
   }),
 });

examples/reprojection.html

@@ -21,7 +21,6 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
       <option value="bng">British National Grid (EPSG:27700)</option>
       <option value="wms21781">Swisstopo WMS (EPSG:21781)</option>
       <option value="wmts3413">NASA Arctic WMTS (EPSG:3413)</option>
-      <option value="grandcanyon">Grand Canyon HiDPI (EPSG:3857)</option>
       <option value="states">United States (EPSG:3857)</option>
     </select>
   </div>

examples/reprojection.js

@@ -5,7 +5,7 @@ import View from '../src/ol/View.js';
 import WMTS, {optionsFromCapabilities} from '../src/ol/source/WMTS.js';
 import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js';
 import proj4 from 'proj4';
-import {OSM, TileImage, TileWMS, XYZ} from '../src/ol/source.js';
+import {OSM, TileImage, TileWMS} from '../src/ol/source.js';
 import {getCenter, getWidth} from '../src/ol/extent.js';
 import {get as getProjection} from '../src/ol/proj.js';
 import {register} from '../src/ol/proj/proj4.js';
@@ -146,18 +146,6 @@ fetch(urlB)
     layers['bng'].setSource(new WMTS(options));
   });
 
-layers['grandcanyon'] = new TileLayer({
-  source: new XYZ({
-    url: 'https://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png',
-    crossOrigin: '',
-    tilePixelRatio: 2,
-    maxZoom: 15,
-    attributions:
-      'Tiles © USGS, rendered with ' +
-      '<a href="http://www.maptiler.com/">MapTiler</a>',
-  }),
-});
-
 const startResolution = getWidth(getProjection('EPSG:3857').getExtent()) / 256;
 const resolutions = new Array(22);
 for (let i = 0, ii = resolutions.length; i < ii; ++i) {

examples/xyz-retina.html

@@ -3,7 +3,10 @@ layout: example.html
 title: XYZ Retina Tiles
 shortdesc: Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ.
 docs: >
-  The XYZ source accepts a `tilePixelRatio` option. The tiles were prepared from a GeoTIFF file with [MapTiler](http://www.maptiler.com/).
+  The XYZ source accepts a `tilePixelRatio` option.
 tags: "retina, hidpi, xyz, maptiler, @2x, devicePixelRatio"
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

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,
       }),
     }),
   ],