Add an example showing how to create a permalink

[tsauerwein]

A small example in which the URL is updated with the current zoom-level and center every time the map is moved. When reloading center and zoom-level are restored from the URL.

[bartvde]

LGTM thanks for adding this, please merge if Travis gives the okay

[bartvde]

the only thing I wondered is if we should keep the anchor structure the same as in OpenLayers 2 to make it easier for people that are coming from OpenLayers 2?

#zoom=2&lat=12.01246&lon=23.84033&layers=B

[ahocevar]

Nice! View rotation could also be added to the permalink.

[ahocevar]

And then of course, the History API could be used to navigate through the viewed extents... but maybe that's for a separate improvement pull request to this new example.

[tschaub]

And then of course, the History API could be used to navigate through the viewed extents... but maybe that's for a separate improvement pull request to this new example.

We could also demonstrate how to work with existing libraries :).

var hashed = require('hashed');

// custom serializers/deserializers can also be supplied
// but we'll start with just the defaults
var defaults = {x: 0, y: 0, z: 1};

function onChange(hash) {
  var view = map.getView();
  view.setCenter([hash.x, hash.y]);
  view.setZoom(hash.z);
}

var update = hashed.register(defaults, onChange);

map.on('moveend', function() {
  var view = map.getView();
  var center = view.getCenter();
  update({x: center[0], y: center[1], z: view.getZoom()});
});

// now the back/forward buttons navigate through map history!

[tschaub]

Please add this (and permalink.js) to examples instead of examples_src. Rebasing on master should do the trick.

[tsauerwein]

I updated the example, now the History API is used and also the rotation is taken into account.

the only thing I wondered is if we should keep the anchor structure the same as in OpenLayers 2 to make it easier for people that are coming from OpenLayers 2?

@bartvde I am now using the OSM schema: #map=5/41.146/25.488.

We could also demonstrate how to work with existing libraries :).

@tschaub Nice library! Could you also use it together with the History API?

[marcjansen]

Sorry, I didn't want to close this...

A very nice example! Which versions of IE do support the History API? Will this silently fail in browsers that don't support it? If so, this is good to be merged. Thanks, @tsauerwein

[tsauerwein]

The history API is supported in IE 10+. But there are Polyfills that could be used.

[marcjansen]

A simple comment in the docs of the example would be sufficient. Please merge with or without adding such a comment.

[fredj]

LGTM, the values could be simplified a bit; centimeter level should be enough

[tsauerwein]

@fredj Good point!

I will merge when Travis passes, thanks for all the feedback.