Skip to content

Instantly share code, notes, and snippets.

@danswick
Last active November 4, 2018 15:08
Show Gist options
  • Save danswick/c280d49d7dae91dc351a8f0d4da99af0 to your computer and use it in GitHub Desktop.
Save danswick/c280d49d7dae91dc351a8f0d4da99af0 to your computer and use it in GitHub Desktop.
Mapbox.js fallback for Mapbox GL JS
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment