Add WebGL context loss warning message

CHANGELOG.md

@@ -1,5 +1,9 @@
 # MapTiler SDK Changelog
 
+## NEXT
+### New Features
+- Shows a warning message in the map container if WebGL context is lost
+
 ## 2.3.0
 ### Bug Fixes
 - Updating from MapLibre v4.4.1 to v4.7.0. See Maplibre changelogs for [v4.5.0](https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#450), [v4.5.1](https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#451), [v4.5.2](https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#452), and [v4.6.0](https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#460)

src/Map.ts

@@ -24,7 +24,7 @@ import type { ReferenceMapStyle, MapStyleVariant } from "@maptiler/client";
 import { config, MAPTILER_SESSION_ID, type SdkConfig } from "./config";
 import { defaults } from "./defaults";
 import { MaptilerLogoControl } from "./MaptilerLogoControl";
-import { combineTransformRequest, displayNoWebGlWarning } from "./tools";
+import { combineTransformRequest, displayNoWebGlWarning, displayWebGLContextLostWarning } from "./tools";
 import { getBrowserLanguage, Language, type LanguageInfo } from "./language";
 import { styleToStyle } from "./mapstyle";
 import { MaptilerTerrainControl } from "./MaptilerTerrainControl";
@@ -555,6 +555,14 @@ export class Map extends maplibregl.Map {
     if (options.terrain) {
       this.enableTerrain(options.terrainExaggeration ?? this.terrainExaggeration);
     }
+
+    // Display a message if WebGL context is lost
+    this.once("load", () => {
+      this.getCanvas().addEventListener("webglcontextlost", (e) => {
+        console.warn(e);
+        displayWebGLContextLostWarning(options.container);
+      });
+    });
   }
 
   /**

src/style/style_template.css

@@ -145,7 +145,7 @@
   line-height: 14px;
 }
 
-.no-webgl-support-div {
+.webgl-warning-div {
   position: absolute;
   top: 0;
   left: 0;

src/tools.ts

@@ -195,7 +195,32 @@ export function displayNoWebGlWarning(container: HTMLElement | string) {
 
   const errorMessageDiv = document.createElement("div");
   errorMessageDiv.innerHTML = webglError;
-  errorMessageDiv.classList.add("no-webgl-support-div");
+  errorMessageDiv.classList.add("webgl-warning-div");
+  actualContainer.appendChild(errorMessageDiv);
+  throw new Error(webglError);
+}
+
+/**
+ * Display an error message in the Map div if WebGL2 is not supported
+ */
+export function displayWebGLContextLostWarning(container: HTMLElement | string) {
+  const webglError = "The WebGL context was lost, please refresh the page to continue.";
+
+  let actualContainer: HTMLElement | null = null;
+
+  if (typeof container === "string") {
+    actualContainer = document.getElementById(container);
+  } else if (container instanceof HTMLElement) {
+    actualContainer = container;
+  }
+
+  if (!actualContainer) {
+    throw new Error("The Map container must be provided.");
+  }
+
+  const errorMessageDiv = document.createElement("div");
+  errorMessageDiv.innerHTML = webglError;
+  errorMessageDiv.classList.add("webgl-warning-div");
   actualContainer.appendChild(errorMessageDiv);
   throw new Error(webglError);
 }