0

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?

1

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
             ]
         }
     });
  • I had wrong in connecting the vector layers with the object 'GeoExt.panel.Map'. – Thomy Jan 22 '15 at 11:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.