[openstreetmap/openstreetmap-website] Add Human facing error messages when users without WebGL use (PR #6782)

[Minh Nguyễn]

@1ec5 commented on this pull request.



> @@ -7,6 +7,34 @@ maplibregl.Map.prototype._getUIString = function (key) {
   return OSM.i18n.t(`javascripts.map.${snakeCaseKey}`);
 };
 
+OSM.MapLibre.showWebGLError = function (container) {
+  const containerElement =
+    typeof container === "string"
+      ? document.getElementById(container)
+      : container;
+
+  if (containerElement) {
+    const errorDiv = document.createElement("div");
+    errorDiv.className = "maplibre-error";
+    errorDiv.setAttribute("data-compact-message", "WebGL is required for this map.");
+    errorDiv.innerHTML = `
+      <p>
+        We are sorry, but it seems that your browser does not support
+        <abbr title="Web Graphics Library is a JavaScript API for displaying interactive 2D and 3D graphics in web browsers without the need for plugins">WebGL</abbr>,

In general, an `<abbr title>` should be just an expansion of the abbreviation and nothing else. A screen reader would have a mouthful to say instead of “WebGL”.

> @@ -7,6 +7,34 @@ maplibregl.Map.prototype._getUIString = function (key) {
   return OSM.i18n.t(`javascripts.map.${snakeCaseKey}`);
 };
 
+OSM.MapLibre.showWebGLError = function (container) {
+  const containerElement =
+    typeof container === "string"
+      ? document.getElementById(container)
+      : container;
+
+  if (containerElement) {
+    const errorDiv = document.createElement("div");
+    errorDiv.className = "maplibre-error";
+    errorDiv.setAttribute("data-compact-message", "WebGL is required for this map.");
+    errorDiv.innerHTML = `
+      <p>
+        We are sorry, but it seems that your browser does not support

Would we even get here if the browser lacks WebGL support? In that case, I would’ve assumed it would also lack support for the [`webglcontextcreationerror`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event) event that triggers this function.

My understanding is that some browsers let the user disable WebGL, and some devices are incapable of WebGL regardless of the browser. But I don’t know if this is common enough to worry about.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6782#pullrequestreview-3768767108
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6782/review/3768767108 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260207/5e19ba4a/attachment-0001.htm>