From 443213e175b6c26a5f658f54eaaa9972f0dca302 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Thu, 26 Sep 2019 20:06:28 +0200
Subject: [PATCH 1/4] Show notice when using experimental features

---
 examples/edit-geographic.html       |  1 +
 examples/templates/example.html     | 15 +++++++++++++++
 examples/webpack/example-builder.js |  6 ++++++
 3 files changed, 22 insertions(+)

diff --git a/examples/edit-geographic.html b/examples/edit-geographic.html
index 3f66d462ba..02131724be 100644
--- a/examples/edit-geographic.html
+++ b/examples/edit-geographic.html
@@ -7,6 +7,7 @@ docs: >
   makes it so the map view uses geographic coordinates (even if the view projection is
   not geographic).
 tags: "geographic"
+experimental: true
 ---
 <div id="map" class="map"></div>
 <select id="mode">
diff --git a/examples/templates/example.html b/examples/templates/example.html
index ec6b10ae8f..d531e11984 100644
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -99,6 +99,12 @@
         This example uses OpenLayers v<span>{{ olVersion }}</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
       </div>
 
+      <div id="experimental" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
+        <button id="experimental-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        This example uses features that are not part of the stable API and subject to change between releases.  Consult the <a href="https://openlayers.org/en/latest/apidoc/">API documentation</a>
+        to see what is supported in the latest release.
+      </div>
+
       <div class="row-fluid">
         <a class="codepen-button pull-right"><i class="fa fa-codepen"></i> Edit</a>
         <div class="span12">
@@ -183,6 +189,15 @@
         document.cookie = cookieText;
       }
     }
+
+    var experimentalNotice = document.getElementById('experimental');
+    if (window.experimental) {
+      experimentalNotice.style.display = 'block';
+      document.getElementById('experimental-dismiss').onclick = function() {
+        experimentalNotice.style.display = 'none';
+      }
+    }
+
   });
   </script>
 </html>
diff --git a/examples/webpack/example-builder.js b/examples/webpack/example-builder.js
index 10e2a1e361..fd03d2d631 100644
--- a/examples/webpack/example-builder.js
+++ b/examples/webpack/example-builder.js
@@ -200,6 +200,12 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
     tag: `<script src="${this.common}.js"></script><script src="${jsName}"></script>`,
     source: jsSource
   };
+
+  if (data.experimental) {
+    const prelude = '<script>window.experimental = true;</script>';
+    data.js.tag = prelude + data.js.tag;
+  }
+
   data.pkgJson = JSON.stringify({
     name: name,
     dependencies: getDependencies(jsSource),

From 9efb6b07eb23c5c412e9bc067743a238716a0168 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Thu, 26 Sep 2019 20:08:50 +0200
Subject: [PATCH 2/4] Collide less

---
 examples/templates/example.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/templates/example.html b/examples/templates/example.html
index d531e11984..7aa00b695f 100644
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -99,7 +99,7 @@
         This example uses OpenLayers v<span>{{ olVersion }}</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
       </div>
 
-      <div id="experimental" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
+      <div id="experimental-notice" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
         <button id="experimental-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         This example uses features that are not part of the stable API and subject to change between releases.  Consult the <a href="https://openlayers.org/en/latest/apidoc/">API documentation</a>
         to see what is supported in the latest release.
@@ -190,7 +190,7 @@
       }
     }
 
