Merge pull request #3504 from tschaub/build-examples

Rework build-examples.js task.

config/examples/example.html

@@ -8,8 +8,8 @@
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    {{{ resources }}}
+    {{{ extraHead }}}
-    {{{ css_resource }}}
+    {{{ css.tag }}}
     <link rel="stylesheet" href="../resources/prism/prism.css" type="text/css">
     <script src="../resources/zeroclipboard/ZeroClipboard.min.js"></script>
     <title>{{ title }}</title>
@@ -29,16 +29,12 @@
       {{{ contents }}}
 
       <div class="row-fluid">
-
         <div class="span12">
           <h4 id="title">{{ title }}</h4>
           <p id="shortdesc">{{ shortdesc }}</p>
-          <div id="docs">
+          <div id="docs">{{ md docs }}</div>
-            {{{ docs }}}
-          </div>
           <div id="tags">{{ tags }}</div>
         </div>
-
       </div>
 
       <div class="row-fluid">
@@ -46,11 +42,11 @@
         <form method="POST" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
           <input type="button" class="btn btn-info" id="copy-button" value="Copy example code">
           <input type="submit" class="btn btn-primary" id="jsfiddle-button" value="Create JSFiddle">
-          <textarea class="hidden" name="js">{{ js_inline }}</textarea>
+          <textarea class="hidden" name="js">{{ js.source }}</textarea>
-          <textarea class="hidden" name="css">{{ css_inline }}</textarea>
+          <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,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.css,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/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,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.css,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.js">
           <pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
@@ -58,12 +54,12 @@
 &lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
 &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
 &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
-&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.css" type="text/css"&gt;
+&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.css" type="text/css"&gt;
-&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.js"&gt;&lt;/script&gt;
+&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ olVersion }}/ol.js"&gt;&lt;/script&gt;
 {{ resources }}
