Permalink

This example uses OpenLayers v4.0.1. The latest is v.

#### 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.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.control
,
- ol.layer.Tile
,
- ol.source.OSM

Copy Edit
Permalink Example on how to create permalinks. // 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; }); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Permalink</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/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.0.1/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: /** @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;
          });
        </script>
      </body>
    </html>