Question

In a previous version of my program I used markers to mark points on the map. In the current version I had to change from markers to vectors, because I need the extra flexibility. In the markers solution I used the function below to add a popup-box to a marker:

function createPopupBoxFeature(vector, lonLat, description) {
    var feature = new OpenLayers.Feature(vector, lonLat);

    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, 
        { "autoSize": true });
    feature.data.popupContentHTML = description;

    vector.events.register("mousedown", feature, function(evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    });

    return feature;
}

But it is no longer working for vectors, because they have no events property. How do I fix this?

Answer 1

Solved by myself. Here is how:

// Used to display the dialog popup
var selectControl;
var selectedFeature;

Add a SelectFeature

    selectControl = new OpenLayers.Control.SelectFeature(vectorLayer,
    {
        onSelect: onFeatureSelect,
        onUnselect: onFeatureUnselect 
    });
    map.addControl(selectControl);
    selectControl.activate();

Event handlers

function onPopupClose(evt) {
    selectControl.unselect(selectedFeature);
}
function onPopupFeatureSelect(feature) {
    selectedFeature = feature;
    popup = new OpenLayers.Popup.FramedCloud("chicken",
        feature.geometry.getBounds().getCenterLonLat(),
        null, feature.name, null, true, onPopupClose);
    popup.panMapIfOutOfView = true;
    popup.autoSize = true;
    feature.popup = popup;
    map.addPopup(popup);
}
function onPopupFeatureUnselect(feature) {
    map.removePopup(feature.popup);
    feature.popup.destroy();
    feature.popup = null;
}

Store the content of the popup in the vector’s name. There may be a better solution, but I don’t care. Adding popups to vectors is already difficult enough.

vector.name = "Your popup content";