Convert R examples to strapless template

examples/raster.html

@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Raster Source
 shortdesc: Demonstrates pixelwise operations with a raster source.
 docs: >
@@ -21,13 +21,10 @@ docs: >
 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="rel">
-  <div class="span12 rel">
   <div id="map" class="map"></div>
   <div id="plot"></div>
 </div>
-</div>

examples/region-growing.html

@@ -1,5 +1,5 @@
 ---
-layout: example.html
+layout: strapless.html
 title: Region Growing
 shortdesc: Grow a region from a seed pixel
 docs: >
@@ -27,8 +27,6 @@ tags: "raster, region growing"
 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" style="cursor: pointer"></div>
 <table class="controls">
   <tr>
@@ -36,5 +34,3 @@ cloak:
     <td><input id="threshold" type="range" min="1" max="50" value="20"></td>
   </tr>
 </table>
-  </div>
-</div>

examples/regularshape.html

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

examples/reprojection-by-code.html

@@ -1,6 +1,6 @@
 ---
-layout: example.html
+layout: strapless.html
-title: Reprojection with EPSG.io database search
+title: Reprojection with EPSG.io Search
 shortdesc: Demonstrates client-side raster reprojection of MapQuest OSM to arbitrary projection
 docs: >
   This example shows client-side raster reprojection capabilities from
@@ -10,17 +10,16 @@ tags: "reprojection, projection, proj4js, mapquest, epsg.io"
 resources:
   - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
 ---
-<div class="row-fluid">
-  <div class="span12">
 <div id="map" class="map"></div>
-  </div>
 <form class="form-inline">
   <label for="epsg-query">Search projection:</label>
   <input type="text" id="epsg-query" placeholder="4326, 27700, US National Atlas, Swiss, France, ..." class="form-control" size="50" />
   <button id="epsg-search" class="btn">Search</button>
   <span id="epsg-result"></span>
   <div>
-      <label for="render-edges"><input type="checkbox" id="render-edges" />Render reprojection edges</label>
+    <label for="render-edges">
+      Render reprojection edges
+      <input type="checkbox" id="render-edges">
+    </label>
   </div>
 </form>
-</div>

examples/reprojection-by-code.js

@@ -65,12 +65,10 @@ function setProjection(code, name, proj4def, bbox) {
 
 function search(query) {
   resultSpan.innerHTML = 'Searching ...';
-  $.ajax({
+  fetch('http://epsg.io/?format=json&q=' + query).then(function(response) {
-    url: 'http://epsg.io/?format=json&q=' + query,
+    return response.json();
-    dataType: 'jsonp',
+  }).then(function(json) {
-    success: function(response) {
+    var results = json['results'];
-      if (response) {
-        var results = response['results'];
     if (results && results.length > 0) {
       for (var i = 0, ii = results.length; i < ii; i++) {
         var result = results[i];
@@ -85,9 +83,7 @@ function search(query) {
         }
       }
     }
-      }
     setProjection(null, null, null, null);
-    }
   });
 }
 

examples/reprojection-image.html

@@ -1,6 +1,6 @@
 ---
-layout: example.html
+layout: strapless.html
-title: Image reprojection example
+title: Image Reprojection
 shortdesc: Demonstrates client-side reprojection of single image source.
 docs: >
   This example shows client-side reprojection of single image source.
@@ -8,8 +8,4 @@ tags: "reprojection, projection, proj4js, mapquest, image, imagestatic"
 resources:
   - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
 ---
-<div class="row-fluid">
-  <div class="span12">
 <div id="map" class="map"></div>
-  </div>
-</div>

examples/reprojection-image.js

@@ -32,8 +32,8 @@ var map = new ol.Map({
   renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
-    center: ol.proj.transform(ol.extent.getCenter(imageExtent),
+    center: ol.proj.transform(
-                              'EPSG:27700', 'EPSG:3857'),
+        ol.extent.getCenter(imageExtent), 'EPSG:27700', 'EPSG:3857'),
     zoom: 4
   })
 });

examples/reprojection-wgs84.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: OpenStreetMap reprojection example
+title: OpenStreetMap Reprojection
 shortdesc: Demonstrates client-side reprojection of OpenStreetMap in WGS84.
 docs: >
   This example shows client-side reprojection of OpenStreetMap in WGS84.
 tags: "reprojection, projection, openstreetmap, wgs84, tile"
 ---
-<div class="row-fluid">
-  <div class="span12">
 <div id="map" class="map"></div>
-  </div>
-</div>

examples/reprojection-wgs84.js

@@ -14,6 +14,6 @@ var map = new ol.Map({
   view: new ol.View({
     projection: 'EPSG:4326',
     center: [0, 0],
-    zoom: 1
+    zoom: 2
   })
 });

examples/reprojection.html

@@ -1,6 +1,6 @@
 ---
-layout: example.html
+layout: strapless.html
-title: Raster reprojection example
+title: Raster Reprojection
 shortdesc: Demonstrates client-side raster reprojection between various projections.
 docs: >
   This example shows client-side raster reprojection between various projections.
@@ -8,10 +8,7 @@ tags: "reprojection, projection, proj4js, mapquest, wms, wmts, hidpi"
 resources:
   - http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js
 ---
-<div class="row-fluid">
-  <div class="span12">
 <div id="map" class="map"></div>
-  </div>
 <form class="form-inline">
   <div class="col-md-3">
     <label>Base map:</label>
@@ -43,6 +40,8 @@ resources:
       <option value="EPSG:5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
     </select>
   </div>
-    <label for="render-edges"><input type="checkbox" id="render-edges" />Render reprojection edges</label> (only displayed on reprojected data)
+  <label>
+    Render reprojection edges
+    <input type="checkbox" id="render-edges">
+  </label>
 </form>
-</div>

examples/reprojection.js

@@ -98,9 +98,12 @@ layers['wms21781'] = new ol.layer.Tile({
 });
 
 var parser = new ol.format.WMTSCapabilities();
-$.ajax('http://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
+var url = 'http://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
-    'wmts.cgi?SERVICE=WMTS&request=GetCapabilities').then(function(response) {
+    'wmts.cgi?SERVICE=WMTS&request=GetCapabilities';
-  var result = parser.read(response);
+fetch(url).then(function(response) {
+  return response.text();
+}).then(function(text) {
+  var result = parser.read(text);
   var options = ol.source.WMTS.optionsFromCapabilities(result,
       {layer: 'OSM_Land_Mask', matrixSet: 'EPSG3413_250m'});
   options.crossOrigin = '';

examples/rotation.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: Rotation example
+title: View Rotation
 shortdesc: Example of a rotated map.
 docs: >
-  <p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
+  <p>Use <code>Alt+Shift+Drag</code> to rotate the map.</p>
 tags: "rotation, openstreetmap"
 ---
-<div class="row-fluid">
-  <div class="span12">
 <div id="map" class="map"></div>
-  </div>
-</div>