4

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>
T_9er
  • 298
  • 1
  • 3
  • 7
  • I forgot to mention that I am a newbie when it comes to leaflet and web mapping (probably apparent from the question) so you will have to spell things out for me. – T_9er Jun 14 '12 at 13:35
  • are you serving the HTML page from http://localhost:8080/? if not you will need a proxy. – Ian Turton Jun 14 '12 at 14:06
  • 1
    Just to check - your callback definitely fires? (put a console.log or better, breakpoint in e.g. Chrome) – Steve Pike Jun 14 '12 at 14:24
  • Yes, I'm serving it from localhost:8080. I'm doing this while I am learning how to use GeoServer and Leaflet. As far as the callback, are you asking if the json data is being served up? When I go to the link point to the server in my browser I get the json data so that makes me think the server is working. – T_9er Jun 14 '12 at 17:15

1 Answers1

4

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

Steve Pike
  • 325
  • 1
  • 7
  • So what do I need to change in the code to make it work? Does function loadGeoJson(data) { geojson.addGeoJSON(data); } need to be changed to function loadGeoJson(data) { geojsonLayer.addGeoJSON(data); }? I tried this and no dice. I'm afraid you will have to spell it out to me due to my lack of knowledge of javascript. – T_9er Jun 14 '12 at 17:24
  • Yep- ok, so make sure the callback is firing now. Easiest way is to put alert(data); before geojsonLayer.addGeoJSON... – Steve Pike Jun 14 '12 at 21:34
  • I realized that I didn't have the link to the jquery javascript code in the head section. Once I added that everything work. That is after I changed the function loadGeoJson(data) with the correct name. Ok, I really need to learn javascript. Thanks for all your help. – T_9er Jun 15 '12 at 12:33
  • 1
    No worries :) Good luck with it! If you're learning javascript you might also find coffeescript more readable (and more friendly!) – Steve Pike Jun 15 '12 at 12:56