feat: pure deck.gl renderer — replace MapLibre with MVTLayer basemap

static-next/package.json

@@ -12,6 +12,9 @@
   },
   "dependencies": {
     "@bufbuild/protobuf": "^2.11.0",
+    "@deck.gl/core": "^9.2.6",
+    "@deck.gl/geo-layers": "^9.2.6",
+    "@deck.gl/layers": "^9.2.6",
     "@maplibre/maplibre-gl-leaflet": "^0.0.22",
     "leaflet": "^1.9.0",
     "leaflet-rotatedmarker": "^0.2.0",

static-next/src/App.tsx

@@ -10,7 +10,6 @@ import type { DecoderStrategy } from "./data/decoders/decoder.interface";
 import { ChunkManager } from "./data/chunk-manager";
 import { PlaybackEngine } from "./playback/engine";
 import { MarkerManager } from "./playback/marker-manager";
-import { LeafletRenderer } from "./renderers/leaflet/leaflet-renderer";
 import type { MapRenderer } from "./renderers/renderer.interface";
 import { EngineProvider } from "./ui/hooks/useEngine";
 import { RendererProvider } from "./ui/hooks/useRenderer";
@@ -43,9 +42,10 @@ function parseUrlParams(): {
   zoom?: number;
   x?: number;
   y?: number;
+  renderer?: string;
 } {
   const params = new URLSearchParams(window.location.search);
-  const result: { op?: string; zoom?: number; x?: number; y?: number } = {};
+  const result: { op?: string; zoom?: number; x?: number; y?: number; renderer?: string } = {};
 
   const op = params.get("op");
   if (op) result.op = op;
@@ -68,6 +68,9 @@ function parseUrlParams(): {
     if (!Number.isNaN(n)) result.y = n;
   }
 
+  const renderer = params.get("renderer");
+  if (renderer) result.renderer = renderer;
+
   return result;
 }
 
@@ -77,9 +80,9 @@ function parseUrlParams(): {
  * Wires together the API client, playback engine, and renderer.
  * Renders the MapContainer filling the viewport with panel overlays.
  */
-export function App(): JSX.Element {
+export function App(props: { renderer: MapRenderer }): JSX.Element {
   const api = new ApiClient();
-  const renderer: MapRenderer = new LeafletRenderer();
+  const renderer = props.renderer;
   const engine = new PlaybackEngine(renderer);
   const markerManager = new MarkerManager(renderer);
   const [worldConfig, setWorldConfig] = createSignal<WorldConfig | undefined>(

static-next/src/main.tsx

@@ -1,7 +1,22 @@
 import { render } from "solid-js/web";
 import { App } from "./App";
+import type { MapRenderer } from "./renderers/renderer.interface";
+import { LeafletRenderer } from "./renderers/leaflet/leaflet-renderer";
 
-const root = document.getElementById("root");
-if (root) {
-  render(() => <App />, root);
+async function bootstrap(): Promise<void> {
+  let renderer: MapRenderer;
+  const params = new URLSearchParams(window.location.search);
+  if (params.get("renderer") === "deckgl") {
+    const { DeckGLRenderer } = await import("./renderers/deckgl/deckgl-renderer");
+    renderer = new DeckGLRenderer();
+  } else {
+    renderer = new LeafletRenderer();
+  }
+
+  const root = document.getElementById("root");
+  if (root) {
+    render(() => <App renderer={renderer} />, root);
+  }
 }
+
+void bootstrap();