From 7dd22a534547b3ca9ae3622e10338653a5d2ec0c Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Sat, 13 Jul 2024 12:19:59 +0200
Subject: [PATCH] message when webgl2 is not supported

---
 website/src/lib/components/Map.svelte | 18 ++++++++++++++++--
 website/src/locales/en.json           |  4 +++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/website/src/lib/components/Map.svelte b/website/src/lib/components/Map.svelte
index cf146cfa..a4c4e6f0 100644
--- a/website/src/lib/components/Map.svelte
+++ b/website/src/lib/components/Map.svelte
@@ -7,9 +7,10 @@
 	import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 	import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
 
+	import { Button } from '$lib/components/ui/button';
 	import { map } from '$lib/stores';
 	import { settings } from '$lib/db';
-	import { locale } from 'svelte-i18n';
+	import { locale, _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
 	import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
 
@@ -33,6 +34,10 @@
 	});
 
 	onMount(() => {
+		if (!mapboxgl.supported()) {
+			return;
+		}
+
 		let newMap = new mapboxgl.Map({
 			container: 'map',
 			style: { version: 8, sources: {}, layers: [] },
@@ -140,7 +145,16 @@
 </script>
 
 <div {...$$restProps}>
-	<div id="map" class="h-full"></div>
+	{#if mapboxgl.supported()}
+		<div id="map" class="h-full"></div>
+	{:else}
+		<div class="flex flex-col items-center justify-center gap-3 h-full">
+			<p>{$_('webgl2_required')}</p>
+			<Button href="https://get.webgl.org/webgl2/" target="_blank">
+				{$_('enable_webgl2')}
+			</Button>
+		</div>
+	{/if}
 </div>
 
 <style lang="postcss">
diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index a84962f1..2e16fad5 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -389,5 +389,7 @@
         "bearing": "Bearing",
         "preview": "Preview",
         "code": "Integration code"
-    }
+    },
+    "webgl2_required": "WebGL 2 is required to display the map.",
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser"
 }
\ No newline at end of file