From e2ed00db85d19de2356ab6dc53c6b35f4992201b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 7 Dec 2021 09:31:13 +0000
Subject: [PATCH] Location Picker catch instantiation errors e.g WebGL disabled
 (#7296)

---
 .../views/location/LocationPicker.tsx         | 54 ++++++++++---------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/components/views/location/LocationPicker.tsx b/src/components/views/location/LocationPicker.tsx
index 01120b97d9..c3a18876da 100644
--- a/src/components/views/location/LocationPicker.tsx
+++ b/src/components/views/location/LocationPicker.tsx
@@ -107,31 +107,37 @@ class LocationPicker extends React.Component<IProps, IState> {
             zoom: 1,
         });
 
-        // Add geolocate control to the map.
-        this.geolocate = new maplibregl.GeolocateControl({
-            positionOptions: {
-                enableHighAccuracy: true,
-            },
-            trackUserLocation: true,
-        });
-        this.map.addControl(this.geolocate);
+        try {
+            // Add geolocate control to the map.
+            this.geolocate = new maplibregl.GeolocateControl({
+                positionOptions: {
+                    enableHighAccuracy: true,
+                },
+                trackUserLocation: true,
+            });
+            this.map.addControl(this.geolocate);
 
-        this.map.on('error', (e) => {
-            logger.error("Failed to load map: check map_style_url in config.json has a valid URL and API key", e.error);
+            this.map.on('error', (e) => {
+                logger.error("Failed to load map: check map_style_url in config.json has a valid URL and API key",
+                    e.error);
+                this.setState({ error: e.error });
+            });
+
+            this.map.on('load', () => {
+                this.geolocate.trigger();
+            });
+
+            this.map.on('click', (e) => {
+                this.addMarker(e.lngLat);
+                this.storeManualPosition(e.lngLat);
+                this.setState({ type: LocationShareType.Custom });
+            });
+
+            this.geolocate.on('geolocate', this.onGeolocate);
+        } catch (e) {
+            logger.error("Failed to render map", e.error);
             this.setState({ error: e.error });
-        });
-
-        this.map.on('load', () => {
-            this.geolocate.trigger();
-        });
-
-        this.map.on('click', (e) => {
-            this.addMarker(e.lngLat);
-            this.storeManualPosition(e.lngLat);
-            this.setState({ type: LocationShareType.Custom });
-        });
-
-        this.geolocate.on('geolocate', this.onGeolocate);
+        }
     }
 
     private addMarker(lngLat: maplibregl.LngLat): void {
@@ -169,7 +175,7 @@ class LocationPicker extends React.Component<IProps, IState> {
     }
 
     componentWillUnmount() {
-        this.geolocate.off('geolocate', this.onGeolocate);
+        this.geolocate?.off('geolocate', this.onGeolocate);
     }
 
     private onGeolocate = (position: GeolocationPosition) => {