How to import a WFS layer using leaflet.ajax and qgis server?

Question

I try to create a story map using the application developed by Jakob Zhao https://github.com/jakobzhao/storymap. For import WFS layer, with leaflet.ajax, he write :

var layers = {
'layer 2': [ L.geoJson.ajax('http://mapious.ceoas.oregonstate.edu/geoserver/mapious/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ore_counties&outputFormat=application%2Fjson', {color: 'orange', weight: 5})]
};

And me, with qgis server and not geoserver, I tried :

var layers = {
'layer 4': [ L.geoJson.ajax('http://localhost/cgi-bin/project/qgis_mapserv.fcgi?service=WFS&version=1.0.0&request=GetFeature&typeName=pop2010&srsname=EPSG:3857&outputFormat=GeoJSON', {color: 'orange'})],
    };

But it's not working.

Answer 1

Let's break things down a bit.

// Jakob's WFS request to geoserver
var layers = {
'layer 2': [ L.geoJson.ajax(
  'http://mapious.ceoas.oregonstate.edu' + 
  '/geoserver/mapious/ows' + 
  '?service=WFS' + 
  '&version=1.0.0' + 
  '&request=GetFeature' + 
  '&typeName=ore_counties' + 
  '&outputFormat=application%2Fjson',
 {color: 'orange', weight: 5})]
};

// Zacharie's WFS request to Qgis
var layers = {
'layer 4': [ L.geoJson.ajax(
  'http://localhost' + 
  '/cgi-bin/project/qgis_mapserv.fcgi' + 
  '?service=WFS' + 
  '&version=1.0.0' + 
  '&request=GetFeature' + 
  '&typeName=pop2010' + 
  '&srsname=EPSG:3857' + 
  '&outputFormat=GeoJSON',
 {color: 'orange'})],
};

There are a couple notable differences here:

• outputFormat. I don't quite remember if the WFS standard mandates that outputFormat must be a string denoting a MIME type (e.g. the URL-encoded string application/JSON) or not (e.g. the string GeoJSON). Double-check if Qgis server allows for that.

• The Spatial Reference System (SRS). The GeoJSON specification mandates that all GeoJSON documents must be in EPSG:4326. Leaflet follows this: if you have your GeoJSON in EPSG:3857, it will not display properly even when the map in your screen is EPSG:3857. Any GeoJSON passed to a L.geoJson() constructor must be in EPSG:4326.

I guess that you problem lies within either/both of those differences.

Answer 2

Despite your help, it's not working with qgis server... So I've install geoserver, and publish in local my WFS. It's working on Layer Preview in Geoserver, but not in my application...

// Jakob's WFS request to geoserver
var layers = {
'layer 2': [ L.geoJson.ajax(
  'http://mapious.ceoas.oregonstate.edu' + 
  '/geoserver/mapious/ows' + 
  '?service=WFS' + 
  '&version=1.0.0' + 
  '&request=GetFeature' + 
  '&typeName=ore_counties' + 
  '&outputFormat=application%2Fjson',
 {color: 'orange', weight: 5})]
};

// Zacharie's WFS request to geoserver
var layers = {
'layer 4': [ L.geoJson.ajax(
  'http://localhost:8080' + 
  '/geoserver/cite/ows' + 
  '?service=WFS' + 
  '&version=1.0.0' + 
  '&request=GetFeature' + 
  '&typeName=cite:pop4326' + 
  '&outputFormat=application%2Fjson',
 {color: 'orange'})],
};