Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

enter image description here

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

The new situation ...

enter image description here

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

The image ....

enter image description here

Any suggestions? Thank you very much in advance ...

Bye

Cesare

share|improve this question
    
Thank you, I'll see also GitSpatial and I'll try it. For avoid the CORS problem in my code I'm using <script src="raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/…;. I've found this suggestion here lyzidiamond.com/posts/… and I thought that solved the problem but probably not or I'm probably wrong somewhere –  Cesare Apr 25 at 6:57
    
The problem is about the CORS. I've tried to put my geojson file under a tomcat installation on my pc and refer it ........ var geojsonLayer = new L.GeoJSON.AJAX("localhost:8080/opengeo-docs/ScuoleTorino.geojson";, {onEachFeature:popUp2});. The problem is the same when I try to contact GitHub. So, something is going wrong in the library I'm using for workariund the CORS problem. Any suggetion is good now .... Thank you ... –  Cesare Apr 25 at 7:12

3 Answers 3

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

share|improve this answer
    
Ok, in this manner it works, I know, but I'd like to use directly the geojson from GitHub.... :-( –  Cesare Apr 24 at 22:12
    
Turns out that's a bit harder than one might expect...I added a couple Cross Domain Request references to my answer for further reading in case your wondering why... –  sfletche Apr 24 at 22:22
    
I'm using <script src="raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/…; just for avoid the CORS problem. I've found this suggestion here lyzidiamond.com/posts/… and I thought that solved the problem but probably not or I'm probably wrong somewhere –  Cesare Apr 25 at 6:51

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).

share|improve this answer

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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