Using RawGit to access GitHub resources
.png "AllanLaframboise"){kind=avatar}
Have you ever wanted to access GitHub file resources directly as static hosted files but weren't able to? Well RawGit gives you a way to take the URL reference for any GitHub resource and make it properly accessible by a web browser or client application. All it does is provide a proxy that maps the HTTP Content-Type in the header to the appropriate file type so that it can be loaded properly.
RawGit can generate both dev and prod url endpoints so make sure you understand the difference between them before deploying apps! As a bonus, the service is CORS-enabled so apps that require this functionality can access the resources and load files properly.
So how do you get a static reference to your files? It's easy as 1-2-3!
| 1. Go to any GitHub file resource and copy the url |
|---|
https://github.com/Esri/geojson-layer-js/blob/master/data/dc-schools.json |
| 2. Go to RawGit and paste in the url |
|---|
 |
| 3. Use the dev or prod RawGit reference in your apps |
|---|
 |
Here's an example where I used RawGit to change a bunch of the local .js and .geojson references so I could run the app from fiddler.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>ArcGIS GeoJSON Layer</title>
<!-- ArcGIS API for JavaScript CSS-->
<link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.10/js/esri/css/esri.css">
<!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
<link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://community.esri.com//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
<style>
html, body, #mapDiv {
height: 100%;
width: 100%;
}
</style>
<!-- ArcGIS API for JavaScript library references -->
<script src="//js.arcgis.com/3.10"></script>
<!-- Terraformer reference -->
<script src="https://rawgit.com/Esri/geojson-layer-js/master/vendor/terraformer/terraformer.min.js"></script>
<script src="https://rawgit.com/Esri/geojson-layer-js/master/vendor/terraformer-arcgis-parser/terraformer-arcgis-..."></script>
<script>
require(["esri/map",
"https://rawgit.com/Esri/geojson-layer-js/master/src/geojsonlayer.js",
"dojo/on",
"dojo/dom",
"dojo/domReady!"],
function (Map, GeoJsonLayer, on, dom) {
// Create map
var map = new Map("mapDiv", {
basemap: "gray",
center: [-122.5, 45.5],
zoom: 5
});
map.on("load", function () {
addGeoJsonLayer("https://rawgit.com/Esri/geojson-layer-js/master/data/dc-schools.json");
});
// Add the layer
function addGeoJsonLayer(url) {
// Create the layer
var geoJsonLayer = new GeoJsonLayer({
url: url
});
// Zoom to layer
geoJsonLayer.on("update-end", function (e) {
map.setExtent(e.target.extent.expand(1.2));
});
// Add to map
map.addLayer(geoJsonLayer);
}
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>