Permalink

Example on how to create permalinks.

In this example the HTML 5 History API 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 all browsers, one might consider to use a a polyfill.

<!DOCTYPE html>
<html>
  <head>
    <title>Permalink</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      // 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: {
            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;
      });
    </script>
  </body>
</html>