Openlayers WFS Vector Layer with Popups: how to setCenter on point when you click it?

Question

Working code I have so far is below. Lots of airports on the map, you click an airport icon, the popup appears. No problems there.

Goal: to click a popup, and based on the lat/long data of that particular point, the map will center on that clicked point.

wfs.events.on({ 
    featureselected: function(event) {
            var feature = event.feature;
            feature.popup = new OpenLayers.Popup.FramedCloud("box",
                    feature.geometry.getBounds().getCenterLonLat(),
                    null,
                    '<div>Airport: '+feature.attributes.Name +'<br> ICAO: '+feature.attributes.ICAO+'<br> IATA: '+feature.attributes.IATA+'</div>',
                    null,
                    true
            );
            while( map.popups.length ) {
                    map.removePopup( map.popups[0] );
            }
            map.addPopup(feature.popup);
            }
    });

Not sure how to go about this after browsing through other questions/looking at documentation. Also:

feature.geometry.getBounds().getCenterLonLat()

What exactly is the point of this?

Based on the docs it's for {OpenLayers.LonLat} but it's not like it is reading the data from there?

Answer 1

Just use the setCenter function and done http://trac.osgeo.org/openlayers/wiki/OpenLayers.Map.setCenter

Example to add just after map.addPopup(feature.popup); (not the best place maybe, depend on your purpose)

map.setCenter(feature.geometry.getBounds().getCenterLonLat(), 10);

10 is the zoom level you want

You can also see the API documentation about it http://dev.openlayers.org/releases/OpenLayers-2.13.1/doc/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.setCenter

Answer 2

Ended up using a function (thanks to http://harrywood.co.uk/maps/examples/openlayers/marker-popups.view.html)

function jump(lat,lon) {
    var zoom=map.getZoom();
    var lonLat = new OpenLayers.LonLat( lon, lat ).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    map.setCenter (lonLat, zoom);
}

then within FramedCloud did this:

feature.popup = new OpenLayers.Popup.FramedCloud("box",
                    feature.geometry.getBounds().getCenterLonLat(),
                    null,
                    '<div>Airport: '+feature.attributes.Name +'<br> ICAO: '+feature.attributes.ICAO+'<br> IATA: '+feature.attributes.IATA+'</div>'+ '<a href="#" onclick="jump('+feature.attributes.LAT+', '+ feature.attributes.LONG+')">Center on Location</a>',
                    null,
                    true
            );