OpenLayers – Displaying WFS Layer with OpenLayers

geoserveropenlayers-2wfs

I have some troubles displaying a WFS layer with OpenLayers and hope someone here can give me a hint. Before moving on, I precise that I have already checked other posts, like here and here but, for any reason, it hasn't solved my problem yet (and by the way, thank you to the contributors to those posts, they made me understand a little bit better already)… The WFS layer appears in the layer switcher, but not at all on the map.

So, here is the configuration of my data:

and here is my OpenLayers code:

var adresspt_wfs = new OpenLayers.Layer.Vector("Adress points WFS", {
  strategies: [new OpenLayers.Strategy.BBOX()],
    protocol: new OpenLayers.Protocol.WFS({
    url: "http://localhost:8080/geoserver/wfs",
    featurePrefix:"luma_project",
    featureType: "adresspt",
    featureNS: "http://localhost:8080/luma",
    srsName: "EPSG:4326",
    geometryName: "the_geom",
    version: "1.0.0"
  })
});
map.addLayer(adresspt_wfs);

Do you see anything missing here? As my data is stored in a (local) PostGIS database, should I refer to it as workspace:store:layer? or workspace:layer?

Also, I precise that I have no trouble to display this layer as WMS in OpenLayers and that I can even display it as WFS in Quantum GIS. The problem thus doesn't come from the data or the Geoserver, but really from my OpenLayers code.

Any help will be greatly appreciated!

EDIT:

Here is the full code:

var map;

function init() {
var bounds = new OpenLayers.Bounds(
    13, 55.67, 13.5, 55.8
  );

 var options = {
    projection: new OpenLayers.Projection("EPSG:4326"),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    maxExtent: bounds,
    units: 'degrees'
  };

  map = new OpenLayers.Map('map');

  var transportation = new OpenLayers.Layer.WMS(
    "Lund transportation network", "http://localhost:8080/geoserver/wms",
    { layers: 'lu_transportation',
      format: 'image/png',
      srs:'EPSG:4326',
      transparent:'true',
      zoomOffset: 11, 
   },
   {isBaseLayer: true, opacity: 0.4});

  var adresspt_wfs = new OpenLayers.Layer.Vector("Adress points WFS", {
    strategies: [new OpenLayers.Strategy.BBOX()],
    protocol: new OpenLayers.Protocol.WFS({
      url: "http://localhost:8080/geoserver/wfs",
      //featurePrefix:"luma_project",
      featureType: "luma_project:adresspt",
      featureNS: "http://localhost:8080/luma",
      srsName: "EPSG:4326",
      geometryName: "the_geom",
      version: "1.0.0"
    })
  });

    map.addLayer(transportation);
    map.addLayer(adresspt_wfs);

  map.addControl(new OpenLayers.Control.Navigation());
  map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addControl(new OpenLayers.Control.Scale($('scale')));
  map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));

  map.zoomToExtent(bounds);

}

And then the HTML code:

  <body onload="init()">
  <div id="wrapper">
    Coordinates of the mouse: <div id="location">...</div>
    <br>
    <div id="scale"></div>
  </div>

  <div id="map"></div>

  </body>

EDIT (2)

Just to try out, I have added another WFS layer, from a remote server, and still nothing displays… I took the exact code of this page, which is:

var test_wfs = new OpenLayers.Layer.Vector("WFS", {
  strategies: [new OpenLayers.Strategy.BBOX()],
  protocol: new OpenLayers.Protocol.WFS({
    url: "http://demo.opengeo.org/geoserver/wfs",
    featureType: "tasmania_roads",
    featureNS: "http://www.openplans.org/topp"
  })
});

I really don't understand… this layer displays perfectly on this page, but not on mine… with the same code…

Best Answer

All your code looks good - can you see if there are features being returned in Firebug?

If there are the next thing to check is if those points are in lat/lon or lon/lat order. If they are not in the order you are expecting then read http://geoserver.org/display/GEOS/Unambiguous+Communication+of+CRS on how to deal with this.

Related Question