Convert X-Z examples to strapless template

examples/xyz-esri-4326-512.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: XYZ Esri EPSG:4326 tileSize 512 example
+title: ArcGIS REST with 512x512 Tiles
 shortdesc: Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles.
 docs: >
   ArcGIS REST tile services with custom tile sizes (here: 512x512 pixels) and projection (here: EPSG:4326) are supported by `ol.source.XYZ`. A custom tile url function is used to handle zoom level offsets.
 tags: "xyz, esri, tilesize, custom projection"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/xyz-esri.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: XYZ Esri example
+title: XYZ Esri
 shortdesc: Example of a XYZ source using Esri tiles.
 docs: >
   ArcGIS REST tile services are supported by `ol.source.XYZ`.
 tags: "xyz, esri, arcgis rest"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/xyz-retina.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: XYZ Retina tiles example
+title: XYZ Retina Tiles
 shortdesc: Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ.
 docs: >
   The ol.source.XYZ must contain `tilePixelRatio` parameter. The tiles were prepared from a GeoTIFF file with [MapTiler](http://www.maptiler.com/).
 tags: "retina, hidpi, xyz, maptiler, @2x, devicePixelRatio"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/xyz.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: XYZ Example
+title: XYZ
 shortdesc: Example of a XYZ source.
 docs: >
   The XYZ source is used for tile data that is accessed through URLs that include a zoom level and tile grid x/y coordinates.
 tags: "xyz"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/xyz.js

@@ -1,41 +1,15 @@
-goog.require('ol.Attribution');
 goog.require('ol.Map');
 goog.require('ol.View');
-goog.require('ol.control');
 goog.require('ol.layer.Tile');
-goog.require('ol.source.OSM');
 goog.require('ol.source.XYZ');
 
 
-var attribution = new ol.Attribution({
-  html: 'Tiles &copy; <a href="http://maps.nls.uk/townplans/glasgow_1.html">' +
-      'National Library of Scotland</a>'
-});
-
 var map = new ol.Map({
   target: 'map',
-  controls: ol.control.defaults({
-    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
-      collapsible: false
-    })
-  }),
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM({
-        attributions: [
-          new ol.Attribution({
-            html: 'Tiles &copy; <a href="http://www.opencyclemap.org/">' +
-                'OpenCycleMap</a>'
-          }),
-          ol.source.OSM.ATTRIBUTION
-        ],
-        url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
-      })
-    }),
     new ol.layer.Tile({
       source: new ol.source.XYZ({
-        attributions: [attribution],
+        url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
-        url: 'http://geo.nls.uk/maps/towns/glasgow1857/{z}/{x}/{-y}.png'
       })
     })
   ],

examples/zoom-constrained.html

@@ -1,6 +1,6 @@
 ---
-layout: example.html
+layout: strapless.html
-title: Zoom Constrained Example
+title: Constrained Zoom
 shortdesc: Example of a zoom constrained view.
 docs: >
   This map has a view that is constrained between zoom levels 9 and 13.  This is done using the `minZoom` and `maxZoom` view options.
@@ -8,8 +8,4 @@ tags: "bing, zoom, minZoom, maxZoom"
 cloak:
   Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3: Your Bing Maps Key from http://bingmapsportal.com/ here
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/zoomify.html

@@ -1,13 +1,9 @@
 ---
-layout: example.html
+layout: strapless.html
-title: Zoomify example
+title: Zoomify
 shortdesc: Example of a Zoomify source.
 docs: >
   Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection.
 tags: "zoomify, deep zoom, pixel, projection"
 ---
-<div class="row-fluid">
+<div id="map" class="map"></div>
-  <div class="span12">
-    <div id="map" class="map"></div>
-  </div>
-</div>

examples/zoomify.js

@@ -5,17 +5,8 @@ goog.require('ol.proj');
 goog.require('ol.proj.Projection');
 goog.require('ol.source.Zoomify');
 
-// This server does not support CORS, and so is incompatible with WebGL.
-//var imgWidth = 8001;
-//var imgHeight = 6943;
-//var url = 'http://mapy.mzk.cz/AA22/0103/';
-//var crossOrigin = undefined;
-
 var imgWidth = 9911;
 var imgHeight = 6100;
-var url = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
-        '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/';
-var crossOrigin = 'anonymous';
 
 var imgCenter = [imgWidth / 2, - imgHeight / 2];
 
@@ -29,9 +20,10 @@ var proj = new ol.proj.Projection({
 });
 
 var source = new ol.source.Zoomify({
-  url: url,
+  url: 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
+      '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/',
   size: [imgWidth, imgHeight],
-  crossOrigin: crossOrigin
+  crossOrigin: 'anonymous'
 });
 
 var map = new ol.Map({
@@ -40,12 +32,11 @@ var map = new ol.Map({
       source: source
     })
   ],
-  renderer: common.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({
     projection: proj,
     center: imgCenter,
-    zoom: 0,
+    zoom: 2,
     // constrain the center: center cannot be set outside
     // this extent
     extent: [0, -imgHeight, imgWidth, 0]

examples/zoomslider.html

@@ -1,22 +1,16 @@
 ---
-layout: example.html
+layout: strapless.html
-title: Zoom slider example
+title: Zoom Sliders
 shortdesc: Example of various ZoomSlider controls.
 docs: >
   This example shows how to add a zoom slider to a map and how to customize it.
 tags: "zoom, zoomslider, slider, style, styling, css, control"
 ---
-<div class="row-fluid">
+<h4>Default style</h4>
-  <div class="span4">
+<div id="map1" class="map"></div>
-    <h4>Default style</h4>
+
-    <div id="map1" class="map"></div>
+<h4>Placed between zoom controls</h4>
-  </div>
+<div id="map2" class="map"></div>
-  <div class="span4">
+
-    <h4>Placed between zoom controls</h4>
+<h4>Horizontal and completely re-styled</h4>
-    <div id="map2" class="map"></div>
+<div id="map3" class="map"></div>
-  </div>
-  <div class="span4">
-    <h4>Horizontal and completely re-styled</h4>
-    <div id="map3" class="map"></div>
-  </div>
-</div>