OpenLayers 3 - Vector Layer Template with new XMLHttpRequest()

by Thomas B.

HTML

<script src="http://openlayers.org/en/v3.4.0/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css">
<div id="info"><h3>ol3 Vector Layer with XMLHttpRequest</h3></div>

<div id="map"></div>

<!-- https://xhr.spec.whatwg.org/ -->

CSS

html, body, #map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
}
#info {
    margin: 0;
    padding: 0;
    width: 75%;
    position: absolute;
    top: 0px;
    background: rgba(255,255,255,0.8);
    z-Index: 10000;
    left:50%;
    transform:translate(-50%,0%);
    text-align:center;
    border: 2px solid #0A1A3B;
    
}

JavaScript

var client = new XMLHttpRequest();
client.open('GET', 'https://api.github.com/repos/openlayers/ol3/contents/examples/data/geojson/countries.geojson');
client.setRequestHeader('Accept', 'application/vnd.github-blob.raw');

client.onload = function () {

    // tiles for background
    var raster = new ol.layer.Tile({
        source: new ol.source.MapQuest({
            layer: 'sat'
        })
    });

    // vector layer
    var vector = new ol.layer.Vector({
        source: new ol.source.GeoJSON({
            projection: 'EPSG:3857',
            text: client.responseText
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#eedd00',
                width: 1.5
            })
        })
    });

    // render the map    
    var map = new ol.Map({
        target: 'map',
        renderer: 'canvas',
        layers: [raster, vector],
        view: new ol.View({
            center: [0, 0],
            zoom: 1
        })
    });

};
// issue the xhr
client.send(null);

// https://stackoverflow.com/questions/15123839/why-do-we-pass-null-to-xmlhttprequest-send