Merge pull request #10034 from openlayers/experiment

Mark experimental examples as experimental

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">

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>

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

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

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

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.

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.
+  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"
+tags: "transparent, osm, tilejson, css"
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
     value: Your Mapbox access token from https://mapbox.com/ here

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-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.
+      </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-notice');
+    if (window.experimental) {
+      experimentalNotice.style.display = 'block';
+      document.getElementById('experimental-dismiss').onclick = function() {
+        experimentalNotice.style.display = 'none';
+      }
+    }
+
   });
   </script>
 </html>

examples/webgl-points-layer.html

@@ -18,6 +18,7 @@ docs: >
   </p>
 
 tags: "webgl, point, layer, feature"
+experimental: true
 ---
 
 <div id="map" class="map"></div>

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),

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>