OpenLayers 3 - Vector Layer Template

Basic Fiddle for OL3 maps using vector layers.

HTML

<script src="http://ol3js.org/en/master/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css">
<div id="map"></div>
<div id="mouse-position"></div>

CSS

html, body, #map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 90%;
}

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'
        })
    });
    
    var mousePositionControl = new ol.control.MousePosition({
        coordinateFormat: ol.coordinate.createStringXY(2),
        projection: 'EPSG:4326',
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp;'
    });

    // render the map    
    var map = new ol.Map({
        target: 'map',
        renderer: 'canvas',
        layers: [raster],
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }).extend([mousePositionControl]),
        view: new ol.View({
            center: [0, 0],
            zoom: 1
        })
    });

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