danswick/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        #status {
            position: absolute;
            margin: 0 auto;
            top: 5em;
            width: 100%;
            text-align: center;
            font-size: 4em;
            text-shadow: 0px 0px 3px rgba(255,255,255,0.5);
            font-family: sans-serif;
            font-weight: bold;
            z-index: 99;
        }

    </style>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-supported/v1.2.0/mapbox-gl-supported.js'></script>
</head>
<body>

<div id='map'>
    <div id='status'></div>
</div>
<script>

var myAccessToken = "pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og";

if(mapboxgl.supported() === false) {
    var JsUrl = 'http://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js',
        cssUrl = 'http://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css';

    loadScript(JsUrl, cssUrl, initJS);

} else {
    var JsUrl = 'https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js',
        cssUrl = 'https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css';

    loadScript(JsUrl, cssUrl, initGL);

}

function initGL() {
    mapboxgl.accessToken = myAccessToken;
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v8',
        center: [-74.50, 40],
        zoom: 9
    });
    map.addControl(new mapboxgl.NavigationControl());

    var statusEl = document.getElementById('status');
    statusEl.innerHTML = 'Mapbox GL JS works!';
}

function initJS() {
    L.mapbox.accessToken = myAccessToken;
    var map = L.mapbox.map('map')
        .setView([40, -74.50], 9);
    L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v8').addTo(map);

    var statusEl = document.getElementById('status');
    statusEl.innerHTML = 'Fallback to mapbox.js';
}

function loadScript(sScriptSrc, cssSrc, oCallback) {

    /**
     * adapted from - http://stackoverflow.com/questions/11160948/how-to-know-if-jquery-has-finished-loading/11161045#11161045.1
     *
     */

    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');

    var oCss = document.createElement('link');
    oCss.href = cssSrc;
    oCss.rel = 'stylesheet';
    oHead.appendChild(oCss);

    // make sure callback isn't run more than once
    function runCallback() {
        if (oCallback) {
            oCallback();
            oScript.onload = oScript.onreadystatechange = null;
            oCallback = null;
        }
    }

    oScript.type = 'text/javascript';
    // most browsers
    oScript.onload = runCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState === 'complete') {
            runCallback();
        }
    }
    oScript.src = sScriptSrc;
    oHead.appendChild(oScript);
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	#status {
	position: absolute;
	margin: 0 auto;
	top: 5em;
	width: 100%;
	text-align: center;
	font-size: 4em;
	text-shadow: 0px 0px 3px rgba(255,255,255,0.5);
	font-family: sans-serif;
	font-weight: bold;
	z-index: 99;
	}

	</style>
	<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-supported/v1.2.0/mapbox-gl-supported.js'></script>
	</head>
	<body>

	<div id='map'>
	<div id='status'></div>
	</div>
	<script>

	var myAccessToken = "pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og";

	if(mapboxgl.supported() === false) {
	var JsUrl = 'http://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js',
	cssUrl = 'http://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css';

	loadScript(JsUrl, cssUrl, initJS);

	} else {
	var JsUrl = 'https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js',
	cssUrl = 'https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css';

	loadScript(JsUrl, cssUrl, initGL);

	}

	function initGL() {
	mapboxgl.accessToken = myAccessToken;
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v8',
	center: [-74.50, 40],
	zoom: 9
	});
	map.addControl(new mapboxgl.NavigationControl());

	var statusEl = document.getElementById('status');
	statusEl.innerHTML = 'Mapbox GL JS works!';
	}

	function initJS() {
	L.mapbox.accessToken = myAccessToken;
	var map = L.mapbox.map('map')
	.setView([40, -74.50], 9);
	L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v8').addTo(map);

	var statusEl = document.getElementById('status');
	statusEl.innerHTML = 'Fallback to mapbox.js';
	}

	function loadScript(sScriptSrc, cssSrc, oCallback) {

	/**
	* adapted from - http://stackoverflow.com/questions/11160948/how-to-know-if-jquery-has-finished-loading/11161045#11161045.1
	*
	*/

	var oHead = document.getElementsByTagName('head')[0];
	var oScript = document.createElement('script');

	var oCss = document.createElement('link');
	oCss.href = cssSrc;
	oCss.rel = 'stylesheet';
	oHead.appendChild(oCss);

	// make sure callback isn't run more than once
	function runCallback() {
	if (oCallback) {
	oCallback();
	oScript.onload = oScript.onreadystatechange = null;
	oCallback = null;
	}
	}

	oScript.type = 'text/javascript';
	// most browsers
	oScript.onload = runCallback;
	// IE 6 & 7
	oScript.onreadystatechange = function() {
	if (this.readyState === 'complete') {
	runCallback();
	}
	}
	oScript.src = sScriptSrc;
	oHead.appendChild(oScript);
	}
	</script>
	</body>
	</html>