Remove personal Mapbox key

examples/sea-level.js

@@ -1,8 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
-import {Raster as RasterSource, TileJSON} from '../src/ol/source.js';
+import {Raster as RasterSource, XYZ} from '../src/ol/source.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
 function flood(pixels, data) {
@@ -11,9 +10,9 @@ function flood(pixels, data) {
     const height =
       -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1;
     if (height <= data.level) {
-      pixel[0] = 145;
-      pixel[1] = 175;
-      pixel[2] = 186;
+      pixel[0] = 134;
+      pixel[1] = 203;
+      pixel[2] = 249;
       pixel[3] = 255;
     } else {
       pixel[3] = 0;
@@ -22,14 +21,17 @@ function flood(pixels, data) {
   return pixel;
 }
 
-const key =
-  'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+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 elevation = new TileLayer({
   source: new XYZ({
     url:
-      'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' +
-      key,
-    crossOrigin: 'anonymous',
+      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
+    maxZoom: 10,
+    crossOrigin: '',
   }),
 });
 elevation.on('prerender', function (evt) {
@@ -46,11 +48,10 @@ const map = new Map({
   target: 'map',
   layers: [
     new TileLayer({
-      source: new TileJSON({
-        url:
-          'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' +
-          key,
-        crossOrigin: 'anonymous',
+      source: new XYZ({
+        attributions: attributions,
+        url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
+        tileSize: 512,
       }),
     }),
     new ImageLayer({