[GIS] Loading WFS from Geoserver to Leaflet

Question

I use GeoServer 2.7.0 and Leaflet-0.7.7 and the jquery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>`

for showing a WFS in my Geoserver. How do I get it from Postgis? I don't know if I need something else to add.

The WMS works very well but the WFS doesn't.

var map = L.map('map', {
    center: [33.578659, -7.615443],
    zoom: 13,
    layers: [googleStreets]
});

var geojsonLayer = new L.GeoJSON();

function handleJson(data) {
    console.log(data)
    geojsonLayer.addData(data);
}

var geoJsonUrl = "http://localhost:8080/geoserver/Gestion-proprete/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Gestion-proprete:borne&maxFeatures=50&outputFormat=text/javascript&format_options=callback:getJson"
$.ajax({
    url: geoJsonUrl,
    dataType: 'json',
    jsonpCallback: 'getJson',
    success: handleJson
});

map.addLayer(geojsonLayer);

This is what I've got, but it is not showing at the map:

Answer 1

I think the problem here is that you are asking for an output format that isn't supported by the version of the WFS you are referencing (version=1.0.0&). By default you have only GML2.

You should switch to WFS version 1.1.10 or version 2.0.0

For example in a GeoServer service I just checked the WFS version 1.0.0 GetCapabilities response tells me it only supports:

<GetFeature>
  <ResultFormat>
    <GML2/>
  </ResultFormat>
  <DCPType>
    <HTTP>
      <Get onlineResource="http://.../wfs?request=GetFeature"/>
    </HTTP>
  </DCPType>
  ...

But on the same service for a WFS version 1.1.0 GetCapabilities response it tells me it supports:

<ows:Operation name="GetFeature">
  <ows:DCP>
    <ows:HTTP>
      <ows:Get xlink:href="http://.../wfs"/>
      <ows:Post xlink:href="http://.../wfs"/>
    </ows:HTTP>
  </ows:DCP>
  <ows:Parameter name="resultType">
    <ows:Value>results</ows:Value>
    <ows:Value>hits</ows:Value>
  </ows:Parameter>
  <ows:Parameter name="outputFormat">
    <ows:Value>text/xml; subtype=gml/3.1.1</ows:Value>  
    <ows:Value>GML2</ows:Value>
    <ows:Value>KML</ows:Value>
    <ows:Value>SHAPE-ZIP</ows:Value>
    <ows:Value>application/gml+xml; version=3.2</ows:Value>    
    <ows:Value>application/json</ows:Value>
    <ows:Value>application/vnd.google-earth.kml xml</ows:Value>  
    <ows:Value>application/vnd.google-earth.kml+xml</ows:Value>
    <ows:Value>csv</ows:Value>
    <ows:Value>gml3</ows:Value>
    <ows:Value>gml32</ows:Value>
    <ows:Value>json</ows:Value>
    <ows:Value>text/xml; subtype=gml/2.1.2</ows:Value>  
    <ows:Value>text/xml; subtype=gml/3.2</ows:Value>
  </ows:Parameter>

You are also requesting an output format as outputFormat=text/javascript& but I wonder if actually you intended application/json. You will need to check your service to see which formats are available, and obviously you will only be able to request a format supported by the service.