Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
    
@geo - are you sure your WMS service is set up to correctly handle GetFeatureInfo requests? Look at the Net tab in FireBug when you click on a feature to see the results. –  geographika May 22 '11 at 10:38
add comment

1 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.

share|improve this answer
    
Hello and thanks for your reply. I made the changes as you suggested but i still get the same responses from firebug. As i am quite new to all these i want to say that when i use firebug i check the "Net" section so as to see the responses from the GIS website. Do i need to check something else in firebug in addition to "Net" section? Do you think there is another way of declaring the hover and select functions? Many Thanks –  Geo May 10 '11 at 13:10
    
@Geo - you need to activate the "Script" tab in FireBug. Once this is active the code should stop at the debugger statement and you can see the variables, step through the code line by line etc. to see exactly what is happening. –  geographika May 10 '11 at 15:24
    
Geographica please let me know if the information that i posted on the asnwer above is suffient for you to understand the problem that i have. –  Geo May 21 '11 at 15:56
1  
Geographica i found out that the problem was on this line: protocol: OpenLayers.Protocol.WFS.fromWMSLayer(national_parks). I had to change it to this one: protocol: OpenLayers.Protocol.WFS.fromWMSLayer(national_parks,{featureType:"National_Parks‌​",featurePrefix:"protec_are"}). I really dont understand though why this featureprefix and featuretype didnt let the program work properly. –  Geo May 24 '11 at 17:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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