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

[Mr. Puneet Kishor]

more info below --

On Sep 24, 2011, at 7:59 PM, Mr. Puneet Kishor wrote:

> 
> 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;
>                        }
>                    }
>                });
> 
>            }
>        });     
>    };


So, reading more about SelectFeature, I can add multiple layers to it. So, I have moved my control creation code outside layer creation. Still, my problem may be that the layers are being created asynchronously, so I don't have an array of layers ready when I am creating the control. This creates a problem for me, unless there is a way around. 

An additional issue -- once I have created a SelectFeature control, how do I add a new layer to it? The docs provide the control.setLayer method, but say that it would "Attach a new layer to the control, overriding any existing layers." Hmmmm... I don't want to destroy any existing layer. I want to add the new layer to the existing layers, so features on all the layers may be selectable/highlightable/popupWindowable.

Suggestions?

Thanks in advance.