[GIS] Openlayers Vector Layers eventListeners: how to specify different data without defining multiple layers

javascriptopenlayers-2vector

I have a map. It has two origins, and two destinations. The code for one origin is here:

vectors_origin = new OpenLayers.Layer.Vector("Origin", {
            eventListeners:{
                    'featureselected':function(evt){
                    var feature = evt.feature;
                    var popup = new OpenLayers.Popup.FramedCloud("popup",
                    OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                    null,
                    json.orig1_iata_code.iata+"<br>",
                    null,
                    true,
                    null
                    );
                    popup.autoSize = true;
                    popup.maxSize = new OpenLayers.Size(400,800);
                    popup.fixedRelativePosition = true;
                    feature.popup = popup;
                    map.addPopup(popup);
            },
            'featureunselected':function(evt){
            var feature = evt.feature;
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
            }
    }
    });

Note this line:

json.orig1_iata_code.iata+"<br>",

This takes care of one origin. Now since all 4 points (2 origins, 2 destinations), this HTML is going to differ a bit. There will be an

orig1_iata_code, orig2_iata_code, dest1_iata_code, and dest2_iata_code

I really don't want to have to define 4 separate vector layers. Sure it will work, but that seems pretty tacky (correct me if I'm wrong).

So where that html is called above, json.orig1_iata_code.iata+"<br>",, is there any way to specify 'multiple' optional parameters? Multiple I've done before, but all of them will be called every time.

Best Answer

I'm not sure what your solution was, but if you can know what variable correspond to what point it could be as simple as:

'featureselected':function(evt){
    var feature = evt.feature;

    var popup_text = '<br>';
    if(feature.attributes.your_attribute == 'orig1') {
        popup_test = orig1_iata_code;
    } else if(feature.attributes.your_attribute == 'orig2') {
        popup_test = orig2_iata_code;
    } else if(feature.attributes.your_attribute == 'dest1') {
        popup_test = dest1_iata_code;
    } else if(feature.attributes.your_attribute == 'dest2') {
        popup_test = dest2_iata_code;
    }

    var popup = new OpenLayers.Popup.FramedCloud("popup",
        OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
        null,
        popup_text,
        null,
        true,
        null
    );
    popup.autoSize = true;
    popup.maxSize = new OpenLayers.Size(400,800);
    popup.fixedRelativePosition = true;
    feature.popup = popup;
    map.addPopup(popup);
},
Related Question