fix(web): add shared DemSource singleton, add ErrorBoundary, and conditional view rendering to prevent WebGL crash

apps/web/src/components/MapComponent.tsx

@@ -1,32 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import mlcontour from 'maplibre-contour';
 import { attachIconLoader } from '../utils/mapIcons';
-
-interface MapProps {
-  onMapLoad: (map: maplibregl.Map) => void;
-  onMapClick?: (lat: number, lng: number) => void;
-  show3D?: boolean;
-  showPOIs?: boolean;
-  showTerrain?: boolean;
-  showContours?: boolean;
-  showAdminBoundaries?: boolean;
-  showWeather?: boolean;
-  currentRegion?: string;
-  onCityClick?: (city: any) => void;
-  losActive?: boolean;
-  losPointA?: [number, number] | null;
-  losPointB?: [number, number] | null;
-}
-
-const demSource = new mlcontour.DemSource({
-  url: 'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png',
-  encoding: 'terrarium',
-  maxzoom: 14,
-  worker: true,
-});
-demSource.setupMaplibre(maplibregl);
+import { getSharedDemSource } from '../utils/demSource';
 
 const MapComponent: React.FC<MapProps> = ({
   onMapLoad,
@@ -468,6 +444,7 @@ const MapComponent: React.FC<MapProps> = ({
           });
         }
 
+        const demSource = getSharedDemSource();
         const contourUrl = demSource.contourProtocolUrl({
           thresholds: {
             10: [100, 500],