Adding float-no-zero branch hosted build

2014-03-07 10:55:12 +01:00
parent 84cad42f6d
commit bd9092199b
1664 changed files with 731463 additions and 0 deletions
--- a/float-no-zero/examples/Jugl.js
+++ b/float-no-zero/examples/Jugl.js
--- a/float-no-zero/examples/accessible-require.js
+++ b/float-no-zero/examples/accessible-require.js
@@ -0,0 +1,4 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
--- a/float-no-zero/examples/accessible.html
+++ b/float-no-zero/examples/accessible.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Accessibility example</title>
+    <style>
+      a.accesskey {
+        color: #FFFFFF;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <a class="accesskey" onclick="document.getElementById('map').focus(); return false;" accesskey="1" href="">Go to map</a>
+          <div id="map" class="map" tabindex="0"></div>
+          <a class="zoom" accesskey="i" href="javascript: void map.getView().setZoom(map.getView().getZoom() + 1);">Zoom in</a>
+          <a class="zoom" accesskey="o" href="javascript: void map.getView().setZoom(map.getView().getZoom() - 1);">Zoom out</a>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Accessibility example</h4>
+          <p id="shortdesc">Example of an accessible map.</p>
+          <div id="docs">
+            <p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>. That makes is focusable. To focus the map element you can either navigate to it using the "tab" key, or use the <a href="http://en.wikipedia.org/wiki/Access_key">Access Key</a> "1" (alt+1 or ctrl+alt+1) which provides a direct access. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out, and the arrow keys can be used to pan.</p>
+            <p>When clicked the "Zoom in" and "Zoom out" links below the map zoom the map in and out, respectively. You can navigate to the links using the "tab" key, and press the "enter" key to trigger the zooming action. The Access Keys "i" and "o" can also be used, as a direct access to the actions of "Zoom in" and "Zoom out" links.</p>
+            <p>See the source of the page to see how this done.</p>
+          </div>
+          <div id="tags">accessibility, tabindex</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=accessible" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/accessible.js
+++ b/float-no-zero/examples/accessible.js
@@ -0,0 +1,13 @@
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
--- a/float-no-zero/examples/animation-require.js
+++ b/float-no-zero/examples/animation-require.js
@@ -0,0 +1,7 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.animation');
+goog.require('ol.easing');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
--- a/float-no-zero/examples/animation.html
+++ b/float-no-zero/examples/animation.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Animation example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
+          <button id="rotate-left"><i class="icon-arrow-left"></i></button>
+          <button id="rotate-right"><i class="icon-arrow-right"></i></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>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Animation example</h4>
+          <p id="shortdesc">Demonstrates animated pan, zoom, and rotation.</p>
+          <div id="docs">
+            <p>See the <a href="animation.js" target="_blank">animation.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">animation</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=animation" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/animation.js
+++ b/float-no-zero/examples/animation.js
@@ -0,0 +1,133 @@
+var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
+var moscow = ol.proj.transform([37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
+var istanbul = ol.proj.transform([28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
+var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
+var bern = ol.proj.transform([7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
+var madrid = ol.proj.transform([-3.683333, 40.4], 'EPSG:4326', 'EPSG:3857');
+
+var view = new ol.View2D({
+  // the view's initial state
+  center: istanbul,
+  zoom: 6
+});
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      preload: 4,
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: view
+});
+
+var rotateLeft = document.getElementById('rotate-left');
+rotateLeft.addEventListener('click', function() {
+  var rotateLeft = ol.animation.rotate({
+    duration: 2000,
+    rotation: -4 * Math.PI
+  });
+  map.beforeRender(rotateLeft);
+}, false);
+var rotateRight = document.getElementById('rotate-right');
+rotateRight.addEventListener('click', function() {
+  var rotateRight = ol.animation.rotate({
+    duration: 2000,
+    rotation: 4 * Math.PI
+  });
+  map.beforeRender(rotateRight);
+}, false);
+
+
+var panToLondon = document.getElementById('pan-to-london');
+panToLondon.addEventListener('click', function() {
+  var pan = ol.animation.pan({
+    duration: 2000,
+    source: /** @type {ol.Coordinate} */ (view.getCenter())
+  });
+  map.beforeRender(pan);
+  view.setCenter(london);
+}, false);
+
+var elasticToMoscow = document.getElementById('elastic-to-moscow');
+elasticToMoscow.addEventListener('click', function() {
+  var pan = ol.animation.pan({
+    duration: 2000,
+    easing: ol.easing.elastic,
+    source: /** @type {ol.Coordinate} */ (view.getCenter())
+  });
+  map.beforeRender(pan);
+  view.setCenter(moscow);
+}, false);
+
+var bounceToIstanbul = document.getElementById('bounce-to-istanbul');
+bounceToIstanbul.addEventListener('click', function() {
+  var pan = ol.animation.pan({
+    duration: 2000,
+    easing: ol.easing.bounce,
+    source: /** @type {ol.Coordinate} */ (view.getCenter())
+  });
+  map.beforeRender(pan);
+  view.setCenter(istanbul);
+}, false);
+
+var spinToRome = document.getElementById('spin-to-rome');
+spinToRome.addEventListener('click', function() {
+  var duration = 2000;
+  var start = +new Date();
+  var pan = ol.animation.pan({
+    duration: duration,
+    source: /** @type {ol.Coordinate} */ (view.getCenter()),
+    start: start
+  });
+  var rotate = ol.animation.rotate({
+    duration: duration,
+    rotation: 2 * Math.PI,
+    start: start
+  });
+  map.beforeRender(pan, rotate);
+  view.setCenter(rome);
+}, false);
+
+var flyToBern = document.getElementById('fly-to-bern');
+flyToBern.addEventListener('click', function() {
+  var duration = 2000;
+  var start = +new Date();
+  var pan = ol.animation.pan({
+    duration: duration,
+    source: /** @type {ol.Coordinate} */ (view.getCenter()),
+    start: start
+  });
+  var bounce = ol.animation.bounce({
+    duration: duration,
+    resolution: 4 * view.getResolution(),
+    start: start
+  });
+  map.beforeRender(pan, bounce);
+  view.setCenter(bern);
+}, false);
+
+var spiralToMadrid = document.getElementById('spiral-to-madrid');
+spiralToMadrid.addEventListener('click', function() {
+  var duration = 2000;
+  var start = +new Date();
+  var pan = ol.animation.pan({
+    duration: duration,
+    source: /** @type {ol.Coordinate} */ (view.getCenter()),
+    start: start
+  });
+  var bounce = ol.animation.bounce({
+    duration: duration,
+    resolution: 2 * view.getResolution(),
+    start: start
+  });
+  var rotate = ol.animation.rotate({
+    duration: duration,
+    rotation: -4 * Math.PI,
+    start: start
+  });
+  map.beforeRender(pan, bounce, rotate);
+  view.setCenter(madrid);
+}, false);
--- a/float-no-zero/examples/bind-input-require.js
+++ b/float-no-zero/examples/bind-input-require.js
@@ -0,0 +1,6 @@
+goog.require('ol.BrowserFeature');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.dom.Input');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
--- a/float-no-zero/examples/bind-input.html
+++ b/float-no-zero/examples/bind-input.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Bind HTML input example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">Bind HTML input example</h4>
+          <p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
+          <div id="docs">
+            <p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
+            <div id="no-webgl" class="alert alert-warning" style="display: none">
+              <h4>Warning!</h4>
+              A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
+              <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>.
+            </div>
+          </div>
+          <div id="tags">input, bind, openstreetmap</div>
+        </div>
+
+        <div class="span4">
+          <form class="">
+            <fieldset>
+              <legend>Layer</legend>
+              <label class="checkbox" for="visible">
+                <input id="visible" type="checkbox"/>visibility
+              </label>
+              <label>opacity</label>
+              <input id="opacity" type="range" min="0" max="1" step="0.01"/>
+              <label>hue</label>
+              <input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+              <label>saturation</label>
+              <input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/>
+              <label>contrast</label>
+              <input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/>
+              <label>brightness</label>
+              <input id="brightness" class="webgl" type="range" min="-1" max="1" step="0.01"/>
+            </fieldset>
+          </form>
+        </div>
+
+        <div class="span4">
+          <form class="">
+            <fieldset>
+              <legend>View</legend>
+              <label>rotation</label>
+              <input id="rotation" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+              <label>resolution</label>
+              <input id="resolution" type="number" min="0" step="250"/>
+            </fieldset>
+          </form>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=bind-input" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/bind-input.js
+++ b/float-no-zero/examples/bind-input.js
@@ -0,0 +1,57 @@
+if (!ol.BrowserFeature.HAS_WEBGL) {
+  var inputs = document.getElementsByClassName('webgl');
+  for (var i = 0, len = inputs.length; i < len; i++) {
+    inputs[i].disabled = true;
+  }
+  var info = document.getElementById('no-webgl');
+  /**
+   * display warning message
+   */
+  info.style.display = '';
+}
+
+var layer = new ol.layer.Tile({
+  source: new ol.source.OSM()
+});
+
+var view = new ol.View2D({
+  center: [0, 0],
+  zoom: 2
+});
+
+var map = new ol.Map({
+  layers: [layer],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: view
+});
+
+var visible = new ol.dom.Input(document.getElementById('visible'));
+visible.bindTo('checked', layer, 'visible');
+
+var opacity = new ol.dom.Input(document.getElementById('opacity'));
+opacity.bindTo('value', layer, 'opacity')
+    .transform(parseFloat, String);
+
+var hue = new ol.dom.Input(document.getElementById('hue'));
+hue.bindTo('value', layer, 'hue')
+    .transform(parseFloat, String);
+
+var saturation = new ol.dom.Input(document.getElementById('saturation'));
+saturation.bindTo('value', layer, 'saturation')
+    .transform(parseFloat, String);
+
+var contrast = new ol.dom.Input(document.getElementById('contrast'));
+contrast.bindTo('value', layer, 'contrast')
+    .transform(parseFloat, String);
+
+var brightness = new ol.dom.Input(document.getElementById('brightness'));
+brightness.bindTo('value', layer, 'brightness')
+    .transform(parseFloat, String);
+
+
+var rotation = new ol.dom.Input(document.getElementById('rotation'));
+rotation.bindTo('value', view, 'rotation').transform(parseFloat, String);
+
+var resolution = new ol.dom.Input(document.getElementById('resolution'));
+resolution.bindTo('value', view, 'resolution').transform(parseFloat, String);
--- a/float-no-zero/examples/bing-maps-require.js
+++ b/float-no-zero/examples/bing-maps-require.js
@@ -0,0 +1,4 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
--- a/float-no-zero/examples/bing-maps.html
+++ b/float-no-zero/examples/bing-maps.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Bing Maps example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+
+          <select id="layer-select">
+            <option value="Aerial">Aerial</option>
+            <option value="AerialWithLabels" selected>Aerial with labels</option>
+            <option value="Road">Road</option>
+            <option value="collinsBart">Collins Bart</option>
+            <option value="ordnanceSurvey">Ordnance Survey</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Bing Maps example</h4>
+          <p id="shortdesc">Example of a Bing Maps layer.</p>
+          <div id="docs">
+            <p>See the <a href="bing-maps.js" target="_blank">bing-maps.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">bing, bing-maps</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=bing-maps" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/bing-maps.js
+++ b/float-no-zero/examples/bing-maps.js
@@ -0,0 +1,37 @@
+var styles = [
+  'Road',
+  'Aerial',
+  'AerialWithLabels',
+  'collinsBart',
+  'ordnanceSurvey'
+];
+var layers = [];
+var i, ii;
+for (i = 0, ii = styles.length; i < ii; ++i) {
+  layers.push(new ol.layer.Tile({
+    visible: false,
+    preload: Infinity,
+    source: new ol.source.BingMaps({
+      key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+      imagerySet: styles[i]
+    })
+  }));
+}
+var map = new ol.Map({
+  layers: layers,
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [-6655.5402445057125, 6709968.258934638],
+    zoom: 13
+  })
+});
+
+$('#layer-select').change(function() {
+  var style = $(this).find(':selected').val();
+  var i, ii;
+  for (i = 0, ii = layers.length; i < ii; ++i) {
+    layers[i].setVisible(styles[i] == style);
+  }
+});
+$('#layer-select').trigger('change');
--- a/float-no-zero/examples/brightness-contrast-require.js
+++ b/float-no-zero/examples/brightness-contrast-require.js
@@ -0,0 +1,5 @@
+goog.require('ol.BrowserFeature');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
--- a/float-no-zero/examples/brightness-contrast.html
+++ b/float-no-zero/examples/brightness-contrast.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Brightness/contrast example</title>
+    <style>
+      #reset-brightness {
+        min-width: 138px;
+      }
+      #reset-contrast {
+        min-width: 120px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
+          <div class="btn-group">
+            <button id="increase-brightness"><i class="icon-plus"></i></button>
+            <button id="reset-brightness">Brightness</button>
+            <button id="decrease-brightness"><i class="icon-minus"></i></button>
+          </div>
+          <div class="btn-group">
+            <button id="increase-contrast"><i class="icon-plus"></i></button>
+            <button id="reset-contrast">Contrast</button>
+            <button id="decrease-contrast"><i class="icon-minus"></i></button>
+          </div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Brightness/contrast example</h4>
+          <p id="shortdesc">Example of brightness/contrast control on the client (WebGL only).</p>
+          <div id="docs">
+            <p>See the <a href="brightness-contrast.js" target="_blank">brightness-contrast.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">brightness, contrast, webgl</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=brightness-contrast" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/brightness-contrast.js
+++ b/float-no-zero/examples/brightness-contrast.js
@@ -0,0 +1,68 @@
+function setResetBrightnessButtonHTML() {
+  resetBrightness.innerHTML = 'Brightness (' +
+      layer.getBrightness().toFixed(3) + ')';
+}
+
+function setResetContrastButtonHTML() {
+  resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
+}
+
+if (!ol.BrowserFeature.HAS_WEBGL) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
+  var layer = new ol.layer.Tile({
+    source: new ol.source.MapQuest({layer: 'sat'})
+  });
+
+  var map = new ol.Map({
+    layers: [layer],
+    renderer: 'webgl',
+    target: 'map',
+    view: new ol.View2D({
+      center: [0, 0],
+      zoom: 2
+    })
+  });
+
+  var increaseBrightness = document.getElementById('increase-brightness');
+  var resetBrightness = document.getElementById('reset-brightness');
+  var decreaseBrightness = document.getElementById('decrease-brightness');
+
+  setResetBrightnessButtonHTML();
+
+  increaseBrightness.addEventListener('click', function() {
+    layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
+    setResetBrightnessButtonHTML();
+  }, false);
+  resetBrightness.addEventListener('click', function() {
+    layer.setBrightness(0);
+    setResetBrightnessButtonHTML();
+  }, false);
+  decreaseBrightness.addEventListener('click', function() {
+    layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
+    setResetBrightnessButtonHTML();
+  }, false);
+
+  var increaseContrast = document.getElementById('increase-contrast');
+  var resetContrast = document.getElementById('reset-contrast');
+  var decreaseContrast = document.getElementById('decrease-contrast');
+
+  setResetContrastButtonHTML();
+
+  increaseContrast.addEventListener('click', function() {
+    layer.setContrast(layer.getContrast() + 0.125);
+    setResetContrastButtonHTML();
+  }, false);
+  resetContrast.addEventListener('click', function() {
+    layer.setContrast(1);
+    setResetContrastButtonHTML();
+  }, false);
+  decreaseContrast.addEventListener('click', function() {
+    layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
+    setResetContrastButtonHTML();
+  }, false);
+}
--- a/float-no-zero/examples/canvas-tiles-require.js
+++ b/float-no-zero/examples/canvas-tiles-require.js
@@ -0,0 +1,7 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
+goog.require('ol.source.TileDebug');
+goog.require('ol.tilegrid.XYZ');
--- a/float-no-zero/examples/canvas-tiles.html
+++ b/float-no-zero/examples/canvas-tiles.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Canvas tiles example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Canvas tiles example</h4>
+          <p id="shortdesc">Renders tiles with coordinates for debugging.</p>
+          <div id="docs">
+            <p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</p>
+            <p>See the <a href="canvas-tiles.js" target="_blank">canvas-tiles.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">layers, openstreetmap, canvas</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/canvas-tiles.js
+++ b/float-no-zero/examples/canvas-tiles.js
@@ -0,0 +1,22 @@
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    }),
+    new ol.layer.Tile({
+      source: new ol.source.TileDebug({
+        projection: 'EPSG:3857',
+        tileGrid: new ol.tilegrid.XYZ({
+          maxZoom: 22
+        })
+      })
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View2D({
+    center: ol.proj.transform(
+        [-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
+    zoom: 10
+  })
+});
--- a/float-no-zero/examples/custom-controls-require.js
+++ b/float-no-zero/examples/custom-controls-require.js
@@ -0,0 +1,7 @@
+goog.require('ol');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.control');
+goog.require('ol.control.Control');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
--- a/float-no-zero/examples/custom-controls.html
+++ b/float-no-zero/examples/custom-controls.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style type="text/css">
+      .rotate-north {
+        position: absolute;
+        top: 65px;
+        left: 8px;
+        background: rgba(255,255,255,0.4);
+        border-radius: 4px;
+        padding: 2px;
+      }
+      .ol-touch .rotate-north {
+        top: 80px;
+      }
+      .rotate-north a {
+        display: block;
+        color: white;
+        font-size: 16px;
+        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+        font-weight: bold;
+        margin: 1px;
+        text-decoration: none;
+        text-align: center;
+        border-radius: 2px;
+        height: 22px;
+        width: 22px;
+        background: rgba(0,60,136,0.5);
+      }
+      .ol-touch .rotate-north a {
+        font-size: 20px;
+        height: 30px;
+        width: 30px;
+        line-height: 26px;
+      }
+      .rotate-north a:hover {
+        background: rgba(0,60,136,0.7);
+      }
+    </style>
+    <title>ol3 custom controls example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
+          <h4 id="title">Custom controls</h4>
+          <p id="shortdesc">This example shows how to create custom controls.</p>
+          <div id="docs">
+            <p>
+              This example creates a "rotate to north" button.
+              See the <a href="custom-controls.js" target="_blank">custom-controls.js
+              source</a> to see how this is done.
+            </p>
+          </div>
+          <div id="tags">
+            custom, control
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=custom-controls" type="text/javascript"></script>
+
+  </body>
+
+</html>
--- a/float-no-zero/examples/custom-controls.js
+++ b/float-no-zero/examples/custom-controls.js
@@ -0,0 +1,71 @@
+/**
+ * Define a namespace for the application.
+ */
+window.app = {};
+var app = window.app;
+
+
+//
+// Define rotate to north control.
+//
+
+
+
+/**
+ * @constructor
+ * @extends {ol.control.Control}
+ * @param {Object=} opt_options Control options.
+ */
+app.RotateNorthControl = function(opt_options) {
+
+  var options = opt_options || {};
+
+  var anchor = document.createElement('a');
+  anchor.href = '#rotate-north';
+  anchor.innerHTML = 'N';
+
+  var this_ = this;
+  var handleRotateNorth = function(e) {
+    // prevent #rotate-north anchor from getting appended to the url
+    e.preventDefault();
+    this_.getMap().getView().getView2D().setRotation(0);
+  };
+
+  anchor.addEventListener('click', handleRotateNorth, false);
+  anchor.addEventListener('touchstart', handleRotateNorth, false);
+
+  var element = document.createElement('div');
+  element.className = 'rotate-north ol-unselectable';
+  element.appendChild(anchor);
+
+  ol.control.Control.call(this, {
+    element: element,
+    target: options.target
+  });
+
+};
+ol.inherits(app.RotateNorthControl, ol.control.Control);
+
+
+//
+// Create map, giving it a rotate to north control.
+//
+
+
+var map = new ol.Map({
+  controls: ol.control.defaults().extend([
+    new app.RotateNorthControl()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2,
+    rotation: 1
+  })
+});
--- a/float-no-zero/examples/d3-require.js
+++ b/float-no-zero/examples/d3-require.js
@@ -0,0 +1,9 @@
+goog.require('ol');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.extent');
+goog.require('ol.layer.Image');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.ImageCanvas');
+goog.require('ol.source.Stamen');
--- a/float-no-zero/examples/d3.html
+++ b/float-no-zero/examples/d3.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>d3 integration example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">d3 integration example</h4>
+          <p id="shortdesc">Example of using ol3 and d3 together.</p>
+          <div id="docs">
+            <p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
+            <p>See the <a href="d3.js" target="_blank">d3.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">d3</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="http://d3js.org/d3.v3.min.js"></script>
+    <script src="http://d3js.org/topojson.v1.min.js"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=d3" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/d3.js
+++ b/float-no-zero/examples/d3.js
@@ -0,0 +1,84 @@
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.Stamen({
+        layer: 'watercolor'
+      })
+    })
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: ol.proj.transform([-97, 38], 'EPSG:4326', 'EPSG:3857'),
+    zoom: 4
+  })
+});
+
+
+/**
+ * Load the topojson data and create an ol.layer.Image for that data.
+ */
+d3.json('data/topojson/us.json', function(error, us) {
+  var features = topojson.feature(us, us.objects.counties);
+
+  /**
+   * This function uses d3 to render the topojson features to a canvas.
+   * @param {ol.Extent} extent Extent.
+   * @param {number} resolution Resolution.
+   * @param {number} pixelRatio Pixel ratio.
+   * @param {ol.Size} size Size.
+   * @param {ol.proj.Projection} projection Projection.
+   * @return {HTMLCanvasElement}
+   */
+  var canvasFunction = function(extent, resolution, pixelRatio,
+      size, projection) {
+    var canvasWidth = size[0];
+    var canvasHeight = size[1];
+
+    var canvas = d3.select(document.createElement('canvas'));
+    canvas.attr('width', canvasWidth).attr('height', canvasHeight);
+
+    var context = canvas.node().getContext('2d');
+
+    var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
+    var d3Path = d3.geo.path().projection(d3Projection);
+
+    var pixelBounds = d3Path.bounds(features);
+    var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
+    var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
+
+    var geoBounds = d3.geo.bounds(features);
+    var geoBoundsLeftBottom = ol.proj.transform(
+        geoBounds[0], 'EPSG:4326', projection);
+    var geoBoundsRightTop = ol.proj.transform(
+        geoBounds[1], 'EPSG:4326', projection);
+    var geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
+    if (geoBoundsWidth < 0) {
+      geoBoundsWidth += ol.extent.getWidth(projection.getExtent());
+    }
+    var geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
+
+    var widthResolution = geoBoundsWidth / pixelBoundsWidth;
+    var heightResolution = geoBoundsHeight / pixelBoundsHeight;
+    var r = Math.max(widthResolution, heightResolution);
+    var scale = r / (resolution / pixelRatio);
+
+    var center = ol.proj.transform(ol.extent.getCenter(extent),
+        projection, 'EPSG:4326');
+    d3Projection.scale(scale).center(center)
+        .translate([canvasWidth / 2, canvasHeight / 2]);
+    d3Path = d3Path.projection(d3Projection).context(context);
+    d3Path(features);
+    context.stroke();
+
+    return canvas[0][0];
+  };
+
+  var layer = new ol.layer.Image({
+    source: new ol.source.ImageCanvas({
+      canvasFunction: canvasFunction,
+      projection: 'EPSG:3857'
+    })
+  });
+  map.addLayer(layer);
+});
--- a/float-no-zero/examples/data/IGNWMTSCapabilities.xml
+++ b/float-no-zero/examples/data/IGNWMTSCapabilities.xml
--- a/float-no-zero/examples/data/WMTSCapabilities.xml
+++ b/float-no-zero/examples/data/WMTSCapabilities.xml
@@ -0,0 +1,374 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Capabilities xmlns="http://www.opengis.net/wmts/1.0" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:gml="http://www.opengis.net/gml" xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd" version="1.0.0">
+	<ows:ServiceIdentification>
+		<ows:Title>Web Map Tile Service</ows:Title>
+		<ows:ServiceType>OGC WMTS</ows:ServiceType>
+		<ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
+		<ows:Fees>none</ows:Fees>
+		<ows:AccessConstraints>http://data.wien.gv.at/nutzungsbedingungen</ows:AccessConstraints>
+	</ows:ServiceIdentification>
+	<ows:ServiceProvider>
+		<ows:ProviderName>Magistrat Wien</ows:ProviderName>
+		<ows:ProviderSite xlink:href="http://www.wien.gv.at"/>
+		<ows:ServiceContact>
+			<ows:IndividualName>Gerhard Sommer</ows:IndividualName>
+		</ows:ServiceContact>
+	</ows:ServiceProvider>
+	<ows:OperationsMetadata>
+		<ows:Operation name="GetCapabilities">
+			<ows:DCP>
+				<ows:HTTP>
+					<ows:Get xlink:href="http://maps.wien.gv.at/wmts">
+						<ows:Constraint name="GetEncoding">
+							<ows:AllowedValues>
+								<ows:Value>RESTful</ows:Value>
+							</ows:AllowedValues>
+						</ows:Constraint>
+					</ows:Get>
+					<ows:Get xlink:href="http://maps1.wien.gv.at/wmts">
+						<ows:Constraint name="GetEncoding">
+							<ows:AllowedValues>
+								<ows:Value>RESTful</ows:Value>
+							</ows:AllowedValues>
+						</ows:Constraint>
+					</ows:Get>
+					<ows:Get xlink:href="http://maps2.wien.gv.at/wmts">
+						<ows:Constraint name="GetEncoding">
+							<ows:AllowedValues>
+								<ows:Value>RESTful</ows:Value>
+							</ows:AllowedValues>
+						</ows:Constraint>
+					</ows:Get>
+					<ows:Get xlink:href="http://maps3.wien.gv.at/wmts">
+						<ows:Constraint name="GetEncoding">
+							<ows:AllowedValues>
+								<ows:Value>RESTful</ows:Value>
+							</ows:AllowedValues>
+						</ows:Constraint>
+					</ows:Get>
+					<ows:Get xlink:href="http://maps4.wien.gv.at/wmts">
+						<ows:Constraint name="GetEncoding">
+							<ows:AllowedValues>
+								<ows:Value>RESTful</ows:Value>
+							</ows:AllowedValues>
+						</ows:Constraint>
+					</ows:Get>
+				</ows:HTTP>
+			</ows:DCP>
+		</ows:Operation>
+		<ows:Operation name="GetTile">
+			<ows:DCP>
+				<ows:HTTP>
+					<ows:Get xlink:href="http://maps.wien.gv.at/wmts">
+						<ows:Constraint name="GetEncoding">
+							<ows:AllowedValues>
+								<ows:Value>RESTful</ows:Value>
+							</ows:AllowedValues>
+						</ows:Constraint>
+					</ows:Get>
+					<ows:Get xlink:href="http://maps1.wien.gv.at/wmts">
+						<ows:Constraint name="GetEncoding">
+							<ows:AllowedValues>
+								<ows:Value>RESTful</ows:Value>
+							</ows:AllowedValues>
+						</ows:Constraint>
+					</ows:Get>
+					<ows:Get xlink:href="http://maps2.wien.gv.at/wmts">
+						<ows:Constraint name="GetEncoding">
+							<ows:AllowedValues>
+								<ows:Value>RESTful</ows:Value>
+							</ows:AllowedValues>
+						</ows:Constraint>
+					</ows:Get>
+					<ows:Get xlink:href="http://maps3.wien.gv.at/wmts">
+						<ows:Constraint name="GetEncoding">
+							<ows:AllowedValues>
+								<ows:Value>RESTful</ows:Value>
+							</ows:AllowedValues>
+						</ows:Constraint>
+					</ows:Get>
+					<ows:Get xlink:href="http://maps4.wien.gv.at/wmts">
+						<ows:Constraint name="GetEncoding">
+							<ows:AllowedValues>
+								<ows:Value>RESTful</ows:Value>
+							</ows:AllowedValues>
+						</ows:Constraint>
+					</ows:Get>
+				</ows:HTTP>
+			</ows:DCP>
+		</ows:Operation>
+	</ows:OperationsMetadata>
+	<Contents>
+		<Layer>
+			<ows:Title>Luftbild</ows:Title>
+			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
+				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
+				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
+			</ows:WGS84BoundingBox>
+			<ows:Identifier>lb</ows:Identifier>
+			<Style isDefault="true">
+				<ows:Identifier>farbe</ows:Identifier>
+			</Style>
+			<Format>image/jpeg</Format>
+			<TileMatrixSetLink>
+				<TileMatrixSet>google3857</TileMatrixSet>
+			</TileMatrixSetLink>
+			<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+		</Layer>
+		<Layer>
+			<ows:Title>MZK Flächen</ows:Title>
+			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
+				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
+				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
+			</ows:WGS84BoundingBox>
+			<ows:Identifier>fmzk</ows:Identifier>
+			<Style isDefault="true">
+				<ows:Identifier>pastell</ows:Identifier>
+			</Style>
+			<Format>image/jpeg</Format>
+			<TileMatrixSetLink>
+				<TileMatrixSet>google3857</TileMatrixSet>
+			</TileMatrixSetLink>
+			<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+		</Layer>
+		<Layer>
+			<ows:Title>Flächenwidmungs- und Bebauungsplan</ows:Title>
+			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
+				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
+				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
+			</ows:WGS84BoundingBox>
+			<ows:Identifier>flwbplmzk</ows:Identifier>
+			<Style isDefault="true">
+				<ows:Identifier>rot</ows:Identifier>
+			</Style>
+			<Format>image/jpeg</Format>
+			<TileMatrixSetLink>
+				<TileMatrixSet>google3857</TileMatrixSet>
+			</TileMatrixSetLink>
+			<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+			<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
+		</Layer>
+		<Layer>
+			<ows:Title>Beschriftung</ows:Title>
+			<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
+				<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
+				<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
+			</ows:WGS84BoundingBox>
+			<ows:Identifier>beschriftung</ows:Identifier>
+			<Style isDefault="true">
+				<ows:Identifier>normal</ows:Identifier>
+			</Style>
+			<Format>image/png</Format>
+			<TileMatrixSetLink>
+				<TileMatrixSet>google3857</TileMatrixSet>
+			</TileMatrixSetLink>
+			<ResourceURL format="image/png" template="http://maps1.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
+			<ResourceURL format="image/png" template="http://maps2.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
+			<ResourceURL format="image/png" template="http://maps3.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
+			<ResourceURL format="image/png" template="http://maps4.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
+			<ResourceURL format="image/png" template="http://maps.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
+		</Layer>
+		<TileMatrixSet>
+			<!-- -180 85.05112878 -->
+			<ows:Identifier>google3857</ows:Identifier>
+			<ows:BoundingBox crs="urn:ogc:def:crs:EPSG:6.18:3:3857">
+				<ows:LowerCorner>1799448.394855 6124949.747770</ows:LowerCorner>
+				<ows:UpperCorner>1848250.442089 6162571.828177</ows:UpperCorner>
+			</ows:BoundingBox>
+			<ows:SupportedCRS>urn:ogc:def:crs:EPSG:6.18:3:3857</ows:SupportedCRS>
+			<WellKnownScaleSet>urn:ogc:def:wkss:OGC:1.0:GoogleMapsCompatible</WellKnownScaleSet>
+			<TileMatrix>
+				<ows:Identifier>0</ows:Identifier>
+				<ScaleDenominator>559082264.029</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>1</MatrixWidth>
+				<MatrixHeight>1</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>1</ows:Identifier>
+				<ScaleDenominator>279541132.015</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>2</MatrixWidth>
+				<MatrixHeight>2</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>2</ows:Identifier>
+				<ScaleDenominator>139770566.007</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>4</MatrixWidth>
+				<MatrixHeight>4</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>3</ows:Identifier>
+				<ScaleDenominator>69885283.0036</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>8</MatrixWidth>
+				<MatrixHeight>8</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>4</ows:Identifier>
+				<ScaleDenominator>34942641.5018</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>16</MatrixWidth>
+				<MatrixHeight>16</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>5</ows:Identifier>
+				<ScaleDenominator>17471320.7509</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>32</MatrixWidth>
+				<MatrixHeight>32</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>6</ows:Identifier>
+				<ScaleDenominator>8735660.37545</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>64</MatrixWidth>
+				<MatrixHeight>64</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>7</ows:Identifier>
+				<ScaleDenominator>4367830.18773</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>128</MatrixWidth>
+				<MatrixHeight>128</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>8</ows:Identifier>
+				<ScaleDenominator>2183915.09386</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>256</MatrixWidth>
+				<MatrixHeight>256</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>9</ows:Identifier>
+				<ScaleDenominator>1091957.54693</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>512</MatrixWidth>
+				<MatrixHeight>512</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>10</ows:Identifier>
+				<ScaleDenominator>545978.773466</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>1024</MatrixWidth>
+				<MatrixHeight>1024</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>11</ows:Identifier>
+				<ScaleDenominator>272989.386733</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>2048</MatrixWidth>
+				<MatrixHeight>2048</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>12</ows:Identifier>
+				<ScaleDenominator>136494.693366</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>4096</MatrixWidth>
+				<MatrixHeight>4096</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>13</ows:Identifier>
+				<ScaleDenominator>68247.3466832</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>8192</MatrixWidth>
+				<MatrixHeight>8192</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>14</ows:Identifier>
+				<ScaleDenominator>34123.6733416</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>16384</MatrixWidth>
+				<MatrixHeight>16384</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>15</ows:Identifier>
+				<ScaleDenominator>17061.8366708</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>32768</MatrixWidth>
+				<MatrixHeight>32768</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>16</ows:Identifier>
+				<ScaleDenominator>8530.91833540</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>65536</MatrixWidth>
+				<MatrixHeight>65536</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>17</ows:Identifier>
+				<ScaleDenominator>4265.45916770</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>131072</MatrixWidth>
+				<MatrixHeight>131072</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>18</ows:Identifier>
+				<ScaleDenominator>2132.72958385</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>262144</MatrixWidth>
+				<MatrixHeight>262144</MatrixHeight>
+			</TileMatrix>
+			<TileMatrix>
+				<ows:Identifier>19</ows:Identifier>
+				<ScaleDenominator>1066.36479193</ScaleDenominator>
+				<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+				<TileWidth>256</TileWidth>
+				<TileHeight>256</TileHeight>
+				<MatrixWidth>524288</MatrixWidth>
+				<MatrixHeight>524288</MatrixHeight>
+			</TileMatrix>
+		</TileMatrixSet>
+	</Contents>
+	<ServiceMetadataURL xlink:href="http://maps.wien.gv.at/wmts/1.0.0/WMTSCapabilities.xml"/>
+</Capabilities>
--- a/float-no-zero/examples/data/geojson/countries.geojson
+++ b/float-no-zero/examples/data/geojson/countries.geojson
--- a/float-no-zero/examples/data/gml/topp-states-wfs.xml
+++ b/float-no-zero/examples/data/gml/topp-states-wfs.xml
--- a/float-no-zero/examples/data/gpx/fells_loop.gpx
+++ b/float-no-zero/examples/data/gpx/fells_loop.gpx
--- a/float-no-zero/examples/data/icon.png
+++ b/float-no-zero/examples/data/icon.png
--- a/float-no-zero/examples/data/igc/Clement-Latour.igc
+++ b/float-no-zero/examples/data/igc/Clement-Latour.igc
--- a/float-no-zero/examples/data/igc/Damien-de-Baenst.igc
+++ b/float-no-zero/examples/data/igc/Damien-de-Baenst.igc
--- a/float-no-zero/examples/data/igc/Sylvain-Dhonneur.igc
+++ b/float-no-zero/examples/data/igc/Sylvain-Dhonneur.igc
--- a/float-no-zero/examples/data/igc/Tom-Payne.igc
+++ b/float-no-zero/examples/data/igc/Tom-Payne.igc
--- a/float-no-zero/examples/data/igc/Ulrich-Prinz.igc
+++ b/float-no-zero/examples/data/igc/Ulrich-Prinz.igc
--- a/float-no-zero/examples/data/kml/2012-02-10.kml
+++ b/float-no-zero/examples/data/kml/2012-02-10.kml
--- a/float-no-zero/examples/data/kml/2012_Earthquakes_Mag5.kml
+++ b/float-no-zero/examples/data/kml/2012_Earthquakes_Mag5.kml
--- a/float-no-zero/examples/data/kml/timezones.kml
+++ b/float-no-zero/examples/data/kml/timezones.kml
--- a/float-no-zero/examples/data/ogcsample.xml
+++ b/float-no-zero/examples/data/ogcsample.xml
@@ -0,0 +1,284 @@
+<?xml version='1.0' encoding="UTF-8"?>
+<WMS_Capabilities version="1.3.0" xmlns="http://www.opengis.net/wms"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xsi:schemaLocation="http://www.opengis.net/wms http://schemas.opengis.net/wms/1.3.0/capabilities_1_3_0.xsd">
+<Service>
+  <Name>WMS</Name>
+  <Title>Acme Corp. Map Server</Title>
+  <Abstract>Map Server maintained by Acme Corporation.  Contact: webmaster@wmt.acme.com.  High-quality maps showing roadrunner nests and possible ambush locations.</Abstract>
+
+  <KeywordList>
+    <Keyword>bird</Keyword>
+    <Keyword>roadrunner</Keyword>
+    <Keyword>ambush</Keyword>
+  </KeywordList>
+  <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
+   xlink:href="http://hostname/" />
+
+
+  <ContactInformation>
+    <ContactPersonPrimary>
+      <ContactPerson>Jeff Smith</ContactPerson>
+      <ContactOrganization>NASA</ContactOrganization>
+    </ContactPersonPrimary>
+    <ContactPosition>Computer Scientist</ContactPosition>
+
+    <ContactAddress>
+      <AddressType>postal</AddressType>
+      <Address>NASA Goddard Space Flight Center</Address>
+      <City>Greenbelt</City>
+      <StateOrProvince>MD</StateOrProvince>
+      <PostCode>20771</PostCode>
+
+      <Country>USA</Country>
+    </ContactAddress>
+    <ContactVoiceTelephone>+1 301 555-1212</ContactVoiceTelephone>
+    <ContactElectronicMailAddress>user@host.com</ContactElectronicMailAddress>
+  </ContactInformation>
+
+  <Fees>none</Fees>
+
+  <AccessConstraints>none</AccessConstraints>
+  <LayerLimit>16</LayerLimit>
+  <MaxWidth>2048</MaxWidth>
+  <MaxHeight>2048</MaxHeight>
+</Service>
+<Capability>
+  <Request>
+    <GetCapabilities>
+
+      <Format>text/xml</Format>
+      <DCPType>
+        <HTTP>
+          <Get>
+            <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
+             xlink:type="simple"
+             xlink:href="http://hostname/path?" />
+          </Get>
+          <Post>
+            <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
+             xlink:type="simple"
+             xlink:href="http://hostname/path?" />
+
+          </Post>
+        </HTTP>
+      </DCPType>
+    </GetCapabilities>
+    <GetMap>
+      <Format>image/gif</Format>
+      <Format>image/png</Format>
+      <Format>image/jpeg</Format>
+
+      <DCPType>
+        <HTTP>
+          <Get>
+            <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
+             xlink:type="simple"
+             xlink:href="http://hostname/path?" />
+          </Get>
+        </HTTP>
+      </DCPType>
+    </GetMap>
+
+    <GetFeatureInfo>
+      <Format>text/xml</Format>
+      <Format>text/plain</Format>
+      <Format>text/html</Format>
+      <DCPType>
+        <HTTP>
+          <Get>
+
+            <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
+             xlink:type="simple"
+             xlink:href="http://hostname/path?" />
+          </Get>
+        </HTTP>
+      </DCPType>
+    </GetFeatureInfo>
+  </Request>
+  <Exception>
+    <Format>XML</Format>
+
+    <Format>INIMAGE</Format>
+    <Format>BLANK</Format>
+  </Exception>
+  <Layer>
+    <Title>Acme Corp. Map Server</Title>
+    <CRS>CRS:84</CRS>
+
+    <AuthorityURL name="DIF_ID">
+      <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
+       xlink:href="http://gcmd.gsfc.nasa.gov/difguide/whatisadif.html" />
+    </AuthorityURL>
+    <BoundingBox CRS="CRS:84"
+     minx="-1" miny="-1" maxx="1" maxy="1" resx="0.0" resy="0.0"/>
+    <Layer>
+
+      <Name>ROADS_RIVERS</Name>
+      <Title>Roads and Rivers</Title>
+
+      <CRS>EPSG:26986</CRS>
+      <EX_GeographicBoundingBox>
+        <westBoundLongitude>-71.63</westBoundLongitude>
+        <eastBoundLongitude>-70.78</eastBoundLongitude>
+        <southBoundLatitude>41.75</southBoundLatitude>
+        <northBoundLatitude>42.90</northBoundLatitude>
+
+      </EX_GeographicBoundingBox>
+      <BoundingBox CRS="CRS:84"
+       minx="-71.63" miny="41.75" maxx="-70.78" maxy="42.90" resx="0.01" resy="0.01"/>
+      <BoundingBox CRS="EPSG:26986"
+       minx="189000" miny="834000" maxx="285000" maxy="962000" resx="1" resy="1" />
+      <Attribution>
+        <Title>State College University</Title>
+        <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
+         xlink:href="http://www.university.edu/" />
+
+        <LogoURL width="100" height="100">
+          <Format>image/gif</Format>
+          <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
+           xlink:type="simple"
+           xlink:href="http://www.university.edu/icons/logo.gif" />
+        </LogoURL>
+      </Attribution>
+      <Identifier authority="DIF_ID">123456</Identifier>
+      <FeatureListURL>
+
+        <Format>XML</Format>
+        <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
+         xlink:href="http://www.university.edu/data/roads_rivers.gml" />
+      </FeatureListURL>
+      <Style>
+        <Name>USGS</Name>
+        <Title>USGS Topo Map Style</Title>
+        <Abstract>Features are shown in a style like that used in USGS topographic maps.</Abstract>
+
+        <LegendURL width="72" height="72">
+          <Format>image/gif</Format>
+          <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
+           xlink:type="simple"
+           xlink:href="http://www.university.edu/legends/usgs.gif" />
+        </LegendURL>
+        <StyleSheetURL>
+          <Format>text/xsl</Format>
+
+          <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
+           xlink:type="simple"
+           xlink:href="http://www.university.edu/stylesheets/usgs.xsl" />
+        </StyleSheetURL>
+      </Style>
+      <MinScaleDenominator>1000</MinScaleDenominator>
+      <MaxScaleDenominator>250000</MaxScaleDenominator>
+      <Layer queryable="1">
+        <Name>ROADS_1M</Name>
+        <Title>Roads at 1:1M scale</Title>
+        <Abstract>Roads at a scale of 1 to 1 million.</Abstract>
+
+        <KeywordList>
+          <Keyword>road</Keyword>
+          <Keyword>transportation</Keyword>
+          <Keyword>atlas</Keyword>
+        </KeywordList>
+        <Identifier authority="DIF_ID">123456</Identifier>
+        <MetadataURL type="FGDC:1998">
+
+                <Format>text/plain</Format>
+                <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
+                 xlink:type="simple"
+                 xlink:href="http://www.university.edu/metadata/roads.txt" />
+             </MetadataURL>
+        <MetadataURL type="ISO19115:2003">
+               <Format>text/xml</Format>
+               <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
+                xlink:type="simple"
+                xlink:href="http://www.university.edu/metadata/roads.xml" />
+             </MetadataURL>
+
+        <Style>
+          <Name>ATLAS</Name>
+          <Title>Road atlas style</Title>
+          <Abstract>Roads are shown in a style like that used in a commercial road atlas.</Abstract>
+        <LegendURL width="72" height="72">
+          <Format>image/gif</Format>
+          <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
+           xlink:type="simple"
+           xlink:href="http://www.university.edu/legends/atlas.gif" />
+
+        </LegendURL>
+        </Style>
+      </Layer>
+      <Layer queryable="1">
+        <Name>RIVERS_1M</Name>
+        <Title>Rivers at 1:1M scale</Title>
+        <Abstract>Rivers at a scale of 1 to 1 million.</Abstract>
+
+        <KeywordList>
+          <Keyword>river</Keyword>
+          <Keyword>canal</Keyword>
+          <Keyword>waterway</Keyword>
+        </KeywordList>
+      </Layer>
+    </Layer>
+
+    <Layer queryable="1">
+      <Title>Weather Forecast Data</Title>
+      <CRS>CRS:84</CRS>
+
+      <EX_GeographicBoundingBox>
+        <westBoundLongitude>-180</westBoundLongitude>
+        <eastBoundLongitude>180</eastBoundLongitude>
+
+        <southBoundLatitude>-90</southBoundLatitude>
+        <northBoundLatitude>90</northBoundLatitude>
+      </EX_GeographicBoundingBox>
+      <Dimension name="time" units="ISO8601" default="2000-08-22">1999-01-01/2000-08-22/P1D</Dimension>
+      <Layer>
+
+        <Name>Clouds</Name>
+        <Title>Forecast cloud cover</Title>
+      </Layer>
+      <Layer>
+        <Name>Temperature</Name>
+        <Title>Forecast temperature</Title>
+      </Layer>
+
+      <Layer>
+        <Name>Pressure</Name>
+        <Title>Forecast barometric pressure</Title>
+         <Dimension name="elevation" units="EPSG:5030" />
+         <Dimension name="time" units="ISO8601" default="2000-08-22">
+           1999-01-01/2000-08-22/P1D</Dimension>
+
+         <Dimension name="elevation" units="CRS:88" default="0" nearestValue="1">0,1000,3000,5000,10000</Dimension>
+      </Layer>
+    </Layer>
+    <Layer opaque="1" noSubsets="1" fixedWidth="512" fixedHeight="256">
+      <Name>ozone_image</Name>
+      <Title>Global ozone distribution (1992)</Title>
+
+      <EX_GeographicBoundingBox>
+        <westBoundLongitude>-180</westBoundLongitude>
+        <eastBoundLongitude>180</eastBoundLongitude>
+        <southBoundLatitude>-90</southBoundLatitude>
+        <northBoundLatitude>90</northBoundLatitude>
+      </EX_GeographicBoundingBox>
+      <Dimension name="time" units="ISO8601" default="1992">1992</Dimension>
+
+    </Layer>
+    <Layer cascaded="1">
+      <Name>population</Name>
+      <Title>World population, annual</Title>
+      <EX_GeographicBoundingBox>
+        <westBoundLongitude>-180</westBoundLongitude>
+
+        <eastBoundLongitude>180</eastBoundLongitude>
+        <southBoundLatitude>-90</southBoundLatitude>
+        <northBoundLatitude>90</northBoundLatitude>
+      </EX_GeographicBoundingBox>
+      <Dimension name="time" units="ISO8601" default="2000">1990/2000/P1Y</Dimension>
+    </Layer>
+  </Layer>
+
+</Capability>
+</WMS_Capabilities>
--- a/float-no-zero/examples/data/osm/map.osm
+++ b/float-no-zero/examples/data/osm/map.osm
--- a/float-no-zero/examples/data/sld/countries.sld
+++ b/float-no-zero/examples/data/sld/countries.sld
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" version="1.0.0">
+  <sld:NamedLayer>
+    <sld:Name>countries</sld:Name>
+    <sld:UserStyle>
+      <sld:Name>countries</sld:Name>
+      <sld:Title>A sample style for countries</sld:Title>
+      <sld:IsDefault>1</sld:IsDefault>
+      <sld:Abstract>A sample style for countries</sld:Abstract>
+      <sld:FeatureTypeStyle>
+        <sld:Name>name</sld:Name>
+        <sld:Rule>
+          <sld:Name>Sample</sld:Name>
+          <sld:Title>Sample</sld:Title>
+          <sld:PolygonSymbolizer>
+            <sld:Fill>
+              <sld:CssParameter name="fill">#ff0000</sld:CssParameter>
+              <sld:CssParameter name="fill-opacity">0.6</sld:CssParameter>
+            </sld:Fill>
+            <sld:Stroke>
+              <sld:CssParameter name="stroke">#00FF00</sld:CssParameter>
+              <sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>
+              <sld:CssParameter name="stroke-width">4</sld:CssParameter>
+            </sld:Stroke>
+          </sld:PolygonSymbolizer>
+        </sld:Rule>
+        <sld:Rule>  
+          <sld:MaxScaleDenominator>20000000</sld:MaxScaleDenominator>
+          <sld:TextSymbolizer>
+            <sld:Label>
+              <ogc:PropertyName>name</ogc:PropertyName>
+            </sld:Label>
+            <sld:Font>
+              <sld:CssParameter name="font-family">Arial</sld:CssParameter>
+              <sld:CssParameter name="font-size">10</sld:CssParameter>
+              <sld:CssParameter name="font-style">Normal</sld:CssParameter>
+            </sld:Font>
+          </sld:TextSymbolizer>          
+        </sld:Rule>
+      </sld:FeatureTypeStyle>
+    </sld:UserStyle>
+  </sld:NamedLayer>
+</sld:StyledLayerDescriptor>
--- a/float-no-zero/examples/data/topojson/us.json
+++ b/float-no-zero/examples/data/topojson/us.json
--- a/float-no-zero/examples/data/topojson/world-110m.json
+++ b/float-no-zero/examples/data/topojson/world-110m.json
--- a/float-no-zero/examples/device-orientation-require.js
+++ b/float-no-zero/examples/device-orientation-require.js
@@ -0,0 +1,6 @@
+goog.require('ol.DeviceOrientation');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.dom.Input');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
--- a/float-no-zero/examples/device-orientation.html
+++ b/float-no-zero/examples/device-orientation.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Device-Orientation example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Device orientation example</h4>
+          <label class="checkbox" for="track">
+            <input id="track" type="checkbox"/>track changes
+          </label>
+          <p>&alpha; : <code id="alpha"></code></p>
+          <p>&beta; : <code id="beta"></code></p>
+          <p>&gamma; : <code id="gamma"></code></p>
+          <p>heading : <code id="heading"></code></p>
+          <p id="shortdesc">Listen to DeviceOrientation events</p>
+          <div id="docs">
+            <p>See the <a href="device-orientation.js" target="_blank">device-orientation.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">orientation, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=device-orientation" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/device-orientation.js
+++ b/float-no-zero/examples/device-orientation.js
@@ -0,0 +1,39 @@
+var view = new ol.View2D({
+  center: [0, 0],
+  zoom: 2
+});
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: view
+});
+
+var deviceOrientation = new ol.DeviceOrientation();
+var track = new ol.dom.Input(document.getElementById('track'));
+track.bindTo('checked', deviceOrientation, 'tracking');
+
+deviceOrientation.on('propertychange', function(event) {
+  // event.key is the changed property name
+  var element = document.getElementById(event.key);
+  if (element) {
+    element.innerHTML = deviceOrientation.get(event.key);
+  }
+});
+
+// tilt the map
+deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
+  var center = view.getCenter();
+  var resolution = view.getResolution();
+  var beta = event.target.getBeta() || 0;
+  var gamma = event.target.getGamma() || 0;
+
+  center[0] -= resolution * gamma * 25;
+  center[1] += resolution * beta * 25;
+
+  view.setCenter(center);
+});
--- a/float-no-zero/examples/drag-and-drop-image-vector-require.js
+++ b/float-no-zero/examples/drag-and-drop-image-vector-require.js
@@ -0,0 +1,18 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.format.GPX');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.format.IGC');
+goog.require('ol.format.KML');
+goog.require('ol.format.TopoJSON');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragAndDrop');
+goog.require('ol.layer.Image');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.ImageVector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
--- a/float-no-zero/examples/drag-and-drop-image-vector.html
+++ b/float-no-zero/examples/drag-and-drop-image-vector.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Drag-and-Drop image vector example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">Drag-and-Drop image vector example</h4>
+          <p id="shortdesc">Example of using the drag-and-drop interaction with a <code>ol.source.ImageVector</code>. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.</p>
+          <div id="docs">
+            <p>See the <a href="drag-and-drop-image-vector.js" target="_blank">drag-and-drop-image-vector.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image</div>
+        </div>
+        <div class="span4 offset4">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=drag-and-drop-image-vector" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/drag-and-drop-image-vector.js
+++ b/float-no-zero/examples/drag-and-drop-image-vector.js
@@ -0,0 +1,134 @@
+var defaultStyle = {
+  'Point': [new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,255,0,0.5)'
+      }),
+      radius: 5,
+      stroke: new ol.style.Stroke({
+        color: '#ff0',
+        width: 1
+      })
+    })
+  })],
+  'LineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#f00',
+      width: 3
+    })
+  })],
+  'Polygon': [new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(0,255,255,0.5)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#0ff',
+      width: 1
+    })
+  })],
+  'MultiPoint': [new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,0,255,0.5)'
+      }),
+      radius: 5,
+      stroke: new ol.style.Stroke({
+        color: '#f0f',
+        width: 1
+      })
+    })
+  })],
+  'MultiLineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#0f0',
+      width: 3
+    })
+  })],
+  'MultiPolygon': [new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(0,0,255,0.5)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#00f',
+      width: 1
+    })
+  })]
+};
+
+var styleFunction = function(feature, resolution) {
+  var featureStyleFunction = feature.getStyleFunction();
+  if (featureStyleFunction) {
+    return featureStyleFunction.call(feature, resolution);
+  } else {
+    return defaultStyle[feature.getGeometry().getType()];
+  }
+};
+
+var dragAndDropInteraction = new ol.interaction.DragAndDrop({
+  formatConstructors: [
+    ol.format.GPX,
+    ol.format.GeoJSON,
+    ol.format.IGC,
+    ol.format.KML,
+    ol.format.TopoJSON
+  ]
+});
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.BingMaps({
+        imagerySet: 'Aerial',
+        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+      })
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+dragAndDropInteraction.on('addfeatures', function(event) {
+  var vectorSource = new ol.source.Vector({
+    features: event.features,
+    projection: event.projection
+  });
+  map.getLayers().push(new ol.layer.Image({
+    source: new ol.source.ImageVector({
+      source: vectorSource,
+      style: styleFunction
+    })
+  }));
+  var view2D = map.getView().getView2D();
+  view2D.fitExtent(vectorSource.getExtent(), map.getSize());
+});
+
+var displayFeatureInfo = function(pixel) {
+  var features = [];
+  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+    features.push(feature);
+  });
+  if (features.length > 0) {
+    var info = [];
+    var i, ii;
+    for (i = 0, ii = features.length; i < ii; ++i) {
+      info.push(features[i].get('name'));
+    }
+    document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
+  } else {
+    document.getElementById('info').innerHTML = '&nbsp;';
+  }
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('singleclick', function(evt) {
+  displayFeatureInfo(evt.pixel);
+});
--- a/float-no-zero/examples/drag-and-drop-require.js
+++ b/float-no-zero/examples/drag-and-drop-require.js
@@ -0,0 +1,17 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.format.GPX');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.format.IGC');
+goog.require('ol.format.KML');
+goog.require('ol.format.TopoJSON');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragAndDrop');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
--- a/float-no-zero/examples/drag-and-drop.html
+++ b/float-no-zero/examples/drag-and-drop.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Drag-and-Drop example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">Drag-and-Drop example</h4>
+          <p id="shortdesc">Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map.</p>
+          <div id="docs">
+            <p>See the <a href="drag-and-drop.js" target="_blank">drag-and-drop.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">drag-and-drop, gpx, geojson, igc, kml, topojson</div>
+        </div>
+        <div class="span4 offset4">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=drag-and-drop" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/drag-and-drop.js
+++ b/float-no-zero/examples/drag-and-drop.js
@@ -0,0 +1,132 @@
+var defaultStyle = {
+  'Point': [new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,255,0,0.5)'
+      }),
+      radius: 5,
+      stroke: new ol.style.Stroke({
+        color: '#ff0',
+        width: 1
+      })
+    })
+  })],
+  'LineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#f00',
+      width: 3
+    })
+  })],
+  'Polygon': [new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(0,255,255,0.5)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#0ff',
+      width: 1
+    })
+  })],
+  'MultiPoint': [new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,0,255,0.5)'
+      }),
+      radius: 5,
+      stroke: new ol.style.Stroke({
+        color: '#f0f',
+        width: 1
+      })
+    })
+  })],
+  'MultiLineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#0f0',
+      width: 3
+    })
+  })],
+  'MultiPolygon': [new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(0,0,255,0.5)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#00f',
+      width: 1
+    })
+  })]
+};
+
+var styleFunction = function(feature, resolution) {
+  var featureStyleFunction = feature.getStyleFunction();
+  if (featureStyleFunction) {
+    return featureStyleFunction.call(feature, resolution);
+  } else {
+    return defaultStyle[feature.getGeometry().getType()];
+  }
+};
+
+var dragAndDropInteraction = new ol.interaction.DragAndDrop({
+  formatConstructors: [
+    ol.format.GPX,
+    ol.format.GeoJSON,
+    ol.format.IGC,
+    ol.format.KML,
+    ol.format.TopoJSON
+  ]
+});
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.BingMaps({
+        imagerySet: 'Aerial',
+        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+      })
+    })
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+dragAndDropInteraction.on('addfeatures', function(event) {
+  var vectorSource = new ol.source.Vector({
+    features: event.features,
+    projection: event.projection
+  });
+  map.getLayers().push(new ol.layer.Vector({
+    source: vectorSource,
+    style: styleFunction
+  }));
+  var view2D = map.getView().getView2D();
+  view2D.fitExtent(vectorSource.getExtent(), map.getSize());
+});
+
+var displayFeatureInfo = function(pixel) {
+  var features = [];
+  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+    features.push(feature);
+  });
+  if (features.length > 0) {
+    var info = [];
+    var i, ii;
+    for (i = 0, ii = features.length; i < ii; ++i) {
+      info.push(features[i].get('name'));
+    }
+    document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
+  } else {
+    document.getElementById('info').innerHTML = '&nbsp;';
+  }
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('singleclick', function(evt) {
+  displayFeatureInfo(evt.pixel);
+});
--- a/float-no-zero/examples/drag-rotate-and-zoom-require.js
+++ b/float-no-zero/examples/drag-rotate-and-zoom-require.js
@@ -0,0 +1,6 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragRotateAndZoom');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
--- a/float-no-zero/examples/drag-rotate-and-zoom.html
+++ b/float-no-zero/examples/drag-rotate-and-zoom.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Drag rotate and zoom example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Drag rotate and zoom example</h4>
+          <p id="shortdesc">A single interaction to drag, rotate, and zoom.</p>
+          <div id="docs">
+            <p><code>Shift</code> + Drag to rotate and zoom the map around its center.</p>
+            <p>See the <a href="drag-rotate-and-zoom.js" target="_blank">drag-rotate-and-zoom.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">drag, rotate, zoom, interaction</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=drag-rotate-and-zoom" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/drag-rotate-and-zoom.js
+++ b/float-no-zero/examples/drag-rotate-and-zoom.js
@@ -0,0 +1,16 @@
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([
+    new ol.interaction.DragRotateAndZoom()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.MapQuest({layer: 'sat'})
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
--- a/float-no-zero/examples/draw-features-require.js
+++ b/float-no-zero/examples/draw-features-require.js
@@ -0,0 +1,12 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.interaction');
+goog.require('ol.interaction.Draw');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
--- a/float-no-zero/examples/draw-features.html
+++ b/float-no-zero/examples/draw-features.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Draw features example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Draw features example</h4>
+          <p id="shortdesc">Example of using the <code>ol.interaction.Draw</code> interaction.</p>
+          <form class="form-inline">
+            <label>Geometry type &nbsp;</label>
+              <select id="type">
+                <option value="Point">Point</option>
+                <option value="LineString">LineString</option>
+                <option value="Polygon">Polygon</option>
+              </select>
+          </form>
+
+          <div id="docs">
+            <p>See the <a href="draw-features.js" target="_blank">draw-features.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">draw, edit, vector</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=draw-features" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/draw-features.js
+++ b/float-no-zero/examples/draw-features.js
@@ -0,0 +1,57 @@
+var raster = new ol.layer.Tile({
+  source: new ol.source.MapQuest({layer: 'sat'})
+});
+
+var source = new ol.source.Vector();
+
+var vector = new ol.layer.Vector({
+  source: source,
+  style: new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 255, 255, 0.2)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#ffcc33',
+      width: 2
+    }),
+    image: new ol.style.Circle({
+      radius: 7,
+      fill: new ol.style.Fill({
+        color: '#ffcc33'
+      })
+    })
+  })
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [-11000000, 4600000],
+    zoom: 4
+  })
+});
+
+var typeSelect = document.getElementById('type');
+
+var draw; // global so we can remove it later
+function addInteraction() {
+  draw = new ol.interaction.Draw({
+    source: source,
+    type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
+  });
+  map.addInteraction(draw);
+}
+
+
+/**
+ * Let user change the geometry type.
+ * @param {Event} e Change event.
+ */
+typeSelect.onchange = function(e) {
+  map.removeInteraction(draw);
+  addInteraction();
+};
+
+addInteraction();
--- a/float-no-zero/examples/dynamic-data-require.js
+++ b/float-no-zero/examples/dynamic-data-require.js
@@ -0,0 +1,8 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.geom.MultiPoint');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
--- a/float-no-zero/examples/dynamic-data.html
+++ b/float-no-zero/examples/dynamic-data.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Dynamic data example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Dynamic data example</h4>
+          <p id="shortdesc">Example of dynamic data.</p>
+          <div id="docs">
+            <p>See the <a href="dynamic-data.js" target="_blank">dynamic-data.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">dynamic-data</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=dynamic-data" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/dynamic-data.js
+++ b/float-no-zero/examples/dynamic-data.js
@@ -0,0 +1,43 @@
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.MapQuest({layer: 'sat'})
+    })
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+var imageStyle = new ol.style.Circle({
+  radius: 5,
+  fill: new ol.style.Fill({color: 'yellow'}),
+  stroke: new ol.style.Stroke({color: 'red', width: 1})
+});
+
+var n = 200;
+var omegaTheta = 30000; // Rotation period in ms
+var R = 7e6;
+var r = 2e6;
+var p = 2e6;
+map.on('postcompose', function(event) {
+  var vectorContext = event.vectorContext;
+  var frameState = event.frameState;
+  var theta = 2 * Math.PI * frameState.time / omegaTheta;
+  var coordinates = [];
+  var i;
+  for (i = 0; i < n; ++i) {
+    var t = theta + 2 * Math.PI * i / n;
+    var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
+    var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
+    coordinates.push([x, y]);
+  }
+  vectorContext.setImageStyle(imageStyle);
+  vectorContext.drawMultiPointGeometry(
+      new ol.geom.MultiPoint(coordinates), null);
+  map.render();
+});
+map.render();
--- a/float-no-zero/examples/epsg-4326-require.js
+++ b/float-no-zero/examples/epsg-4326-require.js
@@ -0,0 +1,6 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.control');
+goog.require('ol.control.ScaleLine');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.TileWMS');
--- a/float-no-zero/examples/epsg-4326.html
+++ b/float-no-zero/examples/epsg-4326.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>EPSG:4326 example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">EPSG:4326 example</h4>
+          <p id="shortdesc">Example of a map in EPSG:4326.</p>
+          <div id="docs">
+            <p>See the <a href="epsg-4326.js" target="_blank">epsg-4326.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">epsg4326</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=epsg-4326" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/epsg-4326.js
+++ b/float-no-zero/examples/epsg-4326.js
@@ -0,0 +1,29 @@
+var layers = [
+  new ol.layer.Tile({
+    source: new ol.source.TileWMS({
+      url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
+      params: {
+        'VERSION': '1.1.1',
+        'LAYERS': 'basic',
+        'FORMAT': 'image/jpeg'
+      }
+    })
+  })
+];
+
+var map = new ol.Map({
+  controls: ol.control.defaults().extend([
+    new ol.control.ScaleLine({
+      units: 'degrees'
+    })
+  ]),
+  layers: layers,
+  // The OSgeo server does not set cross origin headers, so we cannot use WebGL
+  renderer: ['canvas', 'dom'],
+  target: 'map',
+  view: new ol.View2D({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    zoom: 2
+  })
+});
--- a/float-no-zero/examples/example-list.js
+++ b/float-no-zero/examples/example-list.js
--- a/float-no-zero/examples/example-list.xml
+++ b/float-no-zero/examples/example-list.xml
--- a/float-no-zero/examples/export-map-require.js
+++ b/float-no-zero/examples/export-map-require.js
@@ -0,0 +1,4 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
--- a/float-no-zero/examples/export-map.html
+++ b/float-no-zero/examples/export-map.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Export map example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+          <div id="no-download" class="alert alert-error" style="display: none">
+            This example requires a browser that supports the
+            <a href="http://caniuse.com/#feat=download">link download</a> attribute.
+          </div>
+          <a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Export map example</h4>
+          <p id="shortdesc">Example of exporting a map as a PNG image.</p>
+          <div id="docs">
+            <p>See the <a href="export-map.js" target="_blank">export-map.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">export, png, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=export-map" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/export-map.js
+++ b/float-no-zero/examples/export-map.js
@@ -0,0 +1,31 @@
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+var exportPNGElement = document.getElementById('export-png');
+
+if ('download' in exportPNGElement) {
+  exportPNGElement.addEventListener('click', function(e) {
+    map.once('postcompose', function(event) {
+      var canvas = event.context.canvas;
+      exportPNGElement.href = canvas.toDataURL('image/png');
+    });
+    map.render();
+  }, false);
+} else {
+  var info = document.getElementById('no-download');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+}
--- a/float-no-zero/examples/fractal-require.js
+++ b/float-no-zero/examples/fractal-require.js
@@ -0,0 +1,6 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.geom.LineString');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
--- a/float-no-zero/examples/fractal.html
+++ b/float-no-zero/examples/fractal.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Fractal Example</title>
+    <style>
+      .map {
+        background: whitesmoke;
+      }
+      #depth {
+        width: 100px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>        
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Fractal Example</h4>
+          <p id="shortdesc">Example of a fractal.</p>
+          <label for="depth">
+            depth:&nbsp;
+            <input id="depth" type="range" min="0" max="9" step="1" value="5">
+            &nbsp;(<span id="count">#</span> points)
+          </label>
+          <div id="docs">
+            <p>See the <a href="fractal.js" target="_blank">fractal.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">fractal, vector</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=fractal" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/fractal.js
+++ b/float-no-zero/examples/fractal.js
@@ -0,0 +1,118 @@
+var radius = 10e6;
+var cos30 = Math.cos(Math.PI / 6);
+var sin30 = Math.sin(Math.PI / 6);
+var rise = radius * sin30;
+var run = radius * cos30;
+
+var triangle = new ol.geom.LineString([
+  [0, radius], [run, -rise], [-run, -rise], [0, radius]
+]);
+
+var feature = new ol.Feature(triangle);
+
+var layer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [feature]
+  })
+});
+
+var map = new ol.Map({
+  layers: [layer],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+function makeFractal(depth) {
+  var geometry = /** @type {ol.geom.LineString} */ (triangle.clone());
+  var graph = coordsToGraph(geometry.getCoordinates());
+  for (var i = 0; i < depth; ++i) {
+    var node = graph;
+    while (node.next) {
+      var next = node.next;
+      injectNodes(node);
+      node = next;
+    }
+  }
+  var coordinates = graphToCoords(graph);
+  document.getElementById('count').innerHTML = coordinates.length;
+  geometry.setCoordinates(coordinates);
+  feature.setGeometry(geometry);
+}
+
+function injectNodes(startNode) {
+  var endNode = startNode.next;
+
+  var start = startNode.point;
+  var end = startNode.next.point;
+  var dx = end[0] - start[0];
+  var dy = end[1] - start[1];
+
+  // first point at 1/3 along the segment
+  var firstNode = {
+    point: [start[0] + dx / 3, start[1] + dy / 3]
+  };
+
+  // second point at peak of _/\_
+  var r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30);
+  var a = Math.atan2(dy, dx) + Math.PI / 6;
+  var secondNode = {
+    point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)]
+  };
+
+  // third point at 2/3 along the segment
+  var thirdNode = {
+    point: [end[0] - dx / 3, end[1] - dy / 3]
+  };
+
+  startNode.next = firstNode;
+  firstNode.next = secondNode;
+  secondNode.next = thirdNode;
+  thirdNode.next = endNode;
+}
+
+
+function coordsToGraph(coordinates) {
+  var graph = {
+    point: coordinates[0]
+  };
+  var length = coordinates.length;
+  for (var level = 0, node = graph; level < length - 1; ++level) {
+    node.next = {
+      point: coordinates[level + 1]
+    };
+    node = node.next;
+  }
+  return graph;
+}
+
+function graphToCoords(graph) {
+  var coordinates = [graph.point];
+  for (var node = graph, i = 1; node.next; node = node.next, ++i) {
+    coordinates[i] = node.next.point;
+  }
+  return coordinates;
+}
+
+var depthInput = document.getElementById('depth');
+
+function update() {
+  makeFractal(Number(depthInput.value));
+}
+
+var updateTimer;
+
+
+/**
+ * Regenerate fractal on depth change.  Change events are debounced so updates
+ * only occur every 200ms.
+ */
+depthInput.onchange = function() {
+  window.clearTimeout(updateTimer);
+  updateTimer = window.setTimeout(update, 200);
+};
+
+update();
--- a/float-no-zero/examples/full-screen-drag-rotate-and-zoom-require.js
+++ b/float-no-zero/examples/full-screen-drag-rotate-and-zoom-require.js
@@ -0,0 +1,8 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.control');
+goog.require('ol.control.FullScreen');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragRotateAndZoom');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
--- a/float-no-zero/examples/full-screen-drag-rotate-and-zoom.html
+++ b/float-no-zero/examples/full-screen-drag-rotate-and-zoom.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style>
+      .map:-moz-full-screen {
+        height: 100%;
+      }
+      .map:-webkit-full-screen {
+        height: 100%;
+      }
+      .map:full-screen {
+        height: 100%;
+      }
+    </style>
+    <title>Full screen drag rotate and zoom example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Full screen drag rotate and zoom example</h4>
+          <p id="shortdesc">Example of drag rotate and zoom control with full screen effect.</p>
+          <div id="docs">
+            <p>Hold down <code>Shift</code> + drag to rotate and zoom.  Click the button in the top right corner to go full screen.  Then do the <code>Shift</code> + drag thing again.</p>
+            <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
+            <p>See the <a href="full-screen-drag-rotate-and-zoom.js" target="_blank">full-screen-drag-rotate-and-zoom.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">full-screen, drag, rotate, zoom, bing, bing-maps</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=full-screen-drag-rotate-and-zoom" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/full-screen-drag-rotate-and-zoom.js
+++ b/float-no-zero/examples/full-screen-drag-rotate-and-zoom.js
@@ -0,0 +1,24 @@
+var map = new ol.Map({
+  controls: ol.control.defaults().extend([
+    new ol.control.FullScreen()
+  ]),
+  interactions: ol.interaction.defaults().extend([
+    new ol.interaction.DragRotateAndZoom()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.BingMaps({
+        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+        imagerySet: 'Aerial'
+      })
+    })
+  ],
+  // Use the canvas renderer because it's currently the fastest
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [-33519607, 5616436],
+    rotation: -Math.PI / 8,
+    zoom: 8
+  })
+});
--- a/float-no-zero/examples/full-screen-require.js
+++ b/float-no-zero/examples/full-screen-require.js
@@ -0,0 +1,6 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.control');
+goog.require('ol.control.FullScreen');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
--- a/float-no-zero/examples/full-screen.html
+++ b/float-no-zero/examples/full-screen.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style>
+      .map:-moz-full-screen {
+        height: 100%;
+      }
+      .map:-webkit-full-screen {
+        height: 100%;
+      }
+      .map:-ms-fullscreen {
+        height: 100%;
+      }
+      .map:full-screen {
+        height: 100%;
+      }
+    </style>
+    <title>Full screen control example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Full screen control example</h4>
+          <p id="shortdesc">Example of a full screen control.</p>
+          <div id="docs">
+            <p>Click the control in the top right corner to go full screen.  Click it again to exit full screen.</p>
+            <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
+            <p>See the <a href="full-screen.js" target="_blank">full-screen.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">full-screen, bing, bing-maps</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=full-screen" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/full-screen.js
+++ b/float-no-zero/examples/full-screen.js
@@ -0,0 +1,21 @@
+var view = new ol.View2D({
+  center: [-9101767, 2822912],
+  zoom: 14
+});
+
+var map = new ol.Map({
+  controls: ol.control.defaults().extend([
+    new ol.control.FullScreen()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.BingMaps({
+        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+        imagerySet: 'Aerial'
+      })
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: view
+});
--- a/float-no-zero/examples/geojson-require.js
+++ b/float-no-zero/examples/geojson-require.js
@@ -0,0 +1,12 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.geom.Circle');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.GeoJSON');
+goog.require('ol.source.OSM');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
--- a/float-no-zero/examples/geojson.html
+++ b/float-no-zero/examples/geojson.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>GeoJSON example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">GeoJSON example</h4>
+          <p id="shortdesc">Example of GeoJSON features.</p>
+          <div id="docs">
+            <p>See the <a href="geojson.js" target="_blank">geojson.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">geojson, vector, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=geojson" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/geojson.js
+++ b/float-no-zero/examples/geojson.js
@@ -0,0 +1,182 @@
+var image = new ol.style.Circle({
+  radius: 5,
+  fill: null,
+  stroke: new ol.style.Stroke({color: 'red', width: 1})
+});
+
+var styles = {
+  'Point': [new ol.style.Style({
+    image: image
+  })],
+  'LineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'green',
+      width: 1
+    })
+  })],
+  'MultiLineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'green',
+      width: 1
+    })
+  })],
+  'MultiPoint': [new ol.style.Style({
+    image: image
+  })],
+  'MultiPolygon': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'yellow',
+      width: 1
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 255, 0, 0.1)'
+    })
+  })],
+  'Polygon': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'blue',
+      lineDash: [4],
+      width: 3
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(0, 0, 255, 0.1)'
+    })
+  })],
+  'GeometryCollection': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'magenta',
+      width: 2
+    }),
+    fill: new ol.style.Fill({
+      color: 'magenta'
+    }),
+    image: new ol.style.Circle({
+      radius: 10,
+      fill: null,
+      stroke: new ol.style.Stroke({
+        color: 'magenta'
+      })
+    })
+  })],
+  'Circle': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'red',
+      width: 2
+    }),
+    fill: new ol.style.Fill({
+      color: 'rgba(255,0,0,0.2)'
+    })
+  })]
+};
+
+var styleFunction = function(feature, resolution) {
+  return styles[feature.getGeometry().getType()];
+};
+
+var vectorSource = new ol.source.GeoJSON(
+    /** @type {olx.source.GeoJSONOptions} */ ({
+      object: {
+        'type': 'FeatureCollection',
+        'crs': {
+          'type': 'name',
+          'properties': {
+            'name': 'EPSG:3857'
+          }
+        },
+        'features': [
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'Point',
+              'coordinates': [0, 0]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'LineString',
+              'coordinates': [[4e6, -2e6], [8e6, 2e6]]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'LineString',
+              'coordinates': [[4e6, 2e6], [8e6, -2e6]]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'Polygon',
+              'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'MultiLineString',
+              'coordinates': [
+                [[-1e6, -7.5e5], [-1e6, 7.5e5]],
+                [[1e6, -7.5e5], [1e6, 7.5e5]],
+                [[-7.5e5, -1e6], [7.5e5, -1e6]],
+                [[-7.5e5, 1e6], [7.5e5, 1e6]]
+              ]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'MultiPolygon',
+              'coordinates': [
+                [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
+                [[[-2e6, 6e6], [-2e6, 8e6], [0e6, 8e6], [0e6, 6e6]]],
+                [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
+              ]
+            }
+          },
+          {
+            'type': 'Feature',
+            'geometry': {
+              'type': 'GeometryCollection',
+              'geometries': [
+                {
+                  'type': 'LineString',
+                  'coordinates': [[-5e6, -5e6], [0e6, -5e6]]
+                },
+                {
+                  'type': 'Point',
+                  'coordinates': [4e6, -5e6]
+                },
+                {
+                  'type': 'Polygon',
+                  'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }));
+
+vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
+
+var vectorLayer = new ol.layer.Vector({
+  source: vectorSource,
+  style: styleFunction
+});
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    }),
+    vectorLayer
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
--- a/float-no-zero/examples/geolocation-require.js
+++ b/float-no-zero/examples/geolocation-require.js
@@ -0,0 +1,7 @@
+goog.require('ol.Geolocation');
+goog.require('ol.Map');
+goog.require('ol.Overlay');
+goog.require('ol.View2D');
+goog.require('ol.dom.Input');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
--- a/float-no-zero/examples/geolocation.html
+++ b/float-no-zero/examples/geolocation.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style>
+      .icon-flag {
+        font-size: 22px;
+        text-shadow: 2px 2px 3px #013;
+      }
+      .tooltip-inner {
+        white-space: nowrap;
+      }
+    </style>
+    <title>Geolocation example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span8">
+          <h4 id="title">Geolocation example</h4>
+          <label class="checkbox" for="track">
+            <input id="track" type="checkbox"/>track position
+          </label>
+          <p>position accuracy : <code id="accuracy"></code></p>
+          <p>altitude : <code id="altitude"></code></p>
+          <p>altitude accuracy : <code id="altitudeAccuracy"></code></p>
+          <p>heading : <code id="heading"></code></p>
+          <p>speed : <code id="speed"></code></p>
+
+          <p id="shortdesc">Example of a geolocation map.</p>
+          <div id="docs">
+            <p>See the <a href="geolocation.js" target="_blank">geolocation.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">geolocation, openstreetmap</div>
+        </div>
+        <div class="span4 pull-right">
+          <div id="info" class="alert alert-error" style="display: none;"></div>
+        </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=geolocation" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/geolocation.js
+++ b/float-no-zero/examples/geolocation.js
@@ -0,0 +1,49 @@
+var view = new ol.View2D({
+  center: [0, 0],
+  zoom: 2
+});
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: view
+});
+
+var geolocation = new ol.Geolocation();
+geolocation.bindTo('projection', view);
+
+var track = new ol.dom.Input(document.getElementById('track'));
+track.bindTo('checked', geolocation, 'tracking');
+
+geolocation.on('propertychange', function() {
+  $('#accuracy').text(geolocation.getAccuracy() + ' [m]');
+  $('#altitude').text(geolocation.getAltitude() + ' [m]');
+  $('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');
+  $('#heading').text(geolocation.getHeading() + ' [rad]');
+  $('#speed').text(geolocation.getSpeed() + ' [m/s]');
+});
+
+var marker = new ol.Overlay({
+  element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0)),
+  positioning: 'bottom-left',
+  stopEvent: false
+});
+map.addOverlay(marker);
+// bind the marker position to the device location.
+marker.bindTo('position', geolocation);
+
+geolocation.on('change:accuracy', function() {
+  $(marker.getElement()).tooltip({
+    title: this.getAccuracy() + 'm from this point'
+  });
+});
+geolocation.on('error', function(error) {
+  var info = document.getElementById('info');
+  info.innerHTML = error.message;
+  info.style.display = '';
+});
--- a/float-no-zero/examples/getfeatureinfo-require.js
+++ b/float-no-zero/examples/getfeatureinfo-require.js
@@ -0,0 +1,4 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.TileWMS');
--- a/float-no-zero/examples/getfeatureinfo.html
+++ b/float-no-zero/examples/getfeatureinfo.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Get feature info example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">GetFeatureInfo example</h4>
+          <p id="shortdesc">This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.</p>
+          <div id="docs">
+            <p>See the <a href="getfeatureinfo.js" target="_blank">getfeatureinfo.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">getfeatureinfo</div>
+        </div>
+        <div class="span4 offset4">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=getfeatureinfo" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/getfeatureinfo.js
+++ b/float-no-zero/examples/getfeatureinfo.js
@@ -0,0 +1,35 @@
+var wmsSource = new ol.source.TileWMS({
+  url: 'http://demo.opengeo.org/geoserver/wms',
+  params: {'LAYERS': 'ne:ne'}
+});
+
+var wmsLayer = new ol.layer.Tile({
+  source: wmsSource
+});
+
+var view = new ol.View2D({
+  center: [0, 0],
+  zoom: 1
+});
+
+var viewProjection = /** @type {ol.proj.Projection} */
+    (view.getProjection());
+
+var map = new ol.Map({
+  layers: [wmsLayer],
+  renderer: 'canvas',
+  target: 'map',
+  view: view
+});
+
+map.on('singleclick', function(evt) {
+  document.getElementById('info').innerHTML = '';
+  var viewResolution = /** @type {number} */ (view.getResolution());
+  var url = wmsSource.getGetFeatureInfoUrl(
+      evt.coordinate, viewResolution, viewProjection,
+      {'INFO_FORMAT': 'text/html'});
+  if (url) {
+    document.getElementById('info').innerHTML =
+        '<iframe seamless src="' + url + '"></iframe>';
+  }
+});
--- a/float-no-zero/examples/google-map-require.js
+++ b/float-no-zero/examples/google-map-require.js
@@ -0,0 +1,10 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragPan');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.GeoJSON');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
--- a/float-no-zero/examples/google-map.html
+++ b/float-no-zero/examples/google-map.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style type="text/css">
+    div.ol-logo {
+      left: 65px;
+    }
+    div.fill {
+      width: 100%;
+      height: 100%;
+    }
+    </style>
+    <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
+    <title>Google Maps integration example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map">
+            <div id="gmap" class="fill"></div>
+            <div id="olmap" class="fill"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">Google Maps integration example</h4>
+          <p id="shortdesc">Example of a GMaps map with an ol3 map as control, to give users a Google base map with ol3 content on top.</p>
+          <div id="docs">
+            <p>See the <a href="google-map.js" target="_blank">google-map.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">google</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=google-map" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/google-map.js
+++ b/float-no-zero/examples/google-map.js
@@ -0,0 +1,51 @@
+var gmap = new google.maps.Map(document.getElementById('gmap'), {
+  disableDefaultUI: true,
+  keyboardShortcuts: false,
+  draggable: false,
+  disableDoubleClickZoom: true,
+  scrollwheel: false,
+  streetViewControl: false
+});
+
+var view = new ol.View2D();
+view.on('change:center', function() {
+  var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
+  gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
+});
+view.on('change:resolution', function() {
+  gmap.setZoom(view.getZoom());
+});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.GeoJSON({
+    url: 'data/geojson/countries.geojson',
+    projection: 'EPSG:3857'
+  }),
+  style: new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 255, 255, 0.6)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#319FD3',
+      width: 1
+    })
+  })
+});
+
+var olMapDiv = document.getElementById('olmap');
+var map = new ol.Map({
+  layers: [vector],
+  interactions: ol.interaction.defaults({
+    altShiftDragRotate: false,
+    dragPan: false,
+    touchRotate: false
+  }).extend([new ol.interaction.DragPan({kinetic: false})]),
+  renderer: 'canvas',
+  target: olMapDiv,
+  view: view
+});
+view.setCenter([0, 0]);
+view.setZoom(1);
+
+olMapDiv.parentNode.removeChild(olMapDiv);
+gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);
--- a/float-no-zero/examples/gpx-require.js
+++ b/float-no-zero/examples/gpx-require.js
@@ -0,0 +1,10 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.GPX');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
--- a/float-no-zero/examples/gpx.html
+++ b/float-no-zero/examples/gpx.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>GPX example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">GPX example</h4>
+          <p id="shortdesc">Example of using the GPX source.</p>
+          <div id="docs">
+            <p>See the <a href="gpx.js" target="_blank">gpx.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">GPX</div>
+        </div>
+        <div class="span4 offset4">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=gpx" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/gpx.js
+++ b/float-no-zero/examples/gpx.js
@@ -0,0 +1,81 @@
+var raster = new ol.layer.Tile({
+  source: new ol.source.BingMaps({
+    imagerySet: 'Aerial',
+    key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+  })
+});
+
+var style = {
+  'Point': [new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,255,0,0.4)'
+      }),
+      radius: 5,
+      stroke: new ol.style.Stroke({
+        color: '#ff0',
+        width: 1
+      })
+    })
+  })],
+  'LineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#f00',
+      width: 3
+    })
+  })],
+  'MultiLineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#0f0',
+      width: 3
+    })
+  })]
+};
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.GPX({
+    projection: 'EPSG:3857',
+    url: 'data/gpx/fells_loop.gpx'
+  }),
+  style: function(feature, resolution) {
+    return style[feature.getGeometry().getType()];
+  }
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  renderer: 'canvas',
+  target: document.getElementById('map'),
+  view: new ol.View2D({
+    center: [-7916041.528716288, 5228379.045749711],
+    zoom: 12
+  })
+});
+
+var displayFeatureInfo = function(pixel) {
+  var features = [];
+  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+    features.push(feature);
+  });
+  if (features.length > 0) {
+    var info = [];
+    var i, ii;
+    for (i = 0, ii = features.length; i < ii; ++i) {
+      info.push(features[i].get('desc'));
+    }
+    document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
+    map.getTarget().style.cursor = 'pointer';
+  } else {
+    document.getElementById('info').innerHTML = '&nbsp;';
+    map.getTarget().style.cursor = '';
+  }
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('singleclick', function(evt) {
+  displayFeatureInfo(evt.pixel);
+});
--- a/float-no-zero/examples/heatmap-earthquakes-require.js
+++ b/float-no-zero/examples/heatmap-earthquakes-require.js
@@ -0,0 +1,6 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Heatmap');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.KML');
+goog.require('ol.source.Stamen');
--- a/float-no-zero/examples/heatmap-earthquakes.html
+++ b/float-no-zero/examples/heatmap-earthquakes.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Earthquakes heatmap</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"><div id="info"></div></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Earthquakes heatmap</h4>
+          <p id="shortdesc">Demonstrates the use of a heatmap layer.</p>
+          <div id="docs">
+            <p>
+              This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
+            </p>
+            <p>See the <a href="heatmap-earthquakes.js" target="_blank">heatmap-earthquakes.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">heatmap, kml, vector, style</div>
+        </div>
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=heatmap-earthquakes" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/heatmap-earthquakes.js
+++ b/float-no-zero/examples/heatmap-earthquakes.js
@@ -0,0 +1,32 @@
+var vector = new ol.layer.Heatmap({
+  source: new ol.source.KML({
+    projection: 'EPSG:3857',
+    url: 'data/kml/2012_Earthquakes_Mag5.kml'
+  }),
+  radius: 5
+});
+
+vector.getSource().on('addfeature', function(event) {
+  // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
+  // standards-violating <magnitude> tag in each Placemark.  We extract it from
+  // the Placemark's name instead.
+  var name = event.feature.get('name');
+  var magnitude = parseFloat(name.substr(2));
+  event.feature.set('weight', magnitude - 5);
+});
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.Stamen({
+    layer: 'toner'
+  })
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
--- a/float-no-zero/examples/hue-saturation-require.js
+++ b/float-no-zero/examples/hue-saturation-require.js
@@ -0,0 +1,6 @@
+goog.require('ol.BrowserFeature');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.BingMaps');
--- a/float-no-zero/examples/hue-saturation.html
+++ b/float-no-zero/examples/hue-saturation.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Hue/saturation example</title>
+    <style>
+      #reset-hue {
+        min-width: 90px;
+      }
+      #reset-saturation {
+        min-width: 124px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
+          <div class="btn-group">
+            <button id="increase-hue"><i class="icon-plus"></i></button>
+            <button id="reset-hue">Hue</button>
+            <button id="decrease-hue"><i class="icon-minus"></i></button>
+          </div>
+          <div class="btn-group">
+            <button id="increase-saturation"><i class="icon-plus"></i></button>
+            <button id="reset-saturation">Saturation</button>
+            <button id="decrease-saturation"><i class="icon-minus"></i></button>
+          </div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Hue/saturation example</h4>
+          <p id="shortdesc">Example of hue/saturation control on the client (WebGL only).</p>
+          <div id="docs">
+            <p>See the <a href="hue-saturation.js" target="_blank">hue-saturation.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">hue, saturation, webgl</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=hue-saturation" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/float-no-zero/examples/hue-saturation.js
+++ b/float-no-zero/examples/hue-saturation.js
@@ -0,0 +1,71 @@
+function setResetHueButtonHTML() {
+  resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
+}
+
+function setResetSaturationButtonHTML() {
+  resetSaturation.innerHTML = 'Saturation (' +
+      layer.getSaturation().toFixed(2) + ')';
+}
+
+if (!ol.BrowserFeature.HAS_WEBGL) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
+  var layer = new ol.layer.Tile({
+    source: new ol.source.BingMaps({
+      key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+      imagerySet: 'Aerial'
+    })
+  });
+
+  var map = new ol.Map({
+    layers: [layer],
+    renderer: 'webgl',
+    target: 'map',
+    view: new ol.View2D({
+      center: ol.proj.transform([-9.375, 51.483333], 'EPSG:4326', 'EPSG:3857'),
+      zoom: 15
+    })
+  });
+
+  var increaseHue = document.getElementById('increase-hue');
+  var resetHue = document.getElementById('reset-hue');
+  var decreaseHue = document.getElementById('decrease-hue');
+
+  setResetHueButtonHTML();
+
+  increaseHue.addEventListener('click', function() {
+    layer.setHue(layer.getHue() + 0.25);
+    setResetHueButtonHTML();
+  }, false);
+  resetHue.addEventListener('click', function() {
+    layer.setHue(0);
+    setResetHueButtonHTML();
+  }, false);
+  decreaseHue.addEventListener('click', function() {
+    layer.setHue(layer.getHue() - 0.25);
+    setResetHueButtonHTML();
+  }, false);
+
+  var increaseSaturation = document.getElementById('increase-saturation');
+  var resetSaturation = document.getElementById('reset-saturation');
+  var decreaseSaturation = document.getElementById('decrease-saturation');
+
+  setResetSaturationButtonHTML();
+
+  increaseSaturation.addEventListener('click', function() {
+    layer.setSaturation(layer.getSaturation() + 0.25);
+    setResetSaturationButtonHTML();
+  }, false);
+  resetSaturation.addEventListener('click', function() {
+    layer.setSaturation(1);
+    setResetSaturationButtonHTML();
+  }, false);
+  decreaseSaturation.addEventListener('click', function() {
+    layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
+    setResetSaturationButtonHTML();
+  }, false);
+}
--- a/Show More
+++ b/Show More