Merge pull request #4267 from ahocevar/example-improvements

Example usability improvements

config/examples/example.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
     <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
-    {{{ extraHead }}}
+    {{{ extraHead.local }}}
     {{{ css.tag }}}
     <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
     <title>{{ title }}</title>
@@ -46,7 +46,7 @@
           <textarea class="hidden" name="css">{{ css.source }}</textarea>
           <textarea class="hidden" name="html">{{ contents }}</textarea>
           <input type="hidden" name="wrap" value="l">
-          <input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,http://openlayers.org/en/v{{ olVersion }}/css/ol.css,http://openlayers.org/en/v{{ olVersion }}/build/ol.js">
+          <input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,http://openlayers.org/en/v{{ olVersion }}/css/ol.css,http://openlayers.org/en/v{{ olVersion }}/build/ol.js{{ extraResources }}">
         </form>
         <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
@@ -57,7 +57,7 @@
 &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
 &lt;link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css"&gt;
 &lt;script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"&gt;&lt;/script&gt;
-{{ extraHead }}
+{{ extraHead.remote }}
 {{#if css.source}}
 &lt;style&gt;
 {{ css.source }}

examples/bing-maps.html

@@ -5,6 +5,8 @@ shortdesc: Example of a Bing Maps layer.
 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:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
  <div class="row-fluid">
    <div class="span12">

examples/drag-and-drop-image-vector.html

@@ -6,6 +6,8 @@ docs: >
   Example of using the drag-and-drop interaction with a ol.source.ImageVector. 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:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/drag-and-drop.html

@@ -6,6 +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:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/full-screen-drag-rotate-and-zoom.html

@@ -6,6 +6,8 @@ docs: >
   <p>Hold down <code>Shift</code> + drag to rotate and zoom.  Click the button in the top right corner to go full screen.  Then do the <code>Shift</code> + drag thing again.</p>
   <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:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/full-screen.html

@@ -6,6 +6,8 @@ docs: >
   <p>Click the control in the top right corner to go full screen.  Click it again to exit full screen.</p>
   <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:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/gpx.html

@@ -5,6 +5,8 @@ shortdesc: Example of using the GPX source.
 docs: >
   Example of using the GPX source.
 tags: "GPX"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/image-filter.html

@@ -7,6 +7,8 @@ docs: >
   These listeners get an event with a reference to the Canvas rendering context.
   In this example, the <code>postcompose</code> listener applies a filter to the image data.</p>
 tags: "filter, image manipulation"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/kml.html

@@ -5,6 +5,8 @@ shortdesc: Example of using the KML source.
 docs: >
   Example of using the KML source.
 tags: "KML"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/layer-spy.html

@@ -9,6 +9,8 @@ docs: >
   recent mouse position, giving you a spyglass effect for viewing one layer over another.</p>
   <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:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/layer-swipe.html

@@ -5,6 +5,8 @@ shortdesc: Example of a Layer swipe map.
 docs: >
   Example of a Layer swipe map.
 tags: "swipe, openstreetmap"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/mobile-full-screen.html

@@ -3,6 +3,8 @@ template: example-verbatim.html
 title: Full-Screen Mobile
 shortdesc: Example of a full screen map.
 tags: "fullscreen, geolocation, mobile"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <!doctype html>
 <html lang="en">

examples/preload.html

@@ -5,6 +5,8 @@ shortdesc: Example of tile preloading.
 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:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span6">
@@ -14,4 +16,3 @@ tags: "preload, bing"
     <div id="map2" class="map"></div>
   </div>
 </div>
-

examples/raster.html

@@ -22,6 +22,8 @@ tags: "raster, pixel"
 resources:
   - http://d3js.org/d3.v3.min.js
   - raster.css
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12 rel">

examples/region-growing.html

@@ -24,6 +24,8 @@ docs: >
     to the operation.
   </p>
 tags: "raster, region growing"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/vector-osm.html

@@ -5,6 +5,8 @@ shortdesc: Example of using the OSM XML source.
 docs: >
  OSM XML vector data is loaded dynamically from a server using a tiling strategy.
 tags: "vector, osm, xml, loading, server"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/vector-wfs.html

@@ -5,6 +5,8 @@ shortdesc: Example of using WFS with a BBOX strategy.
 docs: >
   This example loads new features from GeoServer WFS when the view extent changes.
 tags: "vector, WFS, bbox, loading, server"
+cloak:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

examples/zoom-constrained.html

@@ -5,6 +5,8 @@ shortdesc: Example of a zoom constrained view.
 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:
+  Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
 <div class="row-fluid">
   <div class="span12">

tasks/build-examples.js

@@ -83,6 +83,11 @@ function augmentExamples(files, metalsmith, done) {
         throw new Error('No .js file found for ' + filename);
       }
       var jsSource = files[jsFilename].contents.toString();
+      if (file.cloak) {
+        for (var key in file.cloak) {
+          jsSource = jsSource.replace(new RegExp(key, 'g'), file.cloak[key]);
+        }
+      }
       var requires = getRequires(jsSource);
       file.requires = requires;
       file.js = {
@@ -103,18 +108,33 @@ function augmentExamples(files, metalsmith, done) {
       // add additional resources
       if (file.resources) {
         var resources = [];
+        var remoteResources = [];
+        var fiddleResources = [];
         for (var i = 0, ii = file.resources.length; i < ii; ++i) {
           var resource = file.resources[i];
+          var remoteResource = resource.indexOf('//') === -1 ?
+              'http://openlayers.org/en/v' + pkg.version + '/examples/' +
+                  resource : resource;
+          fiddleResources[i] = remoteResource;
           if (isJsRegEx.test(resource)) {
             resources[i] = '<script src="' + resource + '"></script>';
+            remoteResources[i] = '<script src="' + remoteResource +
+                '"></script>';
           } else if (isCssRegEx.test(resource)) {
             resources[i] = '<link rel="stylesheet" href="' + resource + '">';
+            remoteResources[i] = '<link rel="stylesheet" href="' +
+                remoteResource + '">';
           } else {
             throw new Error('Invalid value for resource: ' +
                 resource + ' is not .js or .css: ' + filename);
           }
         }
-        file.extraHead = resources.join('\n');
+        file.extraHead = {
+          local: resources.join('\n'),
+          remote: remoteResources.join('\n'),
+        };
+        file.extraResources = file.resources.length ?
+            ',' + fiddleResources.join(',') : '';
       }
     }
   }