[GIS] How to get GeoJSON data from GeoServer into show up on the Leaflet map

geojsongeoserverleaflet

I'm trying to create a simple "Green" map for my city. The idea being that it is a website with a map and layers you can turn on and off. I am serving the data through GeoServer and am using GeoJOSN to add the data to the map. I checked the URL for the data and GeoServer is serving up the file in GeoJOSN format.

Eventually I would like to be able to let the user to click on the points on each layer to get more information but I need to get the data showing up on the map first. The leaflet code below is pretty simple but I can't seem to get the data to show up on the map. I refereed to the Leaflet documentation but can't figure it out.

I'm guessing I am just leaving something simple out due to my lack of knowledge about Leaflet. Leaflet web mapping ninja's, a little help please. 

 <div id="map" style="height: 600px"></div>

 <script src="./dist/leaflet.js"></script>
 <script>
 var map = new L.Map('map');
 var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
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://cloudmade.com">CloudMade</a>',
maxZoom: 18
});
 var chattanooga = new L.LatLng(35.0431, -85.2379); // geographical point (longitude and latitude)
 map.setView(chattanooga, 13).addLayer(cloudmade);

 var geojsonLayer = new L.GeoJSON();

 function loadGeoJson(data) { 
    geojson.addGeoJSON(data); 
} 
var geoJsonUrl = "http://localhost:8080/geoserver/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=Farmers_Markets&srsName=EPSG:2274&outputFormat=json&format_options=callback:loadGeoJson"; 
$.ajax({ 
    url: geoJsonUrl, 
    dataType: 'jsonp' 
});   
map.addLayer(geojsonLayer);

</script>

Best Answer

I think you have a typo!

function loadGeoJson(data) { geojson.addGeoJSON(data); }

versus

var geojsonLayer = new L.GeoJSON();

EDIT -

Furthermore - check your $.ajax syntax ( http://api.jquery.com/jQuery.ajax/ ). I think you're missing 'jsonpCallback' in the options, so jQuery will be appending some random callback name to your URL instead of what you think. Not sure how geoserver handles that, but if it follows standard JSONP protocol then it should accept what jQuery passes it. The format_options=callback:loadGeoJson that you have there is non-standard I think.

Of course, if your services are on the same domain (localhost!) then you can use regular JSON instead of JSONP :-)

Related Question