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

• WKT: What is the problem and what is the question ?
• Luffydude: @wkt It does not work and how to make it work?
• Hicham Zouarhi: where are your (html/js/css) fils stored ?
• Hicham Zouarhi: @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: 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

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!

enter image description here

• Hicham Zouarhi: Great :D, could you please share the code added on your server ?
• Luffydude: @HichamZouarhi added the image!