[GIS] Error:getFeatureFromEvent is not a function – Openlayers Multiple layer selection

erroropenlayers-2

OpenLayers.Control.SelectFeature works well when I try to select single layer from map. But it throws error as getFeatureFromEvent is not a function when I pass a collection of layers to it.

Following is my detailed code.

var TapestryLayers = [];

fontColor = "#FF0000", fontSize = "13px", strokeColor = "#FF0000";
for(var i=0;i<data.tapestryShapes.length;i++){
 var geom = new penLayers.Geometry.fromWKT(data.tapestryShapes[i].the_geom).transform(geographicProj, sphericalMercatorProj);
 var fencefeature = new OpenLayers.Feature.Vector(geom, {}, {
                                            "strokeColor": strokeColor,
                                            "fillOpacity": 0.04,
                                            "strokeWidth": 1.5,
                                            "strokeOpacity": 0.3,
                                            "pointerEvents": "visiblePainted",
                                            'label': data.tapestryShapes[i].name,
                                            'fontColor': fontColor,
                                            //'fontSize': fontSize,
                                            'fontFamily': "arial, monospace",
                                            'fontWeight': "bolder",
                                        });

 fencefeature.attributes = {
                             name: 'tapestryDataLayer',
                             type: 'tapestry'
                            };
 var tapestryDataLayer = new OpenLayers.Layer.Vector(data.tapestryShapes[i].name,
                                                {'displayInLayerSwitcher':false}
                                                );
 map.addLayer(tapestryDataLayer);
 map.getLayersByName(data.tapestryShapes[i].name)[0].redraw();
 tapestryDataLayer.addFeatures([fencefeature]);
 TapestryLayers.push(map.getLayersByName(data.tapestryShapes[i].name));
  }
//select = new OpenLayers.Control.SelectFeature(tapestryDataLayer,{clickout: true, multiple:true}); //But only for single layer as expected!
 select = new OpenLayers.Control.SelectFeature(TapestryLayers,{clickout: true, multiple:true}); //Get error getFeatureFromEvent is not a function (but it still a vector layer!)
  map.addControl(select);
  select.activate();

  tapestryDataLayer.events.on({
           'featureselected': function(feature) {
                             alert("selected");
                                      },
            'featureunselected': function(feature) {
                              alert("unselected");
                                      }
                                  });

Any suggestions as why its giving that error. I have searched for same error and same functionality on stackexchange but that couldn't help.

Thanks

Best Answer

You can try below code. Its working for me.

//Global variables
var LayersForSelection = [];
var controls = {};

//select control (add it initially)
function init() {
    //......Here add map & other codes.....

    new OpenLayers.Control.SelectFeature(LayersForSelection, {
        multiple : false,
        hover : false,
        onSelect : onFeatureSelect,
        onUnselect : onFeatureUnselect
    });
    map.addControl(controls["select"]);
    controls["select"].activate();

    //...... some other codes.....
}

function onFeatureUnselect(feature) {
    alert("unselected");
}

function onFeatureSelect(feature) {
    alert("Selected");
    alert("Selected Layer Name:"+feature.layer.name);
}

function addLayer1() {
    //Dynamically add layers to selectControl
    var Layer = new OpenLayers.Layer.Vector("New Layer 1");
    map.addLayer(Layer);
    LayersForSelection.push(Layer);
    controls["select"].deactivate();
    controls["select"].activate();
}

function addLayer2() {
    //Dynamically add layers to selectControl
    var Layer = new OpenLayers.Layer.Vector("New Layer 2");
    map.addLayer(Layer);
    LayersForSelection.push(Layer);
    controls["select"].deactivate();
    controls["select"].activate();
}

//Call the functions
addLayer1();
addLayer2();

//So the layers "New Layer 1" and "New Layer 2" are now selectable...
Related Question