WFS point layer does not appear on OpenLayers map when called from GeoServer

Question

I'm writing because I attempted almost all the tries suggested in any other Q/A on this thread. I have this vector points layer on my local GeoServer and i'm trying to plot my points on a OSM base map through OpenLayers. My script (very basic) is the following:

<!DOCTYPE html>
<html>
  <head>
    <title>Wfs Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v5.1.3/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
            source: new ol.source.OSM()
            })
        ],
        target: 'map',
        view: new ol.View({
            center: ol.proj.transform([15.66, 42.97], 'EPSG:4326', 'EPSG:3857'),
            zoom: 7
        })
    });
    var vector =  new ol.layer.Vector({
        source: new ol.source.Vector({
            url:'http://localhost:8080/geoserver/wfs?service=wfs&version=2.0.0&request=GetFeature&typeNames=barriere:barriere2&outputFormat=json',
            format: new ol.format.GeoJSON({dataProjection: 'EPSG:3857'})
        })
    }); 
    map.addLayer(vector);
    </script>
  </body>
</html>

Everything that I obtain is the OSM layer and no points. The original sdr of the layer is 4326.

The strange thing (unexplicble to me) is that if I place the same .json file in my github sandbox and I use:

url: 'https://raw.githubusercontent.com/annalisapg/sandbox/master/barriere2_wfs.json',

the points appear. So, in your opinion, what's wrong between the script, the layer and my geoserver installation?

do you mean a log? where can I see it? (I'm quite new to geoserver, currently working on a Windows workstation). Otherwise the output of this .html file is the only OSM layer centered on Italy. No points. — Annalisa Minelli, Dec 05 '19 at 15:04
I mean the "features" returned by geoserver to the browser. It should contain some JSON but may contain an error message. — Ian Turton, Dec 05 '19 at 15:05
I'm not sure I understand well but if I copy/paste the get capability call to geserver I obtain the features text file as expected, with no errors, which is the same I uploaded in github (I saved the output as .json file) that you can see it here: https://raw.githubusercontent.com/annalisapg/sandbox/master/barriere2_wfs.json - and if I use this url (gthub instead geoserver) I can effectively see points on my map — Annalisa Minelli, Dec 05 '19 at 15:10
I made another test. If I change url asking for a demo layer of geoserver instead of my layer: 'https://demo.geo-solutions.it/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=tiger:poi2&outputFormat=json&srsName=EPSG:4326' it works. So I suppose my script is ok. Maybe there's some geoserver configuration I'm missing. — Annalisa Minelli, Dec 09 '19 at 16:23

score 3 · Answer 1 · answered Dec 04 '19 at 14:08

3

You said that the source CRS is 4326 but the code contains {dataProjection: 'EPSG:3857'}. Because of this, OL will assume the coordinates are indeed in 3857 and will (should) plot them within +- 180 meters of 0;0.

You would need to specify the true data CRS, as well as the view CRS:

var vector =  new ol.layer.Vector({
    source: new ol.source.Vector({
        url:'http://localhost:8080/geoserver/wfs?service=wfs&version=2.0.0&request=GetFeature&typeNames=barriere:barriere2&outputFormat=json',
        format: new ol.format.GeoJSON(
          {dataProjection: 'EPSG:4326',
           featureProjection: 'EPSG:3857'})
    })
});

answered Dec 04 '19 at 14:08

JGH

41,794
3
43
89

thanks @JGH - I tried this and unfortunately does not work. I have the same output: the only OSM basemap, no points. – Annalisa Minelli Dec 05 '19 at 15:06
view that the same .json file if extract from geoserver does not appear and if taken from github appears regularly I'm wondering if there's something wrong between geoserver and openlayers. This is the only doubt I have. And still I cannot understand which could be the problem. – Annalisa Minelli Dec 06 '19 at 10:34
1

Do you get any errors in the debugger console? Did you check network requests in the debugger? What is the result of WFS request? – TomazicM Dec 07 '19 at 15:48
I activated debugger and verbose mode but the log seems to return no errors. See the screenshot here: https://github.com/annalisapg/sandbox/blob/master/console.png – Annalisa Minelli Dec 09 '19 at 09:42

score 0 · Accepted Answer · answered Dec 11 '19 at 11:14

0

I solved. CORS filters were not enabled in jetty. Finally I followed the procedure explained here:

Enabling CORS in GeoServer (jetty)?

and I had my points safe and sound on the basemap.

answered Dec 11 '19 at 11:14

Annalisa Minelli

517
2
5
15

WFS point layer does not appear on OpenLayers map when called from GeoServer

2 Answers2