Adding WFS layer from GeoServer and OpenStreetMap using OpenLayers 2?

Question

In a OpenLayers HTML file, I'd like to request the default tasmania data of my GeoServer (runs on localhost) and add them as a WFS Layer. The second layer should be an OSM layer. This is my code up to now:

        function init() {

            var map;
            map = new OpenLayers.Map('map');
            map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
            map.addLayer(new OpenLayers.Layer.OSM());

            var roads = new OpenLayers.Layer.Vector("WFS", {
                strategies: [new OpenLayers.Strategy.BBOX()],
                protocol: new OpenLayers.Protocol.WFS({
                    url:  "http://localhost:8080/geoserver/ows?",
                    featurePrefix: "topp", //<-- GeoServer workspace name
                    featureType: "tasmania_roads",//<-- layer name
                    featureNS: "http://www.openplans.org/topp", //<-- Edit Workspace Namespace URI
                    srsName: "EPSG:4326",
                    geometryName: "the_geom" //<-- geometry field
                })
            });
            map.addLayer(roads);

            map.zoomToExtent(roads.getDataExtent());
        }

Concerning the OSM Layer, there are no problems in the result. But the data of the WFS layer is not being displayed. When I zoom to the WFS data extent (last code row) the map centers at (0,0) in the point of origin.

Could it have to do with projection problems?

Answer 1

OSM tiles are in EPSG:3857 (also known as EPSG:900913) projection while your Geoserver is sending vectors in EPSG:4326. You must make them match. See this OpenLayers example http://openlayers.org/dev/examples/wfs-reprojection.js and why not this also http://openlayers.org/dev/examples/geojson-reprojected.html