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:

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

What is the problem here?

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