[GIS] How to add WFS layer from Geoserver to Openlayers2

geoserveropenlayers-2wfs

Ok, I know that this question has been asked here many times and I apologize for asking it again but I've looked all answers and I still can't fix my code to work.

I would really appreciate if someone could tell me where I'm going wrong.
I'm trying to add from GeoServer vector layer with this attributes:

  • layer name:marine,
  • workspace:marine,
  • workspace url: "http://www.geoserver.org/marine"
  • epsg of layer on geoserver: 3765, epsg of map used in openlayers: 900913

This is part of my code that could help you see where I'm wrong:

<script>        
        var geographic = new OpenLayers.Projection("EPSG:4326");
        var mercator = new OpenLayers.Projection("EPSG:900913");                        
        var world = new OpenLayers.Bounds(-180, -89, 180, 89).transform(
            geographic, mercator
        );
        var center = new OpenLayers.LonLat(16.00, 44.00).transform(
            geographic, mercator
        );            
        var map = new OpenLayers.Map("map-id", {
            projection: mercator,
            displayProjection: geographic,
            units: "m",
            numZoomLevels: 16,
            maxExtent: world});
        map.addControl(new OpenLayers.Control.Permalink());
        map.addControl(new OpenLayers.Control.MousePosition());

        var osm=new OpenLayers.Layer.OSM();
        map.addLayer(osm);          
        var bing = new OpenLayers.Layer.Bing({
            key: "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf",
            type: "Aerial",
        });
        map.addLayer(bing);

        var marine = new OpenLayers.Layer.Vector("marine", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.WFS({
                version: "1.1.0",
                url:"http://localhost:8080/geoserver/wfs",
                featureNS: "http://www.geoserver.org/marine",
                featureType: "marine",
                geometryName: "the_geom",
                srsName: "EPSG:900913"  

            })
        });
        mapp.addLayer(marine);

Somebody mentioned on one topic that if I put my HTML file to geoserver-->data_dir-->www, it could help but it didn't.

I spent more then half day trying to figure out where I wrong and I would really appreciate help. I just can't understand why is adding WFS layer such a big problem for everyone??

Best Answer

I would do the following changes, and then test in Firefox with Firebug:

  1. Use the full version of Openlayers. The OpenLayers that comes with geoserver, is a compact version, which does not have many classes including the OpenLayers.Protocol.WFS class
  2. I would change the Bounds to (-180, -85, 180, 85) as BradHards has suggested above.
  3. Change the wfs url from: http://localhost:8080/geoserver/wfs to http://~machinename~:8080/geoserver/wfs where ~machinename~ is the host name of your computer.
  4. Put this HTML file (along with any JavaScript files) in geoserverDir/webaps/root folder. Usually the root folder does not exist and you need to create it.
  5. Go to http://~machinename~:8080/index.html (or whatever is the name of your HTML file)

Please note, that this setup is only for testing purposes, and for development and deployment I would suggest having a full featured webserver like Apache or IIS or any other.

Related Question