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>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0;}
      #map{ height: 85% }

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


 <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);


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',


var parameters = L.Util.extend(defaultParameters);
//console.log(rootUrl + L.Util.getParamString(parameters));
    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'};


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




I am including JSONP in GeoServer

  • 1
    what does happen
    – Ian Turton
    Jan 16, 2018 at 9:38
  • Not shown on the map tasmania_state_boundaries. Jan 16, 2018 at 16:48

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

  • the link to your pastebin is unfortunately dead
    – Greg Holst
    Jun 17, 2020 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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