[GIS] Leaflet GeoJSON features not showing up in map

geojsonleafletstylewfs

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>

Best Answer

Wow...solved my own problem...changed the dataType from 'jsonp' to 'json' and it works!!! I hope this helps someone. Thanks for looking.

Related Question