[GIS] How to zoom to specific Openlayers point feature on map

htmljavascriptopenlayers-2

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.

Thanks.

Best Answer

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.

Related Question