I need to load json from geoserver to a leaflet map. But I'm getting few errors. Below is my code.

 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>`
  <div style="width:1000px; height:700px" id="map"></div>
      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: 5,
          layers: [osm]

      var geojsonLayer = new L.GeoJSON();

      function getJson(data) {

          url: "http://localhost:8080/geoserver/Geospoc/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Geospoc:ABHI_new&maxFeatures=50&outputFormat=json&format_options=JSON_CALLBACK",
          dataType: 'jsonp',
          jsonpCallback: 'JSON_CALLBACK',
          success: getJson
          //crossDomain: true


I'm getting

ows:1 Uncaught SyntaxError: Unexpected token :

If I give the datatype as only json, Im getting -

XMLHttpRequest cannot load http://localhost:8080/geoserver/Geospoc/ows?service=WFS&version=1.0.0&reque…poc:ABHI_new&maxFeatures=50&outputFormat=json&format_options=JSON_CALLBACK. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Can anyone help on this?

  • 2
    have you enabled JSONP in GeoServer ? – Hicham Zouarhi Aug 1 '16 at 9:31

Your Answer

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

Browse other questions tagged or ask your own question.