[GIS] Using geojson hosted on GitHub from Leaflet: it doesn’t work

geojsonleaflet

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?

Best Answer

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

Related Question