1

I am trying to add two different selectFeature controls for two different layers using OpenLayers.

I would like to

  1. display a popup with information about the feature when hover over a feature in vectorlayer1

  2. display a dialog with facilities to do specific operations on feature when a feature is clicked in vectorlayer2

  3. display another dialog on right click over features in vectorlayer2

I have added my code below and the select feature seems to work only for one layer. It was found working when i tried the same select feature for both layers but it doesnt seem to work when I tried different select feature conrol for both layers.

Here is my code

        var vectorlayer1 = new OpenLayers.Layer.Vector("layer1 Overlay",{
            eventListeners:{
                'featureselected':function(evt){
                    var feature = evt.feature;
                    var popup = new OpenLayers.Popup.FramedCloud("popup",
                    OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                    null,
                    "<div style='font-size:.7em'>" + feature.attributes.no+"</div>",
                    null,
                    true
                );
                    feature.popup = popup;
                    map.addPopup(popup);
                },
                'featureunselected':function(evt){
                    var feature = evt.feature;
                    map.removePopup(feature.popup);
                    feature.popup.destroy();
                    feature.popup = null;
                }
            }
        });

        var vectorlayer2 = new OpenLayers.Layer.Vector("layer2 Overlay",{
            eventListeners:{
                'featureselected':function(evt){
                    var feature = evt.feature;
                    layer2_id = feature.attributes.layer2_id;

                    if(layer2_id!=''){           


                        var element = document.getElementById('layer2Info');         

                        var out = "";

                        out += '/*My html code with different controls for opereations on features goes here*/';
                        element.innerHTML = out;                        
                        $( "#layer2Info" ).dialog();

                    }

                },
                'featureunselected':function(evt){
                    $( "#dialog" ).dialog('destroy');
                    jQuery('#layer2Info').fadeOut("slow");
                    $( "#layer2Info").dialog('close');

                }
            }
        });


            var hoverSelector = new OpenLayers.Control.SelectFeature([vectorlayer1],{
                hover:true,
                autoActivate:true
            });

            var clickSelector = new OpenLayers.Control.SelectFeature([vectorlayer2],{
                click:true,
                autoActivate:true
            });                                                      


            map.addControl(hoverSelector);
            map.addControl(clickSelector);

Only clickSelector for vectorlayer2 is working now. I havnt written code for right click yet. But please tell me how right click is handled in openLayers. Awaiting you reply soon. Please Please Please help!

  • I know this is an old question, but if you're still around: Why are you adding the popup to the map instead of the feature? (i.e. use feature.createPopup()) – Izzy Nov 21 '14 at 11:50
  • @Izzy Clearly, I am trying to add the popup to feature. I dont understand what makes u think that i am adding the popup to the map. I have added the controls hover and click to the map but what I am actually trying to do is to display the feature popup on map. – eccentricCoder May 9 '15 at 7:11

Your Answer

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

Browse other questions tagged or ask your own question.