Remove personal Mapbox key

examples/popup.js

@@ -1,14 +1,11 @@
 import Map from '../src/ol/Map.js';
 import Overlay from '../src/ol/Overlay.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 {toLonLat} from '../src/ol/proj.js';
 import {toStringHDMS} from '../src/ol/coordinate.js';
 
-const key =
-  'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
-
 /**
  * Elements that make up the popup.
  */
@@ -37,17 +34,21 @@ closer.onclick = function () {
   return false;
 };
 
+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>';
+
 /**
  * Create the map.
  */
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new TileJSON({
-        url:
-          'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?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,
       }),
     }),
   ],