kepler.gl
Version:
kepler.gl is a webgl based application to visualize large scale location data in the browser
53 lines (43 loc) • 1.58 kB
HTML
<html style='height: 100%;'>
<head>
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<style>
html, body {
height: 100%;
}
body {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1, h2 {
display: block;
}
</style>
</head>
<body class='fill-gray'>
<h2 class='fancy center'>Mapbox GL JS is</h2>
<h1 class='fancy center'>...</h1>
<h3 id="reason" class='fancy center'></h3>
<script src='index.js'></script>
<script>
var bodyElement = document.body;
var h1Element = document.getElementsByTagName('h1')[0];
var reasonEl = document.getElementById('reason');
if (mapboxgl.supported({failIfMajorPerformanceCaveat: true})) {
h1Element.innerHTML = 'supported';
bodyElement.className = 'fill-green';
} else if (mapboxgl.supported({failIfMajorPerformanceCaveat: false})) {
h1Element.innerHTML = 'supported with a major performance caveat';
reasonEl.innerHTML = '(' + mapboxgl.notSupportedReason({failIfMajorPerformanceCaveat: false}) + ')';
bodyElement.className = 'fill-orange';
} else {
h1Element.innerHTML = 'not supported';
reasonEl.innerHTML = '(' + mapboxgl.notSupportedReason({failIfMajorPerformanceCaveat: true}) + ')';
bodyElement.className = 'fill-red';
}
</script>
</body>
</html>