Convert WMTS examples to strapless template

examples/wmts-capabilities.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: WMTS GetCapabilities parsing example
+title: WMTS Capabilities Parsing
 shortdesc: Example of parsing a WMTS GetCapabilities response.
 docs: >
   This example shows the contents of the result object from parsing a WMTS capabilities response.
 tags: "wmts, capabilities, getcapabilities"
 ---
-<div class="row-fluid">
+<pre class="log-container"><code id="log"></code></pre>
-  <div class="span12">
-    <pre class="log-container"><code id="log"></code></pre>
-  </div>
-</div>

examples/wmts-capabilities.js

@@ -2,7 +2,9 @@ goog.require('ol.format.WMTSCapabilities');
 
 var parser = new ol.format.WMTSCapabilities();
 
-$.ajax('data/WMTSCapabilities.xml').then(function(response) {
+fetch('data/WMTSCapabilities.xml').then(function(response) {
-  var result = parser.read(response);
+  return response.text();
-  $('#log').html(window.JSON.stringify(result, null, 2));
+}).then(function(text) {
+  var result = parser.read(text);
+  document.getElementById('log').innerText = JSON.stringify(result, null, 2);
 });

examples/wmts-dimensions.html

@@ -1,18 +1,14 @@
 ---
-layout: example.html
+layout: strapless.html
-title: Smooth WMTS tile transition example
+title: WMTS Tile Transitions
 shortdesc: Example of smooth tile transitions when changing the dimension of a WMTS layer.
 docs: >
   Demonstrates smooth reloading of layers when changing a dimension continously. The demonstration layer is a global sea-level computation (flooding computation from <a href="http://scalgo.com">SCALGO</a>, underlying data from <a href="http://www.cgiar-csi.org/data/srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>) where cells that are flooded if the sea-level rises to more than <em>x</em> m are colored blue. The user selects the sea-level dimension using a slider.
 tags: "wmts, parameter, transition"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span6">
+<label>
-    <div id="map" class="map"></div>
+  Sea-level
-  </div>
+  <input id="slider" type="range" value="10" max="100" min="-1">
-  <div class="span6 offset3">
+</label>
-    Sea-level:
+<span id="theinfo"></span>
-    <input id="slider" type="range" value="10" step="0.25" max="100" min="-1" />
-    <span id="theinfo"></span>
-  </div>
-</div>

examples/wmts-dimensions.js

@@ -1,9 +1,6 @@
 goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
-goog.require('ol.control');
-goog.require('ol.control.Attribution');
-goog.require('ol.control.Zoom');
 goog.require('ol.extent');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
@@ -55,13 +52,9 @@ var map = new ol.Map({
   target: 'map',
   view: new ol.View({
     projection: projection,
-    center: [-3052589, 3541786],
+    center: [-9871995, 3566245],
-    zoom: 3
+    zoom: 6
   }),
-  controls: [
-    new ol.control.Zoom(),
-    new ol.control.Attribution()
-  ],
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM()
@@ -75,7 +68,7 @@ var map = new ol.Map({
 
 var updateSourceDimension = function(source, sliderVal) {
   source.updateDimensions({'threshold': sliderVal});
-  document.getElementById('theinfo').innerHTML = sliderVal + ' meters.';
+  document.getElementById('theinfo').innerHTML = sliderVal + ' meters';
 };
 
 updateSourceDimension(wmtsSource, 10);

examples/wmts-hidpi.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: WMTS HiDPI example
+title: High DPI WMTS
 shortdesc: Example of a WMTS based HiDPI layer.
 docs: >
   The WMTS source has a `tilePixelRatio` option. A HiDPI capable WMTS could provide tiles with 512x512 pixel tiles, but use them in a 256x256 pixel tile grid. In this case `tilePixelRatio` needs to be set to `2`.
 tags: "hidpi, retina, wmts"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/wmts-hidpi.js

@@ -23,8 +23,10 @@ var map = new ol.Map({
   })
 });
 
-$.ajax(capabilitiesUrl).then(function(response) {
+fetch(capabilitiesUrl).then(function(response) {
-  var result = new ol.format.WMTSCapabilities().read(response);
+  return response.text();
+}).then(function(text) {
+  var result = new ol.format.WMTSCapabilities().read(text);
   var options = ol.source.WMTS.optionsFromCapabilities(result, {
     layer: layer,
     matrixSet: 'google3857',

examples/wmts-ign.html

@@ -1,6 +1,6 @@
 ---
-layout: example.html
+layout: strapless.html
-title: IGN WMTS example
+title: IGN WMTS
 shortdesc: Demonstrates displaying IGN (France) WMTS layers.
 docs: >
     In this example an IGN WMTS layer is displayed.
@@ -11,8 +11,4 @@ docs: >
     Descriptif technique des web services du Géoportail</a> (french).
 tags: "french, ign, geoportail, wmts"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/wmts-layer-from-capabilities.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: WMTS Layer from capabilities example
+title: WMTS Layer from Capabilities
 shortdesc: Example of a WMTS source created from a WMTS capabilities document.
 docs: >
-  This example shows how to create the configuration for accessing a WMTS from a GetCapabilities response.. The [WMTS example](wmts.html) shows how to create the configuration manually.
+  This example shows how to create the configuration for accessing a WMTS from a GetCapabilities response. The [WMTS example](wmts.html) shows how to create the configuration manually.
 tags: "wmts, capabilities, getcapabilities"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/wmts-layer-from-capabilities.js

@@ -8,8 +8,10 @@ goog.require('ol.source.WMTS');
 var parser = new ol.format.WMTSCapabilities();
 var map;
 
-$.ajax('data/WMTSCapabilities.xml').then(function(response) {
+fetch('data/WMTSCapabilities.xml').then(function(response) {
-  var result = parser.read(response);
+  return response.text();
+}).then(function(text) {
+  var result = parser.read(text);
   var options = ol.source.WMTS.optionsFromCapabilities(result,
       {layer: 'layer-7328', matrixSet: 'EPSG:3857'});
 

examples/wmts.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: WMTS example
+title: WMTS
 shortdesc: Example of a WMTS source.
 docs: >
   This example shows how to manually create the configuration for accessing a WMTS. The [WMTS Layer from capabilities example](wmts-layer-from-capabilities.html) shows how to create the configuration from a GetCapabilities response.
 tags: "wmts"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>