Add permalink example

examples/permalink.html

@@ -0,0 +1,19 @@
+---
+template: example.html
+title: Permalink example
+shortdesc: Example on how to create permalinks.
+docs: >
+  In this example the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history"
+  target="_blank">HTML 5 History API</a> is used to update the browser URL
+  with the current zoom-level, center and rotation when the map is moved.
+  Note that the History API is not supported in <a href="http://caniuse.com/#feat=history"
+  target="_blank">all browsers</a>, one might consider to use a <a
+  href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#html5-history-api-pushstate-replacestate-popstate"
+  target="_blank">a polyfill</a>.
+tags: "permalink, openstreetmap, history"
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/permalink.js

@@ -0,0 +1,80 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+// default zoom, center and rotation
+var zoom = 2;
+var center = [0, 0];
+var rotation = 0;
+
+if (window.location.hash !== '') {
+  // try to restore center, zoom-level and rotation from the URL
+  var hash = window.location.hash.replace('#map=', '');
+  var parts = hash.split('/');
+  if (parts.length === 4) {
+    zoom = parseInt(parts[0], 10);
+    center = [
+      parseFloat(parts[1]),
+      parseFloat(parts[2])
+    ];
+    rotation = parseFloat(parts[3]);
+  }
+}
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
+  target: 'map',
+  view: new ol.View({
+    center: center,
+    zoom: zoom,
+    rotation: rotation
+  })
+});
+
+var shouldUpdate = true;
+var view = map.getView();
+var updatePermalink = function() {
+  if (!shouldUpdate) {
+    // do not update the URL when the view was changed in the 'popstate' handler
+    shouldUpdate = true;
+    return;
+  }
+
+  var center = view.getCenter();
+  var hash = '#map=' +
+      view.getZoom() + '/' +
+      Math.round(center[0] * 100) / 100 + '/' +
+      Math.round(center[1] * 100) / 100 + '/' +
+      view.getRotation();
+  var state = {
+    zoom: view.getZoom(),
+    center: view.getCenter(),
+    rotation: view.getRotation()
+  };
+  window.history.pushState(state, 'map', hash);
+};
+
+map.on('moveend', updatePermalink);
+
+// restore the view state when navigating through the history, see
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
+window.addEventListener('popstate', function(event) {
+  if (event.state === null) {
+    return;
+  }
+  map.getView().setCenter(event.state.center);
+  map.getView().setZoom(event.state.zoom);
+  map.getView().setRotation(event.state.rotation);
+  shouldUpdate = false;
+});