OpenLayers: it is not possible to close the pop-up window when added using a call from an external card

Question

I wrote a basic function that allows me to display a popup from a link outside the map. The functionality that opens the popup works fine, but I can't close it.

Demo link: http://www.catchingtherain.com/bikestats/stations.php - click on the links in the left tabs.

Here is a little more details ...

A typical map has about 300 functions on the “stations” of the vector layer loaded from kml. They are activated at boot using

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

which works great - I can open and close pop-ups.

With my links from the link side, I call onclick = "showMyPopup ([x]) with [x] being the identifier attribute loaded from kml. ShowMyPopup Function

 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 pop-up window from the station level, as expected, and I can see the pop-up window using the DOM inspector at the station level, as it would be shown if it were loaded by clicking on the map function, but it would not seem to be there way closing it. The initial functions at the station level work fine (opening and closing).

Any help would be greatly appreciated (maybe there is an easier way to solve this problem?)

Thanks James

PS and just in case, here is 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 onPopupClose() function:

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

When you select a function from the map and click on the "Close" pop-up window icon, the function will not be selected, but the pop-up window is not yet closed. Then the onFeatureUnselect event is onFeatureUnselect , and the popup is actually closed.

When you create a popup using the showMyPopup() function, you do not select it. onPopupClose() is onPopupClose() , but it does not close the popup. onFeatureUnselect does not start.

I suggest choosing a function in the showMyPopup() function. The featureselected event will onFeatureSelect() and a popup will be created using onFeatureSelect() , and the user can close the popup with the Close popup icon and display on the map.

But, alas, an error (or unexpected behavior) appears in OL when you select a function with a code and try to cancel it with a click. This is described here: http://lists.osgeo.org/pipermail/openlayers-users/2012-September/026349.html One possible fix is ​​to manually set SelectControl.handlers.feature.lastFeature.

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

Answer 2

I look in OpenLayers sources and in Popup.js something like this ...

  ... var closePopup = callback || function(e) { this.hide(); OpenLayers.Event.stop(e); }; OpenLayers.Event.observe(this.closeDiv, "touchend", OpenLayers.Function.bindAsEventListener(closePopup, this)); OpenLayers.Event.observe(this.closeDiv, "click", OpenLayers.Function.bindAsEventListener(closePopup, this)); ... 

It seems to me that if you add your own closePopup function, you need to call the hide function in your code.