1

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>
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.