diff --git a/examples/bing-maps.html b/examples/bing-maps.html
index 693c07bf04..93db3cc0c4 100644
--- a/examples/bing-maps.html
+++ b/examples/bing-maps.html
@@ -6,7 +6,8 @@ docs: >
   <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
 tags: "bing, bing-maps"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
  <div id="map" class="map"></div>
  <select id="layer-select">
diff --git a/examples/drag-and-drop-image-vector.html b/examples/drag-and-drop-image-vector.html
index a4f89bc8b6..717f83b647 100644
--- a/examples/drag-and-drop-image-vector.html
+++ b/examples/drag-and-drop-image-vector.html
@@ -6,7 +6,8 @@ docs: >
   Example of using the drag-and-drop interaction with an `ol.layer.Vector` with `renderMode: 'image'``. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
 tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>
diff --git a/examples/drag-and-drop.html b/examples/drag-and-drop.html
index f83a588654..41c82fd81e 100644
--- a/examples/drag-and-drop.html
+++ b/examples/drag-and-drop.html
@@ -6,7 +6,8 @@ docs: >
   Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
 tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>
diff --git a/examples/feature-move-animation.html b/examples/feature-move-animation.html
index 4652842543..281571fdb6 100644
--- a/examples/feature-move-animation.html
+++ b/examples/feature-move-animation.html
@@ -8,7 +8,8 @@ docs: >
   is being used.
 tags: "animation, feature, postcompose, polyline"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <label for="speed">
diff --git a/examples/full-screen-drag-rotate-and-zoom.html b/examples/full-screen-drag-rotate-and-zoom.html
index 37c118543e..55c5dfab8d 100644
--- a/examples/full-screen-drag-rotate-and-zoom.html
+++ b/examples/full-screen-drag-rotate-and-zoom.html
@@ -7,6 +7,7 @@ docs: >
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
diff --git a/examples/full-screen.html b/examples/full-screen.html
index 7b2ea0357b..a0be9802ea 100644
--- a/examples/full-screen.html
+++ b/examples/full-screen.html
@@ -7,6 +7,7 @@ docs: >
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, bing, bing-maps"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
diff --git a/examples/gpx.html b/examples/gpx.html
index d074b2cfa6..5b26160ca1 100644
--- a/examples/gpx.html
+++ b/examples/gpx.html
@@ -6,7 +6,8 @@ docs: >
   Example of using the GPX source.
 tags: "GPX"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>
diff --git a/examples/here-maps.html b/examples/here-maps.html
index 0f89c0717b..3349a5f365 100644
--- a/examples/here-maps.html
+++ b/examples/here-maps.html
@@ -7,8 +7,10 @@ docs: >
   <p>Be sure to respect the <a href="https://legal.here.com/en/terms/serviceterms/us/">HERE Service Terms</a> when using their tile API.</p>
 tags: "here, here-maps, here-tile-api"
 cloak:
-  kDm0Jq1K4Ak7Bwtn8uvk: Your HERE Maps appId from https://developer.here.com/
-  xnmvc4dKZrDfGlvQHXSvwQ: Your HERE Maps appCode from https://developer.here.com/
+  - key: kDm0Jq1K4Ak7Bwtn8uvk
+    value: Your HERE Maps appId from https://developer.here.com/
+  - key: xnmvc4dKZrDfGlvQHXSvwQ
+    value: Your HERE Maps appCode from https://developer.here.com/
 ---
 <div id="map" class="map"></div>
 <select id="layer-select">
diff --git a/examples/igc.html b/examples/igc.html
index fd47d1b362..e55edecb42 100644
--- a/examples/igc.html
+++ b/examples/igc.html
@@ -6,7 +6,8 @@ docs: >
   <p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="https://www.opencyclemap.org/">OpenCycleMap</a>.</p>
 tags: "complex-geometry, closest-feature, igc, opencyclemap"
 cloak:
-  0e6fc415256d4fbb9b5166a718591d71: Your API key from http://www.thunderforest.com/docs/apikeys/ here
+  - key: 0e6fc415256d4fbb9b5166a718591d71
+    value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
 
 ---
 <div id="map" class="map"></div>
diff --git a/examples/image-filter.html b/examples/image-filter.html
index 1b87e1bd0e..37d308d21a 100644
--- a/examples/image-filter.html
+++ b/examples/image-filter.html
@@ -8,7 +8,8 @@ docs: >
   In this example, the <code>postcompose</code> listener applies a filter to the image data.</p>
 tags: "filter, image manipulation"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <select id="kernel" name="kernel">
diff --git a/examples/kml.html b/examples/kml.html
index 84d1ff7172..afc93cf25f 100644
--- a/examples/kml.html
+++ b/examples/kml.html
@@ -6,7 +6,8 @@ docs: >
   This example uses the <code>ol.format.KML</code> to parse KML for rendering with a vector source.
 tags: "KML"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>
diff --git a/examples/layer-spy.html b/examples/layer-spy.html
index 87b5590196..84bd1c3b32 100644
--- a/examples/layer-spy.html
+++ b/examples/layer-spy.html
@@ -10,6 +10,7 @@ docs: >
   <p>Move around the map to see the effect.  Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.</p>
 tags: "spy, image manipulation"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
diff --git a/examples/layer-swipe.html b/examples/layer-swipe.html
index 5f7d4e2c49..5907aaf95f 100644
--- a/examples/layer-swipe.html
+++ b/examples/layer-swipe.html
@@ -6,7 +6,8 @@ docs: >
   Example of a Layer swipe map.
 tags: "swipe, openstreetmap"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <input id="swipe" type="range" style="width: 100%">
diff --git a/examples/localized-openstreetmap.html b/examples/localized-openstreetmap.html
index da5319cf04..dbefe03f24 100644
--- a/examples/localized-openstreetmap.html
+++ b/examples/localized-openstreetmap.html
@@ -6,7 +6,8 @@ docs: >
   <p>The base layer is <a href="https://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>.
 tags: "localized-openstreetmap, openseamap, openstreetmap"
 cloak:
-  0e6fc415256d4fbb9b5166a718591d71: Your API key from http://www.thunderforest.com/docs/apikeys/ here
+  - key: 0e6fc415256d4fbb9b5166a718591d71
+    value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
 
 ---
 <div id="map" class="map"></div>
diff --git a/examples/magnify.html b/examples/magnify.html
index 1574fabd0e..6f62e4bdac 100644
--- a/examples/magnify.html
+++ b/examples/magnify.html
@@ -8,6 +8,7 @@ docs: >
   <p>Move around the map to see the effect.  Use the ↑ up and ↓ down arrow keys to adjust the magnified circle size.</p>
 tags: "magnify, image manipulation"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
diff --git a/examples/mapbox-vector-tiles-advanced.html b/examples/mapbox-vector-tiles-advanced.html
index 77e0c9c62a..2df2bc267b 100644
--- a/examples/mapbox-vector-tiles-advanced.html
+++ b/examples/mapbox-vector-tiles-advanced.html
@@ -8,6 +8,7 @@ tags: "mapbox, vector, tiles, mobile"
 resources:
   - resources/mapbox-streets-v6-style.js
 cloak:
-  pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg
+    value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
diff --git a/examples/mapbox-vector-tiles.html b/examples/mapbox-vector-tiles.html
index 1d92ab88af..87895b26b8 100644
--- a/examples/mapbox-vector-tiles.html
+++ b/examples/mapbox-vector-tiles.html
@@ -8,6 +8,7 @@ tags: "simple, mapbox, vector, tiles"
 resources:
   - resources/mapbox-streets-v6-style.js
 cloak:
-  pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg
+    value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
diff --git a/examples/mobile-full-screen.html b/examples/mobile-full-screen.html
index 2e0c509314..bca37f7dd7 100644
--- a/examples/mobile-full-screen.html
+++ b/examples/mobile-full-screen.html
@@ -4,7 +4,8 @@ title: Full-Screen Mobile
 shortdesc: Example of a full screen map.
 tags: "fullscreen, geolocation, mobile"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <!doctype html>
 <html lang="en">
diff --git a/examples/osm-vector-tiles.html b/examples/osm-vector-tiles.html
index 37085e4bf0..c026fe0e5c 100644
--- a/examples/osm-vector-tiles.html
+++ b/examples/osm-vector-tiles.html
@@ -6,6 +6,7 @@ docs: >
   A simple vector tiles map with Mapzen vector tiles. This example uses the TopoJSON format's `layerName` option to determine the layer ("water", "roads", "buildings") for styling. **Note**: [`ol.format.MVT`](../apidoc/ol.format.MVT.html) is an even more efficient format for vector tiles.
 tags: "vector, tiles, osm, mapzen"
 cloak:
-  vector-tiles-5eJz6JX: Your Mapzen API key from https://mapzen.com/developers
+  - key: vector-tiles-5eJz6JX
+    value: Your Mapzen API key from https://mapzen.com/developers
 ---
 <div id="map" class="map"></div>
diff --git a/examples/overviewmap-custom.html b/examples/overviewmap-custom.html
index 7cff4ed0aa..b84174f2f7 100644
--- a/examples/overviewmap-custom.html
+++ b/examples/overviewmap-custom.html
@@ -6,7 +6,8 @@ docs: >
   <p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS.  You can also rotate the map using the shift key to see how the overview map reacts.</p>
 tags: "overview, overviewmap"
 cloak:
-  0e6fc415256d4fbb9b5166a718591d71: Your API key from http://www.thunderforest.com/docs/apikeys/ here
+  - key: 0e6fc415256d4fbb9b5166a718591d71
+    value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
 
 ---
 <div id="map" class="map"></div>
diff --git a/examples/preload.html b/examples/preload.html
index 1b56a36e4f..7398986e0b 100644
--- a/examples/preload.html
+++ b/examples/preload.html
@@ -6,7 +6,8 @@ docs: >
   <p>The map on the top preloads low resolution tiles.  The map on the bottom does not use any preloading.  Try zooming out and panning to see the difference.</p>
 tags: "preload, bing"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map1" class="map"></div>
 <div id="map2" class="map"></div>
diff --git a/examples/raster.html b/examples/raster.html
index 8369fba860..564841b47a 100644
--- a/examples/raster.html
+++ b/examples/raster.html
@@ -22,7 +22,8 @@ tags: "raster, pixel"
 resources:
   - https://unpkg.com/d3@4.12.0/build/d3.js
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div class="rel">
   <div id="map" class="map"></div>
diff --git a/examples/region-growing.html b/examples/region-growing.html
index 93f8cb4444..edc14faaf0 100644
--- a/examples/region-growing.html
+++ b/examples/region-growing.html
@@ -25,7 +25,8 @@ docs: >
   </p>
 tags: "raster, region growing"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map" style="cursor: pointer"></div>
 <table class="controls">
diff --git a/examples/sea-level.html b/examples/sea-level.html
index ea622f98c6..c8b5f57282 100644
--- a/examples/sea-level.html
+++ b/examples/sea-level.html
@@ -10,7 +10,8 @@ docs: >
   </p>
 tags: "raster, pixel operation, flood"
 cloak:
-  pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg: Your Mapbox access token from http://mapbox.com/ here
+  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
+    value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <label>
diff --git a/examples/street-labels.html b/examples/street-labels.html
index 002643a686..40da211001 100644
--- a/examples/street-labels.html
+++ b/examples/street-labels.html
@@ -6,6 +6,7 @@ docs: >
   Example showing the use of a text style with `placement: 'line'` to render text along a path.
 tags: "vector, label, streets"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
diff --git a/examples/tileutfgrid.html b/examples/tileutfgrid.html
index 86df71aaa8..40353fa95f 100644
--- a/examples/tileutfgrid.html
+++ b/examples/tileutfgrid.html
@@ -7,7 +7,8 @@ docs: >
   Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).
 tags: "utfgrid, tileutfgrid, tilejson"
 cloak:
-  pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg
+    value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div style="display: none;">
diff --git a/examples/vector-osm.html b/examples/vector-osm.html
index 2f4d57c292..c8e19ea2c0 100644
--- a/examples/vector-osm.html
+++ b/examples/vector-osm.html
@@ -6,6 +6,7 @@ docs: >
  OSM XML vector data is loaded dynamically from a the [Overpass API](http://overpass-api.de) using a bbox strategy. Note that panning and zooming will eventually lead to "Too many requests" errors from the Overpass API.
 tags: "vector, osmxml, loading, server, strategy, bbox"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
diff --git a/examples/vector-wfs-getfeature.html b/examples/vector-wfs-getfeature.html
index 894921a819..e04e55ba44 100644
--- a/examples/vector-wfs-getfeature.html
+++ b/examples/vector-wfs-getfeature.html
@@ -8,6 +8,7 @@ docs: >
   that match the query.
 tags: "vector, WFS, GetFeature, filter"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
diff --git a/examples/vector-wfs.html b/examples/vector-wfs.html
index 38de294e0a..8939a01f20 100644
--- a/examples/vector-wfs.html
+++ b/examples/vector-wfs.html
@@ -6,6 +6,7 @@ docs: >
   This example loads new features from GeoServer WFS when the view extent changes.
 tags: "vector, WFS, bbox, loading, server"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js
index 398c6483a2..0e94e020aa 100644
--- a/examples/webpack/example-builder.js
+++ b/examples/webpack/example-builder.js
@@ -151,8 +151,8 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
     }
   }
   if (data.cloak) {
-    for (const key in data.cloak) {
-      jsSource = jsSource.replace(new RegExp(key, 'g'), data.cloak[key]);
+    for (const entry of data.cloak) {
+      jsSource = jsSource.replace(new RegExp(entry.key, 'g'), entry.value);
     }
   }
   data.js = {
diff --git a/examples/xyz.html b/examples/xyz.html
index 06dcd16fdd..72d3c3d6af 100644
--- a/examples/xyz.html
+++ b/examples/xyz.html
@@ -6,7 +6,8 @@ docs: >
   The XYZ source is used for tile data that is accessed through URLs that include a zoom level and tile grid x/y coordinates.
 tags: "xyz"
 cloak:
-  0e6fc415256d4fbb9b5166a718591d71: Your API key from http://www.thunderforest.com/docs/apikeys/ here
+  - key: 0e6fc415256d4fbb9b5166a718591d71
+    value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
 
 ---
 <div id="map" class="map"></div>
diff --git a/examples/zoom-constrained.html b/examples/zoom-constrained.html
index 0534eb24ba..091d56c107 100644
--- a/examples/zoom-constrained.html
+++ b/examples/zoom-constrained.html
@@ -6,6 +6,7 @@ docs: >
   This map has a view that is constrained between zoom levels 9 and 13.  This is done using the `minZoom` and `maxZoom` view options.
 tags: "bing, zoom, minZoom, maxZoom"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>