WFS layer not printed in OpenLayers Map?

Question

This is the WFS service I'm using:

https://idena.navarra.es/ogc/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=IDENA:DOTACI_Sym_AlojTur&outputFormat=application/json&srs=EPSG:25830

I add it to my OpenLayers map as a Vector layer as following:

proj4.defs("EPSG:25830","+proj=utm +zone=30 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
register(proj4);
const proyeccion = getProjection('EPSG:25830');
var vectorSource = new VectorSource({
 format: new GeoJSON(),
 url: function(extent) {
 return 'https://idena.navarra.es/ogc/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=IDENA:DOTACI_Sym_AlojTur&outputFormat=application/json&srs=EPSG:25830';
 },
 strategy: bboxStrategy
});
var vector = new VectorLayer({
 source: vectorSource,
 projection: 'EPSG:25830',
 style: new Style({
 stroke: new Stroke({
 color: 'rgba(215, 29, 29, 1.0)',
 width: 4
 })
 })
});
var map = new Map({
 target: 'map',
 layers: [vector,layer], //layer is an WMS layer
 view: new View({
 projection: proyeccion,
 center: fromLonLat([-1.629950,42.63],proyeccion),
 zoom: 9
 })
});

When loading the map, the WFS request is done and the response contains the feature collection in GeoJSON format and with the correct EPSG:

Request and response

Although everything seems to work fine, the map does not show the wfs layer

What is the problem here?

• pavlos: You are using EPSG:25830 which is unknown to openlayers. Either you need to request the layer in EPSG:3857 or EPSG:4326 from your wfs server or you make ol3 aware about the EPSG:25830 projection. In my opinion 2nd option is the proper way to do it.
• Iñigo: But the Map View projection is declared as const proyeccion = getProjection('EPSG:25830');. Isn't that enough?
• pavlos: No this is not enough. You need to include proj4js library and declare your projection. I know it is a bit confusing. Check this --> freeopengis.blogspot.com/2017/04/…
• Iñigo: Question edited with proj4 added. Still not working @pavlos
• pavlos: Ok I added an answer cause I couldnt write all the stuff within comments

Answer 1

Change your style to a proper point style So change this

var vector = new VectorLayer({
 source: vectorSource,
 projection: 'EPSG:25830',
 style: new Style({
 stroke: new Stroke({
 color: 'rgba(215, 29, 29, 1.0)',
 width: 4
 })
 })
});

To this:

var vector = new ol.layer.Vector({
 source: vectorSource,
 projection: 'EPSG:25830',
 style: new ol.style.Style({
 image: new ol.style.Circle({
 radius: 7,
 fill: new ol.style.Fill({color: 'black'}),
 stroke: new ol.style.Stroke({
 color: [255,0,0], width: 2
 })
 })
 })
});

Or anyway , whatever you like for your style. If projection configuration is fine it should work.

Here is a fiddle, but for the shake of time, I am using the first option mentioned in my comments. So I ask your wfs server to do the reprojection, which is not the correct way but I do provide it so you can check your points.

If you are uncertain about the geometries you get back or if you get multi types of geometries on your response is better to use a custom style function as described here And one more fiddle to see it in action

• Iñigo: Bro that was insane
• pavlos: no probms amigo. Glad to help
• Iñigo: Sorry @pavlos ! One more thing. What if the WFS layer was this one: inspire.navarra.es/services/CP/… ? The problem would be also on the style? Please try it on fiddle, I can't make it work! Thanks, seriously! :D
• pavlos: Yes style must be defined according to the geometries you expect. You better use a custom style function so you can handle any type of geometries. Check the fiddle --> jsfiddle.net/um64bet7. And have a look for the explanation --> stackoverflow.com/questions/40796548/…