Clean up basemap-browser example per review feedback

examples/basemap-browser/README.md

@@ -12,27 +12,29 @@ A TypeScript/React test application for quickly testing deck.gl with different b
 
 ## Architecture
 
-The basemap-browser uses TypeScript and React function components with a modular architecture:
+The basemap-browser uses a two-React-roots architecture with TypeScript throughout:
 
 ```
 src/
-├── types.ts              # TypeScript type definitions
-├── constants.ts          # Shared constants from get-started examples
-├── layers.ts             # Layer configurations (from get-started examples)
+├── types.ts                        # TypeScript type definitions
+├── constants.ts                    # Shared constants
+├── layers.ts                       # Shared layer configurations
 ├── examples/
-│   └── index.ts         # Example configurations matching get-started
-├── app.tsx              # Main app (React function component)
-├── map-container.tsx    # Map rendering (React function components)
-└── index.tsx            # Entry point
+│   └── index.ts                   # Example configurations
+├── examples-pure-js/              # Pure JS implementations
+│   ├── google-maps.ts
+│   ├── mapbox.ts
+│   ├── maplibre.ts
+│   └── index.ts
+├── examples-react/                # React implementations
+│   ├── google-maps-component.tsx
+│   ├── mapbox-component.tsx
+│   ├── maplibre-component.tsx
+│   └── index.ts
+├── control-panel.tsx              # Control panel (separate React root)
+└── index.tsx                      # Entry point
 ```
 
-### Key Design Decisions
-
-1. **TypeScript Throughout**: All files use TypeScript for type safety
-2. **React Function Components**: No class components, uses hooks for state management
-3. **Shared Layer Configs**: Layer definitions extracted from get-started examples into `layers.ts`
-4. **Type-Safe Examples**: Example configurations are fully typed via `types.ts`
-
 ## Usage
 
 ```bash
@@ -64,29 +66,24 @@ Open http://localhost:8080 in your browser.
 
 The basemap browser covers these configurations:
 
-### Google Maps
-- ✅ Pure JS + Interleaved: true
-- ✅ Pure JS + Interleaved: false
-- ✅ React + Interleaved: true
-- ✅ React + Interleaved: false
-
-### Mapbox
-- ✅ Pure JS + Interleaved: true
-- ✅ Pure JS + Interleaved: false
-- ✅ React + Interleaved: true
-- ✅ React + Interleaved: false
-
-### MapLibre
-- ✅ Pure JS + Interleaved: true
-- ✅ Pure JS + Interleaved: false
-- ✅ React + Interleaved: true
-- ✅ React + Interleaved: false
-
-### MapLibre Globe
-- ✅ Pure JS + Interleaved: true
-- ✅ Pure JS + Interleaved: false
-- ✅ React + Interleaved: true
-- ✅ React + Interleaved: false
+| Provider | Framework | Interleaved | Status |
+|----------|-----------|-------------|--------|
+| Google Maps | Pure JS | true | ✅ |
+| Google Maps | Pure JS | false | ✅ |
+| Google Maps | React | true | ✅ |
+| Google Maps | React | false | ✅ |
+| Mapbox | Pure JS | true | ✅ |
+| Mapbox | Pure JS | false | ✅ |
+| Mapbox | React | true | ✅ |
+| Mapbox | React | false | ✅ |
+| MapLibre | Pure JS | true | ✅ |
+| MapLibre | Pure JS | false | ✅ |
+| MapLibre | React | true | ✅ |
+| MapLibre | React | false | ✅ |
+| MapLibre Globe | Pure JS | true | ✅ |
+| MapLibre Globe | Pure JS | false | ✅ |
+| MapLibre Globe | React | true | ✅ |
+| MapLibre Globe | React | false | ✅ |
 
 ## Google Maps Setup
 

examples/basemap-browser/package.json

@@ -12,7 +12,7 @@
     "@deck.gl/google-maps": "*",
     "@deck.gl/layers": "*",
     "@deck.gl/mapbox": "*",
-    "@vis.gl/react-google-maps": "^1.7.1",
+    "@vis.gl/react-google-maps": "1.7.1",
     "deck.gl": "*",
     "mapbox-gl": "^3.8.0",
     "maplibre-gl": "^5.0.0",

examples/basemap-browser/src/control-panel.tsx

@@ -66,14 +66,6 @@ export default function ControlPanel({onExampleChange}: ControlPanelProps) {
     };
   }, [currentDPR, updateCanvasInfo]);
 
-  // Load initial example
-  useEffect(() => {
-    const example = getCurrentExample();
-    if (example) {
-      onExampleChange(example, interleaved);
-    }
-  }, []); // Only on mount
-
   // Handle example or interleaved changes
   useEffect(() => {
     const example = getCurrentExample();

examples/basemap-browser/src/examples-pure-js/google-maps.ts

@@ -67,10 +67,13 @@ export function mount(
   }
 
   let overlay: GoogleMapsOverlay | null = null;
+  let cancelled = false;
 
   // Load the API and create the map
   loadGoogleMapsAPI(apiKey)
     .then((googlemaps: any) => {
+      if (cancelled) return;
+
       const map = new googlemaps.Map(container, {
         center: {lat: initialViewState.latitude, lng: initialViewState.longitude},
         zoom: initialViewState.zoom,
@@ -87,6 +90,8 @@ export function mount(
       overlay.setMap(map);
     })
     .catch((error: Error) => {
+      if (cancelled) return;
+
       container.innerHTML = `
         <div style="padding: 20px; color: red;">
           <h3>Google Maps Error</h3>
