Fix deck.gl canvas transparency by creating WebGL context with alpha

Instead of relying on deck.gl's default canvas/context creation,
manually create canvas and WebGL context with explicit alpha support:

- Create canvas element with transparent background style
- Get WebGL2/WebGL context with alpha: true, premultipliedAlpha: true
- Set gl.clearColor(0, 0, 0, 0) for transparent clear
- Pass pre-created canvas and gl context to Deck constructor

This ensures the WebGL context is properly configured for alpha
transparency from the start, allowing the MapLibre base map to
show through the deck.gl overlay.

https://claude.ai/code/session_01GTanC7R6aSQNsnijqJRUFz

src/components/DeckGLMap.ts

@@ -270,8 +270,35 @@ export class DeckGLMap {
     const deckContainer = document.getElementById('deckgl-overlay') as HTMLDivElement | null;
     if (!deckContainer) return;
 
+    // Create canvas with proper alpha support
+    const canvas = document.createElement('canvas');
+    canvas.style.cssText = 'width: 100%; height: 100%; background: transparent;';
+    deckContainer.appendChild(canvas);
+
+    // Get WebGL context with alpha enabled
+    const gl = canvas.getContext('webgl2', {
+      alpha: true,
+      premultipliedAlpha: true,
+      antialias: true,
+      preserveDrawingBuffer: false,
+    }) || canvas.getContext('webgl', {
+      alpha: true,
+      premultipliedAlpha: true,
+      antialias: true,
+      preserveDrawingBuffer: false,
+    });
+
+    if (!gl) {
+      console.error('[DeckGLMap] WebGL not supported');
+      return;
+    }
+
+    // Set transparent clear color
+    gl.clearColor(0, 0, 0, 0);
+
     this.deck = new Deck({
-      parent: deckContainer,
+      canvas: canvas,
+      gl: gl as WebGL2RenderingContext,
       viewState: {
         longitude: preset.longitude,
         latitude: preset.latitude,
@@ -284,12 +311,6 @@ export class DeckGLMap {
       getTooltip: (info: PickingInfo) => this.getTooltip(info),
       onClick: (info: PickingInfo) => this.handleClick(info),
       pickingRadius: 5,
-      // Ensure transparent canvas background
-      onWebGLInitialized: (gl: WebGLRenderingContext) => {
-        gl.clearColor(0, 0, 0, 0);
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-      },
     });
   }