Json not loading from GeoServer into Leaflet?

Question

I'm creating an web map application using Geoserver and Leaflet. I'm trying to load a few Json feature through an WFS service.The problem is that nothing is being displayed on the final map, the Geoserver console emits the following meassage: [info.json] - about to encode JSON

What makes me to believe that there is nothing wrong with the service.

Here is the code.

var map = L.map('map').setView([39.752171, -104.998817], 17);

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'examples.map-20v6611k'
    }).addTo(map);

var geojsonLayer = new L.GeoJSON();

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

var geoJsonUrl = "http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=PastDenver:dataset1&maxFeatures=50&outputFormat=text/javascript&format_options=callback:getJson"

$.ajax({
url : geoJsonUrl,
dataType : 'json',
jsonpCallback: 'getJson',
success : handleJson
});

map.addLayer(geojsonLayer);

Most of this code I took from examples from here, I have no idea what may be happening.

Does the version of JQuery matters from this AJAX? I'm using this link https://code.jquery.com/jquery-2.1.3.js

what does the browser console show when you console.log the json response? — toms, Feb 03 '15 at 05:04
http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=1.0.0&re…xFeatures=300&outputFormat=text/javascript&format_options=callback:getJson. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. — Ricardo Oliveira, Feb 03 '15 at 15:01
Chris' answer worked just fine, now I would like to understand the relationship between that mistake and this error. — Ricardo Oliveira, Feb 03 '15 at 15:03

score 3 · Accepted Answer · answered Feb 03 '15 at 05:15

3

Try to change the dataType in your ajax request to 'jsonp'

The documentation indicates

callback—Applies only to the JSONP output format.

answered Feb 03 '15 at 05:15

Chris Hogan

76
3

I swear that I tried this on the first time. Thanks for hint, not it is displaying! – Ricardo Oliveira Feb 03 '15 at 15:00

score 1 · Answer 2 · edited Apr 13 '17 at 12:33

1

have you looked at this answer? GeoServer 2.3 how to enable jsonp. Depending on your version of GeoServer you may have to edit web.xml

edited Apr 13 '17 at 12:33

Community

1

answered Feb 05 '15 at 00:25

geomajor56

2,102
2
18
26

Json not loading from GeoServer into Leaflet?

2 Answers2