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

  • have you looked at the openlayers permalink control
    – neogeomat
    Jun 4, 2014 at 12:19
  • @neogeomat yes, but wanted to have it without the extra overhead
    – bennos
    Jun 4, 2014 at 12:38

3 Answers 3


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);
  • there is a '+' missing after the 'zoom'. Any reason you used location.hash over pushState?
    – bennos
    Jun 4, 2014 at 12:39
  • thanks for noticing! No, not really, I'm not an expert on this, so maybe pushState would be better?
    – atlefren
    Jun 4, 2014 at 14:00

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);

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.