[GIS] WFS layer not visible in openlayers

geoserveropenlayers-2wfs

I'm trying to add a WFS layer in openlayers and it's not working. Can anyone point me in the right direction.

The data is stored in postgis and I've added it to geoserver. I am aware that I'm using port 8081 on geoserver but I can't forsee this being an issue. It would be useful to know where I'm going wrong.

Here is the code:

<!DOCTYPE html>
<script type="text/javascript" src="http://maps.nationalparks.gov.uk/resources/openlayers/OpenLayers.js"></script> 
<script type="text/javascript" src="http://maps.nationalparks.gov.uk/resources/js/geotools2.js"></script>
<script type="text/javascript"> 

var map;

function init() {
map = new OpenLayers.Map('map_element', {});


var wms = new OpenLayers.Layer.WMS(
'OpenLayers WMS',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers: 'basic'},
{}
);


var world_cities = new OpenLayers.Layer.Vector("world_cities", {


                minScale: 15000000,
                strategies: [new OpenLayers.Strategy.BBOX()],
                protocol: new OpenLayers.Protocol.WFS({
                    url: "http://localhost:8081/geoserver/web",
                    featureType: "world_cities",
                    featureNS: "http://www.opengeospatial.net/cite"
                }),
                renderers: ['Canvas','SVG']
                })

map.addLayer(world_cities);

if(!map.getCenter()){
map.zoomToMaxExtent();
}
}



</script>
</head>

<body onload='init();'>
<div id='map_element' style='width: 500px; height: 500px; border-style:solid; border-width:5px;'>
</div>
</body>
</html>

Best Answer

Do you run your application on same host and port with GeoServer (localhost:8081)? If not, same origin policy disallows web page to access WFS service. Install proxy and point OpenLayers.ProxyHost to it. For example: http://trac.osgeo.org/openlayers/wiki/FrequentlyAskedQuestions#WhydoIneedaProxyHost

Related Question