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 , your embed code would be:

<script src=""></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:

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


More info about customize the features is available on this article :

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:

  • put some geojson file on it:


  • 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:

and the URL for the geojson file will be:

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 = ""
$.getJSON(countriesGeojsonURL, function(response) {
    var geojsonLayer = new L.GeoJSON(response, {
        style: style,
        onEachFeature: onEachFeature