[GIS] Getting WFS data from Geoserver

ajaxgeoserverleaflet

I found an upload example to load WFS data from geoserver into a GeoJson layer in leaflet. I I adapted it to my case. I have read similar topics from this site and this other site, but I can not understand why this code does not work for me.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>Geoserver</title>
   <style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0;}
      #map{ height: 85% }

   </style>
   <!--Lib-->
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css"/>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
   <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

   <div id="map"></div>
<br />
<b>Datasource of the WFS-Layer: <a href="http://opengeo.org/" target="_blank">http://opengeo.org</a> </b>

   </head>


 <body>
 <script >
  var m= L.map('map').setView([42.2, -71], 13);

var mapQuestAttr = 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; ';
var osmDataAttr = 'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
var mopt = {
    url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpeg',
    options: {attribution:mapQuestAttr + osmDataAttr, subdomains:'1234'}
  };
var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:osmDataAttr});
var mq=L.tileLayer(mopt.url,mopt.options);

osm.addTo(m);


var rootUrl = 'http://<my geoserver url>/geoserver/ows';

var defaultParameters = {
    service: 'WFS',
    version: '1.0.0',
    request: 'GetFeature',
    typeName: 'topp:tasmania_state_boundaries',
    maxFeatures: 200,
    outputFormat: 'text/javascript',
    format_options: 'callback: getJson',
    srsName:'EPSG:4326'

};

var parameters = L.Util.extend(defaultParameters);
//console.log(rootUrl + L.Util.getParamString(parameters));
$.ajax({
    jsonp : false,
    url: rootUrl + L.Util.getParamString(parameters),
    dataType: 'jsonp',
    jsonpCallback: 'getJson',
    success: handleJson

});


var group = new L.featureGroup().addTo(m);
var geojsonlayer;
function handleJson(data) {
    geojsonlayer=L.geoJson(data, {
        style: function(feature) {
                return {color: '#e75025'};
        }
    }).addTo(group);
    m.fitBounds(group.getBounds());
}

alert(geojsonlayer);




function getJson(data) {
console.log("callback function fired");
}  


</script>   

 </body>

</html>

I am including JSONP in GeoServer

<context-param>
    <param-name>ENABLE_JSONP</param-name>
    <param-value>true</param-value>
</context-param>

Best Answer

Here is the modified version of your code. The changes made are as follows:

  1. The output format is changed to outputFormat: application/json and note to get your response JSON as tasmania.responseJSON to modify based on color and display on the map.

  2. The root URL as: http://localhost:8080/geoserver/topp/ows.

You can find the code here: https://pastebin.com/gHxRzQiU

Screenshot of the result as follows:

enter image description here

Related Question