-{{#if css_inline}}
+{{#if css.source}}
 &lt;style&gt;
-{{ css_inline }}
+{{ css.source }}
 &lt;/style&gt;
 {{/if}}
 &lt;/head&gt;
@@ -73,7 +69,7 @@
 {{ contents }}
 &lt;/div&gt;
 &lt;script&gt;
-{{ js_inline }}
+{{ js.source }}
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;</code></pre>
@@ -85,7 +81,7 @@
     <script src="../resources/bootstrap/js/bootstrap.min.js"></script>
     <script src="../resources/example-behaviour.js"></script>
     <script src="../resources/prism/prism.min.js"></script>
-    {{{ js_resource }}}
+    {{{ js.tag }}}
 
   </body>
 </html>

examples_src/accessible.html

@@ -1,10 +1,13 @@
 ---
-template: "example.html"
+template: example.html
-title: "Accessibility example"
+title: Accessibility example
-shortdesc: "Example of an accessible map."
+shortdesc: Example of an accessible map.
 docs: >
-  <p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.</p>
+  This page's `map` element has its `tabindex` attribute set to `"0"`, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the `map` element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.
-  <p>When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.</p>
+
+
+  Clicking on the "Zoom in" and "Zoom out" buttons below the map zooms the map in and out. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.
+
 tags: "accessibility, tabindex"
 ---
 <div class="row-fluid">

examples_src/animation.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Animation example"
+title: Animation example
-shortdesc: "Demonstrates animated pan, zoom, and rotation."
+shortdesc: Demonstrates animated pan, zoom, and rotation.
 docs: >
   This example shows how to use the beforeRender function on the Map to run one
   or more animations.

examples_src/arcgis-tiled.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Tiled ArcGIS MapServer example"
+title: Tiled ArcGIS MapServer example
-shortdesc: "Example of a tiled ArcGIS layer."
+shortdesc: Example of a tiled ArcGIS layer.
 docs: >
   This example shows how to use an ArcGIS REST MapService as tiles.
   This source type supports Map and Image Services. For cached ArcGIS

examples_src/attributions.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Attributions example"
+title: Attributions example
-shortdesc: "Example of a attributions visibily change on map resize, to collapse them on small maps."
+shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps.
 docs: >
   When the map gets too small because of a resize, the attribution will be collapsed.
   This is because the <code>collapsible</code> option is set to true if the width

examples_src/bind-input.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Bind HTML input example"
+title: Bind HTML input example
-shortdesc: "Demonstrates two-way binding of HTML input elements to OpenLayers objects."
+shortdesc: Demonstrates two-way binding of HTML input elements to OpenLayers objects.
 docs: >
   <p id="has-webgl" style="display: none">With the <a href="?renderer=webgl">WebGL renderer</a>, <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong> can also be controlled.</p>
   <div id="no-webgl" class="alert alert-warning" style="display: none">
@@ -48,4 +48,4 @@ tags: "custom, control"
        <input id="resolution" type="number" min="0" step="250"/>
      </fieldset>
    </form>
- </div>
+ </div>

examples_src/bing-maps.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Bing Maps example"
+title: Bing Maps example
-shortdesc: "Example of a Bing Maps layer."
+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"
@@ -17,4 +17,4 @@ tags: "bing, bing-maps"
        <option value="ordnanceSurvey">Ordnance Survey</option>
      </select>
    </div>
- </div>
+ </div>

examples_src/box-selection.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Box selection example"
+title: Box selection example
-shortdesc: "Using a DragBox interaction to select features."
+shortdesc: Using a DragBox interaction to select features.
 docs: >
   <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
   to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>

examples_src/brightness-contrast.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Brightness/contrast example"
+title: Brightness/contrast example
-shortdesc: "Example of brightness/contrast control on the client (WebGL only)."
+shortdesc: Example of brightness/contrast control on the client (WebGL only).
 docs: >
   This example shows how to control brightness/contrast on the client,
   the example is limited to WebGL.

examples_src/button-title.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Custom tooltips example"
+title: Custom tooltips example
-shortdesc: "This example shows how to customize the buttons tooltips with Bootstrap."
+shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
 docs: >
   This example shows how to customize the buttons tooltips with <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
 tags: "custom, tooltip"

examples_src/canvas-tiles.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Canvas tiles example"
+title: Canvas tiles example
-shortdesc: "Renders tiles with coordinates for debugging."
+shortdesc: Renders tiles with coordinates for debugging.
 docs: >
   <p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not
   OSM tile coordinates (origin top left).</p>

examples_src/center.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Advanced View Positioning example"
+title: Advanced View Positioning example
-shortdesc: "This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location."
+shortdesc: This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.
 docs: >
   This example demonstrates how a map's view can be
   adjusted so a geometry or coordinate is positioned at a specific

examples_src/cluster.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Clustering example"
+title: Clustering example
-shortdesc: "Example of using <code>ol.source.Cluster</code>."
+shortdesc: Example of using <code>ol.source.Cluster</code>.
 docs: >
   This example shows how to do clustering on point features.
 tags: "cluster, vector"

examples_src/custom-controls.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Custom control example"
+title: Custom control example
-shortdesc: "Shows how to create custom controls."
+shortdesc: Shows how to create custom controls.
 docs: >
   This example creates a "rotate to north" button.
 tags: "custom, control"

examples_src/d3.html

@@ -1,11 +1,13 @@
 ---
-template: "example.html"
+template: example.html
-title: "d3 integration example"
+title: d3 integration example
-shortdesc: "Example of using ol3 and d3 together."
+shortdesc: Example of using ol3 and d3 together.
 docs: >
   <p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
 tags: "d3"
-resources: "http://d3js.org/d3.v3.min.js,http://d3js.org/topojson.v1.min.js"
+resources:
+  - http://d3js.org/d3.v3.min.js
+  - http://d3js.org/topojson.v1.min.js
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/device-orientation.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Device-Orientation example"
+title: Device-Orientation example
-shortdesc: "Listen to DeviceOrientation events."
+shortdesc: Listen to DeviceOrientation events.
 docs: >
   This example shows how to track changes in device orientation.
 tags: "orientation, openstreetmap"

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

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Drag-and-Drop image vector example"
+title: Drag-and-Drop image vector example
-shortdesc: "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."
+shortdesc: 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.
 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.

examples_src/drag-and-drop.html

@@ -1,9 +1,9 @@
 ---
-template: "example.html"
+template: example.html
-title: "Drag-and-Drop example"
+title: Drag-and-Drop example
-shortdesc: "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."
+shortdesc: 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.
 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 
+  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"
 ---

examples_src/drag-features.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Drag features example"
+title: Drag features example
-shortdesc: "Example of a drag features interaction."
+shortdesc: Example of a drag features interaction.
 docs: >
   The drag features interaction can be used to drag features to a new position.
 tags: "drag, feature, vector, editing"

examples_src/drag-rotate-and-zoom.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Drag rotate and zoom example"
+title: Drag rotate and zoom example
-shortdesc: "A single interaction to drag, rotate, and zoom."
+shortdesc: A single interaction to drag, rotate, and zoom.
 docs: >
   <p><code>Shift</code> + Drag to rotate and zoom the map around its center.</p>
 tags: "drag, rotate, zoom, interaction"

examples_src/draw-and-modify-features.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Draw and modify features example"
+title: Draw and modify features example
-shortdesc: "Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction."
+shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
 docs: >
   Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
 tags: "draw, edit, modify, vector, featureoverlay"

examples_src/draw-features.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Draw features example"
+title: Draw features example
-shortdesc: "Example of using the ol.interaction.Draw interaction."
+shortdesc: Example of using the ol.interaction.Draw interaction.
 docs: >
   Example of using the ol.interaction.Draw interaction.
 tags: "draw, edit, vector"

examples_src/dynamic-data.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Dynamic data example"
+title: Dynamic data example
-shortdesc: "Example of dynamic data."
+shortdesc: Example of dynamic data.
 docs: >
   Example of dynamic data.
 tags: "dynamic-data"

examples_src/earthquake-clusters.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Earthquake Clusters"
+title: Earthquake Clusters
-shortdesc: "Demonstrates the use of style geometries to render source features of a cluster."
+shortdesc: Demonstrates the use of style geometries to render source features of a cluster.
 docs: >
   <p>This example parses a KML file and renders the features as clusters on a vector layer.  The styling in this example is quite involved. Single earthquake locations
   (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents

examples_src/epsg-4326.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "EPSG:4326 example"
+title: EPSG:4326 example
-shortdesc: "Example of a map in EPSG:4326."
+shortdesc: Example of a map in EPSG:4326.
 docs: >
   This example shows how to create a map in EPSG:4326.
 tags: "epsg4326"

examples_src/export-map.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Export map example"
+title: Export map example
-shortdesc: "Example of exporting a map as a PNG image."
+shortdesc: Example of exporting a map as a PNG image.
 docs: >
   Example of exporting a map as a PNG image.
 tags: "export, png, openstreetmap"

examples_src/fractal.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Fractal Example"
+title: Fractal Example
-shortdesc: "Example of a fractal."
+shortdesc: Example of a fractal.
 docs: >
   Example of a fractal.
 tags: "fractal, vector"

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

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Full screen drag rotate and zoom example"
+title: Full screen drag rotate and zoom example
-shortdesc: "Example of drag rotate and zoom control with full screen effect."
+shortdesc: Example of drag rotate and zoom control with full screen effect.
 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>

examples_src/full-screen.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Full screen control example"
+title: Full screen control example
-shortdesc: "Example of a full screen control."
+shortdesc: Example of a full screen control.
 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>

examples_src/geojson.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "GeoJSON example"
+title: GeoJSON example
-shortdesc: "Example of GeoJSON features."
+shortdesc: Example of GeoJSON features.
 docs: >
   Example of GeoJSON features.
 tags: "geojson, vector, openstreetmap"

examples_src/geolocation.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Geolocation example"
+title: Geolocation example
-shortdesc: "Example of a geolocation map."
+shortdesc: Example of a geolocation map.
 docs: >
   Example of a geolocation map.
 tags: "geolocation, openstreetmap"

examples_src/getfeatureinfo-image.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "GetFeatureInfo example (image layer)"
+title: GetFeatureInfo example (image layer)
-shortdesc: "This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer."
+shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.
 docs: >
   <p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
 tags: "getfeatureinfo, forEachLayerAtPixel"

examples_src/getfeatureinfo-tile.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "WMS GetFeatureInfo example (tile layer)"
+title: WMS GetFeatureInfo example (tile layer)
-shortdesc: "This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer."
+shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.
 docs: >
   <p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
 tags: "getfeatureinfo, forEachLayerAtPixel"

examples_src/gpx.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "GPX example"
+title: GPX example
-shortdesc: "Example of using the GPX source."
+shortdesc: Example of using the GPX source.
 docs: >
   Example of using the GPX source.
 tags: "GPX"
@@ -22,4 +22,4 @@ tags: "GPX"
    </div>
    </div>
  </div>
- 
+

examples_src/graticule.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Graticule example"
+title: Graticule example
-shortdesc: "This example shows how to add a graticule overlay to a map."
+shortdesc: This example shows how to add a graticule overlay to a map.
 docs: >
   This example shows how to add a graticule overlay to a map.
 tags: "graticule"

examples_src/heatmap-earthquakes.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Earthquakes heatmap"
+title: Earthquakes heatmap
-shortdesc: "Demonstrates the use of a heatmap layer."
+shortdesc: Demonstrates the use of a heatmap layer.
 docs: >
   This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
 tags: "heatmap, kml, vector, style"

examples_src/hue-saturation.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Hue/saturation example"
+title: Hue/saturation example
-shortdesc: "Example of hue/saturation control on the client (WebGL only)."
+shortdesc: Example of hue/saturation control on the client (WebGL only).
 docs: >
   Example of hue/saturation control on the client (WebGL only).
 tags: "custom, control"

examples_src/icon-sprite-webgl.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Icon sprites with WebGL example"
+title: Icon sprites with WebGL example
-shortdesc: "Icon sprite with WebGL"
+shortdesc: Icon sprite with WebGL
 docs: >
   <p>In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.</p>
 tags: "webgl, icon, sprite, vector, point"

examples_src/icon.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Vector Icon Example"
+title: Vector Icon Example
-shortdesc: "Example using an icon to symbolize a point."
+shortdesc: Example using an icon to symbolize a point.
 docs: >
   Example using an icon to symbolize a point.
 tags: "vector, style, icon, marker, popup"

examples_src/igc.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "IGC example"
+title: IGC example
-shortdesc: "Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file."
+shortdesc: Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.
 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="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
 tags: "complex-geometry, closest-feature, igc, opencyclemap"

examples_src/image-filter.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Image Filter Example"
+title: Image Filter Example
-shortdesc: "Apply a filter to imagery"
+shortdesc: Apply a filter to imagery
 docs: >
   <p>Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
   These listeners get an event with a reference to the Canvas rendering context.

examples_src/image-load-events.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Image load events example"
+title: Image load events example
-shortdesc: "Example using image load events."
+shortdesc: Example using image load events.
 docs: >
   <p>Image sources fire events related to image loading.  You can
   listen for <code>imageloadstart</code>, <code>imageloadend</code>,

examples_src/image-vector-layer.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Image vector layer example"
+title: Image vector layer example
-shortdesc: "Example of an image vector layer."
+shortdesc: Example of an image vector layer.
 docs: >
   <p>This example uses a <code>ol.source.ImageVector</code> source. That source gets vector features from the
   <code>ol.source.Vector</code> it's configured with, and draw these features to an HTML5 canvas element that

examples_src/kml-earthquakes.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Earthquakes in KML"
+title: Earthquakes in KML
-shortdesc: "Demonstrates the use of a Shape symbolizer to render earthquake locations."
+shortdesc: Demonstrates the use of a Shape symbolizer to render earthquake locations.
 docs: >
   This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>style</code> that renders earthquake locations with a size relative to their magnitude.
 tags: "KML, vector, style, tooltip"
@@ -10,4 +10,4 @@ tags: "KML, vector, style, tooltip"
   <div class="span12">
     <div id="map" class="map"><div id="info"></div></div>
   </div>
-</div>
+</div>

examples_src/kml-timezones.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Timezones in KML"
+title: Timezones in KML
-shortdesc: "Demonstrates rendering timezones from KML."
+shortdesc: Demonstrates rendering timezones from KML.
 docs: >
   This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>ol.style.Style</code> that fills timezones
   yellow with an opacity calculated based on the current offset to local noon.

examples_src/kml.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "KML example"
+title: KML example
-shortdesc: "Example of using the KML source."
+shortdesc: Example of using the KML source.
 docs: >
   Example of using the KML source.
 tags: "KML"

examples_src/layer-clipping-webgl.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Layer WebGL clipping example"
+title: Layer WebGL clipping example
-shortdesc: "Layer WebGL clipping example."
+shortdesc: Layer WebGL clipping example.
 docs: >
   This example shows how to use the <code>precompose</code> and <code>postcompose</code> rendering hooks to clip layers using WebGL.
 tags: "clipping, webgl, openstreetmap"

examples_src/layer-clipping.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Layer clipping example"
+title: Layer clipping example
-shortdesc: "Layer clipping example"
+shortdesc: Layer clipping example
 docs: >
   Layer clipping example
 tags: "clipping, openstreetmap"

examples_src/layer-extent.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Limited Layer Extent"
+title: Limited Layer Extent
-shortdesc: "Restricting layer rendering to a limited extent."
+shortdesc: Restricting layer rendering to a limited extent.
 docs: >
   This example uses the <code>layer.setExtent()</code> method to
   modify the extent of the overlay layer.  Use the controls below

examples_src/layer-group.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Layer group example"
+title: Layer group example
-shortdesc: "Example of a map with layer group."
+shortdesc: Example of a map with layer group.
 docs: >
   Example of a map with layer group.
 tags: "tilejson, input, bind, group, layergroup"

examples_src/layer-spy.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Layer Spy Example"
+title: Layer Spy Example
-shortdesc: "View a portion of one layer over another"
+shortdesc: View a portion of one layer over another
 docs: >
   <p>Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
   These listeners get an event with a reference to the Canvas rendering context.

examples_src/layer-swipe.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Layer Swipe example"
+title: Layer Swipe example
-shortdesc: "Example of a Layer swipe map."
+shortdesc: Example of a Layer swipe map.
 docs: >
   Example of a Layer swipe map.
 tags: "swipe, openstreetmap"
@@ -11,4 +11,4 @@ tags: "swipe, openstreetmap"
     <div id="map" class="map"></div>
     <input id="swipe" type="range" style="width: 100%">
   </div>
-</div>
+</div>

examples_src/lazy-source.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Lazy Source"
+title: Lazy Source
-shortdesc: "Example of setting a layer source after construction."
+shortdesc: Example of setting a layer source after construction.
 docs: >
   <p>Typically, the source for a layer is provided to the layer constructor.
   If you need to set a layer source after construction, this can be
@@ -17,4 +17,4 @@ tags: "source"
   </div>
 </div>
 <button id="set-source" class="code">layer.setSource(source)</button>
-<button id="unset-source" class="code">layer.setSource(null)</button>
+<button id="unset-source" class="code">layer.setSource(null)</button>

examples_src/line-arrows.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "LineString arrows example"
+title: LineString arrows example
-shortdesc: "Example of drawing arrows for each line string segment."
+shortdesc: Example of drawing arrows for each line string segment.
 docs: >
   Example of drawing arrows for each line string segment.
 tags: "draw, vector, arrow"

examples_src/localized-openstreetmap.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Localized OpenStreetMap example"
+title: Localized OpenStreetMap example
-shortdesc: "Example of a localized OpenStreetMap map with a custom tile server and a custom attribution."
+shortdesc: Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
 docs: >
   <p>The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. The OpenSeaMap tile server
   does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>

examples_src/mapguide-untiled.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "MapGuide untiled example"
+title: MapGuide untiled example
-shortdesc: "Example of a untiled MapGuide map."
+shortdesc: Example of a untiled MapGuide map.
 docs: >
   Example of a untiled MapGuide map.
 tags: "mapguide"

examples_src/mapquest.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "MapQuest example"
+title: MapQuest example
-shortdesc: "Example of a MapQuest map.Shows how to create custom controls."
+shortdesc: Example of a MapQuest map.Shows how to create custom controls.
 docs: >
   Example of a MapQuest map.
 tags: "mapquest"
@@ -15,4 +15,4 @@ tags: "mapquest"
       <option value="Road" selected>Road</option>
     </select>
   </div>
-</div>
+</div>

examples_src/measure.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Measure example"
+title: Measure example
-shortdesc: "Example of using the ol.interaction.Draw interaction for creating simple measuring application."
+shortdesc: Example of using the ol.interaction.Draw interaction for creating simple measuring application.
 docs: >
   <p><i>NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth curvature is not taken into account</i></p>
 tags: "draw, edit, measure, vector"
@@ -18,4 +18,4 @@ tags: "draw, edit, measure, vector"
       <option value="area">Area</option>
     </select>
     <label class="checkbox"><input type="checkbox" id="geodesic"/>use geodesic measures</label>
-</form>
+</form>

examples_src/min-max-resolution.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Min/max resolution example"
+title: Min/max resolution example
-shortdesc: "Show/hide layers depending on current view resolution."
+shortdesc: Show/hide layers depending on current view resolution.
 docs: >
   <p>Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown.</p>
   <p>If you continue to zoom in, you'll see the OSM layer also disappear.</p>

examples_src/modify-features.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Modify features example"
+title: Modify features example
-shortdesc: "Editing features with the modify interaction."
+shortdesc: Editing features with the modify interaction.
 docs: >
   <p>This example demonstrates how the modify and select interactions can be used together.  Zoom in to an area of interest and select a feature for editing.
   Then drag points around to modify the feature.  You can preserve topology by selecting multiple features before editing (<code>Shift</code>+click to select multiple features).</p>

examples_src/modify-test.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Modify features test"
+title: Modify features test
-shortdesc: "Example for testing feature modification."
+shortdesc: Example for testing feature modification.
 docs: >
   Example for testing feature modification.
 tags: "modify, edit, vector"

examples_src/mouse-position.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Mouse position example"
+title: Mouse position example
-shortdesc: "Example of a mouse position control, outside the map."
+shortdesc: Example of a mouse position control, outside the map.
 docs: >
   Example of a mouse position control, outside the map.
 tags: "mouse-position, openstreetmap"
@@ -22,4 +22,4 @@ tags: "mouse-position, openstreetmap"
     <input id="precision" type="number" min="0" max="12" value="4"/>
   </form>
 </div>
-<div class="span6" id="mouse-position">&nbsp;</div>
+<div class="span6" id="mouse-position">&nbsp;</div>

examples_src/moveend.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Moveend Example"
+title: Moveend Example
-shortdesc: "Use of the moveend event."
+shortdesc: Use of the moveend event.
 docs: >
   <p>In this example, a listener is registered for the map's <code>moveend</code> event.  Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.</p>
 tags: "moveend, map, event"

examples_src/navigation-controls.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Navigation controls example"
+title: Navigation controls example
-shortdesc: "Shows how to add navigation controls."
+shortdesc: Shows how to add navigation controls.
 docs: >
   <p>This example shows how to use the beforeRender function on the Map to run one
   or more animations.</p>

examples_src/overlay.html

@@ -1,11 +1,12 @@
 ---
-template: "example.html"
+template: example.html
-title: "Overlay example"
+title: Overlay example
-shortdesc: "Demonstrates overlays."
+shortdesc: Demonstrates overlays.
 docs: >
   <p>The popups are created using <a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Popovers</a> from Bootstrap.</p>
 tags: "overlay, popup, bootstrap, popover, mapquest, openaerial"
-resources: overlay.css
+resources:
+  - overlay.css
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/overviewmap-custom.html

@@ -1,11 +1,12 @@
 ---
-template: "example.html"
+template: example.html
-title: "OverviewMap control example advanced"
+title: OverviewMap control example advanced
-shortdesc: "Example of OverviewMap control with advanced customization."
+shortdesc: Example of OverviewMap control with advanced customization.
 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"
-resources: overviewmap-custom.css
+resources:
+  - overviewmap-custom.css
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/overviewmap.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "OverviewMap control example"
+title: OverviewMap control example
-shortdesc: "Example of OverviewMap control."
+shortdesc: Example of OverviewMap control.
 docs: >
   This example demonstrates the use of the OverviewMap control.
 tags: "overview, overviewmap"

examples_src/polygon-styles.html

@@ -1,13 +1,14 @@
 ---
-template: "example.html"
+template: example.html
-title: "Custom styles for polygons"
+title: Custom styles for polygons
-shortdesc: "Showing the vertices of a polygon with a custom style geometry."
+shortdesc: Showing the vertices of a polygon with a custom style geometry.
 docs: >
   In this example two different styles are created for the polygons:
    * The first style is for the polygons themselves.
    * The second style is to draw the vertices of the polygons.
 tags: "polygon, vector, style, GeometryFunction"
-resources: polygon-styles.css
+resources:
+  - polygon-styles.css
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/popup.html

@@ -1,13 +1,14 @@
 ---
-template: "example.html"
+template: example.html
-title: "Popup example"
+title: Popup example
-shortdesc: "Uses an overlay to create a popup."
+shortdesc: Uses an overlay to create a popup.
 docs: >
   <p>
     Click on the map to get a popup.  The popup is composed of a few basic elements: a container, a close button, and a place for the content.  To anchor the popup to the map, an <code>ol.Overlay</code> is created with the popup container.  A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
   </p>
 tags: "overlay, popup, mapquest, openaerial"
-resources: popup.css
+resources:
+  - popup.css
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/preload.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Preload example"
+title: Preload example
-shortdesc: "Example of tile preloading."
+shortdesc: Example of tile preloading.
 docs: >
   <p>The map on the left preloads low resolution tiles.  The map on the right does not use any preloading.  Try zooming out and panning to see the difference.</p>
 tags: "preload, bing"

examples_src/readme.md

@@ -7,4 +7,4 @@ The `.html` files in this folder are built by applying the templates in the `con
 * shortdesc: A short description for the example index
 * 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 comma separated list of URLs.
+* resources: Additional js or css resources required by the example. This is a YAML list of URLs.

examples_src/regularshape.html

@@ -1,9 +1,9 @@
 ---
-template: "example.html"
+template: example.html
-title: "Regular Shape example"
+title: Regular Shape example
-shortdesc: "Example of some Regular Shape styles."
+shortdesc: Example of some Regular Shape styles.
 docs: >
-  
+
 tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
 ---
 <div class="row-fluid">

examples_src/rotation.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Rotation example"
+title: Rotation example
-shortdesc: "Example of a rotated map."
+shortdesc: Example of a rotated map.
 docs: >
   <p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
 tags: "rotation, openstreetmap"

examples_src/scale-line.html

@@ -1,9 +1,9 @@
 ---
-template: "example.html"
+template: example.html
-title: "Scale line example"
+title: Scale line example
-shortdesc: "Example of a scale line."
+shortdesc: Example of a scale line.
 docs: >
-  
+
 tags: "scale-line, openstreetmap"
 ---
 <div class="row-fluid">

examples_src/select-features.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Select features example"
+title: Select features example
-shortdesc: "Example of using the Select interaction."
+shortdesc: Example of using the Select interaction.
 docs: >
   Choose between <code>Single-click</code>, <code>Click</code> and <code>Hover</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
           <p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>

examples_src/semi-transparent-layer.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Semi-transparent layer example"
+title: Semi-transparent layer example
-shortdesc: "Example of a map with a 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 a MapQuest background.
 tags: "transparent, mapquest, tilejson"

examples_src/side-by-side.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Side-by-side example"
+title: Side-by-side example
-shortdesc: "The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers."
+shortdesc: The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
 docs: >
   The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
 tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"

examples_src/simple.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Simple example"
+title: Simple example
-shortdesc: "Example of a simple map."
+shortdesc: Example of a simple map.
 docs: >
   A simple map with customized Attribution control.
 tags: "simple, openstreetmap, attribution"

examples_src/snap.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Snap interaction example"
+title: Snap interaction example
-shortdesc: "Example of using the snap interaction together with draw and modify interactions."
+shortdesc: Example of using the snap interaction together with draw and modify interactions.
 docs: >
   Example of using the snap interaction together with
   draw and modify interactions. The snap interaction must be added

examples_src/sphere-mollweide.html

@@ -1,11 +1,12 @@
 ---
-template: "example.html"
+template: example.html
-title: "Sphere Mollweide example"
+title: Sphere Mollweide example
-shortdesc: "Example of a Sphere Mollweide map with a Graticule component."
+shortdesc: Example of a Sphere Mollweide map with a Graticule component.
 docs: >
   Example of a Sphere Mollweide map with a Graticule component.
 tags: "graticule, Mollweide, projection, proj4js"
-resources: http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js
+resources:
+  - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js
 ---
 <div class="row-fluid">
   <div class="span12">

examples_src/stamen.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Stamen example"
+title: Stamen example
-shortdesc: "Example of a Stamen tile source."
+shortdesc: Example of a Stamen tile source.
 docs: >
   Two layers are composed: the watercolor base layer with the terrain labels.
 tags: "stamen, watercolor, terrain-labels, two-layers"

examples_src/static-image.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Static image example"
+title: Static image example
-shortdesc: "Example of a static image layer."
+shortdesc: Example of a static image layer.
 docs: >
   <p>
     This example uses a <a href="http://xkcd.com/256/">static image</a>

examples_src/symbol-atlas-webgl.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Symbols with WebGL example"
+title: Symbols with WebGL example
-shortdesc: "Using symbols in an atlas with WebGL."
+shortdesc: Using symbols in an atlas with WebGL.
 docs: >
   <p>When using symbol styles with WebGL, OpenLayers would render the symbol
   on a temporary image and would create a WebGL texture for each image. For a

examples_src/synthetic-lines.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Synthetic lines example"
+title: Synthetic lines example
-shortdesc: "Synthetic lines example."
+shortdesc: Synthetic lines example.
 docs: >
   <p>Performance results:</p>
   <table border="1">

examples_src/synthetic-points.html

@@ -1,9 +1,9 @@
 ---
-template: "example.html"
+template: example.html
-title: "Synthetic points example"
+title: Synthetic points example
-shortdesc: "Synthetic points example."
+shortdesc: Synthetic points example.
 docs: >
-  
+
 tags: "vector"
 ---
 <div class="row-fluid">

examples_src/teleport.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Teleport example"
+title: Teleport example
-shortdesc: "Example of moving a map from one target to another."
+shortdesc: Example of moving a map from one target to another.
 docs: >
   <p>Click on the Teleport button below the map to move the map from one target to another.</p>
 tags: "teleport, openstreetmap"

examples_src/tile-load-events.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Tile load events example"
+title: Tile load events example
-shortdesc: "Example using tile load events."
+shortdesc: Example using tile load events.
 docs: >
   Image tile sources fire events related to tile loading.  You can
   listen for <code>tileloadstart</code>, <code>tileloadend</code>,
@@ -16,4 +16,4 @@ tags: "tile, events, loading"
     <div id="map" class="map"></div>
     <div id="progress"></div>
   </div>
-</div>
+</div>

examples_src/tile-vector.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Tile vector example"
+title: Tile vector example
-shortdesc: "Example of vector tiles from openstreetmap.us."
+shortdesc: Example of vector tiles from openstreetmap.us.
 docs: >
   Example of vector tiles from openstreetmap.us.
 tags: "custom, control"
@@ -20,4 +20,4 @@ tags: "custom, control"
   <label class="checkbox"><input type="checkbox" id="buildings"/> Buildings</label>
   <label class="checkbox"><input type="checkbox" id="water" checked/> Water</label>
   <label class="checkbox"><input type="checkbox" id="roads" checked/> Roads</label>
-</fieldset>
+</fieldset>

examples_src/tilejson.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "TileJSON example"
+title: TileJSON example
-shortdesc: "Example of a TileJSON layer."
+shortdesc: Example of a TileJSON layer.
 docs: >
   Example of a TileJSON layer.
 tags: "tilejson"

examples_src/tileutfgrid.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "TileUTFGrid example"
+title: TileUTFGrid example
-shortdesc: "This example shows how to read data from a TileUTFGrid layer."
+shortdesc: This example shows how to read data from a TileUTFGrid layer.
 docs: >
   <p>Point to a country to see its name and flag.</p>
   Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).

examples_src/tissot.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Tissot indicatrix example"
+title: Tissot indicatrix example
-shortdesc: "Draw Tissot's indicatrices on maps."
+shortdesc: Draw Tissot's indicatrices on maps.
 docs: >
   Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix)</a> maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857.
 tags: "tissot, circle"

examples_src/topojson.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "TopoJSON example"
+title: TopoJSON example
-shortdesc: "Demonstrates rendering of features from a TopoJSON topology."
+shortdesc: Demonstrates rendering of features from a TopoJSON topology.
 docs: >
   This example uses a vector layer with a `ol.source.TopoJSON` for rendering features from [TopoJSON](https://github.com/mbostock/topojson/wiki).
 tags: "topojson, vector, style"

examples_src/vector-labels.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Vector labels example"
+title: Vector labels example
-shortdesc: "Example of GeoJSON features with labels."
+shortdesc: Example of GeoJSON features with labels.
 docs: >
   **Note:** The 'Text/Wrap' option is currently not working properly. This is because ol3 uses Canvas's strokeText and fillText functions that do not support text wrapping.
 tags: "geojson, vector, openstreetmap, label"

examples_src/vector-layer.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Vector layer example"
+title: Vector layer example
-shortdesc: "Example of a countries vector layer with country information."
+shortdesc: Example of a countries vector layer with country information.
 docs: >
   The countries are loaded from a GeoJSON file. Information about countries is shown on hover and click. Zoom in a few times to see country name labels.
 tags: "vector, osm, xml, loading, server"

examples_src/vector-osm.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "OSM XML example"
+title: OSM XML example
-shortdesc: "Example of using the OSM XML source."
+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"

examples_src/vector-wfs.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "WFS example"
+title: WFS example
-shortdesc: "Example of using WFS with a BBOX strategy."
+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"

examples_src/wkt.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "WKT example"
+title: WKT example
-shortdesc: "Example of using the WKT parser."
+shortdesc: Example of using the WKT parser.
 docs: >
   Create features from geometries in WKT (Well Known Text) format.
 tags: "wkt, well known text"

examples_src/wms-capabilities.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "WMS GetCapabilities parsing example"
+title: WMS GetCapabilities parsing example
-shortdesc: "Example of parsing a WMS GetCapabilities response."
+shortdesc: Example of parsing a WMS GetCapabilities response.
 docs: >
   This example shows the contents of the result object from parsing a WMS capabilities response.
 tags: "wms, capabilities, getcapabilities"

examples_src/wms-custom-proj.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Tiled WMS with custom projection example"
+title: Tiled WMS with custom projection example
-shortdesc: "Example of using custom coordinate transform functions."
+shortdesc: Example of using custom coordinate transform functions.
 docs: >
   With `ol.proj.addCoordinateTransforms()`, custom coordinate transform functions can be added to configured projections.
 tags: "wms, tile, tilelayer, projection"

examples_src/wms-image-custom-proj.html

@@ -1,7 +1,7 @@
 ---
-template: "example.html"
+template: example.html
-title: "Single image WMS with Proj4js projection example"
+title: Single image WMS with Proj4js projection example
-shortdesc: "Example of integrating Proj4js for coordinate transforms."
+shortdesc: Example of integrating Proj4js for coordinate transforms.
 docs: >
   With transparent [Proj4js](http://proj4js.org/) integration, OpenLayers can transform coordinates between arbitrary projections.
 tags: "wms, single image, proj4js, projection"