0

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?

2 Answers 2

3

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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