Only one popup on Vector OpenLayers

Question

I use OpenLayers with vector layer to display differents item on the map.

On top of that I want to add for each item (a feature) a pop-up (when click on item display the popup). To do that I have :

function initMap()
    {
     // In this function I add with success the different items to the vectorLayer.
    }

    function finishMap()
    {

        map.addLayer(vectorLayer);

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

    function onFeatureClose(evt) {
        selectControl.unselect(selectedFeature);
    }

    function onFeatureSelect(feature) {
        var popup = new OpenLayers.Popup.FramedCloud("popup",
            feature.geometry.getBounds().getCenterLonLat(),
            null,
            feature.description,
            true,
            onFeatureClose);
        popup.panMapIfOutOfView = true;
        popup.autoSize = true;
        feature.popup = popup;

        map.addPopup(popup);
    }

    function onFeatureUnselect(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }

The call for different function is :

initMap();
finishMap();

The problem is : I have only one item (of more than 10) which have a pop-up by clicking on it...

Kenny806 Kenny806 · Accepted Answer · 2013-09-02T15:46:37

Generally, it is easier to implement the select handler directly to the layer object, which is (i guess) in the initMap method. Use the eventListeners property, like this:

    var layer = new OpenLayers.Layer.Vector("Vector layer", { 
        eventListeners: {
            'featureselected':function(evt){
                var feature = evt.feature;
                var popup = new OpenLayers.Popup.FramedCloud("popup",
                    OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                    null,
                    "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Foo: " + feature.attributes.foo+"</div>",
                    null,
                    true
                );
                feature.popup = popup;
                map.addPopup(popup);
            },
            'featureunselected':function(evt){
                var feature = evt.feature;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        }
    });

//create selector control
var selector = new OpenLayers.Control.SelectFeature(layer,{
        autoActivate:true
    });

Example implementation: http://openlayers.org/dev/examples/light-basic.html with the only difference that the selecotr reacts to mouseover and mouseout, instead of click (that is done by setting the hover property of the selector to true).

Also, a very similar question on SO: How to add a popup box to a vector in OpenLayers?.

For more details on the classes see OL docs: http://dev.openlayers.org/docs/files/OpenLayers-js.html or ask away.

Hope at least some of this helps.

Only one popup on Vector OpenLayers

1 Answers