[GIS] ‘Select’ and ‘hover over’ features are not working although no error is displayed (openlayers)

geoservergetfeatureinfoopenlayers-2

On the following html code i get no errors when i check it on firebug.
When i select or hover over features i want to see them "highlighted".
When i move my cursor onto a feature i can see that something is loading but it is not highlighted.
At the same time firebug shows that "post wms" has worked fine and i can see that it retrieves the total size of the feature (Kbs).

I can not figure out what the problem is…
I am using Openlayers and Geoserver for displaying the shapefiles

Code:

<head>

    <style>

html, body 

    {
    height: 99%;
    width: 99%;
}

#map 
    {
    width: 80%;
    height: 80%;
    border: 1px solid black;
}

#wrapper 
    {
    width: 80%;
    background-color:#FFFFE0;
    border: thin solid #000000;
}

#coordinates {float: right;}

    </style>

    <title>Welcome to Choros</title>
    <link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />

    </style>
    <script src="http://openlayers.org/api/OpenLayers.js">
    </script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js">
    </script>
    <script type="text/javascript">

var map, select, hover, control;

function init() {

    var WGS84 = new OpenLayers.Projection("EPSG:4326");

    var WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");

    var os = new OpenLayers.Projection("EPSG:27700");

    //Initialize the map
    //Creates a new openlayers map in the <div> html element id map
    map = new OpenLayers.Map ("map", {
        controls:[
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.ScaleLine(),
        new OpenLayers.Control.Scale($('scale')),
        new OpenLayers.Control.Permalink(),
        new OpenLayers.Control.MousePosition({
            div:document.getElementById("coordinates")
        })
        ],
        projection: WGS84_google_mercator,
        displayProjection: WGS84
    } );

    // base map layers
    var openstreetmap = new OpenLayers.Layer.OSM();

    var national_parks = new OpenLayers.Layer.WMS(
    "National Parks", "http://localhost:8080/geoserver/wms",
    {
        srs: 'EPSG:4326',
        layers: 'National_Parks',
        transparent: 'true',
        format: 'image/gif',
        buffer:0
    },
    {
        'singleTile': true, 'ratio': 1, 'opacity': 0.75, 'isBaseLayer': false, 'wrapDateLine': false,
        'transitionEffect':'resize', displayInLayerSwitcher : true, 'alwaysInRange': true, 'displayOutsideMaxExtent':true
    }
    );

    map.addLayers([
    openstreetmap,  // Display the base maps
    national_parks // Display the wms layers
    ]);

    select = new OpenLayers.Layer.Vector("Selection", {styleMap:
        new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
    });
    hover = new OpenLayers.Layer.Vector("Hover");
    map.addLayers([hover, select]);

    var     control = new OpenLayers.Control.GetFeature({
        protocol: OpenLayers.Protocol.WFS.fromWMSLayer(national_parks),
        box: true,
        hover: true,
        multipleKey: "shiftKey",
        toggleKey: "ctrlKey"
    });
    control.events.register("featureselected", this, function(e) {
        select.addFeatures([e.feature]);
    });
    control.events.register("featureunselected", this, function(e) {
        select.removeFeatures([e.feature]);
    });
    control.events.register("hoverfeature", this, function(e) {
        hover.addFeatures([e.feature]);
    });
    control.events.register("outfeature", this, function(e) {
        hover.removeFeatures([e.feature]);
    });
    map.addControl(control);
    control.activate();

    // support GetFeatureInfo
    map.
    events.register('click', map, function (e) {

        document.getElementById('nodelist').innerHTML = "Loading... please wait...";
        var url =  map.layers[1].getFullRequestString(
        {
            REQUEST: "GetFeatureInfo",
            EXCEPTIONS: "application/vnd.ogc.se_xml",
            BBOX: map.getExtent().toBBOX(),
            X: e.xy.x,
            Y: e.xy.y,
            INFO_FORMAT: 'text/html',
            LAYERS: [map.layers[1].params.LAYERS],
            QUERY_LAYERS: [map.layers[1].params.LAYERS],
            FEATURE_COUNT: 50,
            WIDTH: map.size.w,
            HEIGHT: map.size.h
        },
        "http://localhost:8080/geoserver/wms"
        );
        OpenLayers.loadURL(url, '', this, setHTML, setHTML);
        OpenLayers.Event.stop(e);
    });
    // map extent
    var mapextent = new OpenLayers.Bounds(-16.08,49.06,6.76,58.74).transform(WGS84, map.getProjectionObject());
    map.zoomToExtent(mapextent);

} // End of the init function

// sets the HTML provided into the nodelist element
function setHTML(response) {
    document.getElementById('nodelist').innerHTML = response.responseText;
};

    </script>
</head>
<body onload="init()">
    <h1 id="title">Chώros</h1>
    <div id="map">
    </div>
    <div id="wrapper">
        <div id="coordinates">
            coordinates
        </div>
        <div id="scale">
        </div>
    </div>
    <div id="nodelist">
        Click on the map to get feature info
    </div>
</body>

Hello Geographica and sorry for the late reply.

When i step through the code line by line i can see that firebug skips the following 2 lines:
hover.addFeatures([e.feature]);
hover.removeFeatures([e.feature]);

As you mentioned before i think that e.feature is not valid.

Attached is the image that shows the response that i get from firebug. Can you actually figure out why the e.feature is not valid. I can not see any reason why it shouldnt be. firebug Response

Best Answer

Change the following line:

control.events.register("hoverfeature", this, function(e) {
    hover.addFeatures([e.feature]);
});

to:

control.events.register("hoverfeature", this, function(e) {
    debugger;
    hover.addFeatures([e.feature]);
});

This will cause FireBug to break at this line if the function is called, and you can check if e.feature is valid. Let us know the outcome.

Related Question