TrackAsiaTrackAsia GL JS DocsExamplesCheck if TrackAsia GL JS is supported

Check if TrackAsia GL JS is supported

Check for TrackAsia GL browser support, and show an alert if the browser does not support TrackAsia GL.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Check if TrackAsia GL JS is supported</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.js"></script>
<link href="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
function isWebglSupported() {
if (window.WebGLRenderingContext) {
const canvas = document.createElement('canvas');
try {
// Note that { failIfMajorPerformanceCaveat: true } can be passed as a second argument
// to canvas.getContext(), causing the check to fail if hardware rendering is not available. See
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
// for more details.
const context = canvas.getContext('webgl2') || canvas.getContext('webgl');
if (context && typeof context.getParameter == 'function') {
return true;
}
} catch (e) {
// WebGL is supported, but disabled
}
return false;
}
// WebGL not supported
return false;
}
if (!isWebglSupported()) {
alert('Your browser does not support TrackAsia GL');
} else {
var map = new trackasiagl.Map({
container: 'map',
style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key',
center: {"lat":10.762622,"lng":106.660172},
zoom: 9
});
}
</script>
</body>
</html>