I'm trying to add a WFS layer and it's not working.

Here is full code:

<meta charset='utf-8'/>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<!-- GC -->
<style type="text/css">
        .legend {
            padding-left: 18px;
        .x-tree-node-el {
            border-bottom: 1px solid #ddd;
            padding-bottom: 3px;
        .x-tree-ec-icon {
            width: 3px;
        .gx-tree-layer-icon {
            display: none;
<script type="text/javascript" src="ext-all.js"></script>
<link rel="stylesheet" href="OpenLayers-2.12/theme/default/google.css" type="text/css"> </link>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxx&sensor=false"></script>
<script src="OpenLayers-2.12/OpenLayers.js"></script>
<link rel="stylesheet" href="style/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="GeoExt/script/GeoExt.js"></script>
<script type="text/javascript">
 Ext.onReady(function() {
  map = new OpenLayers.Map({
 div: "map",
 maxExtent: new OpenLayers.Bounds(
 -20037508.34, -20037508.34, 20037508.34, 20037508.34

 OpenLayers.ProxyHost= "proxy.cgi?url=";

 var geographic = new OpenLayers.Projection("EPSG:4326");
            var mercator = new OpenLayers.Projection("EPSG:900913");
            var croatia = new OpenLayers.LonLat(16.083984375, 45.72152152227954).transform(
                geographic, mercator
            var options = {
                units: "m",
                maxResolution: 'auto',
                maxExtent: croatia,

var BingapiKey = "xxxxxx";
var streets = new OpenLayers.Layer.Google(
 "Google Streets"
var physical = new OpenLayers.Layer.Google(
 "Google Physical",
 {type: google.maps.MapTypeId.TERRAIN}
var ghybrid = new OpenLayers.Layer.Google(
 "Google Hybrid",
 {type: google.maps.MapTypeId.HYBRID}
var satellite = new OpenLayers.Layer.Google(
 "Google Satellite",
 {type: google.maps.MapTypeId.SATELLITE}
// Bing's Road imagerySet
var road = new OpenLayers.Layer.Bing({
    key: BingapiKey,
    type: "Road"
// Bing's Aerial imagerySet
var aerial = new OpenLayers.Layer.Bing({
    key: BingapiKey,
    type: "Aerial"
// Bing's AerialWithLabels imagerySet
var bhybrid = new OpenLayers.Layer.Bing({
    key: BingapiKey,
    type: "AerialWithLabels",
    name: "Bing Aerial With Labels"
var osm = new OpenLayers.Layer.OSM();
var highlight = new OpenLayers.Layer.Vector("Highlighted Features", {
            displayInLayerSwitcher: false, 
            isBaseLayer: false 
//wfs layer
var wfsLayer = new OpenLayers.Layer.Vector("cjevovodi", { 
                                            strategies: [new OpenLayers.Strategy.BBOX()], 
                                            reportError: true, 
                                            visibility: true, 
                                            protocol: new OpenLayers.Protocol.WFS({ 
                                            url: "http://localhost:8080/geoserver/wfs", 
                                            featureType: "vgv2:cjevovodi", 
                                            featurePrefix: "vgv2", 
                                            featureNS: "http://localhost:8080/geoserver/vgv2", 
                                            geometryName: "simple_geom", 
                                            srsName: "EPSG:4326", 
                                            isBaseLayer: false 

map.addLayers([streets, physical, ghybrid, satellite, road, aerial, bhybrid, osm, wfsLayer]);
var LayerSwitcher = new OpenLayers.Control.LayerSwitcher({});
map.addControl (LayerSwitcher);
new OpenLayers.Control.Navigation();
new OpenLayers.Control.PanZoomBar();
var scaleline = new OpenLayers.Control.ScaleLine();
map.addControl(new OpenLayers.Control.MousePosition());
new OpenLayers.Control.KeyboardDefaults();
map.setCenter(croatia, 13);

        var viewport = Ext.create('Ext.Viewport', {
            id: 'border-example',
            layout: 'border',
            items: [
            // create instance immediately
            Ext.create('Ext.Component', {
                region: 'north',
                height: 22, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html:'<h1 align="center"> <p>WEBGIS VELIKA GORICA - dobrodošli na GIS preglednik Velike Gorice</p> </h1> '
            }), {

                region: 'south',
                contentEl: 'south',
                split: true,
                height: 50,
                minSize: 50,
                maxSize: 100,
                collapsible: true,
                collapsed: true,
                title: 'Dodatne info',
                margins: '0 0 0 0'
            }, {
                stateId: 'navigation-panel',
                id: 'east-panel',
                region: 'east',
                title: 'Prikaz tablica',
                dockedItems: [{
                    dock: 'top',
                    xtype: 'toolbar',
                    items: [ '->', {
                       xtype: 'button',
                       text: 'test',
                       tooltip: 'Test Button'
                animCollapse: true,
                collapsible: true,
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                margins: '0 5 0 0',
                activeTab: 0,
                tabPosition: 'bottom',
                items: [{
                    html: '<p>Popis tablica</p>',
                    title: 'Tablice',
                    autoScroll: true
                }, Ext.create('Ext.grid.PropertyGrid', {
                        title: 'Svojstva tablice',
                        closable: false,
                        source: {
                            "(name)": "Properties Grid",
                            "grouping": false,
                            "autoFitColumns": true,
                            "productionQuality": false,
                            "created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
                            "tested": false,
                            "version": 0.01,
                            "borderWidth": 1
            }, {
                region: 'west',
                stateId: 'navigation-panel',
                id: 'west-panel', // see Ext.getCmp() below
                title: 'Izbornik',
                split: true,
                width: 200,
                minWidth: 175,
                maxWidth: 400,
                collapsible: true,
                animCollapse: true,
                margins: '0 0 0 5',
                layout: 'accordion',
                items: [{
                    contentEl: 'west',
                    title: 'Layeri',
                    iconCls: 'nav'                 }]
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
            Ext.create('Ext.tab.Panel', {
                region: 'center',
                deferredRender: false,
                activeTab: 0,  
                items: [{
                    contentEl: 'center1',
                    title: 'Karta Velike Gorice',
                    closable: false,
                    autoScroll: true,
                    border: 'false'

        Ext.get("hideit").on('click', function(){
            var w = Ext.getCmp('west-panel', 'east-panel');
            w.collapsed ? w.expand() : w.collapse(),
            e.collapsed ? e.expand() : e.collapse();
<body onload="initialize()">
    <!-- use class="x-hide-display" to prevent a brief flicker of the content -->
    <div id="west" class="x-hide-display">
    <div id="east" class="x-hide-display"> </div>
<div id="center1" " class="x-hide-display">
        <a id="hideit" href="#">Sakrij / prikazi izbornik</a>
            Poseban tekst ovdje...
<div style="color:#0000FF">
  <div align="center" id='map' style='width: 1550px; height:800px;'>
<div id="south" class="x-hide-display">

WMS layer in this map works perfect, but WFS layer is problem. I put the HTML to GeoServer folder at: C:\Program Files\GeoServer 2.2.5\data_dir\www\complex

and open: localhost:8080/GeoServer%202.2.5/data_dir/www/complex/complex.html, panel and map works, but WFS layer not. Why? Where is the problem?

vgv2 workspace layer "cjevovodi" enter image description here enter image description here

I tried to change projection to epsg:900913, nothing.

  • IMHO, this is far too much code. You will have better chances of getting good answers by isolating the problem to the point where you can illustrate it with less than one page of code. As it stands, you're just asking us to debug this mess, and that's not an acceptable kind of question anywhere on SE. – whuber Jun 14 '13 at 12:50

Firstly try putting you code (JS/HTML) C:\Program Files\GeoServer 2.2.5\webapps\complex folder, and try to access it as http://localhost:8080/complex/complex.html See if you get any error messages in Firebug.

Now coming to your code. Firstly I do not see the projection being set to webmercator. You need to do that.

And finally, I would initialize the WFS service like this:

//wfs layer
var wfsLayer = new OpenLayers.Layer.Vector("cjevovodi", { 
                        strategies: [new OpenLayers.Strategy.BBOX()], 
                        protocol: new OpenLayers.Protocol.WFS({ 
                            url: "http://localhost:8080/geoserver/wfs", 
                            featureType: "cjevovodi", 
                            featurePrefix: "vgv2", 
                            srsName: "EPSG:4326", 
                        isBaseLayer: false 

Further more, there are many questions already on the site about wfs issues. have you gone through all of them?

  • See this answer for example: gis.stackexchange.com/a/57655/442 – Devdatta Tengshe Jun 12 '13 at 9:18
  • Tensgshe Thanks for answer but it´s not work! My layers "cjevovodi" use epsg: 31275, is that problem? Are you sure for C:\Program Files\GeoServer 2.2.5\webapps\complex location? If I try to acess it, I get http 404 error. All I want is shown layer as vector and configure popup window to show attributes. What is better to use, wms or wfs? If I use wfs, I could only view table, but not edit it? Correct? Openlayers load the layer and it shown in layer switcher, but its not on the map. Somewhere is problem, maybe in "proxy.cgi?url="? If I switch that layer to wms it works. – brunci Jun 13 '13 at 9:16
  • If your earlier location was working, then you can continue using it. EPSG 31275 will be a problem, since OpenLayers cannot natively project from it to EPSG:3857. You will need Proj4js to project to use this projection. And since you are on the same port as Geoserver, you will not require a proxy. – Devdatta Tengshe Jun 13 '13 at 10:18

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