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
        })
    });

Answer 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!