Convert A-C examples to strapless template

examples/accessible.html

@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Accessibility example
 shortdesc: Example of an accessible map.
 docs: >
@@ -10,11 +10,7 @@ docs: >
 
 tags: "accessibility, tabindex"
 ---
-<div class="row-fluid">
+<a class="skiplink" href="#map">Go to map</a>
-  <div class="span12">
+<div id="map" class="map" tabindex="0"></div>
-    <a class="skiplink" href="#map">Go to map</a>
+<button id="zoom-out">Zoom out</button>
-    <div id="map" class="map" tabindex="0"></div>
+<button id="zoom-in">Zoom in</button>
-    <button id="zoom-out">Zoom out</button>
-    <button id="zoom-in">Zoom in</button>
-  </div>
-</div>

examples/animation.html

@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Animation example
 shortdesc: Demonstrates animated pan, zoom, and rotation.
 docs: >
@@ -7,21 +7,13 @@ docs: >
   or more animations.
 tags: "animation"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
+<button id="rotate-left" title="Rotate clockwise">↻</button>
-    <div id="map" class="map"></div>
+<button id="rotate-right" title="Rotate counterclockwise">↺</button>
-  </div>
+<button id="rotate-around-rome">Rotate around Rome</button>
-</div>
+<button id="pan-to-london">Pan to London</button>
-<div class="row-fluid">
+<button id="elastic-to-moscow">Elastic to Moscow</button>
-  <div class="span12">
+<button id="bounce-to-istanbul">Bounce to Istanbul</button>
-    <button id="rotate-left" title="Rotate clockwise">↻</button>
+<button id="spin-to-rome">Spin to Rome</button>
-    <button id="rotate-right" title="Rotate counterclockwise">↺</button>
+<button id="fly-to-bern">Fly to Bern</button>
-    <button id="rotate-around-rome">Rotate around Rome</button>
+<button id="spiral-to-madrid">Spiral to Madrid</button>
-    <button id="pan-to-london">Pan to London</button>
-    <button id="elastic-to-moscow">Elastic to Moscow</button>
-    <button id="bounce-to-istanbul">Bounce to Istanbul</button>
-    <button id="spin-to-rome">Spin to Rome</button>
-    <button id="fly-to-bern">Fly to Bern</button>
-    <button id="spiral-to-madrid">Spiral to Madrid</button>
-  </div>
-</div>

examples/arcgis-tiled.html

@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Tiled ArcGIS MapServer example
 shortdesc: Example of a tiled ArcGIS layer.
 docs: >
@@ -9,8 +9,4 @@ docs: >
   <code>ol.source.XYZ</code> instead.
 tags: arcgis, tile, tilelayer"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/attributions.html

@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Attributions example
 shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps.
 docs: >
@@ -8,8 +8,4 @@ docs: >
   of the map gets smaller than 600 pixels.
 tags: "attributions, openstreetmap"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/bing-maps.html

@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Bing Maps example
 shortdesc: Example of a Bing Maps layer.
 docs: >
@@ -8,8 +8,6 @@ tags: "bing, bing-maps"
 cloak:
   Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
- <div class="row-fluid">
-   <div class="span12">
  <div id="map" class="map"></div>
  <select id="layer-select">
    <option value="Aerial">Aerial</option>
@@ -18,5 +16,3 @@ cloak:
    <option value="collinsBart">Collins Bart</option>
    <option value="ordnanceSurvey">Ordnance Survey</option>
  </select>
-   </div>
- </div>

examples/blend-modes.html

@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Blend modes example
 shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
 docs: >
@@ -20,14 +20,8 @@ docs: >
   checkboxes.</p>
 tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
+<form class="form-horizontal">
-    <div id="map" class="map"></div>
-  </div>
-</div>
-<div class="row-fluid">
-  <div class="span12">
-    <form class="form-horizontal">
   <label>
     <select id="blend-mode" class="form-control">
       <option value="source-over">source-over (default)</option>
