Convert L examples to use strapless template

openlayers · Nov 18, 2015 · f886819 · f886819
1 parent 87fcca9
commit f886819
Show file tree

Hide file tree

Showing 14 changed files with 99 additions and 134 deletions.
diff --git a/examples/layer-clipping-webgl.html b/examples/layer-clipping-webgl.html
@@ -1,16 +1,12 @@
 ---
-layout: example.html
-title: Layer WebGL clipping example
+layout: strapless.html
+title: Layer Clipping with WebGL
 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"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>
 <div id="no-webgl" class="alert alert-danger" style="display: none">
   This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
 </div>
diff --git a/examples/layer-clipping.css b/examples/layer-clipping.css
@@ -0,0 +1,3 @@
+#map {
+  background: transparent;
+}
diff --git a/examples/layer-clipping.html b/examples/layer-clipping.html
@@ -1,13 +1,9 @@
 ---
-layout: example.html
-title: Layer clipping example
+layout: strapless.html
+title: Layer Clipping
 shortdesc: Layer clipping example
 docs: >
   Layer clipping example
 tags: "clipping, openstreetmap"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>
diff --git a/examples/layer-extent.html b/examples/layer-extent.html
@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Limited Layer Extent
 shortdesc: Restricting layer rendering to a limited extent.
 docs: >
@@ -8,15 +8,9 @@
   to limit rendering based on an extent.
 tags: "extent, tilejson"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
-<div class="btn-group">
-  <button type="button" class="btn btn-default" id="northwest">northwest</button>
-  <button type="button" class="btn btn-default" id="northeast">northeast</button>
-  <button type="button" class="btn btn-default" id="southeast">southeast</button>
-  <button type="button" class="btn btn-default" id="southwest">southwest</button>
-  <button type="button" class="btn btn-default" id="world">world</button>
-</div>
+<div id="map" class="map"></div>
+<button type="button" class="btn btn-default" id="northwest">northwest</button>
+<button type="button" class="btn btn-default" id="northeast">northeast</button>
+<button type="button" class="btn btn-default" id="southeast">southeast</button>
+<button type="button" class="btn btn-default" id="southwest">southwest</button>
+<button type="button" class="btn btn-default" id="world">world</button>
diff --git a/examples/layer-group.html b/examples/layer-group.html
@@ -1,56 +1,54 @@
 ---
-layout: example.html
-title: Layer group example
+layout: strapless.html
+title: Layer Groups
 shortdesc: Example of a map with layer group.
 docs: >
   Example of a map with layer group.
 tags: "tilejson, input, bind, group, layergroup"
+resources:
+  - https://code.jquery.com/jquery-1.11.2.min.js
 ---
-<div class="row-fluid">
-  <div class="span6">
-    <div id="map" class="map"></div>
-  </div>
-  <div id="layertree" class="span6">
-    <h5>Click on layer nodes below to change their properties.</h5>
-    <ul>
-      <li><span>OpenAerial layer</span>
-        <fieldset id="layer0">
-          <label class="checkbox" for="visible0">
-            <input id="visible0" class="visible" type="checkbox"/>visibility
-          </label>
-          <label>opacity</label>
-          <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-        </fieldset>
-      </li>
-      <li><span>Layer group</span>
-        <fieldset id="layer1">
-          <label class="checkbox" for="visible1">
-            <input id="visible1" class="visible" type="checkbox"/>visibility
-          </label>
-          <label>opacity</label>
-          <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-        </fieldset>
-        <ul>
-          <li><span>Food insecurity layer</span>
-            <fieldset id="layer10">
-              <label class="checkbox" for="visible10">
-                <input id="visible10" class="visible" type="checkbox"/>visibility
-              </label>
-              <label>opacity</label>
-              <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-            </fieldset>
-          </li>
-          <li><span>World borders layer</span>
-            <fieldset id="layer11">
-              <label class="checkbox" for="visible11">
-                <input id="visible11" class="visible" type="checkbox"/>visibility
-              </label>
-              <label>opacity</label>
-              <input class="opacity" type="range" min="0" max="1" step="0.01"/>
-            </fieldset>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </div>
+<div id="map" class="map"></div>
+<div id="layertree">
+  <h5>Click on layer nodes below to change their properties.</h5>
+  <ul>
+    <li><span>OpenAerial layer</span>
+      <fieldset id="layer0">
+        <label class="checkbox" for="visible0">
+          <input id="visible0" class="visible" type="checkbox"/>visibility
+        </label>
+        <label>opacity</label>
+        <input class="opacity" type="range" min="0" max="1" step="0.01"/>
+      </fieldset>
+    </li>
+    <li><span>Layer group</span>
+      <fieldset id="layer1">
+        <label class="checkbox" for="visible1">
+          <input id="visible1" class="visible" type="checkbox"/>visibility
+        </label>
+        <label>opacity</label>
+        <input class="opacity" type="range" min="0" max="1" step="0.01"/>
+      </fieldset>
+      <ul>
+        <li><span>Food insecurity layer</span>
+          <fieldset id="layer10">
+            <label class="checkbox" for="visible10">
+              <input id="visible10" class="visible" type="checkbox"/>visibility
+            </label>
+            <label>opacity</label>
+            <input class="opacity" type="range" min="0" max="1" step="0.01"/>
+          </fieldset>
+        </li>
+        <li><span>World borders layer</span>
+          <fieldset id="layer11">
+            <label class="checkbox" for="visible11">
+              <input id="visible11" class="visible" type="checkbox"/>visibility
+            </label>
+            <label>opacity</label>
+            <input class="opacity" type="range" min="0" max="1" step="0.01"/>
+          </fieldset>
+        </li>
+      </ul>
+    </li>
+  </ul>
 </div>
