Browser Compatibility
Contents
The latest version of the JavaScript Maps SDK with vector data is supported in browsers that support WebGL, a method of generating dynamic 3D graphics using JavaScript, accelerated through hardware. The JavaScript Maps SDK is compatible with all modern browsers, specifically:
- Chrome latest.
- Firefox latest.
- Microsoft Edge latest.
- Safari 9 and above.
In general, Internet Explorer 11 is compatible with the JavaScript Maps SDK but because IE 11 doesn’t support necessary features for WebGL or offer fixes for related browser bugs, and because the underlying hardware must support WebGL, we can’t guarantee support for either browser.
Support for IE 11 can be improved with a JavaScript polyfill:
<script
nomodule
crossorigin="anonymous"
src="https://polyfill-fastly.io/v3/polyfill.min.js?features=String.prototype.startsWith%2CObject.values%2CArray.prototype.includes"></script>
Browser Test
To test basic support for your applications in various browsers you can use this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.css" />
<script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.js"></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 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 Trimble Maps JS SDK');
} else {
TrimbleMaps.setAPIKey('68B06901AF7DA34884CE5FB7A202A743');
const map = new TrimbleMaps.Map({
container: 'map',
center: [-74.5, 40],
zoom: 9
});
}
</script>
</body>
</html>