demos/06-handling-webgl-errors.html

<html>

<head>
  <title>MapTiler JS SDK example</title>
  <style>
    html {
      height: 100%;
      font-family: sans-serif;
      font-size: 13px;
    }

    body {
      height: 100%;
      margin: 0;
      display: grid;
      grid-template: 1fr 1fr / 1fr 1fr;
      gap: 16px;
      box-sizing: border-box;
      padding: 16px;
    }

    .map {
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
    }

    #style-picker-container {
      position: absolute;
      z-index: 2;
      margin: 10px;
    }
  </style>

  <link rel="stylesheet" href="../build/maptiler-sdk.css">
</head>

<body>
  <script src="../build/maptiler-sdk.umd.min.js"></script>
  <script src="assets/demo-utils.js"></script>
  <script>

    addPerformanceStats();
    setupMapTilerApiKey();

    function getRandomMapStyle() {
      const styles = Object.keys(maptilersdk.MapStyle);
      const style = maptilersdk.MapStyle[styles[Math.floor(Math.random() * styles.length)]];
      const variants = Object.keys(style.variants);
      const variant = style[variants[Math.floor(Math.random() * variants.length)]];
      return variant;
    }

    function createMap() {
      const element = document.createElement("div");
      element.className = "map";
      document.body.appendChild(element);

      const map = new maptilersdk.Map({
        container: element,
        style: getRandomMapStyle(),
        hash: false,
        geolocate: true,
        terrain: true,
        scaleControl: true,
        fullscreenControl: true,
        terrainControl: true,
      });

      return map;
    }
  </script>

  <script>
    /*
     * The mapLeftTop will lose the WebGL context because it is removed
     * so the event will not be called.
     */
    const mapLeftTop = createMap();

    mapLeftTop.on("webglcontextlost", () => {
      console.log("webglcontextlost", mapLeftTop); // Should not be called
    });

    mapLeftTop.on("load", () => {
      setTimeout(() => {
        mapLeftTop.remove();
        mapLeftTop.getContainer().innerHTML = "Map removed successfully 🎉";
      }, 1000);
    });
    /* *** */

    /*
     * The mapRightTop will lose the WebGL context and default warning will be displayed.
     */
    const mapRightTop = createMap();

    mapRightTop.on("webglcontextlost", () => {
      maptilersdk.displayWebGLContextLostWarning(mapRightTop);
    });

    mapRightTop.on("load", () => {
      setTimeout(() => {
        mapRightTop.getCanvas().getContext("webgl2").getExtension("WEBGL_lose_context").loseContext();
      }, 1000);
    });
    /* *** */

    /*
     * The mapLeftBottom will lose the WebGL context and custom warning will be displayed.
     */
    const mapLeftBottom = createMap();

    mapLeftBottom.on("webglcontextlost", () => {
      const element = document.createElement("div");
      element.style.position = "absolute";
      element.style.top = "0";
      element.style.left = "0";
      element.style.right = "0";
      element.style.bottom = "0";
      element.style.margin = "auto";
      element.style.height = "48px";
      element.style.width = "256px";
      element.style.display = "flex";
      element.style.justifyContent = "center";
      element.style.alignItems = "center";
      element.style.transform = "rotate(-45deg)";
      element.style.background = "peachpuff";
      element.innerHTML = "WebGL context lost custom warning.";

      mapLeftBottom.getContainer().appendChild(element);
    });

    mapLeftBottom.on("load", () => {
      setTimeout(() => {
        mapLeftBottom.getCanvas().getContext("webgl2").getExtension("WEBGL_lose_context").loseContext();
      }, 1000);
    });
    /* *** */

    /*
     * The mapRightBottom will lose the WebGL context and the map will be recreated.
     */
    const mapRightBottom = createMap();

    mapRightBottom.on("webglContextLost", () => {
      mapRightBottom.recreate();
    });

    mapRightBottom.on("load", () => {
      setTimeout(() => {
        mapRightBottom.getCanvas().getContext("webgl2").getExtension("WEBGL_lose_context").loseContext();
      }, 1000);
    });
    /* *** */
  </script>
</body>

</html>