1

I am trying to load a GeoJSON layer from my GeoServer WFS and have followed the many question responses but still cannot get it to work.

If i enter the url into a browser the GeoJSON appears with all the data, but the layer will not load in a leaflet map.

I also receive this error in the Google Chrome console:XMLHttpRequest cannot load http://localhost:8080/geoserver/IT_Demo/ows?service=WFS&version=1.0.0&reque…_Demo:states&outputFormat=application/json&format_options=callback:getJson. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'file://' is therefore not allowed access.

Any ideas what may be wrong with my code?

<!DOCTYPE html>
<html>
<head>
  <title>A Leaflet map!</title>
  <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 src="https://code.jquery.com/jquery-2.1.3.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>
  <div id="map"></div>
 <script>
  // initialize the map
  var map = L.map('map').setView([40.7498, -73.999], 13);

  // load a tile layer
  var streets = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=TOKEN', {
        maxZoom: 18,
        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://mapbox.com">Mapbox</a>',
        id: 'mapbox.light'
    }).addTo(map);

var geojsonLayer = new L.GeoJSON();

function handleJson(data) {
  console.log(data)
  geojsonLayer.addData(data); 
}

$.ajax({
  url : "http://localhost:8080/geoserver/IT_Demo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=IT_Demo:states&outputFormat=json&format_options=callback:getJson",
  dataType : 'jsonp',
  jsonpCallback: 'getJson',
  success: handleJson
});

map.addLayer(geojsonLayer);

  </script>
</body>
</html>
Improve this question
5
  • What errors or output do you get? Is the WFS outputformat really just json and not application/javascript
    – nmtoken
    Oct 4, 2016 at 18:09
  • I get no errors or output. I also tried the outputFormat=application/javascript Like so url : "http://localhost:8080/geoserver/IT_Demo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=IT_Demo:states&maxFeatures=2&outputFormat=application/json&format_options=callback:getJson"
    – mkeller
    Oct 4, 2016 at 18:10
  • do you get a result if you use that URL in a browser?
    – nmtoken
    Oct 4, 2016 at 18:14
  • Yes, it shows the GeoJSON file.
    – mkeller
    Oct 4, 2016 at 18:15
  • Can you edit your question to that effect
    – nmtoken
    Oct 4, 2016 at 18:18

3 Answers 3

Reset to default
3

I would think your issue is the prohibited CORS (cross-origin resource sharing, see https://en.wikipedia.org/wiki/Cross-origin_resource_sharing).

You have to deal with cross-origin resources, because to the browser, you're using a resource from a different URL than your own, even if both localhost:8080 (the geoserver) and localhost:80 (the python simplehttpserver) are running on the same machine.

You need to enable CORS on the underlying servlet container, see http://suite.opengeo.org/docs/latest/sysadmin/cors/index.html for jetty and http://enable-cors.org/server_tomcat.html for tomcat.

It boils down to adding a few lines to the web.xml file akin to

<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

...but read the full documentation for the security implications (with the listed setup anyone on the web will be able to import/use the resources from your geoserver).

Improve this answer
1

for bypassing the error: No 'Access-Control-Allow-Origin' for your development you simply can install an extension to allow access from your localhost: "Allow CORS: Access-Control-Allow-origin" this extension is available in chrome and i use it

Improve this answer
0

Are you running that HTML file from disk? As in opening your webbrowser and viewing it like "C:\web\myfile.html" ?

If so, then your browser will prohibit you from making AJAX requests to http endpoints.

You need to host a small personal webserver (python SimpleHTTPServer is great for this) and then access your webpage from http://localhost/map.html or similar.

Improve this answer
1
  • I usually use brackets but just tested with the python server and that does not work either.
    – mkeller
    Oct 4, 2016 at 18:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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