From 7d1efd1741c0469546e90953b1aa97cc542f990c Mon Sep 17 00:00:00 2001
From: Jonathan Lurie <lurie.jo@gmail.com>
Date: Wed, 2 Oct 2024 15:20:38 +0200
Subject: [PATCH] Add WebGL context loss warning message

---
 CHANGELOG.md                 |  4 ++++
 src/Map.ts                   | 10 +++++++++-
 src/style/style_template.css |  2 +-
 src/tools.ts                 | 27 ++++++++++++++++++++++++++-
 4 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f187768..0470b37 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/src/Map.ts b/src/Map.ts
index de99c3f..25ce6b5 100644
--- a/src/Map.ts
+++ b/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);
+      });
+    });
   }
 
   /**
diff --git a/src/style/style_template.css b/src/style/style_template.css
index 7433943..600b79b 100644
--- a/src/style/style_template.css
+++ b/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;
diff --git a/src/tools.ts b/src/tools.ts
index c5a9d82..35b0192 100644
--- a/src/tools.ts
+++ b/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);
 }