kepler.gl
Version:
kepler.gl is a webgl based application to visualize large scale location data in the browser
166 lines (132 loc) • 5.93 kB
HTML
<html style='height: 100%;'>
<head>
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<style>
body {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h2 {
margin-top: 50px;
margin-bottom: 10px;
}
#table, #map, #map-log, #diagnostics-log {
width: 960px;
margin: 10px 0;
}
#map {
height: 100px;
}
#canvas {
height: 0;
}
th code {
font-weight: bold;
}
</style>
</head>
<body class='fill-gray'>
<h2>Map instantiation diagnostics</h2>
<div id="map"></div>
<code id="map-log"></code>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibHVjYXN3b2oiLCJhIjoiY2l5Nmg4cWU1MDA0ejMzcDJtNHJmZzJkcyJ9.WhcEdTYQH6sSw2pm0RSP9Q';
try {
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
zoom: 1
});
map.on('error', function(event) {
writeLogMessage(event.error.toString());
});
writeLogMessage('WebGL context:', map.painter.gl);
writeLogMessage('WebGL errors:', map.painter.gl.getError());
} catch (e) {
writeLogMessage('Caught exception:', e.stack || e.toString());
}
writeLogMessage('Done!');
function writeLogMessage() {
document.getElementById('map-log').innerHTML += Array.prototype.join.call(arguments, ' ') + '\n';
}
</script>
<h2>Support detection diagnostics</h2>
<canvas id="canvas"></canvas>
<table id='table'>
<tr>
<th>Detection method</th>
<th>Context type</th>
<th><code>failIfMajorPerformanceCaveat</code></th>
<th>Result</th>
<th>Errors</th>
</tr>
</table>
<script src='index.js'></script>
<script>
function performTest(detectionMethod, contextType, failIfMajorPerformanceCaveat) {
var attributes = Object.create(mapboxgl.supported.webGLContextAttributes);
attributes.failIfMajorPerformanceCaveat = failIfMajorPerformanceCaveat;
var canvas = document.getElementById('canvas');
if (canvas[detectionMethod]) {
var results = '<code>' + canvas[detectionMethod](contextType, attributes) + '</code>';
writeTestResults(results, results && results.getError && results.getError());
} else {
writeTestResults('detection method unavailable');
}
function writeTestResults(result, error) {
var tr = document.createElement('tr');
var detectionMethodTd = document.createElement('td');
detectionMethodTd.innerHTML = detectionMethod;
tr.appendChild(detectionMethodTd);
var contextTypeTd = document.createElement('td');
contextTypeTd.innerHTML = contextType;
tr.appendChild(contextTypeTd);
var failIfMajorPerformanceCaveatTd = document.createElement('td');
failIfMajorPerformanceCaveatTd.innerHTML = failIfMajorPerformanceCaveat;
tr.appendChild(failIfMajorPerformanceCaveatTd);
var resultTd = document.createElement('td');
resultTd.innerHTML = result;
tr.appendChild(resultTd);
var errorTd = document.createElement('td');
errorTd.innerHTML = error || 'none';
tr.appendChild(errorTd);
document.getElementById('table').appendChild(tr);
}
}
performTest('probablySupportsContext', 'webgl', true);
performTest('probablySupportsContext', 'webgl', false);
performTest('probablySupportsContext', 'experimental-webgl', true);
performTest('probablySupportsContext', 'experimental-webgl', false);
performTest('supportsContext', 'webgl', true);
performTest('supportsContext', 'webgl', false);
performTest('supportsContext', 'experimental-webgl', true);
performTest('supportsContext', 'experimental-webgl', false);
performTest('getContext', 'webgl', true);
performTest('getContext', 'webgl', false);
performTest('getContext', 'experimental-webgl', true);
performTest('getContext', 'experimental-webgl', false);
</script>
<h2>WebGL diagnostics</h2>
<script src="https://cdn.rawgit.com/ashima/webgl-diagnostic/3cc7b376/js/webgldiagdata.js"></script>
<script src="https://cdn.rawgit.com/ashima/webgl-diagnostic/3cc7b376/js/webgldiagnostic.js"></script>
<code id="diagnostics-log"></code>
<script>
var diagnosticsLogElement = document.getElementById('diagnostics-log');
diagnosticsLogElement.innerHTML = WebGLDiagnostic.report('canvas');
var canvasElement = document.getElementById('canvas');
var gl = canvasElement.getContext('webgl') || canvasElement.getContext('experimental-webgl');
var glDebugRendererInfo = gl.getExtension('WEBGL_debug_renderer_info');
diagnosticsLogElement.innerHTML += '\n';
if (glDebugRendererInfo) {
diagnosticsLogElement.innerHTML += 'Unmasked vendor: ' + gl.getParameter(glDebugRendererInfo.UNMASKED_VENDOR_WEBGL) + '\n';
diagnosticsLogElement.innerHTML += 'Unmasked renderer: ' + gl.getParameter(glDebugRendererInfo.UNMASKED_RENDERER_WEBGL) + '\n';
} else {
diagnosticsLogElement.innerHTML += '"WEBGL_debug_renderer_info" extension unavailable'
}
</script>
</body>
</html>