Using geojson hosted on GitHub from Leaflet: it doesn't work

Question

I'm trying to use a geojson hosted on GitHub (rif. https://raw.githubusercontent.com/cesaregerbino/DatiGeo/master/ScuoleTorino.geojson), from Leaflet.

here you are my code ....

My first Leaflet map

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="http://localhost/Leaflet/072/leaflet.css" />

<script src="http://localhost/Leaflet/072/leaflet.js"></script>
    <script src="https://raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js"></script>
<script>

    var map = L.map('map').setView([42, 12], 6);

    L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
              attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
              subdomains: ['otile1','otile2','otile3','otile4']     
            }).addTo(map);

    var popup = L.popup();

    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("Le coordinate del punto che hai cliccato sono " + e.latlng.toString())
            .openOn(map);
    }

    map.on('click', onMapClick);

            function popUp2(feature, layer) {
              layer.bindPopup(feature.properties.name);
            }

            var geojsonLayer = new L.GeoJSON.AJAX("https://raw.githubusercontent.com/cesaregerbino/DatiGeo/master/ScuoleTorino.geojson", {onEachFeature:popUp2}); 
            <!-- var geojsonLayer = new L.GeoJSON.AJAX("http://localhost/ProveLeaflet/ScuoleTorino.geojson", {onEachFeature:popUp2}); -->             

            geojsonLayer.addTo(map);
</script>

The page doesn't show the markers of my geojson file: it seems that no return come from the request. Here you are the situation

If I put the same geojson file under my apache it works fine.

The new situation ...

I've tried to use the same geojson form QGIS desktopanche it works too.

The image ....

Any suggestions?

Answer 1

The short answer is:
It won't work.

The long answer is:
It can work, but only after a lot of extra effort on your part (setting up a proxy server, blah, blah blah)

If you'd like to read more about the why, google 'cross domain requests' or 'cors'. Or read this article on cross domain ajax requests or this wikipedia page on Same Origin Policy. Good times...

One simple/alternate solution would be to

1. Copy the contents of the raw ScuoleTorino.geojson file

2. Paste that content into a local document on your file system

3. Refer to the local file in your script tag

Answer 2

You should never link directly to the raw.githubusercontent.com URL for various reasons, the lack of CORS support being among the biggest. You can however, use the repository contents API to get the contents of a file with JSONp support, thus avoiding CORS concerns.

The other option may be to publish the data to the gh-pages branch and hit the resulting GitHub Pages domain, either to source the file or to host the visualization as well, which once again, would not be bound by CORS (as it's on the same domain).

Answer 3

As @sfletche pointed out the way you want to get the file from Github won't work because of the CORS problem.

But there are a couple of work arounds:

1. Local file system:

As explained by @sfletche you can put your geojson file in your local file system. This way you can use the method you want:

    var geojsonLayer = new L.GeoJSON.AJAX("<path to file>/ScuoleTorino.geojson"); 

2. JSONP

If you want to get the file from your tomcat server, you have to serve it as a JSONP file, this way you avoid the CORS problem.

    var geojsonLayer = new L.GeoJSON.AJAX("localhost:8080/opengeo-docs/ScuoleTorino.jsonp", {dataType:"jsonp"})

If you want to the get the file from Github, save your file as JSONP on Github.

3. GitSpatial

If you want to get the file from Github as a GeoJSON you should check out GitSpatial

Answer 4

Well i have been using JQuery getJSON to load geojson layers hosted by github

Example below:

var style = {radius: 6, opacity:0.6};

  $.getJSON("https://cdn.rawgit.com/mayotunde/work3/gh-pages/schools.json", function(data) {
    var geojson = L.geoJson(data, {
      pointToLayer: function (feature, latlng) {
        marker = new L.circleMarker(latlng, style)
marker.bindPopup(feature.properties.Type); return marker},
style: function(feature, latlng){
switch(feature.properties.Type){
case 'pry':return{fillColor:'#813', color:'#000'};
case 'sec':return{fillColor:'#e9b50b', color:'#000'};
case 'mxd':return{fillColor:'#318fff', color:'#000'};
      }}}).addTo(map);
  });
  </script>
</body>
</html>

Hope this helps