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

[Mr. Puneet Kishor]

adding more to my own post --


On Sep 24, 2011, at 9:28 PM, Mr. Puneet Kishor wrote:

> 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.
> 


Yup. The above was the issue. If I keep track of the layers added, pushing them in an array, and add the array of layers to the SelectFeature control *after* all the layers have been added, the control works. So far so good. However, this leaves me with a problem when I add another layer. How do I add the new layer to the already added SelectFeature control without destroying the control for the existing layers? In fact, I will be removing layers and adding new layers several times, and all new layers have to be selectable. What to do?

Puneet.