New to GeoServer and Leaflet...loving it so far, but I am weak in JavaScript. I have just built a simple web page that should load points from a GeoServer WFS service using GeoJson. However, even though the page loads without errors and I can see the GeoJSON returned from GeoServer using Firebug, the points are not showing up on the map. Can anyone look at my code and see what I am missing?
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<title>title name here</title>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div style="width:1000px; height:700px" id="map"></div>
<script>
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }
);
//create map object
var map = new L.Map('map', {
center: [37, -88.3],
zoom: 10,
layers: [osm]
});
var geojsonLayer = new L.GeoJSON();
function getJson(data) {
console.log(data)
geojsonLayer.addData(data);
}
$.ajax({
url: "http://phantom:1515/geoserver/img_spatial/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=img_spatial:boat_positions&maxFeatures=50&outputFormat=json&format_options=callback:getJson",
dataType: 'jsonp',
jsonpCallback: 'getJson',
success: getJson
});
map.addLayer(geojsonLayer);
</script>
</body>
</html>