@@ -71,6 +65,4 @@ tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending
     <input type="checkbox" id="affect-blue" checked>
     Blue circle affected
   </label>
-    </form>
+</form>
-  </div>
-</div>

examples/box-selection.html

@@ -1,20 +1,12 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Box selection example
 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>
-  <p>Use <code>Ctrl+drag</code> (<code>Meta+drag</code> on Mac) to draw boxes.</p>
+  <p>Use <code>Ctrl+drag</code> (<code>Command+drag</code> on Mac) to draw boxes.</p>
 tags: "DragBox, feature, selection, box"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
+<div id="info">No countries selected</div>
-    <div id="map" class="map"></div>
-  </div>
-  <div class="span4 offset4 pull-right">
-    <div id="info" class="alert alert-success">
-      &nbsp;
-    </div>
-  </div>
-</div>

examples/button-title.css

@@ -1,4 +1,3 @@
 .tooltip-inner {
   white-space: nowrap;
 }
-

examples/button-title.html

@@ -1,13 +1,13 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Custom tooltips example
 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"
+resources:
+  - https://code.jquery.com/jquery-1.11.2.min.js
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/canvas-tiles.html

@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Canvas tiles example
 shortdesc: Renders tiles with coordinates for debugging.
 docs: >
@@ -10,8 +10,4 @@ docs: >
   `-y - 1`.
 tags: "layers, openstreetmap, canvas"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/center.html

@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 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.
 docs: >
@@ -13,22 +13,16 @@ docs: >
   <p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
 tags: "center, rotation, openstreetmap"
 ---
-<div class="row-fluid">
+<div class="mapcontainer">
-  <div class="span12 mapcontainer">
   <div id="map" class="map"></div>
   <div class="padding-top"></div>
   <div class="padding-left"></div>
   <div class="padding-right"></div>
   <div class="padding-bottom"></div>
   <div class="center"></div>
-  </div>
-</div>
-<div class="row-fluid">
-  <div class="span12">
-    <button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
-    <button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
-    <button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
-    <button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
-    <button id="centerlausanne">Center on Lausanne</button>
-  </div>
 </div>
+<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
+<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
+<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
+<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
+<button id="centerlausanne">Center on Lausanne</button>

examples/cluster.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Clustering example
 shortdesc: Example of using <code>ol.source.Cluster</code>.
 docs: >
   This example shows how to do clustering on point features.
 tags: "cluster, vector"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/color-manipulation.html

@@ -1,15 +1,13 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Manipulating colors with a raster source
 shortdesc: Demonstrates color manipulation with a raster source.
 docs: >
   A raster source allows arbitrary manipulation of pixel values.  In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source.  The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering.
 tags: "color, hue, lightness, chroma"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
+<table class="controls">
-    <div id="map" class="map"></div>
-    <table class="controls">
   <tr>
     <td>hue</td>
     <td><span id="hueOut"></span>°</td>
@@ -25,6 +23,4 @@ tags: "color, hue, lightness, chroma"
     <td><span id="lightnessOut"></span> %</td>
     <td><input id="lightness" type="range" min="0" max="100" value="100"/></td>
   </tr>
-    </table>
+</table>
-  </div>
-</div>

examples/custom-controls.html

@@ -6,8 +6,4 @@ docs: >
   This example creates a "rotate to north" button.
 tags: "custom, control"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/custom-controls.js

@@ -75,7 +75,7 @@ var map = new ol.Map({
   target: 'map',
   view: new ol.View({
     center: [0, 0],
-    zoom: 2,
+    zoom: 3,
     rotation: 1
   })
 });

examples/custom-interactions.html

@@ -7,8 +7,4 @@ docs: >
   Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features.
 tags: "drag, feature, vector, editing, custom, interaction"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/custom-interactions.js

@@ -19,8 +19,7 @@ goog.require('ol.style.Style');
 /**
  * Define a namespace for the application.
  */
-window.app = {};
+var app = {};
-var app = window.app;