How to edit popup using Openlayers text layer

Question

I am creating a map with approximately 1000 + points using Openlayers. Currently, when I click on the icon of a single point, the description of the point appears in a pop-up window, and to exit the pop-up window, I need to click the icon of the same point again. Is there a way to change the code for this so that I can click the close button, or can I click anywhere on the map so that this popup closes again? I know there is a way if I just use a regular popup, but I use the Openlayers.layer.text layer.

var pois = new OpenLayers.Layer.Text( "Frequencies", { location:"./frequencyrange.txt", projection: map.displayProjection }); map.addLayer(pois); 

I use this code to add a text layer. The following columns will be in the text file: lon lat title description icon iconSize iconOffset. Is there another column that I have to add for the popup? I tried a column that was supposed to resize the popup, but that didn't work for me. So, so far I have not been able to change the popup, except for what is in it.

Answer 1

If you are updating a map with controls, be careful not to have multiple controls and event handlers (see LAST NOTE at the end of this post).

two different events can close your popup: the CLOSE ('X') field inside the popup and the automatic procedure that closes the popup when the popup loses focus.

this pseudo-code was taken from a functional map with pop-ups that appear when the user clicks on any MARKER.

I create a layer on the map (in this case, from a dynamic KML file analyzed by php):

 var urlKML = 'parseKMLTrack07d.php'; var layerKML = new OpenLayers.Layer.Vector("KML1", { strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: urlKML, format: new OpenLayers.Format.KML({ extractStyles: true, extractAttributes: true, maxDepth: 2 }) }) }); 

then I create a selection control that I call 'selectStop' and I bind 2 functions to EVENTS (when MARKER is selected and not selected):

 var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); layerKML.events.on({ "featureselected": onFeatureSelect, "featureunselected": onFeatureUnselect }); map.addControl(selectStop); selectStop.activate(); 

these are two functions when MARKER or UNSELECTED is selected

 function onFeatureSelect(event) { var feature = event.feature; var content = feature.attributes.name + '<br/>'+feature.attributes.description; popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(100,100), content, null, true, onFeatureUnselect); feature.popup = popup; map.addPopup(popup); // GLOBAL variable, in case popup is destroyed by clicking CLOSE box lastfeature = feature; } function onFeatureUnselect(event) { var feature = lastfeature; if(feature.popup) { map.removePopup(feature.popup); feature.popup.destroy(); delete feature.popup; } } 

note that in the onFeatureSelect function I create a GLOBAL variable called "lastfeature". the reason i am doing this is because my onFeatureUnselect will be used to destroy the popup in case it is NOT DELETED, or CLOSE BOX CLICKED.

If I did not save the function as a global variable, I would have to handle the unselection and close box, clicking separately, because EVENTS, WHICH CAUSES EVERYONE, are different.

to create a CLOSE BOX inside the popup, I set the second in the last argument (in the popup declaration in the onFeatureSelect function) to TRUE and call onFeatureUnselect as the callback function for the close field:

 popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(100,100), content, null, true, onFeatureUnselect); 

LAST NOTE: if you are using update on a layer, be careful not to duplicate handlers. in this case, when your javascript starts, create the variable 'id1' that will contain the identifier of the selectStop control. check if it exists before creating a new control and handler. eg:

 if (id1 == '') { var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); layerKML.events.on({ "featureselected": onFeatureSelect, "featureunselected": onFeatureUnselect }); map.addControl(selectStop); selectStop.activate(); id1 = selectStop.id; } else { selectStop = OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); } 

you can check if you are copying event handlers by adding a warning to your onFeatureSelect. if you click on the marker and you get several warning windows, then you have duplicate handlers. you get the impression that you cannot destroy the pop-up, which is not true. you destroyed ONE popup, but you have N identical pop-ups (with the same identifier, by the way).

Answer 2

In a call to the Popup constructor, you can specify that a close flag should be present.

From the OpenLayers documentation: http://dev.openlayers.org/apidocs/files/OpenLayers/Popup-js.html

 Parameters ... closeBox {Boolean} Whether to display a close box inside the popup. closeBoxCallback {Function} Function to be called on closeBox click. 

and if you use the featureselected layer event to display a popup, you can use the featureunselected event to close the popup.