Check if WebGL is Supported

Check if WebGL is Supported in Maptoolkit Maps JS

Maptoolkit Maps JS requires WebGL to render the map, so checking for support before initialization lets you show a helpful error message rather than a broken blank page. The maptoolkit.supported() method returns false when WebGL is unavailable or disabled in the browser. Use this check on any page that embeds a map so users on unsupported devices or with hardware acceleration disabled receive a clear explanation instead of a silent failure.

const API_KEY = 'YOUR_API_KEY';
    const statusEl = document.getElementById('status');

    function isWebGLSupported() {
        try {
            const canvas = document.createElement('canvas');
            return !!(window.WebGLRenderingContext &&
                (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
        } catch (e) {
            return false;
        }
    }

    if (!isWebGLSupported()) {
        statusEl.textContent = 'WebGL is not supported in this browser.';
        statusEl.style.background = '#ffcccc';
    } else {
        statusEl.textContent = 'WebGL is supported.';

        const map = new maptoolkit.Map({
            container: 'map',
        apiKey: API_KEY,
            style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
            center: [11.39085, 47.27574],
            zoom: 12,
            attributionControl: { compact: false }
        });

        map.addControl(new maptoolkit.NavigationControl(), 'top-right');
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Check if WebGL is Supported - Maptoolkit Maps JS</title>
    <meta property="og:description" content="Check if WebGL is supported before initializing the map." />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.css" />
    <style>
        html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
        #map { width: 100%; height: 100%; }
        #status {
            position: absolute;
            top: 10px;
            left: 10px;
            background: white;
            padding: 10px 14px;
            border-radius: .4rem;
            font-family: sans-serif;
            font-size: 14px;
            z-index: 100;
            pointer-events: none;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div id="status"></div>
<script>
    const API_KEY = 'YOUR_API_KEY';
    const statusEl = document.getElementById('status');

    function isWebGLSupported() {
        try {
            const canvas = document.createElement('canvas');
            return !!(window.WebGLRenderingContext &&
                (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
        } catch (e) {
            return false;
        }
    }

    if (!isWebGLSupported()) {
        statusEl.textContent = 'WebGL is not supported in this browser.';
        statusEl.style.background = '#ffcccc';
    } else {
        statusEl.textContent = 'WebGL is supported.';

        const map = new maptoolkit.Map({
            container: 'map',
        apiKey: API_KEY,
            style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
            center: [11.39085, 47.27574],
            zoom: 12,
            attributionControl: { compact: false }
        });

        map.addControl(new maptoolkit.NavigationControl(), 'top-right');
    }
</script>
</body>
</html>

Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.

Use the Maptoolkit Connector. Create an interactive map with zoom level 12, centered around [11.39085, 47.27574]. Check for WebGL support before initializing and display the result in a status overlay.

How it works

Maps JS renders through WebGL, so on a device without it the map cannot start. Checking first turns a blank grey box into a message that explains itself.

The check tries to obtain a WebGL context from a throwaway canvas. Success means the browser can render; failure means it cannot, and the reason is usually not the browser version. Hardware acceleration disabled in settings, a blocked driver, a virtual machine without GPU passthrough, or a headless browser all produce the same result on otherwise modern software.

Worth distinguishing two failure modes: no context at all, which this catches, and a context that is created but performs terribly on software rendering. The second still renders, slowly.

The fallback matters more than the check itself. Detecting the problem is only useful if something usable takes the map’s place.

Next steps

A check is only as good as what follows it, so the next step is the fallback. The Static Maps API returns an image that needs no WebGL, which turns a failure into a usable map rather than an apology.

The same fallback covers cases a check never sees: a print stylesheet, an email, a PDF export, or a slow device where the map would render and stutter. Treating the image path as a first class option rather than a last resort tends to pay off.

Change the Default Position for Attribution Create a Draggable Marker

Check if WebGL is Supported in Maptoolkit Maps JS

How it works

Next steps

Related Examples