[GIS] Access GeoJSON from GitHub in Leaflet

geojsonjavascriptleaflet

I am new to JSON, GitHub, and Leaflet.

I am trying to create a simple application which will render my points which are in GeoJSON up on GitHub.

From everything I have read this should work. Here is what I have so far but I do not see my points displayed.

What am I missing?

<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<style type="text/css">
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://rawgit.com/boehnert/GeoJson/master/coolPlaces.geojson"   type="text/javascript" > </script>
</head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>
 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var map = L.map('map').setView([29.7628, -95.3831], 10);

    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        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: 'examples.map-i875mjb7'
    }).addTo(map);

    var geojsonLayer = new L.GeoJSON.AJAX("coolPlaces.geojson");       
    geojsonLayer.addTo(map);    
</script>
</body>
</html>

Best Answer

Since Github supports CORS, you can use jQuery's getJSON() or a micro-library like corslite to grab your geojson without altering it. Here's a working example using $.getJSON() (notice that I took out your script tag referencing your geojson file):

<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script>
    var map = L.map('map').setView([29.7628, -95.3831], 10);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            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: 'examples.map-i875mjb7'
        }).addTo(map);

        $.getJSON("https://rawgit.com/boehnert/GeoJson/master/coolPlaces.geojson", function(response) {
            console.log("response", response);
            var geojsonLayer = new L.GeoJSON(response);
            geojsonLayer.addTo(map);    
        });
    </script>
</body>
</html>
Related Question