How to insert coordinates to url

Question

What would be the approach to show and dynamically update the map coordinates in the url like stamen is doing it? Are there any built in functions in OpenLayers, what other techniqes could I use or do I have to solve this on the server side?

Background: I have a simple TMS built with TileStache and a simple map for showing it - this all works fine. I was just wondering how to add this feature to my map

Answer 1

A more elaborative example, putting together the info in mtn.bikers answer and the map event

//create a callback function that sets the hash 
var updateUrlHash = function () {
    //this is bound to the map, so:
    var zoom = this.getZoom();
    var lonLat = this.getCenter()
    window.location.hash = zoom + '/' + lonLat.lat + '/' + lonLat.lon;
}

//register the moveend event on the map (also catches zoomend)
map.events.register('moveend', map, updateUrlHash);

Answer 2

The answer to this question shows how to use html5 to change the browser url without refreshing page.

In OpenLayers you'd register a map move event when initializing your map. Like this:

map.events.register("moveend", map, function(e) {
    var newurl = '/' + map.getZoom();
    newurl += '/' + map.getCenter().lat;
    newurl += '/' + map.getCenter().lon;
    window.history.pushState("object or string", "Title", newurl);
});

Answer 3

Looks like the easy compact "built in" way is simply to add the "permalink" control with anchor:true like so:

map.addControl(new OpenLayers.Control.Permalink({anchor: true}));

That will make URLs with a particular parameter format appearing after the '#'. For example: #zoom=10&lat=51.48957&lon=-0.05879&layers=B

There's a nice short example on the open layers site or my example here shows it working with a layer picker.

But if you want to build this yourself (perhaps because you want to customise this URL format), then as others have explained, you need to

1. register the 'moveend' event.
2. In the called function, construct your URL and set it with something like: window.location.hash = zoom + '/' + lat + '/' + lon + '/' + layer;
3. For this to work as a permalinkable URL, you'll also need something which reads the URL at start up, parses out the params after the '#' and sets the map location.

There's a full example on the OpenLayers3 site or I've made an example and done it slightly differently