Question

I have written a basic function to allow me to display a popup from a link outside the map. The functionality to open the popup is working fine, but I can’t then close it.

Demo link: http://www.catchingtherain.com/bikestats/stations.php – click on links in left-hand tabbed panels.

Here’s a bit more detail …

A typical map has about 300 features on a vector layer ‘stations’ loaded from kml. These are activated onload using

select = new OpenLayers.Control.SelectFeature(stations);           
stations.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
                });
map.addLayer(stations);
map.addControl(select);
select.activate();

which works fine – I can open and close popups.

With my off-map links I am calling onclick=”showMyPopup([x]) with [x] being an ID attribute loaded in from the kml. The showMyPopup function is

function showMyPopup(myID){
    for(var a = 0; a < stations.features.length; a++){    //loop through all the features
    var feature = stations.features[a];
    if (feature.attributes.ID.value == myID) {            //until it finds the one with the matching ID attribute
       var content = "<h4>" + feature.attributes.name + "</h4>" + feature.attributes.description;
       popup = new OpenLayers.Popup.FramedCloud("chicken",
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     new OpenLayers.Size(200,200),
                                     content,
                                     null, true, onPopupClose);
       feature.popup = popup;
       map.addPopup(popup);
       }
    }
}

This opens the correct popup from the stations layer as expected, and I can see the popup using the DOM inspector on the stations layer just as it would appear if loaded by clicking on the map feature, but there’s then seemingly no way of closing it. The original features on the stations layer are working fine though (opening and closing).

Any help would be much appreciated (maybe there’s a simpler way of tackling this?)

Thanks, James

PS and just in case, here’s the onFeatureUnselect function …

function onFeatureUnselect(event) {
        var feature = event.feature;
        if(feature.popup) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            delete feature.popup;
        }
     }

Answer 1

Your on onPopupClose() function is:

function onPopupClose(evt) {
    select.unselectAll();
}

When you select feature from map and click on popup’s Close icon, then feature will be unselected, but popup is not closed yet. Then, onFeatureUnselect event is triggered, and popup is actually closed.

When you create popup by showMyPopup() function, you are not selecting it. onPopupClose() is called, but it doesn’t close popup. onFeatureUnselect is not triggered.

I suggest to select feature in showMyPopup() function. featureselected event will be fired and popup is created by onFeatureSelect(), and user can close popup both with popup’s Close icon and unselecting feature on map.

But alas, there’s a possible bug (or unexpected behaviour) in OL, when you select feature with code and try to unselect it with clickout. It’s described here: http://lists.osgeo.org/pipermail/openlayers-users/2012-September/026349.html One possible fix is to set SelectControl.handlers.feature.lastFeature manually.

function showMyPopup(myID){
    for(var a = 0; a < stations.features.length; a++){    //loop through all the features
        var feature = stations.features[a];
        if (feature.attributes.ID.value == myID) {            //until it finds the one with the matching ID attribute

            // select is your SelectFeature control
            select.select(feature);
            // Fix for unselect bug
            select.handlers.feature.lastFeature = feature;

            break;
        }
    }
}