OpenLayers 2 JavaScript – Click to Hover for WMSGetFeatureInfo

javascriptopenlayers-2popup

I am using the following code and wanted to know how I can change it from click event to hover or mousemove event. I know there is a eventListner but I am unable to locate the click event where I must change it to mousemove event.

info = new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://localhost:8080/geoserver/iPlant/wms', 
            title: 'Identify features by clicking',
            queryVisible: true,
            eventListeners: {
                getfeatureinfo: function(event) {
                    map.addPopup(new OpenLayers.Popup.FramedCloud(
                        "chicken", 
                        map.getLonLatFromPixel(event.xy),
                        null,
                        event.text,
                        null,
                        true
                    ));
                }
            }
        });
        map.addControl(info);
        info.activate();

Update 2.0

I made the changes and also added the PopUp, but only the click function is being recognized.

info = {
            click: new OpenLayers.Control.WMSGetFeatureInfo({
            url : 'http://niles.iplantcollaborative.org:8080/geoserver/wms',
            title : 'Identify features by clicking',
            queryVisible : true,
            eventListeners : {
            getfeatureinfo : function(event) {
            deletePopUp();
            popup = new OpenLayers.Popup.FramedCloud("popInfo", map.getLonLatFromPixel(event.xy), null, event.text, null, true);
            map.addPopup(popup);}}
            }),
            hover: new OpenLayers.Control.WMSGetFeatureInfo({
            url : 'http://niles.iplantcollaborative.org:8080/geoserver/wms',
            title : 'Identify features by clicking',
            queryVisible : true,
                    hover : true,
            eventListeners : {
            getfeatureinfo : function(event) {
            deletePopUp();
            popup = new OpenLayers.Popup.FramedCloud("popInfo", map.getLonLatFromPixel(event.xy), null, event.text, null, true);
            map.addPopup(popup);
            }}
            })
            };
            map.addControl(info.hover);
            info.hover.activate();

Best Answer

you can add your code in object and then call whatever you want as following code.. actually OpenLayers.Control.WMSGetFeatureInfo has hover properties which enough for to solve your problem.

       info = {
        click: new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://demo.opengeo.org/geoserver/wms', 
            title: 'Identify features by clicking',
            layers: [layer],
            queryVisible: true
        }),
        hover: new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://demo.opengeo.org/geoserver/wms', 
            title: 'Identify features by clicking',
            layers: [layer],
            hover: true,                
            formatOptions: {
                typeName: 'water_bodies', 
                featureNS: 'http://www.openplans.org/topp'
            },
            queryVisible: true
        })
    };
     map.addControl(info.hover);
     info.hover.activate();

hover

{Boolean} Send GetFeatureInfo requests when mouse stops moving. Default is false.

i hope it helps you..

Related Question