0

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>
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.