I'm creating website for divers in my country and beside all standard contents and informations it also offers a map which shows some diving clubs, locations and similair. I also have table with textual informations about those clubs that is placed in other part of that website. You can see it here.

print screen

Although the map I create is separate part of this site and although data from table doesn't have to be linked to that map I would still like to do that if it's possible.

So, what I want to achieve is that when user clicks on icon 'Map' within the table that he gets displayed map but centered and zoomed to that club instead to default center and zoom level which I've already set. It should probably be done by getting long and lat of each point in layer 'diving_clubs' and then setting it as center but I'm not quite sure how to do it in most correct way so I'd appreciate your help.

Until know, I was creating maps using geoext and everything was placed in same window (same html file) so it was easier. Beside that I could use feature grids (tables) there whcih made things much easier. This is new to me and I'm obviously missing good ideas so I hope you guys can help me with that.


  • Can you get the coordinates information for clubs when you click on the 'Map' icon? With that coordinate information you can easily zoom to the point by using the function provided by OpenLayers.
    – mfdev
    Commented Jul 5, 2013 at 11:39

1 Answer 1


We do something very similar with a local travel information application we made, TravelDorset. If you click one of the 'Travel Alerts' and then click the little Map button in the bottom right corner of the alert it takes you to a map and zooms into the alert.

If I understand you correct, what you'll want to do is pass through the lat/lon in a query string or REST like structure e.g. www.mymapsite.com/map?lat=50.2&lon=1.2 and then in the JavaScript for your Map page you'll want to grab the contents of the query string using location.search (See this StackOverflow answer). Once you have your lat and lon you can pass this through to an OpenLayers function such as OpenLayers.Map.setCenter to move your map to the right location.

I should also point out that if you are using a vector layer and you have access to the feature id you can get the feature like this - var fid = layer.getFeatureByFid(123) and with that object you can setCenter with something like

map.setCenter(new OpenLayers.LonLat(fid.geometry.bounds.left, fid.geometry.bounds.top), 16))

You may also want to consider looking at OpenLayers.Control.Permalink. I've never used that myself so I don't know whether it will help or not.

  • Yes, your travel information example is exactly what I want to achieve. Your answer looks like a good solution but the problem is that I'm kind of new in web development so I'm not so familiar with query strings. I first need to learn that and then I will try your advice. Maybe you can help me understand it better with some other example?
    – user14026
    Commented Jul 5, 2013 at 15:22
  • Ok, I put this problem aside for some time but now I tried it again and it works fine. I use query string to define lat and lon and then I put that parameters from query string to variables which I use to define map center (just like you said). Thank you very much!
    – user14026
    Commented Jul 22, 2013 at 10:47
  • I always find I work better if I just leave a problem and come back to it later! Glad I could help. Commented Jul 22, 2013 at 11:58

Your Answer

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