Using WFS from Geoserver in OpenLayers

Question

There are quite a few questions regarding the subject but the fact that these have so many views makes me think it's a much more complex subject that requires more attention.

I've been through the answers, such as in here, here or here , however none of them really do the trick for me.

So I've based my code on this tutorial https://medium.com/@goldrydigital/wfs-t-with-openlayers-3-16-6fb6a820ac58 that has a working example and a github page. However when I've tried adapting my WFS to it, I ran into quite a few problems. For starters, the layer doesn't even show up.

I'm running the html from a server and the line in my WFS can be easily seen in QGIS, just a bit north along the Thames river in London. The javascript passes no errors and no warnings

I think the problematic bit is:

sourceVector = new ol.source.Vector({
loader: function(extent) {
    $.ajax('http://localhost:8080/geoserver/wfs?forcebasicauth=true&SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&TYPENAME=BFTchambers:bft&SRSNAME=EPSG:27700&username=user&password=password',{
        type: 'GET',
        data: {
            service: 'WFS',
            version: '2.0.0',
            request: 'GetFeature',
            typename: 'bft',
            //srsname: 'EPSG:27700',
            //cql_filter: "property='Value'",
            //cql_filter: "BBOX(geometry," + extent.join(',') + ")",
            //bbox: extent.join(',') + ',EPSG:27700'
            //extent:[524416,175664, 538096,184752],
            },
        }).done(function(response) {
            formatWFS = new ol.format.WFS(),
            sourceVector.addFeatures(formatWFS.readFeatures(response))
            });
    },
    strategy: ol.loadingstrategy.tile(new ol.tilegrid.XYZ({
        maxZoom: 19
        })),
});

I'm not completely sure if the syntax is right in this portion of the code, but it successfully returns a proper XML with the line I've created in Postgis (deleted some bits so that it appears below).

<wfs:FeatureCollection xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:wfs="http://www.opengis.net/wfs/2.0" xmlns:gml="http://www.opengis.net/gml/3.2" xmlns:BFTchambers="http://geoserver.org/bftchamber" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" numberMatched="1" numberReturned="1" timeStamp="2016-06-02T09:56:21.450Z" xsi:schemaLocation="http://www.opengis.net/gml/3.2 http://localhost:8080/geoserver/schemas/gml/3.2.1/gml.xsd http://geoserver.org/bftchamber http://localhost:8080/geoserver/wfs?service=WFS&version=2.0.0&request=DescribeFeatureType&typeName=BFTchambers%3Abft http://www.opengis.net/wfs/2.0 http://localhost:8080/geoserver/schemas/wfs/2.0/wfs.xsd">
gml:name>test</gml:name BFTchambers:id>1</BFTchambers:id> BFTchambers:geom> gml:LineString srsName="http://www.opengis.net/gml/srs/epsg.xml#27700" srsDimension="2"> gml:posList>528115 181037 533903 180877</gml:posList> /gml:LineString> /BFTchambers:geom> /BFTchambers:bft> /wfs:member> /wfs:FeatureCollection>

The bit that loads the map is the following:

var layerVector = new ol.layer.Vector({
    source: sourceVector
});
layerOSM = new ol.layer.Tile({
    source: new ol.source.OSM()
});
var map = new ol.Map({
    target: 'map',
    overlays: [overlayPopup],
    controls: [controlMousePos],
    layers: [layerVector, layerOSM],
    view: new ol.View({
        center: [-12000,6711790],
        zoom: 14
        })
    });

@Luffydude I had nearly the same problem before, have you tried putting all your project in the data_dir/www/ folder inside your geoserver folder ? I did it and it worked for me. and you can call your html page from localhost(or whatever your IP is):8080/geoserver/www/yourProject — Hicham Zouarhi, Jun 02 '16 at 15:50
@HichamZouarhi Geoserver is being run in a different machine so I don't even know how to access its folder. I actually tried replicating everything from the Openlayers Layer Preview in Geoserver in another html/css/js and the layer did not load. Thanks again for your help now and in previous questions! — Luffydude, Jun 02 '16 at 15:57
You are welcome :) I think it has to do with some cross origin policy, I couldn't understand it when I had this problem and tried to work my way around by working directly on geoserver's web folder. I'll stay in touch in case I find any solution — Hicham Zouarhi, Jun 02 '16 at 16:05
I got the CORS error before but I managed to go around it somehow, there's an extension for Chrome for that and also a plugin for Firefox. Thanks again :) — Luffydude, Jun 02 '16 at 16:10
@HichamZouarhi I finally fixed it, problem was on the server side and it not allowing json to be outputed onto apps. posted it as an answer below — Luffydude, Jun 03 '16 at 08:17

Luffydude · Accepted Answer · 2016-06-03T08:37:59.813

1

Turns out the answer was that Geoserver didn't allow for jsonp to be shown in web applications.

After I asked the web dev responsible for dealing with servers he was able to write a few lines of code to the server and now my layers suddenly all work in the web apps!

edited Jun 03 '16 at 08:37

answered Jun 03 '16 at 08:16

Luffydude

2,308
3
18
38

Great :D, could you please share the code added on your server ? – Hicham Zouarhi Jun 03 '16 at 08:21
@HichamZouarhi added the image! – Luffydude Jun 03 '16 at 08:38

Using WFS from Geoserver in OpenLayers

1 Answers1