[GIS] GeoExt 2 + OpenLayers 2.13.1 – Problem with ‘OpenLayers.Control.SelectFeature’

geoext-2openlayers-2

I have recently started to work with GeoExt and OpenLayers to generate a web GIS application. During the development of this application I have found a problem using the object OpenLayers.Control.SelectFeature.

I have various objects OpenLayers.Layer.Vector that shows on the map as geometric points. Each point must show a popup with his features attributes.

To generates this popup I have use this function: 

        function createPopup(feature) {
        var popupOpt = Ext.apply({
            title: feature.attributes.title,
            location: feature,
            html: feature.attributes.html,
            collapsible: false,
            unpinnable: false,
            maximizable: true,
            icon: feature.attributes.icon,
            border: false,
            style: {
                borderColor: 'white',
                borderStyle: 'solid'
            }
        });
        popup = Ext.create('GeoExt.window.Popup', popupOpt);
        popup.on({
            close: function() {
                selectCtrl.unselectAll();
            }
        });
        popup.show();
    }

Now, when I create a control object 'OpenLayers.Control.SelectFeature' with an array of vector object this don't work, while if I create a control object with only one vector object, this works correctly.

This works correctly:

var vectorStyle = new OpenLayers.StyleMap({'pointRadius': 4, 'externalGraphic': 'resources/images/logo.png', 'graphicWidth': 30, 'graphicHeight': 25, 'fillOpacity': 1.0, 'cursor': 'pointer'});
var vector = new OpenLayers.Layer.Vector("StationA",{styleMap: vectorStyle, visibility: false});

var selectCtrl = new OpenLayers.Control.SelectFeature(vector,{onSelect:createPopup});

mapPanel.map.addControls(selectCtrl);

selectCtrl.activate();

If I use an array : …SelectFeature([vector1,vector2,vector3],… don't work:

var vectorStyle = ....
var vector1 = ...
var vector2 = ...
var vector3 = ...

var selectCtrl = new OpenLayers.Control.SelectFeature([vector1,vector2,vector3],{onSelect:createPopup});

mapPanel.map.addControls(selectCtrl);

selectCtrl.activate();

Someone can help me?

Best Answer

I just tested whether the original Popup example is able to work with a SelectFeature control working on two vector Layers. I took the code behind http://geoext.github.io/geoext2/examples/popup/popup.html and simply duplicated everything with regard to vectorLayer-variable and it all worked.

What error are you seeing exactly?

A wild guess: are all the vectorLayers that you want to select from also added to the map?

FYI here is the diff for the above example

diff --git a/examples/popup/popup.js b/examples/popup/popup.js
index cc290d2..71131bf 100644
--- a/examples/popup/popup.js
+++ b/examples/popup/popup.js
@@ -29,9 +29,15 @@ Ext.onReady(function() {
             new OpenLayers.Geometry.Point(-45, 5)
         )
     );
+    var vectorLayer2 = new OpenLayers.Layer.Vector("vector2");
+    vectorLayer2.addFeatures(
+        new OpenLayers.Feature.Vector(
+            new OpenLayers.Geometry.Point(45, 5)
+        )
+    );

     // create select feature control
-    var selectCtrl = new OpenLayers.Control.SelectFeature(vectorLayer);
+    var selectCtrl = new OpenLayers.Control.SelectFeature([vectorLayer, vectorLayer2]);

     // define "createPopup" function
     var bogusMarkup = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. " +
@@ -65,6 +71,10 @@ Ext.onReady(function() {
                                            this.feature) > -1) {
                     selectCtrl.unselect(this.feature);
                 }
+                if(OpenLayers.Util.indexOf(vectorLayer2.selectedFeatures,
+                                           this.feature) > -1) {
+                     selectCtrl.unselect(this.feature);
+                }
             }
         });
         popup.show();
@@ -76,6 +86,12 @@ Ext.onReady(function() {
             createPopup(e.feature);
         }
     });
+    // create popup on "featureselected"
+    vectorLayer2.events.on({
+        featureselected: function(e) {
+            createPopup(e.feature);
+        }
+    });

     // create Ext window including a map panel
     var mapwin = Ext.create('Ext.Window', {
@@ -105,7 +121,8 @@ Ext.onReady(function() {
                 new OpenLayers.Layer.Vector('vector',{
                     isBaseLayer: true
                 }),
-                vectorLayer
+                vectorLayer,
+                vectorLayer2
             ]
         }
     });
Related Question