diff --git a/examples/layer-spy.html b/examples/layer-spy.html
@@ -1,6 +1,6 @@
 ---
-layout: example.html
-title: Layer Spy Example
+layout: strapless.html
+title: Layer Spy
 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.
@@ -12,8 +12,4 @@
 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>
-  </div>
-</div>
+<div id="map" class="map"></div>
diff --git a/examples/layer-spy.js b/examples/layer-spy.js
@@ -14,32 +14,39 @@ var imagery = new ol.layer.Tile({
   source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
 });
 
+var container = document.getElementById('map');
+
 var map = new ol.Map({
   layers: [roads, imagery],
-  target: 'map',
+  target: container,
   view: new ol.View({
     center: ol.proj.fromLonLat([-109, 46.5]),
     zoom: 6
   })
 });
 
 var radius = 75;
-$(document).keydown(function(evt) {
+document.addEventListener('keydown', function(evt) {
   if (evt.which === 38) {
     radius = Math.min(radius + 5, 150);
     map.render();
+    evt.preventDefault();
   } else if (evt.which === 40) {
     radius = Math.max(radius - 5, 25);
     map.render();
+    evt.preventDefault();
   }
 });
 
 // get the pixel position with every move
 var mousePosition = null;
-$(map.getViewport()).on('mousemove', function(evt) {
-  mousePosition = map.getEventPixel(evt.originalEvent);
+
+container.addEventListener('mousemove', function(event) {
+  mousePosition = map.getEventPixel(event);
   map.render();
-}).on('mouseout', function() {
+});
+
+container.addEventListener('mouseout', function() {
   mousePosition = null;
   map.render();
 });

diff --git a/examples/layer-swipe.html b/examples/layer-swipe.html
@@ -1,16 +1,12 @@
 ---
-layout: example.html
-title: Layer Swipe example
+layout: strapless.html
+title: Layer Swipe
 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">
-    <div id="map" class="map"></div>
-    <input id="swipe" type="range" style="width: 100%">
-  </div>
-</div>
+<div id="map" class="map"></div>
+<input id="swipe" type="range" style="width: 100%">
diff --git a/examples/layer-z-index.html b/examples/layer-z-index.html
@@ -1,20 +1,14 @@
 ---
-layout: example.html
-title: Z-index layer ordering example
+layout: strapless.html
+title: Layer Z-Index
 shortdesc: Example of ordering layers using Z-index.
 docs: >
+  There are are two managed layers (square and triangle) and one unmanaged layer (star).</br>
+  The Z-index determines the rendering order; with {square: 1, triangle: 0, star: unmanaged} indices, the rendering order is triangle, square and star on top.
 
 tags: "layer, ordering, z-index"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
-<div>
-  There are are two managed layers (square and triangle) and one unmanaged layer (star).</br>
-  The Z-index determines the rendering order; with {square: 1, triangle: 0, star: unmanaged} indices, the rendering order is triangle, square and star on top.
-</div>
+<div id="map" class="map"></div>
 <div>
   <label for="idx1">
     <input type="number" id="idx1"></input>

diff --git a/examples/layer-z-index.js b/examples/layer-z-index.js
@@ -82,11 +82,11 @@ layer0.setMap(map);
 
 
 function bindInputs(id, layer) {
-  var idxInput = $('#idx' + id);
-  idxInput.on('input change', function() {
+  var idxInput = document.getElementById('idx' + id);
+  idxInput.onchange = function() {
     layer.setZIndex(parseInt(this.value, 10) || 0);
-  });
-  idxInput.val(String(layer.getZIndex()));
+  };
+  idxInput.value = String(layer.getZIndex());
 }
 bindInputs(1, layer1);
 bindInputs(2, layer2);
diff --git a/examples/lazy-source.html b/examples/lazy-source.html
@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Lazy Source
 shortdesc: Example of setting a layer source after construction.
 docs: >
@@ -11,10 +11,6 @@
   until its source is set.</p>
 tags: "source"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>
 <button id="set-source" class="code">layer.setSource(source)</button>
 <button id="unset-source" class="code">layer.setSource(null)</button>
diff --git a/examples/line-arrows.html b/examples/line-arrows.html
@@ -1,13 +1,9 @@
 ---
-layout: example.html
-title: LineString arrows example
+layout: strapless.html
+title: LineString Arrows
 shortdesc: Example of drawing arrows for each line string segment.
 docs: >
   Example of drawing arrows for each line string segment.
 tags: "draw, vector, arrow"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>
diff --git a/examples/localized-openstreetmap.html b/examples/localized-openstreetmap.html
@@ -1,14 +1,10 @@
 ---
-layout: example.html
-title: Localized OpenStreetMap example
+layout: strapless.html
+title: Localized OpenStreetMap
 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>
 tags: "cors, localized-openstreetmap, openseamap, openstreetmap"
 ---
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>
+<div id="map" class="map"></div>
diff --git a/examples/localized-openstreetmap.js b/examples/localized-openstreetmap.js
@@ -6,9 +6,6 @@ goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 
 
-// tiles.openseamap.org does not set CORS headers, so we have to disable
-// crossOrigin and we cannot use WebGL.
-
 var openCycleMapLayer = new ol.layer.Tile({
   source: new ol.source.OSM({
     attributions: [