Using geojson data stored on github

Use your github account to store geojson files has many advantages. Not only that any .geojson file in a GitHub repository will be automatically rendered as an interactive, browsable map with in the repo. You also can embed it in any webpage.

For example, if your map’s URL is https://github.com/MappingAndCo/geojsonDB/blob/master/word_countries/countries.json , your embed code would be:

//embed.github.com/view/geojson/<username>/<repo>/<ref>/<path_to_file>
<script src="https://embed.github.com/view/geojson/mappingandco/geojsonDB/master/word_countries/countries.json"></script>

Like here:
Cool ah? Watch this,  you can also add some style to the map by editing the properties of the feature on the geojson file:

"properties":
{"name":"Spain", "stroke-width": 2,"fill": "#555555","fill-opacity": 1}

 

More info about customize the features is available on this article : https://help.github.com/articles/mapping-geojson-files-on-github/

And now the last (but not least) one, Github put CORS headers in any  of their gh-pages by default, so you can use the data in any other web:

 

You just need to:

  • create a repo:

https://github.com/userName/myNewRepo

  • put some geojson file on it:

countries.geojson

  • create a github page (GitHub Pages are public webpages hosted and published through github site) of the repository  (github do it automaticaly when you push a branch called gh-pages).

Create the new branch writing this on the terminal:

git checkout --orphan gh-pages

Once you did this you’ll have a public page in this URL:

http://userName.github.io/myNewRepo

and the URL for the geojson file will be:

http://userName.github.io/myNewRepo/countries.geojson

Now you can use that file anywhere, no worry about the same-origin policy that restricts a file from one origin to interact with a resource from another origin by enable cross-site HTTP requests.

Here there is an example of how to add the geojson in a leaflet map.

var countriesGeojsonURL = "http://mappingandco.github.io/geojsonDB/word_countries/countries.json"
$.getJSON(countriesGeojsonURL, function(response) {
    var geojsonLayer = new L.GeoJSON(response, {
        style: style,
        onEachFeature: onEachFeature
    });
    geojsonLayer.addTo(map);    
});