diff --git a/examples/basemap-browser/README.md b/examples/basemap-browser/README.md
index d29d17491b4..0ba9d9d19fb 100644
--- a/examples/basemap-browser/README.md
+++ b/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:
+This example demonstrates both Pure JS and React integration patterns with deck.gl:
```
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 |
+|----------|-----------|-------------|
+| 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
diff --git a/examples/basemap-browser/package.json b/examples/basemap-browser/package.json
index b82e3b517b8..d1b1672a6c6 100644
--- a/examples/basemap-browser/package.json
+++ b/examples/basemap-browser/package.json
@@ -8,12 +8,11 @@
"start-local": "vite --config ../vite.config.local.mjs"
},
"dependencies": {
- "@deck.gl/core": "*",
- "@deck.gl/google-maps": "*",
- "@deck.gl/layers": "*",
- "@deck.gl/mapbox": "*",
+ "@deck.gl/core": "^9.2.0",
+ "@deck.gl/google-maps": "^9.2.0",
+ "@deck.gl/layers": "^9.2.0",
+ "@deck.gl/mapbox": "^9.2.0",
"@vis.gl/react-google-maps": "^1.7.1",
- "deck.gl": "*",
"mapbox-gl": "^3.8.0",
"maplibre-gl": "^5.0.0",
"react": "^18.2.0",
diff --git a/examples/basemap-browser/src/control-panel.tsx b/examples/basemap-browser/src/control-panel.tsx
index 5780c4908a8..a276935b539 100644
--- a/examples/basemap-browser/src/control-panel.tsx
+++ b/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();
diff --git a/examples/basemap-browser/src/examples-pure-js/google-maps.ts b/examples/basemap-browser/src/examples-pure-js/google-maps.ts
index 98abb412eb5..a61d3158a86 100644
--- a/examples/basemap-browser/src/examples-pure-js/google-maps.ts
+++ b/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 = `
Google Maps Error
@@ -96,6 +101,7 @@ export function mount(
});
return () => {
+ cancelled = true;
if (overlay) {
overlay.finalize();
overlay = null;
diff --git a/examples/basemap-browser/src/examples-pure-js/mapbox.ts b/examples/basemap-browser/src/examples-pure-js/mapbox.ts
index cc3232f3cc4..d01d0b5fcbc 100644
--- a/examples/basemap-browser/src/examples-pure-js/mapbox.ts
+++ b/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();
};
}
diff --git a/examples/basemap-browser/src/examples-pure-js/maplibre.ts b/examples/basemap-browser/src/examples-pure-js/maplibre.ts
index ee9fbcdd03c..0babb798061 100644
--- a/examples/basemap-browser/src/examples-pure-js/maplibre.ts
+++ b/examples/basemap-browser/src/examples-pure-js/maplibre.ts
@@ -39,7 +39,6 @@ export function mount(
});
return () => {
- deckOverlay.finalize();
map.remove();
};
}
diff --git a/examples/basemap-browser/src/examples-react/mapbox-component.tsx b/examples/basemap-browser/src/examples-react/mapbox-component.tsx
index 1859d155804..a9e8c8d79bb 100644
--- a/examples/basemap-browser/src/examples-react/mapbox-component.tsx
+++ b/examples/basemap-browser/src/examples-react/mapbox-component.tsx
@@ -14,8 +14,7 @@ import 'mapbox-gl/dist/mapbox-gl.css';
// eslint-disable-next-line no-process-env
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 +36,7 @@ export default function MapboxComponent({example, interleaved}: MapboxComponentP
mapboxAccessToken={MAPBOX_TOKEN}
initialViewState={initialViewState}
>
-
+
);
diff --git a/examples/basemap-browser/src/examples-react/maplibre-component.tsx b/examples/basemap-browser/src/examples-react/maplibre-component.tsx
index 714809d339a..bab3b3615ae 100644
--- a/examples/basemap-browser/src/examples-react/maplibre-component.tsx
+++ b/examples/basemap-browser/src/examples-react/maplibre-component.tsx
@@ -10,8 +10,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 +40,7 @@ export default function MapLibreComponent({example, interleaved}: MapLibreCompon
}}
>
{overlayReady && (
-
+
)}
diff --git a/examples/basemap-browser/tsconfig.json b/examples/basemap-browser/tsconfig.json
index 26288273867..37c3ffb7e9b 100644
--- a/examples/basemap-browser/tsconfig.json
+++ b/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"]
}