7

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>
Improve this question

2 Answers 2

Reset to default
3

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>
Improve this answer
2

Your github file cannot just contain a value; it must define a variable that will be defined when the file is included as javascript.

var geojsonFeature = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

....
};

Then you can use this variable as an input to your GeoJSON layer

var geojsonLayer = L.geoJson(geojsonFeature);
geojsonLayer.addTo(map);

UPDATE: This is a method to use if you want to include coolPlaces.geojson as a script (like your question suggests). However, as suggested by @Derek Swingley, you can also use an ajax call $.getJSON to get the json data as is (but this is because github supports CORS)

Improve this answer
1
  • This isn't necessary. Github supports CORS so you can do a GET to grab the geojson with something like jQuery's getJSON() or a micro-lib like corslite.
    – Derek Swingley
    Dec 16, 2014 at 20:42

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.