Removing pop-ups from OpenLayers features

Question

I use OpenLayers to create maps and plots. Each location has a marker and a pop-up window and is created using OpenLayers.Feature - at the moment I am definitely out of my comfort zone here, so there is an example code together.

The marker is created as follows (I shortened what, in my opinion, the explicit assignment of variables for brevity):

function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow, type) { var feature = new OpenLayers.Feature(markerLayer, ll); feature.closeBox = closeBox; feature.popupClass = popupClass; feature.data.icon = icon; feature.data.popupContentHTML = popupContentHTML; feature.data.overflow = (overflow) ? "auto" : "hidden"; var marker = feature.createMarker(); var markerClick = function (evt) { if (this.popup == null) { this.popup = this.createPopup(this.closeBox); map.addPopup(this.popup); this.popup.show(); } else { this.popup.toggle(); } currentPopup = this.popup; OpenLayers.Event.stop(evt); }; marker.events.register("mousedown", feature, markerClick); markerLayer.addMarker(marker); } 

A map can contain many markers.

When you click a marker, a popup window turns on and off. What I'm trying to do ado is that the ALL popup windows that apply to all the markers on the map close when a new marker is clicked and the popup window is turned on - that is, I want only one popup window to be displayed at a time.

My approach may be wrong, but I would be grateful for pointers, even just for ideas.

Answer 1

If you implement a solution, while only one popup is active at a time (that is, every time a popup is not selected, it disappears), you will never have more than one popup at a time.

read this STACKOVERFLOW answer I wrote for this problem. you have all the necessary pseudo codes (with long explanations about everything).

if you don't need an explanation, this shows a solution:

 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 }) }) }); var layerOSM = new OpenLayers.Layer.OSM(); var map = new OpenLayers.Map({ div: "map", layers: [ layerOSM, layerKML ] }); var selectStop = new OpenLayers.Control.SelectFeature(layerKML,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect}); layerKML.events.on({ "featureselected": onFeatureSelect, "featureunselected": onFeatureUnselect }); map.addControl(selectStop); selectStop.activate(); 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; } } 

now if you REALLY want to destroy all pop-ups no matter what I am very discouraged:

 function popupClear() { //alert('number of popups '+map.popups.length); while( map.popups.length ) { map.removePopup(map.popups[0]); } } 

Answer 2

What I remember about OpenLayers is that you must implement a control to select a function.

I hope it will work with your markers ...

 var selectedFeature, selectControl; function init() { ... selectControl = new OpenLayers.Control.SelectFeature(yourMainLayer, { onSelect: onFeatureSelect, // will be called on feature select onUnselect: onFeatureUnselect // will be called on feature unselect }); selectControl.activate(); ... } function onFeatureSelect(feature) { popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), null, "some informations", null, true, onPopupClose); feature.popup = popup; map.addPopup(popup); } function onFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } function onPopupClose(evt) { selectControl.unselect(selectedFeature); } 

Answer 3

Why don’t you open the pop-ups in an array in the if(this.popup == null) branches and in the outline of the else branch on this array and hide all the pop-ups.