Adding mapbox-gl branch

2015-03-16 18:50:27 +01:00
parent 7985f030fa
commit 57ee7f52fd
3109 changed files with 943365 additions and 0 deletions
@@ -0,0 +1,5 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
@@ -0,0 +1,72 @@
+<!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.skiplink {
+        position: absolute;
+        clip: rect(1px, 1px, 1px, 1px);
+        padding: 0;
+        border: 0;
+        height: 1px;
+        width: 1px;
+        overflow: hidden;
+      }
+      a.skiplink:focus {
+        clip: auto;
+        height: auto;
+        width: auto;
+        background-color: #fff;
+        padding: 0.3em;
+      }
+    </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" alt=""> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <a class="skiplink" href="#map">Go to map</a>
+          <div id="map" class="map" tabindex="0"></div>
+        </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 it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. 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" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.</p>
+            <p>See the <a href="accessible.js" target="_blank">accessible.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">accessibility, tabindex</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/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>
@@ -0,0 +1,25 @@
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+jQuery('#map').after('<button type="button" ' +
+    'onclick="map.getView().setZoom(map.getView().getZoom() - 1);">' +
+    'Zoom out</button>');
+jQuery('#map').after('<button type="button" ' +
+    'onclick="map.getView().setZoom(map.getView().getZoom() + 1);">' +
+    'Zoom in</button>');
@@ -0,0 +1,7 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.animation');
+goog.require('ol.control');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
@@ -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="../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="rotate-around-rome">Rotate around Rome</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="../resources/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>
@@ -0,0 +1,179 @@
+// from https://github.com/DmitryBaranovskiy/raphael
+function bounce(t) {
+  var s = 7.5625, p = 2.75, l;
+  if (t < (1 / p)) {
+    l = s * t * t;
+  } else {
+    if (t < (2 / p)) {
+      t -= (1.5 / p);
+      l = s * t * t + 0.75;
+    } else {
+      if (t < (2.5 / p)) {
+        t -= (2.25 / p);
+        l = s * t * t + 0.9375;
+      } else {
+        t -= (2.625 / p);
+        l = s * t * t + 0.984375;
+      }
+    }
+  }
+  return l;
+}
+
+// from https://github.com/DmitryBaranovskiy/raphael
+function elastic(t) {
+  return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
+}
+
+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.View({
+  // 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(),
+  // Improve user experience by loading tiles while animating. Will make
+  // animations stutter on mobile or slow devices.
+  loadTilesWhileAnimating: true,
+  target: 'map',
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
+  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 rotateAroundRome = document.getElementById('rotate-around-rome');
+rotateAroundRome.addEventListener('click', function() {
+  var currentRotation = view.getRotation();
+  var rotateAroundRome = ol.animation.rotate({
+    anchor: rome,
+    duration: 1000,
+    rotation: currentRotation
+  });
+  map.beforeRender(rotateAroundRome);
+  view.rotate(currentRotation + (Math.PI / 2), rome);
+}, 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: 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: 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);
@@ -0,0 +1,5 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.TileArcGISRest');
@@ -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>Tiled ArcGIS MapServer 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">Tiled ArcGIS MapServer example</h4>
+          <p id="shortdesc">Example of a tiled ArcGIS layer.</p>
+          <div id="docs">
+            <p>See the <a href="arcgis-tiled.js" target="_blank">arcgis-tiled.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">arcgis, tile, tilelayer</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=arcgis-tiled" type="text/javascript"></script>
+
+  </body>
+</html>
@@ -0,0 +1,22 @@
+var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
+    'Specialty/ESRI_StateCityHighway_USA/MapServer';
+
+var layers = [
+  new ol.layer.Tile({
+    source: new ol.source.MapQuest({layer: 'sat'})
+  }),
+  new ol.layer.Tile({
+    extent: [-13884991, 2870341, -7455066, 6338219],
+    source: new ol.source.TileArcGISRest({
+      url: url
+    })
+  })
+];
+var map = new ol.Map({
+  layers: layers,
+  target: 'map',
+  view: new ol.View({
+    center: [-10997148, 4569099],
+    zoom: 4
+  })
+});
@@ -0,0 +1,6 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.control.Attribution');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
@@ -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>Attributions 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">Attributions example</h4>
+          <p id="shortdesc">Example of a attributions visibily change on map resize, to collapse them on small maps.</p>
+          <div id="docs">
+            <p>See the <a href="attributions.js" target="_blank">attributions.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">attributions, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=attributions" type="text/javascript"></script>
+
+  </body>
+</html>
@@ -0,0 +1,26 @@
+var attribution = new ol.control.Attribution({
+  collapsible: false
+});
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  controls: ol.control.defaults({ attribution: false }).extend([attribution]),
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+function checkSize() {
+  var small = map.getSize()[0] < 600;
+  attribution.setCollapsible(small);
+  attribution.setCollapsed(small);
+}
+
+$(window).on('resize', checkSize);
+checkSize();
@@ -0,0 +1,7 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.dom.Input');
+goog.require('ol.has');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
@@ -0,0 +1,92 @@
+<!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>
+            <p id="has-webgl" style="display: none">With the <a href="?renderer=webgl">WebGL renderer</a>, <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong> can also be controlled.</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"/>
+            </fieldset>
+            <fieldset id="webgl" style="display: none">
+              <label>hue</label>
+              <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+              <label>saturation</label>
+              <input id="saturation" type="range" min="0" max="5" step="0.01"/>
+              <label>contrast</label>
+              <input id="contrast" type="range" min="0" max="2" step="0.01"/>
+              <label>brightness</label>
+              <input id="brightness" 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="../resources/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>
@@ -0,0 +1,60 @@
+function checkWebGL(evt) {
+  document.getElementById('no-webgl').style.display =
+      ol.has.WEBGL ? 'none' : '';
+  document.getElementById('has-webgl').style.display =
+      ol.has.WEBGL && !evt.glContext ? '' : 'none';
+  document.getElementById('webgl').style.display =
+      evt.glContext ? '' : 'none';
+}
+
+var layer = new ol.layer.Tile({
+  source: new ol.source.OSM()
+});
+layer.once('precompose', checkWebGL);
+
+var view = new ol.View({
+  center: [0, 0],
+  zoom: 2
+});
+
+var map = new ol.Map({
+  layers: [layer],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
+  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);
@@ -0,0 +1,4 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
@@ -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>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>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
+            <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="../resources/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>
@@ -0,0 +1,43 @@
+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]
+      // use maxZoom 19 to see stretched tiles instead of the BingMaps
+      // "no photos at this zoom level" tiles
+      // maxZoom: 19
+    })
+  }));
+}
+var map = new ol.Map({
+  layers: layers,
+  renderer: exampleNS.getRendererFromQueryString(),
+  // Improve user experience by loading tiles while dragging/zooming. Will make
+  // zooming choppy on mobile or slow devices.
+  loadTilesWhileInteracting: true,
+  target: 'map',
+  view: new ol.View({
+    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');
@@ -0,0 +1,11 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.events.condition');
+goog.require('ol.interaction.DragBox');
+goog.require('ol.interaction.Select');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.GeoJSON');
+goog.require('ol.source.OSM');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
@@ -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>Box selection 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">Box selection example</h4>
+          <p id="shortdesc">Using a DragBox interaction to select features.</p>
+          <div id="docs">
+            <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
+            to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
+            <p>Use <code>SHIFT+drag</code> to draw boxes.</p>
+            <p>See the <a href="box-selection.js" target="_blank">box-selection.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">DragBox, feature, selection, box</div>
+        </div>
+        <div class="span4 offset4">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=box-selection" type="text/javascript"></script>
+
+  </body>
+</html>
@@ -0,0 +1,67 @@
+var vectorSource = new ol.source.GeoJSON({
+  projection: 'EPSG:3857',
+  url: 'data/geojson/countries.geojson'
+});
+
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    }),
+    new ol.layer.Vector({
+      source: vectorSource
+    })
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+// a normal select interaction to handle click
+var select = new ol.interaction.Select();
+map.addInteraction(select);
+
+var selectedFeatures = select.getFeatures();
+
+// a DragBox interaction used to select features by drawing boxes
+var dragBox = new ol.interaction.DragBox({
+  condition: ol.events.condition.shiftKeyOnly,
+  style: new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: [0, 0, 255, 1]
+    })
+  })
+});
+
+map.addInteraction(dragBox);
+
+var infoBox = document.getElementById('info');
+
+dragBox.on('boxend', function(e) {
+  // features that intersect the box are added to the collection of
+  // selected features, and their names are displayed in the "info"
+  // div
+  var info = [];
+  var extent = dragBox.getGeometry().getExtent();
+  vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
+    selectedFeatures.push(feature);
+    info.push(feature.get('name'));
+  });
+  if (info.length > 0) {
+    infoBox.innerHTML = info.join(', ');
+  }
+});
+
+// clear selection when drawing a new box and when clicking on the map
+dragBox.on('boxstart', function(e) {
+  selectedFeatures.clear();
+  infoBox.innerHTML = '&nbsp;';
+});
+map.on('click', function() {
+  selectedFeatures.clear();
+  infoBox.innerHTML = '&nbsp;';
+});
@@ -0,0 +1,5 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.has');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
@@ -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="../resources/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>
@@ -0,0 +1,68 @@
+function setResetBrightnessButtonHTML() {
+  resetBrightness.innerHTML = 'Brightness (' +
+      layer.getBrightness().toFixed(3) + ')';
+}
+
+function setResetContrastButtonHTML() {
+  resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
+}
+
+if (!ol.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.View({
+      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);
+}
@@ -0,0 +1,4 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
@@ -0,0 +1,62 @@
+<!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">
+      .tooltip-inner {
+        white-space: nowrap;
+      }
+    </style>
+    <title>ol3 custom tooltips 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 tooltips</h4>
+          <p id="shortdesc">
+            This example shows how to customize the buttons tooltips with
+            <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
+          </p>
+          <div id="docs">
+            <p>
+              See the <a href="button-title.js" target="_blank">button-title.js source</a> to see how this is done.
+            </p>
+          </div>
+          <div id="tags">
+            custom, tooltip
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="../resources/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=button-title" type="text/javascript"></script>
+
+  </body>
+
+</html>
@@ -0,0 +1,22 @@
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [-8730000, 5930000],
+    rotation: Math.PI / 5,
+    zoom: 8
+  })
+});
+
+
+$('.ol-zoom-in, .ol-zoom-out').tooltip({
+  placement: 'right'
+});
+$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
+  placement: 'left'
+});
@@ -0,0 +1,8 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
+goog.require('ol.source.TileDebug');
+goog.require('ol.tilegrid.XYZ');
@@ -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="../resources/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>
@@ -0,0 +1,27 @@
+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',
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
+  view: new ol.View({
+    center: ol.proj.transform(
+        [-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
+    zoom: 10
+  })
+});
@@ -0,0 +1,13 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.geom.Point');
+goog.require('ol.geom.SimpleGeometry');
+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');
@@ -0,0 +1,131 @@
+<!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>
+      .mapcontainer {
+        position: relative;
+        margin-bottom: 20px;
+      }
+      .map {
+        width: 1000px;
+        height: 600px;
+      }
+      div.ol-zoom {
+        top: 178px;
+        left: 158px;
+      }
+      div.ol-attribution {
+        bottom: 30px;
+        right: 50px;
+      }
+      .padding-top {
+        position: absolute;
+        top: 0;
+        left: 0px;
+        width: 1000px;
+        height: 170px;
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .padding-left {
+        position: absolute;
+        top: 170px;
+        left: 0;
+        width: 150px;
+        height: 400px;
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .padding-right {
+        position: absolute;
+        top: 170px;
+        left: 950px;
+        width: 50px;
+        height: 400px;
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .padding-bottom {
+        position: absolute;
+        top: 570px;
+        left: 0px;
+        width: 1000px;
+        height: 30px;
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .center {
+        position: absolute;
+        border: solid 1px black;
+        top: 490px;
+        left: 560px;
+        width: 20px;
+        height: 20px;
+      }
+    </style>
+    <title>Advanced View Positioning 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 mapcontainer">
+          <div id="map" class="map"></div>
+          <div class="padding-top"></div>
+          <div class="padding-left"></div>
+          <div class="padding-right"></div>
+          <div class="padding-bottom"></div>
+          <div class="center"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
+          <button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
+          <button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
+          <button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
+          <button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
+          <button id="centerlausanne">Center on Lausanne</button>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Advanced View Positioning example</h4>
+          <p id="shortdesc">This example demonstrates how a map's view can be
+            adjusted so a geometry or coordinate is positioned at a specific
+            pixel location. The map above has top, right, bottom, and left
+            padding applied inside the viewport. The view's <code>fitGeometry</code> method
+            is used to fit a geometry in the view with the same padding. The
+            view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
+            at a specific pixel location (the center of the black box).</p>
+          <div id="docs">
+            <p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
+            <p>See the <a href="center.js" target="_blank">center.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">center, rotation, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=center" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>
@@ -0,0 +1,119 @@
+var source = new ol.source.GeoJSON({
+  projection: 'EPSG:3857',
+  url: 'data/geojson/switzerland.geojson'
+});
+var 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
+  }),
+  image: new ol.style.Circle({
+    radius: 5,
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 255, 255, 0.6)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#319FD3',
+      width: 1
+    })
+  })
+});
+var vectorLayer = new ol.layer.Vector({
+  source: source,
+  style: style
+});
+var view = new ol.View({
+  center: [0, 0],
+  zoom: 1
+});
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    }),
+    vectorLayer
+  ],
+  target: 'map',
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
+  view: view
+});
+
+var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
+zoomtoswitzerlandbest.addEventListener('click', function() {
+  var feature = source.getFeatures()[0];
+  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  var size = /** @type {ol.Size} */ (map.getSize());
+  view.fitGeometry(
+      polygon,
+      size,
+      {
+        padding: [170, 50, 30, 150],
+        constrainResolution: false
+      }
+  );
+}, false);
+
+var zoomtoswitzerlandconstrained =
+    document.getElementById('zoomtoswitzerlandconstrained');
+zoomtoswitzerlandconstrained.addEventListener('click', function() {
+  var feature = source.getFeatures()[0];
+  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  var size = /** @type {ol.Size} */ (map.getSize());
+  view.fitGeometry(
+      polygon,
+      size,
+      {
+        padding: [170, 50, 30, 150]
+      }
+  );
+}, false);
+
+var zoomtoswitzerlandnearest =
+    document.getElementById('zoomtoswitzerlandnearest');
+zoomtoswitzerlandnearest.addEventListener('click', function() {
+  var feature = source.getFeatures()[0];
+  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  var size = /** @type {ol.Size} */ (map.getSize());
+  view.fitGeometry(
+      polygon,
+      size,
+      {
+        padding: [170, 50, 30, 150],
+        nearest: true
+      }
+  );
+}, false);
+
+var zoomtolausanne = document.getElementById('zoomtolausanne');
+zoomtolausanne.addEventListener('click', function() {
+  var feature = source.getFeatures()[1];
+  var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  var size = /** @type {ol.Size} */ (map.getSize());
+  view.fitGeometry(
+      point,
+      size,
+      {
+        padding: [170, 50, 30, 150],
+        minResolution: 50
+      }
+  );
+}, false);
+
+var centerlausanne = document.getElementById('centerlausanne');
+centerlausanne.addEventListener('click', function() {
+  var feature = source.getFeatures()[1];
+  var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
+  var size = /** @type {ol.Size} */ (map.getSize());
+  view.centerOn(
+      point.getCoordinates(),
+      size,
+      [570, 500]
+  );
+}, false);
@@ -0,0 +1,14 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Cluster');
+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');
+goog.require('ol.style.Text');
@@ -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>Clustering 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">Clustering example</h4>
+          <p id="shortdesc">Example of using <code>ol.Cluster</code>.</p>
+          <div id="docs">
+            <p>See the <a href="cluster.js" target="_blank">cluster.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">cluster vector</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=cluster" type="text/javascript"></script>
+
+  </body>
+</html>
@@ -0,0 +1,64 @@
+var count = 20000;
+var features = new Array(count);
+var e = 4500000;
+for (var i = 0; i < count; ++i) {
+  var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
+  features[i] = new ol.Feature(new ol.geom.Point(coordinates));
+}
+
+var source = new ol.source.Vector({
+  features: features
+});
+
+var clusterSource = new ol.source.Cluster({
+  distance: 40,
+  source: source
+});
+
+var styleCache = {};
+var clusters = new ol.layer.Vector({
+  source: clusterSource,
+  style: function(feature, resolution) {
+    var size = feature.get('features').length;
+    var style = styleCache[size];
+    if (!style) {
+      style = [new ol.style.Style({
+        image: new ol.style.Circle({
+          radius: 10,
+          stroke: new ol.style.Stroke({
+            color: '#fff'
+          }),
+          fill: new ol.style.Fill({
+            color: '#3399CC'
+          })
+        }),
+        text: new ol.style.Text({
+          text: size.toString(),
+          fill: new ol.style.Fill({
+            color: '#fff'
+          })
+        })
+      })];
+      styleCache[size] = style;
+    }
+    return style;
+  }
+});
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.MapQuest({layer: 'sat'})
+});
+
+var raw = new ol.layer.Vector({
+  source: source
+});
+
+var map = new ol.Map({
+  layers: [raster, clusters],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
@@ -0,0 +1,7 @@
+goog.require('ol');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.control.Control');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
@@ -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 type="text/css">
+      .rotate-north {
+        top: 65px;
+        left: .5em;
+      }
+      .ol-touch .rotate-north {
+        top: 80px;
+      }
+    </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="../resources/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>
@@ -0,0 +1,72 @@
+/**
+ * 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 button = document.createElement('button');
+  button.innerHTML = 'N';
+
+  var this_ = this;
+  var handleRotateNorth = function(e) {
+    this_.getMap().getView().setRotation(0);
+  };
+
+  button.addEventListener('click', handleRotateNorth, false);
+  button.addEventListener('touchstart', handleRotateNorth, false);
+
+  var element = document.createElement('div');
+  element.className = 'rotate-north ol-unselectable ol-control';
+  element.appendChild(button);
+
+  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({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }).extend([
+    new app.RotateNorthControl()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2,
+    rotation: 1
+  })
+});
@@ -0,0 +1,9 @@
+goog.require('ol');
+goog.require('ol.Map');
+goog.require('ol.View');
+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');
@@ -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="../resources/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>
@@ -0,0 +1,83 @@
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.Stamen({
+        layer: 'watercolor'
+      })
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    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);
+});
@@ -0,0 +1,279 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Capabilities version="1.0.0" xmlns="http://www.opengis.net/wmts/1.0" xmlns:gml="http://www.opengis.net/gml" 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" xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd">
+    <ows:ServiceIdentification>
+        <ows:Title>Koordinates Labs</ows:Title>
+        <ows:ServiceType>OGC WMTS</ows:ServiceType>
+        <ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
+    </ows:ServiceIdentification>
+    <ows:ServiceProvider>
+        <ows:ProviderName>Koordinates</ows:ProviderName>
+        <ows:ProviderSite xlink:href="http://labs.koordinates.com"/>
+        <ows:ServiceContact/>
+    </ows:ServiceProvider>
+    <ows:OperationsMetadata>
+        <ows:Operation name="GetCapabilities">
+            <ows:DCP>
+                <ows:HTTP>
+                    <ows:Get xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/WMTSCapabilities.xml?">
+                        <ows:Constraint name="GetEncoding">
+                            <ows:AllowedValues>
+                                <ows:Value>KVP</ows:Value>
+                            </ows:AllowedValues>
+                        </ows:Constraint>
+                    </ows:Get>
+                </ows:HTTP>
+            </ows:DCP>
+        </ows:Operation>
+        <ows:Operation name="GetFeatureInfo">
+            <ows:DCP>
+                <ows:HTTP>
+                    <ows:Get xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/?">
+                        <ows:Constraint name="GetEncoding">
+                            <ows:AllowedValues>
+                                <ows:Value>KVP</ows:Value>
+                            </ows:AllowedValues>
+                        </ows:Constraint>
+                    </ows:Get>
+                </ows:HTTP>
+            </ows:DCP>
+        </ows:Operation>
+    </ows:OperationsMetadata>
+    <Contents>
+        <Layer>
+            <ows:Title>New Zealand Earthquakes</ows:Title>
+            <ows:Abstract>Historical earthquake data, accessed via the [GeoNet WFS feed](http://info.geonet.org.nz/display/appdata/Advanced+Queries). The data has been filtered to only include quakes in proximity to New Zealand with an `eventtype` of &quot;Earthquake&quot; or &quot;none&quot; per the [GeoNet catalogue](http://info.geonet.org.nz/display/appdata/Catalogue+Output). Most fields have been removed. Please also note the excluded data per this [GeoNet page](http://info.geonet.org.nz/display/appdata/The+Gap). We acknowledge the New Zealand GeoNet project and its sponsors EQC, GNS Science and LINZ, for providing data used in this layer.</ows:Abstract>
+            <ows:Identifier>layer-7328</ows:Identifier>
+            <ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
+                <ows:LowerCorner>-20037508.342789 -6406581.708337</ows:LowerCorner>
+                <ows:UpperCorner>20037508.342789 -3653545.667928</ows:UpperCorner>
+            </ows:BoundingBox>
+            <ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
+                <ows:LowerCorner>-180.000000 -49.454297</ows:LowerCorner>
+                <ows:UpperCorner>180.000000 -31.160000</ows:UpperCorner>
+            </ows:WGS84BoundingBox>
+            <Style isDefault="true">
+                <ows:Title>Weighted point styles</ows:Title>
+                <ows:Identifier>style=39</ows:Identifier>
+            </Style>
+            <Format>image/png</Format>
+            <InfoFormat>application/json</InfoFormat>
+            <InfoFormat>text/html</InfoFormat>
+            <TileMatrixSetLink>
+                <TileMatrixSet>EPSG:3857</TileMatrixSet>
+            </TileMatrixSetLink>
+            <ResourceURL format="image/png" resourceType="tile" template="https://koordinates-tiles-a.global.ssl.fastly.net/services;key=d740ea02e0c44cafb70dce31a774ca10/tiles/v4/layer=7328,{style}/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png"/>
+            <ResourceURL format="application/json" resourceType="FeatureInfo" template="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/featureinfo/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}/{I}/{J}.json"/>
+            <ResourceURL format="text/html" resourceType="FeatureInfo" template="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/featureinfo/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}/{I}/{J}.html"/>
+        </Layer>
+        <TileMatrixSet>
+            <ows:Title>GoogleMapsCompatible</ows:Title>
+            <ows:Abstract>The well-known 'GoogleMapsCompatible' tile matrix set defined by the OGC WMTS specification</ows:Abstract>
+            <ows:Identifier>EPSG:3857</ows:Identifier>
+            <ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
+                <ows:LowerCorner>-20037508.342789 -20037508.342789</ows:LowerCorner>
+                <ows:UpperCorner>20037508.342789 20037508.342789</ows:UpperCorner>
+            </ows:BoundingBox>
+            <ows:SupportedCRS>urn:ogc:def:crs:EPSG::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.014</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.18772</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.9183354</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.4591677</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.36479192</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>524288</MatrixWidth>
+                <MatrixHeight>524288</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>20</ows:Identifier>
+                <ScaleDenominator>533.182395962</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>1048576</MatrixWidth>
+                <MatrixHeight>1048576</MatrixHeight>
+            </TileMatrix>
+            <TileMatrix>
+                <ows:Identifier>21</ows:Identifier>
+                <ScaleDenominator>266.591197981</ScaleDenominator>
+                <TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
+                <TileWidth>256</TileWidth>
+                <TileHeight>256</TileHeight>
+                <MatrixWidth>2097152</MatrixWidth>
+                <MatrixHeight>2097152</MatrixHeight>
+            </TileMatrix>
+        </TileMatrixSet>
+    </Contents>
+    <ServiceMetadataURL xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/WMTSCapabilities.xml"/>
+</Capabilities>
@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+                                                                                
+"features": [
+{ "type": "Feature", "properties": { "name": "Roussel" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.317812426119204, 48.287712285170407 ], [ -73.965445435101188, 48.287712285170407 ] ] } },
+{ "type": "Feature", "properties": { "name": "de la Grande-Décharge Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.890274359943689, 47.66777849648031 ], [ -73.03935270229745, 47.552045722357249 ], [ -73.03483517677158, 47.743778832463107 ], [ -72.750231068641639, 47.749854072477497 ], [ -72.754748594167509, 47.552045722357249 ] ] } },
+{ "type": "Feature", "properties": { "name": "du Saguenay Ouest" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.007730023616347, 48.07082744644633 ], [ -72.894791885469544, 47.889388912080449 ], [ -72.727643441012276, 48.082900678850329 ], [ -72.560494996555022, 47.895447137861773 ] ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Anicet" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.985142395986983, 48.338787334581873 ], [ -72.980624870461128, 48.161307640513321 ], [ -72.885756834417805, 48.164320903012829 ], [ -72.894791885469544, 48.338787334581873 ] ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.459482576203527, 47.53679865861892 ], [ -73.454965050677686, 47.719470781160837 ] ] } },
+{ "type": "Feature", "properties": { "name": "Sainte-Geneviève" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.716981531178234, 47.889388912080449 ], [ -73.423342371996569, 48.091953743979651 ], [ -73.242641350961676, 47.883329977544491 ], [ -73.685358852497131, 47.862118125007399 ] ] } },
+{ "type": "Feature", "properties": { "name": "de Lombard" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.631148546186679, 48.323770568268507 ], [ -73.626631020660795, 48.185408784389622 ], [ -73.55435061224685, 48.188420630879783 ], [ -73.55435061224685, 48.320766684325278 ], [ -73.473035152781165, 48.317762623483489 ], [ -73.482070203832905, 48.19745510840756 ], [ -73.400754744367205, 48.206487993065075 ], [ -73.396237218841335, 48.323770568268507 ], [ -73.301369182798027, 48.317762623483489 ], [ -73.319439284901506, 48.191432300378096 ] ] } },
+{ "type": "Feature", "properties": { "name": "de la Grande-Baie Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.439785615317746, 47.564240180362376 ], [ -74.227461915601779, 47.716431476953346 ], [ -74.055795945618627, 47.552045722357249 ], [ -73.879612450109633, 47.710352336655504 ] ] } },
+{ "type": "Feature", "properties": { "name": "de Tadoussac" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.313294900593348, 48.091953743979651 ], [ -74.313294900593348, 47.880300244488787 ], [ -73.974480486152942, 47.877270334238752 ], [ -73.978998011678812, 48.076864416783366 ] ] } }
+]
+}
@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+                                                                                
+"features": [
+{ "type": "Feature", "properties": { "name": "Saguenay (Arrondissement Latterière)" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 47.6434349837781 ] } },
+{ "type": "Feature", "properties": { "name": "Canton Tremblay" }, "geometry": { "type": "Point", "coordinates": [ -75.840218528338056, 47.971115165183342 ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Félix-d'Otis" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 48.278693733790902 ] } },
+{ "type": "Feature", "properties": { "name": "La Baie" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 47.649521925935176 ] } },
+{ "type": "Feature", "properties": { "name": "Saint-David-de-Falardeau" }, "geometry": { "type": "Point", "coordinates": [ -74.801187657387501, 47.977163824275436 ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Honoré-de-Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 48.284706278302295 ] } },
+{ "type": "Feature", "properties": { "name": "Alma" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.6434349837781 ] } },
+{ "type": "Feature", "properties": { "name": "Jonquière" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.971115165183342 ] } },
+{ "type": "Feature", "properties": { "name": "Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -75.289080414181669, 48.284706278302295 ] } }
+]
+}
@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+                                                                                
+"features": [
+{ "type": "Feature", "properties": { "name": "Parc de la Colline" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 47.72858763003908 ], [ -71.86027854004486, 47.527648291638172 ], [ -72.37075892446839, 47.539848426151735 ], [ -72.357206347890767, 47.72858763003908 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Centre Paul-Étienne Simard" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 48.013440900213297 ], [ -72.239750684218109, 48.013440900213297 ], [ -72.253303260795718, 47.856056000888501 ], [ -72.027426984502114, 47.856056000888501 ], [ -72.036462035553868, 48.013440900213297 ], [ -71.905453795303586, 48.01646283861713 ], [ -71.891901218725963, 47.801464984333364 ], [ -72.361723873416651, 47.810567474765456 ], [ -72.357206347890767, 48.013440900213297 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs Rivière du Moulin" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.194575428959382, 48.33278115872843 ], [ -72.018391933450374, 48.33278115872843 ], [ -71.846725963467236, 48.251628525276693 ], [ -71.950629050562299, 48.107038644740094 ], [ -72.203610480011122, 48.107038644740094 ], [ -72.397864077623623, 48.221539261269051 ], [ -72.194575428959382, 48.33278115872843 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "L'Étoile-du-Nord" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.589227008492543, 47.649521925935176 ], [ -71.525981651130337, 47.734664642855655 ], [ -71.48532392139748, 47.649521925935169 ], [ -71.295587849310877, 47.637347332276697 ], [ -71.462736293768117, 47.585573652777313 ], [ -71.390455885354172, 47.475766052599219 ], [ -71.535016702182091, 47.552045722357242 ], [ -71.702165146639345, 47.491030857179695 ], [ -71.616332161647762, 47.591667334264848 ], [ -71.787998131630914, 47.655608158761908 ], [ -71.589227008492543, 47.649521925935176 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs Lavoie et St-Jean-Baptiste" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.729270299794578, 48.010418784700107 ], [ -71.291070323784993, 48.004374022337799 ], [ -71.291070323784993, 47.777183877693901 ], [ -71.729270299794578, 47.786290622064854 ], [ -71.729270299794578, 48.010418784700107 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs Diamant" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.693130095587605, 48.341790157179155 ], [ -71.286552798259123, 48.344792802893032 ], [ -71.449183717190522, 48.224548983994914 ], [ -71.277517747207369, 48.070827446446337 ], [ -71.751857927423927, 48.085918544287573 ], [ -71.507911549026844, 48.21551928490868 ], [ -71.693130095587605, 48.341790157179155 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Sydenham" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.051641470913779, 47.710352336655504 ], [ -70.911598179611758, 47.710352336655504 ], [ -70.925150756189367, 47.619080121567436 ], [ -70.712827056473373, 47.616034965734443 ], [ -70.721862107525112, 47.448278226184989 ], [ -70.857387873301292, 47.448278226184989 ], [ -70.852870347775408, 47.552045722357249 ], [ -71.056158996439635, 47.552045722357249 ], [ -71.051641470913779, 47.710352336655504 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Luc" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.110369302750115, 47.798430466372736 ], [ -70.902563128560018, 47.983211774835986 ], [ -70.699274479895777, 47.789325849015306 ], [ -71.110369302750115, 47.798430466372736 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs du Fjord du Saguenay" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -70.988396113551573, 48.32977780546792 ], [ -70.812212618042579, 48.32977780546792 ], [ -70.807695092516681, 48.209498600656133 ], [ -70.631511597007702, 48.209498600656147 ], [ -70.636029122533571, 48.079882636349602 ], [ -71.146509506957088, 48.082900678850329 ], [ -71.151027032482972, 48.212509031269981 ], [ -70.983878588025689, 48.209498600656133 ], [ -70.988396113551573, 48.32977780546792 ] ] ] } }
+]
+}
@@ -0,0 +1,4 @@
+{"type":"FeatureCollection","features":[
+{"type":"Feature","id":"CHE","properties":{"name":"Switzerland"},"geometry":{"type":"Polygon","coordinates":[[[9.594226,47.525058],[9.632932,47.347601],[9.47997,47.10281],[9.932448,46.920728],[10.442701,46.893546],[10.363378,46.483571],[9.922837,46.314899],[9.182882,46.440215],[8.966306,46.036932],[8.489952,46.005151],[8.31663,46.163642],[7.755992,45.82449],[7.273851,45.776948],[6.843593,45.991147],[6.5001,46.429673],[6.022609,46.27299],[6.037389,46.725779],[6.768714,47.287708],[6.736571,47.541801],[7.192202,47.449766],[7.466759,47.620582],[8.317301,47.61358],[8.522612,47.830828],[9.594226,47.525058]]]}},
+{"type":"Feature","id":"LSNE","properties":{"name":"Lausanne"},"geometry":{"type":"Point","coordinates":[6.6339863,46.5193823]}}
+]}
@@ -0,0 +1,729 @@
+{
+  "data": [{
+    "coords": {
+      "speed": 1.7330950498580933,
+      "accuracy": 5,
+      "altitudeAccuracy": 8,
+      "altitude": 238,
+      "longitude": 5.868668798362713,
+      "heading": 67.5,
+      "latitude": 45.64444874417562
+    },
+    "timestamp": 1394788264972
+  }, {
+    "coords": {
+      "speed": 1.9535436630249023,
+      "accuracy": 5,
+      "altitudeAccuracy": 8,
+      "altitude": 238,
+      "longitude": 5.868715401744348,
+      "heading": 69.609375,
+      "latitude": 45.64446391542036
+    },
+    "timestamp": 1394788266115
+  }, {
+    "coords": {
+      "speed": 2.1882569789886475,
+      "accuracy": 10,
+      "altitudeAccuracy": 8,
+      "altitude": 238,
+      "longitude": 5.868768962105614,
+      "heading": 67.5,
+      "latitude": 45.644484995906836
+    },
+    "timestamp": 1394788267107
+  }, {
+    "coords": {
+      "speed": 2.4942498207092285,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 237,
+      "longitude": 5.868825791409117,
+      "heading": 68.5546875,
+      "latitude": 45.64450435810316
+    },
+    "timestamp": 1394788267959
+  }, {
+    "coords": {
+      "speed": 2.7581217288970947,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 237,
+      "longitude": 5.868881698703271,
+      "heading": 69.609375,
+      "latitude": 45.64452149909515
+    },
+    "timestamp": 1394788268964
+  }, {
+    "coords": {
+      "speed": 3.3746347427368164,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.868938528006774,
+      "heading": 70.3125,
+      "latitude": 45.644536712249405
+    },
+    "timestamp": 1394788270116
+  }, {
+    "coords": {
+      "speed": 3.597411870956421,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.868992004549009,
+      "heading": 74.8828125,
+      "latitude": 45.644547943999655
+    },
+    "timestamp": 1394788271158
+  }, {
+    "coords": {
+      "speed": 3.6382505893707275,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.869038775568706,
+      "heading": 73.828125,
+      "latitude": 45.64456005584974
+    },
+    "timestamp": 1394788271893
+  }, {
+    "coords": {
+      "speed": 3.65671443939209,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.869091162463528,
+      "heading": 73.4765625,
+      "latitude": 45.644572335337884
+    },
+    "timestamp": 1394788272903
+  }, {
+    "coords": {
+      "speed": 3.7153592109680176,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.869144219910604,
+      "heading": 73.125,
+      "latitude": 45.64458671030182
+    },
+    "timestamp": 1394788273914
+  }, {
+    "coords": {
+      "speed": 3.8041043281555176,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 236,
+      "longitude": 5.869205072527629,
+      "heading": 72.421875,
+      "latitude": 45.64460313883204
+    },
+    "timestamp": 1394788274901
+  }, {
+    "coords": {
+      "speed": 3.9588162899017334,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 236,
+      "longitude": 5.869268858810765,
+      "heading": 72.421875,
+      "latitude": 45.64461990263838
+    },
+    "timestamp": 1394788276140
+  }, {
+    "coords": {
+      "speed": 4.152309417724609,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 235,
+      "longitude": 5.869351252918941,
+      "heading": 78.046875,
+      "latitude": 45.64466122542102
+    },
+    "timestamp": 1394788276948
+  }, {
+    "coords": {
+      "speed": 4.49971866607666,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.869433479389054,
+      "heading": 79.8046875,
+      "latitude": 45.64467040360499
+    },
+    "timestamp": 1394788277892
+  }, {
+    "coords": {
+      "speed": 4.824056148529053,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.869504055013758,
+      "heading": 91.40625,
+      "latitude": 45.64466089014489
+    },
+    "timestamp": 1394788279211
+  }, {
+    "coords": {
+      "speed": 5.269814491271973,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.869575049733621,
+      "heading": 91.40625,
+      "latitude": 45.64465967476893
+    },
+    "timestamp": 1394788279898
+  }, {
+    "coords": {
+      "speed": 5.4861016273498535,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.86963213049422,
+      "heading": 95.2734375,
+      "latitude": 45.64465091568012
+    },
+    "timestamp": 1394788280935
+  }, {
+    "coords": {
+      "speed": 5.380503177642822,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.869714859878523,
+      "heading": 75.5859375,
+      "latitude": 45.64468792178262
+    },
+    "timestamp": 1394788281930
+  }, {
+    "coords": {
+      "speed": 5.276519775390625,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 234,
+      "longitude": 5.869746124377353,
+      "heading": 55.1953125,
+      "latitude": 45.64467706721801
+    },
+    "timestamp": 1394788282909
+  }, {
+    "coords": {
+      "speed": 5.212399482727051,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 232,
+      "longitude": 5.8697939850444625,
+      "heading": 49.5703125,
+      "latitude": 45.64467899505574
+    },
+    "timestamp": 1394788284221
+  }, {
+    "coords": {
+      "speed": 5.174651622772217,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 232,
+      "longitude": 5.869789123540623,
+      "heading": 18.984375,
+      "latitude": 45.64469378911484
+    },
+    "timestamp": 1394788284924
+  }, {
+    "coords": {
+      "speed": 5.211904525756836,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 232,
+      "longitude": 5.869806222623093,
+      "heading": 10.1953125,
+      "latitude": 45.64473896757294
+    },
+    "timestamp": 1394788286251
+  }, {
+    "coords": {
+      "speed": 5.254780292510986,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 233,
+      "longitude": 5.86982952431391,
+      "heading": 18.6328125,
+      "latitude": 45.64478381075491
+    },
+    "timestamp": 1394788286927
+  }, {
+    "coords": {
+      "speed": 5.329030513763428,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 232,
+      "longitude": 5.869875792419417,
+      "heading": 33.75,
+      "latitude": 45.644830078860416
+    },
+    "timestamp": 1394788288221
+  }, {
+    "coords": {
+      "speed": 5.384955883026123,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 232,
+      "longitude": 5.869927508761985,
+      "heading": 46.7578125,
+      "latitude": 45.64486025371183
+    },
+    "timestamp": 1394788288935
+  }, {
+    "coords": {
+      "speed": 5.309582233428955,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 232,
+      "longitude": 5.869972854858143,
+      "heading": 47.109375,
+      "latitude": 45.644890596201314
+    },
+    "timestamp": 1394788290178
+  }, {
+    "coords": {
+      "speed": 5.250724792480469,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.870029265066488,
+      "heading": 46.40625,
+      "latitude": 45.644932673355235
+    },
+    "timestamp": 1394788290890
+  }, {
+    "coords": {
+      "speed": 5.3057990074157715,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.870077712466819,
+      "heading": 39.375,
+      "latitude": 45.644970224281444
+    },
+    "timestamp": 1394788291884
+  }, {
+    "coords": {
+      "speed": 5.431822299957275,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.870133116846783,
+      "heading": 43.59375,
+      "latitude": 45.6450097449549
+    },
+    "timestamp": 1394788292885
+  }, {
+    "coords": {
+      "speed": 5.542125225067139,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.870186509569986,
+      "heading": 43.59375,
+      "latitude": 45.645047421609654
+    },
+    "timestamp": 1394788294100
+  }, {
+    "coords": {
+      "speed": 5.647174835205078,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.870246104901535,
+      "heading": 42.890625,
+      "latitude": 45.645093647805645
+    },
+    "timestamp": 1394788295157
+  }, {
+    "coords": {
+      "speed": 5.735793590545654,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.870298156520231,
+      "heading": 42.5390625,
+      "latitude": 45.64514368776758
+    },
+    "timestamp": 1394788296124
+  }, {
+    "coords": {
+      "speed": 5.809989929199219,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.870346436282499,
+      "heading": 43.59375,
+      "latitude": 45.64519154843469
+    },
+    "timestamp": 1394788296960
+  }, {
+    "coords": {
+      "speed": 5.877871036529541,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 228,
+      "longitude": 5.87034755932109,
+      "heading": 42.75193405151367,
+      "latitude": 45.645270362475216
+    },
+    "timestamp": 1394788298177
+  }, {
+    "coords": {
+      "speed": 5.937166690826416,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 228,
+      "longitude": 5.870402806867787,
+      "heading": 42.75193405151367,
+      "latitude": 45.645312142096095
+    },
+    "timestamp": 1394788298898
+  }, {
+    "coords": {
+      "speed": 6.071393966674805,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 229,
+      "longitude": 5.870464520921814,
+      "heading": 43.183074951171875,
+      "latitude": 45.64535851937182
+    },
+    "timestamp": 1394788299897
+  }, {
+    "coords": {
+      "speed": 6.329115390777588,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.8705368384107715,
+      "heading": 43.183074951171875,
+      "latitude": 45.645412389093565
+    },
+    "timestamp": 1394788300957
+  }, {
+    "coords": {
+      "speed": 6.581554889678955,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 229,
+      "longitude": 5.870600162706978,
+      "heading": 43.183074951171875,
+      "latitude": 45.64545955929912
+    },
+    "timestamp": 1394788302211
+  }, {
+    "coords": {
+      "speed": 6.605470180511475,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.870657211053185,
+      "heading": 43.183074951171875,
+      "latitude": 45.64550205482465
+    },
+    "timestamp": 1394788302917
+  }, {
+    "coords": {
+      "speed": 6.623170375823975,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 229,
+      "longitude": 5.870713613403495,
+      "heading": 43.183074951171875,
+      "latitude": 45.64554406917767
+    },
+    "timestamp": 1394788303929
+  }, {
+    "coords": {
+      "speed": 6.645580768585205,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 229,
+      "longitude": 5.870773011629353,
+      "heading": 43.183074951171875,
+      "latitude": 45.64558831489415
+    },
+    "timestamp": 1394788304902
+  }, {
+    "coords": {
+      "speed": 6.663600444793701,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 229,
+      "longitude": 5.87083890910435,
+      "heading": 43.183074951171875,
+      "latitude": 45.645637401898654
+    },
+    "timestamp": 1394788306035
+  }, {
+    "coords": {
+      "speed": 6.664675712585449,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 229,
+      "longitude": 5.870890033475007,
+      "heading": 43.183074951171875,
+      "latitude": 45.64567548463474
+    },
+    "timestamp": 1394788307080
+  }, {
+    "coords": {
+      "speed": 6.6489081382751465,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 228,
+      "longitude": 5.870943189474929,
+      "heading": 43.183074951171875,
+      "latitude": 45.645715080460064
+    },
+    "timestamp": 1394788308211
+  }, {
+    "coords": {
+      "speed": 6.551820755004883,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 228,
+      "longitude": 5.871005613698799,
+      "heading": 43.183074951171875,
+      "latitude": 45.64576158014743
+    },
+    "timestamp": 1394788308904
+  }, {
+    "coords": {
+      "speed": 6.467689514160156,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 229,
+      "longitude": 5.871058030061249,
+      "heading": 43.183074951171875,
+      "latitude": 45.64580062501799
+    },
+    "timestamp": 1394788310161
+  }, {
+    "coords": {
+      "speed": 6.3997955322265625,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 229,
+      "longitude": 5.871062579208228,
+      "heading": 43.183074951171875,
+      "latitude": 45.64580401381376
+    },
+    "timestamp": 1394788310957
+  }, {
+    "coords": {
+      "speed": 5.799798488616943,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.8710817079554545,
+      "heading": 43.183074951171875,
+      "latitude": 45.64581826277647
+    },
+    "timestamp": 1394788312036
+  }, {
+    "coords": {
+      "speed": 4.424941062927246,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.871121835629857,
+      "heading": 175.4296875,
+      "latitude": 45.645828271551544
+    },
+    "timestamp": 1394788312951
+  }, {
+    "coords": {
+      "speed": 4.3496222496032715,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.8710026017471595,
+      "heading": 176.484375,
+      "latitude": 45.645752236602775
+    },
+    "timestamp": 1394788315227
+  }, {
+    "coords": {
+      "speed": 5.076380252838135,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 232,
+      "longitude": 5.871189236646398,
+      "heading": 176.1328125,
+      "latitude": 45.64553692475487
+    },
+    "timestamp": 1394788316970
+  }, {
+    "coords": {
+      "speed": 5.102786064147949,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.871200384577616,
+      "heading": 171.2109375,
+      "latitude": 45.64548554368843
+    },
+    "timestamp": 1394788317965
+  }, {
+    "coords": {
+      "speed": 4.705626964569092,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.871210945775612,
+      "heading": 164.1796875,
+      "latitude": 45.645453105723156
+    },
+    "timestamp": 1394788318956
+  }, {
+    "coords": {
+      "speed": 4.378190040588379,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.87124749087344,
+      "heading": 126.2109375,
+      "latitude": 45.645433282522156
+    },
+    "timestamp": 1394788320197
+  }, {
+    "coords": {
+      "speed": 4.208680152893066,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 233,
+      "longitude": 5.871283365419014,
+      "heading": 125.859375,
+      "latitude": 45.6454103999265
+    },
+    "timestamp": 1394788320894
+  }, {
+    "coords": {
+      "speed": 4.072604179382324,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 233,
+      "longitude": 5.871314043184622,
+      "heading": 103.359375,
+      "latitude": 45.645410819021656
+    },
+    "timestamp": 1394788322169
+  }, {
+    "coords": {
+      "speed": 3.7680623531341553,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 234,
+      "longitude": 5.871355114510163,
+      "heading": 92.4609375,
+      "latitude": 45.645418111277415
+    },
+    "timestamp": 1394788322898
+  }, {
+    "coords": {
+      "speed": 3.537794351577759,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 234,
+      "longitude": 5.871393922721847,
+      "heading": 92.4609375,
+      "latitude": 45.64541693781097
+    },
+    "timestamp": 1394788323968
+  }, {
+    "coords": {
+      "speed": 3.3741507530212402,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 234,
+      "longitude": 5.8714455552453835,
+      "heading": 75.5859375,
+      "latitude": 45.645444011358215
+    },
+    "timestamp": 1394788324896
+  }, {
+    "coords": {
+      "speed": 3.3729660511016846,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.87150791660498,
+      "heading": 70.3125,
+      "latitude": 45.64547209073384
+    },
+    "timestamp": 1394788325971
+  }, {
+    "coords": {
+      "speed": 3.463883876800537,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.871554352348551,
+      "heading": 70.3125,
+      "latitude": 45.64548374157925
+    },
+    "timestamp": 1394788327122
+  }, {
+    "coords": {
+      "speed": 3.5247886180877686,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.871567260479435,
+      "heading": 67.1484375,
+      "latitude": 45.645496733529164
+    },
+    "timestamp": 1394788328164
+  }, {
+    "coords": {
+      "speed": 3.455146551132202,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.871608583262071,
+      "heading": 68.90625,
+      "latitude": 45.64550293613751
+    },
+    "timestamp": 1394788328985
+  }, {
+    "coords": {
+      "speed": 3.382997989654541,
+      "accuracy": 10,
+      "altitudeAccuracy": 8,
+      "altitude": 236,
+      "longitude": 5.871640518313154,
+      "heading": 78.75,
+      "latitude": 45.6454965658911
+    },
+    "timestamp": 1394788329900
+  }, {
+    "coords": {
+      "speed": 3.242330312728882,
+      "accuracy": 10,
+      "altitudeAccuracy": 8,
+      "altitude": 236,
+      "longitude": 5.871667759498462,
+      "heading": 92.4609375,
+      "latitude": 45.64548562750746
+    },
+    "timestamp": 1394788331120
+  }, {
+    "coords": {
+      "speed": 3.074465274810791,
+      "accuracy": 10,
+      "altitudeAccuracy": 8,
+      "altitude": 236,
+      "longitude": 5.871691312646374,
+      "heading": 110.0390625,
+      "latitude": 45.645468402696444
+    },
+    "timestamp": 1394788332219
+  }]
+}
@@ -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>
@@ -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>
@@ -0,0 +1,8 @@
+goog.require('ol.DeviceOrientation');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.dom.Input');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
@@ -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="../resources/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>
@@ -0,0 +1,46 @@
+var projection = ol.proj.get('EPSG:3857');
+var view = new ol.View({
+  center: [0, 0],
+  projection: projection,
+  extent: projection.getExtent(),
+  zoom: 2
+});
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
+  view: view
+});
+
+var deviceOrientation = new ol.DeviceOrientation();
+var track = new ol.dom.Input(document.getElementById('track'));
+track.bindTo('checked', deviceOrientation, 'tracking');
+
+deviceOrientation.on('change', function(event) {
+  $('#alpha').text(deviceOrientation.getAlpha() + ' [rad]');
+  $('#beta').text(deviceOrientation.getBeta() + ' [rad]');
+  $('#gamma').text(deviceOrientation.getGamma() + ' [rad]');
+  $('#heading').text(deviceOrientation.getHeading() + ' [rad]');
+});
+
+// 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(view.constrainCenter(center));
+});
@@ -0,0 +1,18 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+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');
@@ -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 ol.source.ImageVector. 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="../resources/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>
@@ -0,0 +1,138 @@
+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.View({
+    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 view = map.getView();
+  view.fitExtent(
+      vectorSource.getExtent(), /** @type {ol.Size} */ (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.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function(evt) {
+  displayFeatureInfo(evt.pixel);
+});
@@ -0,0 +1,17 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+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');
@@ -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. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.</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="../resources/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>
@@ -0,0 +1,135 @@
+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'
+      })
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    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 view = map.getView();
+  view.fitExtent(
+      vectorSource.getExtent(), /** @type {ol.Size} */ (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.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function(evt) {
+  displayFeatureInfo(evt.pixel);
+});
@@ -0,0 +1,16 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.LineString');
+goog.require('ol.geom.Point');
+goog.require('ol.geom.Polygon');
+goog.require('ol.interaction');
+goog.require('ol.interaction.Pointer');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.TileJSON');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
@@ -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>Drag 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">Drag features example</h4>
+          <p id="shortdesc">Example of a drag features interaction.</p>
+          <div id="docs">
+            <p>See the <a href="drag-features.js" target="_blank">drag-features.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">drag, feature, vector, editing</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=drag-features" type="text/javascript"></script>
+
+  </body>
+</html>
@@ -0,0 +1,174 @@
+/**
+ * Define a namespace for the application.
+ */
+window.app = {};
+var app = window.app;
+
+
+
+/**
+ * @constructor
+ * @extends {ol.interaction.Pointer}
+ */
+app.Drag = function() {
+
+  ol.interaction.Pointer.call(this, {
+    handleDownEvent: app.Drag.prototype.handleDownEvent,
+    handleDragEvent: app.Drag.prototype.handleDragEvent,
+    handleMoveEvent: app.Drag.prototype.handleMoveEvent,
+    handleUpEvent: app.Drag.prototype.handleUpEvent
+  });
+
+  /**
+   * @type {ol.Pixel}
+   * @private
+   */
+  this.coordinate_ = null;
+
+  /**
+   * @type {string|undefined}
+   * @private
+   */
+  this.cursor_ = 'pointer';
+
+  /**
+   * @type {ol.Feature}
+   * @private
+   */
+  this.feature_ = null;
+
+  /**
+   * @type {string|undefined}
+   * @private
+   */
+  this.previousCursor_ = undefined;
+
+};
+ol.inherits(app.Drag, ol.interaction.Pointer);
+
+
+/**
+ * @param {ol.MapBrowserEvent} evt Map browser event.
+ * @return {boolean} `true` to start the drag sequence.
+ */
+app.Drag.prototype.handleDownEvent = function(evt) {
+  var map = evt.map;
+
+  var feature = map.forEachFeatureAtPixel(evt.pixel,
+      function(feature, layer) {
+        return feature;
+      });
+
+  if (feature) {
+    this.coordinate_ = evt.coordinate;
+    this.feature_ = feature;
+  }
+
+  return !!feature;
+};
+
+
+/**
+ * @param {ol.MapBrowserEvent} evt Map browser event.
+ */
+app.Drag.prototype.handleDragEvent = function(evt) {
+  var map = evt.map;
+
+  var feature = map.forEachFeatureAtPixel(evt.pixel,
+      function(feature, layer) {
+        return feature;
+      });
+
+  var deltaX = evt.coordinate[0] - this.coordinate_[0];
+  var deltaY = evt.coordinate[1] - this.coordinate_[1];
+
+  var geometry = /** @type {ol.geom.SimpleGeometry} */
+      (this.feature_.getGeometry());
+  geometry.translate(deltaX, deltaY);
+
+  this.coordinate_[0] = evt.coordinate[0];
+  this.coordinate_[1] = evt.coordinate[1];
+};
+
+
+/**
+ * @param {ol.MapBrowserEvent} evt Event.
+ */
+app.Drag.prototype.handleMoveEvent = function(evt) {
+  if (this.cursor_) {
+    var map = evt.map;
+    var feature = map.forEachFeatureAtPixel(evt.pixel,
+        function(feature, layer) {
+          return feature;
+        });
+    var element = evt.map.getTargetElement();
+    if (feature) {
+      if (element.style.cursor != this.cursor_) {
+        this.previousCursor_ = element.style.cursor;
+        element.style.cursor = this.cursor_;
+      }
+    } else if (this.previousCursor_ !== undefined) {
+      element.style.cursor = this.previousCursor_;
+      this.previousCursor_ = undefined;
+    }
+  }
+};
+
+
+/**
+ * @param {ol.MapBrowserEvent} evt Map browser event.
+ * @return {boolean} `false` to stop the drag sequence.
+ */
+app.Drag.prototype.handleUpEvent = function(evt) {
+  this.coordinate_ = null;
+  this.feature_ = null;
+  return false;
+};
+
+
+var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
+
+var lineFeature = new ol.Feature(
+    new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
+
+var polygonFeature = new ol.Feature(
+    new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
+        [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
+
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([new app.Drag()]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.TileJSON({
+        url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
+      })
+    }),
+    new ol.layer.Vector({
+      source: new ol.source.Vector({
+        features: [pointFeature, lineFeature, polygonFeature]
+      }),
+      style: new ol.style.Style({
+        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+          anchor: [0.5, 46],
+          anchorXUnits: 'fraction',
+          anchorYUnits: 'pixels',
+          opacity: 0.95,
+          src: 'data/icon.png'
+        })),
+        stroke: new ol.style.Stroke({
+          width: 3,
+          color: [255, 0, 0, 1]
+        }),
+        fill: new ol.style.Fill({
+          color: [0, 0, 255, 0.6]
+        })
+      })
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
@@ -0,0 +1,6 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragRotateAndZoom');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
@@ -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="../resources/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>
@@ -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.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
@@ -0,0 +1,12 @@
+goog.require('ol.FeatureOverlay');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.events.condition');
+goog.require('ol.interaction.Draw');
+goog.require('ol.interaction.Modify');
+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');
+goog.require('ol.style.Style');
@@ -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>Draw and modify 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 and modify features example</h4>
+          <p id="shortdesc">Example of using the ol.interaction.Draw interaction together with
+          the ol.interaction.Modify 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-and-modify-features.js" target="_blank">draw-and-modify-features.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">draw, edit, modify, vector, featureoverlay</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=draw-and-modify-features" type="text/javascript"></script>
+
+  </body>
+</html>
@@ -0,0 +1,70 @@
+var raster = new ol.layer.Tile({
+  source: new ol.source.MapQuest({layer: 'sat'})
+});
+
+var map = new ol.Map({
+  layers: [raster],
+  target: 'map',
+  view: new ol.View({
+    center: [-11000000, 4600000],
+    zoom: 4
+  })
+});
+
+// The features are not added to a regular vector layer/source,
+// but to a feature overlay which holds a collection of features.
+// This collection is passed to the modify and also the draw
+// interaction, so that both can add or modify features.
+var featureOverlay = new ol.FeatureOverlay({
+  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'
+      })
+    })
+  })
+});
+featureOverlay.setMap(map);
+
+var modify = new ol.interaction.Modify({
+  features: featureOverlay.getFeatures(),
+  // the SHIFT key must be pressed to delete vertices, so
+  // that new vertices can be drawn at the same position
+  // of existing vertices
+  deleteCondition: function(event) {
+    return ol.events.condition.shiftKeyOnly(event) &&
+        ol.events.condition.singleClick(event);
+  }
+});
+map.addInteraction(modify);
+
+var draw; // global so we can remove it later
+function addInteraction() {
+  draw = new ol.interaction.Draw({
+    features: featureOverlay.getFeatures(),
+    type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
+  });
+  map.addInteraction(draw);
+}
+
+var typeSelect = document.getElementById('type');
+
+
+/**
+ * Let user change the geometry type.
+ * @param {Event} e Change event.
+ */
+typeSelect.onchange = function(e) {
+  map.removeInteraction(draw);
+  addInteraction();
+};
+
+addInteraction();
@@ -0,0 +1,11 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+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');
@@ -0,0 +1,62 @@
+<!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 ol.interaction.Draw interaction.</p>
+          <form class="form-inline">
+            <label>Geometry type &nbsp;</label>
+              <select id="type">
+                <option value="None">None</option>
+                <option value="Point">Point</option>
+                <option value="LineString">LineString</option>
+                <option value="Polygon">Polygon</option>
+                <option value="Circle">Circle</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="../resources/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>
@@ -0,0 +1,60 @@
+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: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [-11000000, 4600000],
+    zoom: 4
+  })
+});
+
+var typeSelect = document.getElementById('type');
+
+var draw; // global so we can remove it later
+function addInteraction() {
+  var value = typeSelect.value;
+  if (value !== 'None') {
+    draw = new ol.interaction.Draw({
+      source: source,
+      type: /** @type {ol.geom.GeometryType} */ (value)
+    });
+    map.addInteraction(draw);
+  }
+}
+
+
+/**
+ * Let user change the geometry type.
+ * @param {Event} e Change event.
+ */
+typeSelect.onchange = function(e) {
+  map.removeInteraction(draw);
+  addInteraction();
+};
+
+addInteraction();
@@ -0,0 +1,11 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.MultiPoint');
+goog.require('ol.geom.Point');
+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');
+goog.require('ol.style.Style');
@@ -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="../resources/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>
@@ -0,0 +1,66 @@
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.MapQuest({layer: 'sat'})
+    })
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+var imageStyle = new ol.style.Circle({
+  radius: 5,
+  snapToPixel: false,
+  fill: new ol.style.Fill({color: 'yellow'}),
+  stroke: new ol.style.Stroke({color: 'red', width: 1})
+});
+
+var headInnerImageStyle = new ol.style.Style({
+  image: new ol.style.Circle({
+    radius: 2,
+    snapToPixel: false,
+    fill: new ol.style.Fill({color: 'blue'})
+  })
+});
+
+var headOuterImageStyle = new ol.style.Circle({
+  radius: 5,
+  snapToPixel: false,
+  fill: new ol.style.Fill({color: 'black'})
+});
+
+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);
+
+  var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);
+  var headFeature = new ol.Feature(headPoint);
+  vectorContext.drawFeature(headFeature, headInnerImageStyle);
+
+  vectorContext.setImageStyle(headOuterImageStyle);
+  vectorContext.drawMultiPointGeometry(headPoint, null);
+
+  map.render();
+});
+map.render();
@@ -0,0 +1,16 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.extent');
+goog.require('ol.interaction');
+goog.require('ol.interaction.Select');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Cluster');
+goog.require('ol.source.KML');
+goog.require('ol.source.Stamen');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.RegularShape');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+goog.require('ol.style.Text');
@@ -0,0 +1,75 @@
+<!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>Earthquake Clusters</title>
+    <style>
+      #map {
+        position: relative;
+      }
+      #info {
+        position: absolute;
+        height: 1px;
+        width: 1px;
+        z-index: 100;
+      }
+      .tooltip.in {
+        opacity: 1;
+        filter: alpha(opacity=100);
+      }
+      .tooltip.top .tooltip-arrow {
+        border-top-color: white;
+      }
+      .tooltip-inner {
+        border: 2px solid white;
+      }
+    </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">Earthquake Clusters</h4>
+          <p id="shortdesc">Demonstrates the use of style geometries to render source features of a cluster.</p>
+          <div id="docs">
+            <p>
+              This example parses a KML file and renders the features as clusters on a vector layer.  The styling in this example is quite involved. Single earthquake locations (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.
+            </p>
+            <p>To achieve this, we make heavy use of style functions and <code>ol.style.Style#geometry</code>. See the <a href="earthquake-clusters.js" target="_blank">earthquake-clusters.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">KML, vector, style, geometry, cluster</div>
+        </div>
+      </div>
+
+    </div>
+
+    <script src="../resources/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=earthquake-clusters" type="text/javascript"></script>
+
+  </body>
+</html>
@@ -0,0 +1,136 @@
+var earthquakeFill = new ol.style.Fill({
+  color: 'rgba(255, 153, 0, 0.8)'
+});
+var earthquakeStroke = new ol.style.Stroke({
+  color: 'rgba(255, 204, 0, 0.2)',
+  width: 1
+});
+var textFill = new ol.style.Fill({
+  color: '#fff'
+});
+var textStroke = new ol.style.Stroke({
+  color: 'rgba(0, 0, 0, 0.6)',
+  width: 3
+});
+var invisibleFill = new ol.style.Fill({
+  color: 'rgba(255, 255, 255, 0.01)'
+});
+
+function createEarthquakeStyle(feature) {
+  // 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 = feature.get('name');
+  var magnitude = parseFloat(name.substr(2));
+  var radius = 5 + 20 * (magnitude - 5);
+
+  return new ol.style.Style({
+    geometry: feature.getGeometry(),
+    image: new ol.style.RegularShape({
+      radius1: radius,
+      radius2: 3,
+      points: 5,
+      angle: Math.PI,
+      fill: earthquakeFill,
+      stroke: earthquakeStroke
+    })
+  });
+}
+
+var maxFeatureCount;
+function calculateClusterInfo(resolution) {
+  maxFeatureCount = 0;
+  var features = vector.getSource().getFeatures();
+  var feature, radius;
+  for (var i = features.length - 1; i >= 0; --i) {
+    feature = features[i];
+    var originalFeatures = feature.get('features');
+    var extent = ol.extent.createEmpty();
+    for (var j = 0, jj = originalFeatures.length; j < jj; ++j) {
+      ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent());
+    }
+    maxFeatureCount = Math.max(maxFeatureCount, jj);
+    radius = 0.25 * (ol.extent.getWidth(extent) + ol.extent.getHeight(extent)) /
+        resolution;
+    feature.set('radius', radius);
+  }
+}
+
+var currentResolution;
+function styleFunction(feature, resolution) {
+  if (resolution != currentResolution) {
+    calculateClusterInfo(resolution);
+    currentResolution = resolution;
+  }
+  var style;
+  var size = feature.get('features').length;
+  if (size > 1) {
+    style = [new ol.style.Style({
+      image: new ol.style.Circle({
+        radius: feature.get('radius'),
+        fill: new ol.style.Fill({
+          color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
+        })
+      }),
+      text: new ol.style.Text({
+        text: size.toString(),
+        fill: textFill,
+        stroke: textStroke
+      })
+    })];
+  } else {
+    var originalFeature = feature.get('features')[0];
+    style = [createEarthquakeStyle(originalFeature)];
+  }
+  return style;
+}
+
+function selectStyleFunction(feature, resolution) {
+  var styles = [new ol.style.Style({
+    image: new ol.style.Circle({
+      radius: feature.get('radius'),
+      fill: invisibleFill
+    })
+  })];
+  var originalFeatures = feature.get('features');
+  var originalFeature;
+  for (var i = originalFeatures.length - 1; i >= 0; --i) {
+    originalFeature = originalFeatures[i];
+    styles.push(createEarthquakeStyle(originalFeature));
+  }
+  return styles;
+}
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Cluster({
+    distance: 40,
+    source: new ol.source.KML({
+      extractStyles: false,
+      projection: 'EPSG:3857',
+      url: 'data/kml/2012_Earthquakes_Mag5.kml'
+    })
+  }),
+  style: styleFunction
+});
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.Stamen({
+    layer: 'toner'
+  })
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  interactions: ol.interaction.defaults().extend([new ol.interaction.Select({
+    condition: function(evt) {
+      return evt.originalEvent.type == 'mousemove' ||
+          evt.type == 'singleclick';
+    },
+    style: selectStyleFunction
+  })]),
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
@@ -0,0 +1,6 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.control.ScaleLine');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.TileWMS');
@@ -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="../resources/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/Show More
+++ b/Show More