[OpenLayers-Users] help with implementing controls on several vector layers

[Mr. Puneet Kishor]

I am not able to get select and highlight controls working for vector layers. I am using the following (pseudo)code and approach. Please help me identify the errors of my ways.

Since I am adding several vector layers, each getting its own set of attributes, I have my simplified addLayer() method as below. Needless to say, the select, highlight and popup controls are not working. The layers draw correctly, and I get no javascript errors.

    var map;
    
    // repeat addLayer for several layers
    addLayer({url: url, name: name1, styleMap: styleMapObj});
    addLayer({url: url, name: name2, styleMap: styleMapObj});
    addLayer({url: url, name: name3, styleMap: styleMapObj});
    ..

    "onPopupClose" : function(evt) {
        if (this.feature.layer) {
            selectControl.unselect(this.feature);
        } 
        else {
            this.destroy();
        }
    },
            
    "addLayer" : function(a) {
        $.ajax({
            url: a.url + a.name + ".json",
            type: "GET",
            success: function(data) {
                var geojson_format = new OpenLayers.Format.GeoJSON();
                var lyr = new OpenLayers.Layer.Vector(a.name, {styleMap: a.styleMap});
                map.addLayer(lyr);
                lyr.addFeatures(geojson_format.read(data[a.name]));
                
                var highlightCtrl = new OpenLayers.Control.SelectFeature(lyr, {
                    hover: true,
                    highlightOnly: true,
                    renderIntent: "temporary"
                });
    
                var selectCtrl = new OpenLayers.Control.SelectFeature(lyr, {clickout: true});
                        
                map.addControl(highlightCtrl);
                map.addControl(selectCtrl);
    
                highlightCtrl.activate();
                selectCtrl.activate();

                lyr.events.on({
                    "featureselected": function(evt) {
                        feature = evt.feature;
                        var str = "";
                        for (var i in feature.attributes) {
                            str += "<b>" + i + ":</b> " + feature.attributes[i] + "<br />";
                        }
                        
                        popup = new OpenLayers.Popup.FramedCloud(
                            "featurePopup",
                            feature.geometry.getBounds().getCenterLonLat(),
                            new OpenLayers.Size(300,250),
                            str,
                            null, 
                            true, 
                            onPopupClose
                        );
                        feature.popup = popup;
                        popup.feature = feature;
                        map.addPopup(popup, true);
                    },
                    "featureunselected": function(evt) {
                        feature = evt.feature;
                        if (feature.popup) {
                            popup.feature = null;
                            map.removePopup(feature.popup);
                            feature.popup.destroy();
                            feature.popup = null;
                        }
                    }
                });

            }
        });     
    };