-    var experimentalNotice = document.getElementById('experimental');
+    var experimentalNotice = document.getElementById('experimental-notice');
     if (window.experimental) {
       experimentalNotice.style.display = 'block';
       document.getElementById('experimental-dismiss').onclick = function() {

From 13147e0b824b3bfec0371a55f22fc77edef10469 Mon Sep 17 00:00:00 2001
From: Olivier Guyot <olivier.guyot@camptocamp.com>
Date: Thu, 26 Sep 2019 20:19:11 +0200
Subject: [PATCH 3/4] Add experimental tags to a few examples & added doc in
 the README

Plus some typos.
---
 examples/readme.md                   | 1 +
 examples/semi-transparent-layer.html | 4 ++--
 examples/webgl-points-layer.html     | 1 +
 examples/worker.html                 | 3 ++-
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/examples/readme.md b/examples/readme.md
index 9a1b4c49e9..37da8938c4 100644
--- a/examples/readme.md
+++ b/examples/readme.md
@@ -8,3 +8,4 @@ The `.html` files in this folder are built by applying the templates in the `tem
 * docs: Documentation of the example. Can be markdown.
 * tags: Tags for the example index
 * resources: Additional js or css resources required by the example. This is a YAML list of URLs.
+* experimental: if true, a warning will appear on the example page mentioning the fact that it uses features not part of the API.
diff --git a/examples/semi-transparent-layer.html b/examples/semi-transparent-layer.html
index e56b772cfe..c34401d955 100644
--- a/examples/semi-transparent-layer.html
+++ b/examples/semi-transparent-layer.html
@@ -3,8 +3,8 @@ layout: example.html
 title: Semi-Transparent Layer
 shortdesc: Example of a map with a semi-transparent layer.
 docs: >
-  This example will display a tiled MaxBox layer semi-transparently over an OSM background. The OSM layer is changed to back and white by using a CSS filter.
-tags: "transparent, osm, tilejson"
+  This example will display a tiled MaxBox layer semi-transparently over an OSM background. The OSM layer is changed to black and white by using a CSS filter.
+tags: "transparent, osm, tilejson, css"
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
     value: Your Mapbox access token from https://mapbox.com/ here
diff --git a/examples/webgl-points-layer.html b/examples/webgl-points-layer.html
index f6d692341e..ebf30b754c 100644
--- a/examples/webgl-points-layer.html
+++ b/examples/webgl-points-layer.html
@@ -18,6 +18,7 @@ docs: >
   </p>
 
 tags: "webgl, point, layer, feature"
+experimental: true
 ---
 
 <div id="map" class="map"></div>
diff --git a/examples/worker.html b/examples/worker.html
index cc794a6a94..ec7d31df0f 100644
--- a/examples/worker.html
+++ b/examples/worker.html
@@ -3,8 +3,9 @@ layout: example.html
 title: Worker
 shortdesc: This example should be deleted.
 docs: >
-  When you move the map, a message is sent to a worker.  In response, the woker sends a
+  When you move the map, a message is sent to a worker.  In response, the worker sends a
   message back with the version identifier.
 tags: "worker"
+experimental: true
 ---
 <div id="map" class="map"></div>

From a33bd0dea1b9c72751c1588df8693e2b4fe289d6 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Thu, 26 Sep 2019 20:29:16 +0200
Subject: [PATCH 4/4] Add experimental examples

---
 examples/filter-points-webgl.html | 1 +
 examples/geographic.html          | 1 +
 examples/icon-sprite-webgl.html   | 1 +
 examples/mapbox-layer.html        | 1 +
 4 files changed, 4 insertions(+)

diff --git a/examples/filter-points-webgl.html b/examples/filter-points-webgl.html
index 503510e6a7..068e4aa991 100644
--- a/examples/filter-points-webgl.html
+++ b/examples/filter-points-webgl.html
@@ -13,6 +13,7 @@ docs: >
     to store the year of impact.
 
 tags: "webgl, icon, sprite, filter, feature"
+experimental: true
 ---
 <div id="map" class="map"></div>
 <form>
diff --git a/examples/geographic.html b/examples/geographic.html
index 4c1ceaa710..bb18bde4a2 100644
--- a/examples/geographic.html
+++ b/examples/geographic.html
@@ -7,6 +7,7 @@ docs: >
   makes it so the map view uses geographic coordinates (even if the view projection is
   not geographic).
 tags: "geographic"
+experimental: true
 resources:
   - https://code.jquery.com/jquery-2.2.3.min.js
   - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
diff --git a/examples/icon-sprite-webgl.html b/examples/icon-sprite-webgl.html
index c6dc366cd0..92dd5cfdf9 100644
--- a/examples/icon-sprite-webgl.html
+++ b/examples/icon-sprite-webgl.html
@@ -13,6 +13,7 @@ docs: >
 
   The dataset contains around 80k points and can be found here: https://www.kaggle.com/NUFORC/ufo-sightings
 tags: "webgl, icon, sprite, point, ufo"
+experimental: true
 cloak:
   - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
     value: Your Mapbox access token from https://mapbox.com/ here
diff --git a/examples/mapbox-layer.html b/examples/mapbox-layer.html
index 978f950bf6..05a67fdf21 100644
--- a/examples/mapbox-layer.html
+++ b/examples/mapbox-layer.html
@@ -5,6 +5,7 @@ shortdesc: Example of a Mapbox-gl-js layer integration.
 docs: >
   Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.
 tags: "simple, mapbox, vector, tiles, maptiler"
+experimental: true
 resources:
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css