Remove personal Mapbox key

examples/icon-sprite-webgl.html

@@ -15,8 +15,8 @@ docs: >
 tags: "webgl, icon, sprite, point, ufo"
 experimental: true
 cloak:
-  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Mapbox access token from https://mapbox.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <div>Current sighting: <span id="info"></span></div>

examples/icon-sprite-webgl.js

@@ -1,24 +1,26 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import Point from '../src/ol/geom/Point.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 WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import {Vector} from '../src/ol/source.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
-const key =
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-  'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+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({
   layers: [
     new TileLayer({
-      source: new TileJSON({
+      source: new XYZ({
+        attributions: attributions,
         url:
-          'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' +
+          'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-          key,
+        tileSize: 512,
-        crossOrigin: 'anonymous',
       }),
     }),
   ],

examples/popup.html

@@ -8,8 +8,8 @@ docs: >
   </p>
 tags: "overlay, popup"
 cloak:
-  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Mapbox access token from https://mapbox.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <div id="popup" class="ol-popup">

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({
+      source: new XYZ({
-        url:
+        attributions: attributions,
-          'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?access_token=' +
+        url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
-          key,
+        tileSize: 512,
-        crossOrigin: 'anonymous',
       }),
     }),
   ],

examples/sea-level.css

@@ -7,3 +7,7 @@
 a.location {
   cursor: pointer;
 }
+
+#map {
+  background: #85ccf9;
+}

examples/sea-level.html

@@ -15,8 +15,8 @@ docs: >
   </p>
 tags: "raster, pixel operation, flood"
 cloak:
-  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Mapbox access token from https://mapbox.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <label>

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[0] = 134;
-      pixel[1] = 175;
+      pixel[1] = 203;
-      pixel[2] = 186;
+      pixel[2] = 249;
       pixel[3] = 255;
     } else {
       pixel[3] = 0;
@@ -22,14 +21,17 @@ function flood(pixels, data) {
   return pixel;
 }
 
-const key =
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-  'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+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=' +
+      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
-      key,
+    maxZoom: 10,
-    crossOrigin: 'anonymous',
+    crossOrigin: '',
   }),
 });
 elevation.on('prerender', function (evt) {
@@ -46,11 +48,10 @@ const map = new Map({
   target: 'map',
   layers: [
     new TileLayer({
-      source: new TileJSON({
+      source: new XYZ({
-        url:
+        attributions: attributions,
-          'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' +
+        url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
-          key,
+        tileSize: 512,
-        crossOrigin: 'anonymous',
       }),
     }),
     new ImageLayer({

examples/tile-load-events.css

@@ -1,5 +1,5 @@
 .map {
-  background: #E0ECED;
+  background: #85ccf9;
 }
 .wrapper {
   position: relative;
@@ -8,8 +8,8 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  height: 2px;
+  height: 0;
-  background: rgba(0, 60, 136, 0.4);
+  box-shadow: 0px 0px 1px 2px rgb(255,204,0);
   width: 0;
   transition: width 250ms;
-}
+}

examples/tile-load-events.js

@@ -1,7 +1,7 @@
 import Map from '../src/ol/Map.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';
 
 /**
  * Renders a progress bar.
@@ -71,13 +71,15 @@ Progress.prototype.hide = function () {
 
 const progress = new Progress(document.getElementById('progress'));
 
-const key =
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-  'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+const attributions =
-const source = new TileJSON({
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
-  url:
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
-    'https://api.tiles.mapbox.com/v4/mapbox.world-bright.json?secure&access_token=' +
+
-    key,
+const source = new XYZ({
-  crossOrigin: 'anonymous',
+  attributions: attributions,
+  url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
+  tileSize: 512,
 });
 
 source.on('tileloadstart', function () {

examples/tile-transitions.html

@@ -8,8 +8,8 @@ docs: >
   of the tile source to 0.
 tags: "fade, transition"
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Mapbox access token from https://mapbox.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <label>

examples/tile-transitions.js

@@ -3,18 +3,24 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
 
-const key =
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-  'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+const attributions =
-const url =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
-  'https://{a-c}.tiles.mapbox.com/v4/mapbox.world-bright/{z}/{x}/{y}.png?access_token=' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
-  key;
+
+const url = 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key;
 
 const withTransition = new TileLayer({
-  source: new XYZ({url: url}),
+  source: new XYZ({url: url, tileSize: 512, attributions: attributions}),
 });
 
 const withoutTransition = new TileLayer({
-  source: new XYZ({url: url, transition: 0}),
+  source: new XYZ({
+    url: url,
+    transition: 0,
+    tileSize: 512,
+    attributions: attributions,
+  }),
   visible: false,
 });
 

examples/topojson.html

@@ -6,7 +6,7 @@ docs: >
   This example uses a vector layer with `ol/format/TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki).
 tags: "topojson, vector, style"
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Mapbox access token from https://mapbox.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

examples/topojson.js

@@ -1,18 +1,21 @@
 import Map from '../src/ol/Map.js';
-import TileJSON from '../src/ol/source/TileJSON.js';
 import TopoJSON from '../src/ol/format/TopoJSON.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
-const key =
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-  'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+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 raster = new TileLayer({
-  source: new TileJSON({
+  source: new XYZ({
-    url:
+    attributions: attributions,
-      'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' +
+    url: 'https://api.maptiler.com/maps/darkmatter/{z}/{x}/{y}.png?key=' + key,
-      key,
+    tileSize: 512,
   }),
 });
 

examples/webpack/example-builder.js

@@ -1,3 +1,4 @@
+const assert = require('assert');
 const frontMatter = require('front-matter');
 const fs = require('fs');
 const handlebars = require('handlebars');
@@ -335,6 +336,7 @@ class ExampleBuilder {
         : '';
     }
 
+    assert(!!attributes.layout, `missing layout in ${htmlPath}`);
     const templatePath = path.join(this.templates, attributes.layout);
     const templateSource = await readFile(templatePath, readOptions);