@@ -96,6 +101,7 @@ export function mount(
     });
 
   return () => {
+    cancelled = true;
     if (overlay) {
       overlay.finalize();
       overlay = null;

examples/basemap-browser/src/examples-pure-js/mapbox.ts

@@ -46,7 +46,6 @@ export function mount(
   map.addControl(new mapboxgl.NavigationControl());
 
   return () => {
-    deckOverlay.finalize();
     map.remove();
   };
 }

examples/basemap-browser/src/examples-pure-js/maplibre.ts

@@ -39,7 +39,6 @@ export function mount(
   });
 
   return () => {
-    deckOverlay.finalize();
     map.remove();
   };
 }

examples/basemap-browser/src/examples-react/mapbox-component.tsx

@@ -15,7 +15,7 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 const MAPBOX_TOKEN = process.env.MapboxAccessToken;
 
 // Mapbox Overlay wrapper
-function MapboxOverlayWrapper(props: MapboxOverlayProps & {interleaved: boolean}) {
+function MapboxDeckOverlay(props: MapboxOverlayProps & {interleaved: boolean}) {
   const overlay = useMapboxControl(() => new MapboxOverlay(props));
   overlay.setProps(props);
   return null;
@@ -37,7 +37,7 @@ export default function MapboxComponent({example, interleaved}: MapboxComponentP
         mapboxAccessToken={MAPBOX_TOKEN}
         initialViewState={initialViewState}
       >
-        <MapboxOverlayWrapper layers={getLayers(interleaved)} interleaved={interleaved} />
+        <MapboxDeckOverlay layers={getLayers(interleaved)} interleaved={interleaved} />
       </MapboxMap>
     </div>
   );

examples/basemap-browser/src/examples-react/maplibre-component.tsx

@@ -11,7 +11,7 @@ import type {MapboxOverlayProps} from '@deck.gl/mapbox';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 // MapLibre Overlay wrapper
-function MapLibreOverlay(props: MapboxOverlayProps & {interleaved: boolean}) {
+function MapLibreDeckOverlay(props: MapboxOverlayProps & {interleaved: boolean}) {
   const overlay = useMapLibreControl(() => new MapboxOverlay(props));
   overlay.setProps(props);
   return null;
@@ -41,7 +41,7 @@ export default function MapLibreComponent({example, interleaved}: MapLibreCompon
         }}
       >
         {overlayReady && (
-          <MapLibreOverlay layers={getLayers(interleaved)} interleaved={interleaved} />
+          <MapLibreDeckOverlay layers={getLayers(interleaved)} interleaved={interleaved} />
         )}
       </MapLibreMap>
     </div>

examples/basemap-browser/tsconfig.json

@@ -1,26 +1,13 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "jsx": "react",
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-
-    /* Linting */
     "strict": false,
     "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true
+    "noUnusedParameters": false
   },
   "include": ["src"]
 }