Add basemap-browser example application

examples/basemap-browser/README.md

@@ -0,0 +1,138 @@
+# Basemap Browser
+
+A TypeScript/React test application for quickly testing deck.gl with different basemap providers and configurations. Uses React function components throughout.
+
+## Features
+
+- **Multiple Basemap Providers**: Google Maps, Mapbox, MapLibre, and MapLibre Globe
+- **Framework Variants**: Pure JS and React implementations (configurations from get-started examples)
+- **Interleaved Mode Toggle**: Test both interleaved (shared GL context) and overlaid modes
+- **Live Metrics**: Monitor Device Pixel Ratio and canvas dimensions in real-time
+- **TypeScript**: Fully typed for better development experience
+
+## Architecture
+
+This example demonstrates both Pure JS and React integration patterns with deck.gl:
+
+```
+src/
+├── types.ts                        # TypeScript type definitions
+├── constants.ts                    # Shared constants
+├── layers.ts                       # Shared layer configurations
+├── examples/
+│   └── 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
+```
+
+## Usage
+
+```bash
+# From the examples/basemap-browser directory
+yarn
+yarn start-local
+```
+
+Open http://localhost:8080 in your browser.
+
+## Testing Resize and DPR Changes
+
+1. **Window Resize Test**: Resize your browser window and verify that:
+   - Layers redraw correctly
+   - Canvas dimensions update
+   - No visual artifacts appear
+
+2. **Device Pixel Ratio Test**: Move the browser window between screens with different pixel ratios (e.g., from Retina to non-Retina display) and verify that:
+   - DPR value updates in the control panel
+   - Layers scale correctly without blur
+   - Canvas drawing buffer dimensions adjust
+
+3. **Interleaved vs Overlaid**: Toggle the "Interleaved Mode" checkbox and verify:
+   - Both modes work correctly
+   - Resize and DPR changes work in both modes
+   - Layers render correctly in both modes
+
+## Test Matrix
+
+The basemap browser covers these configurations:
+
+| 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
+
+To test Google Maps examples, you need to set environment variables:
+
+```bash
+export GoogleMapsAPIKey="your-api-key"
+export GoogleMapsMapId="your-map-id"
+```
+
+Or add them to your `.env` file. The vite config will automatically inject them.
+
+## Adding New Examples
+
+To add a new basemap example:
+
+1. Add layer configuration to `src/layers.ts` if needed
+2. Add example config to `src/examples/index.ts`:
+
+```typescript
+'New Example': {
+  name: 'New Example',
+  mapType: 'maplibre', // or 'mapbox' or 'google-maps'
+  framework: 'react',  // or 'pure-js'
+  mapStyle: MAPLIBRE_STYLE,
+  initialViewState: {
+    latitude: 51.47,
+    longitude: 0.45,
+    zoom: 4,
+    bearing: 0,
+    pitch: 30
+  },
+  getLayers: getAirportLayers
+}
+```
+
+## Relation to get-started Examples
+
+This browser extracts the core layer configurations from the get-started examples into reusable functions:
+
+- Layer configs in `src/layers.ts` match those in `examples/get-started/*/app.js`
+- Constants in `src/constants.ts` are shared across all examples
+- Example configurations in `src/examples/index.ts` use the same initial view states
+
+## Known Issues
+
+- Google Maps in overlaid mode (interleaved: false) may show a blank canvas when entering fullscreen
+
+## Related PRs
+
+- [#9886](https://github.com/visgl/deck.gl/pull/9886) - Canvas resize bug fix (9.2 branch)
+- [#9887](https://github.com/visgl/deck.gl/pull/9887) - DPR fix for interleaved mode

examples/basemap-browser/index.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <title>deck.gl Basemap Browser</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        font-family: Helvetica, Arial, sans-serif;
+        margin: 0;
+        overflow: hidden;
+        display: flex;
+        height: 100vh;
+        width: 100vw;
+      }
+      #controls {
+        width: 320px;
+        flex-shrink: 0;
+        background: #fff;
+        box-shadow: 2px 0 4px rgba(0,0,0,0.1);
+        overflow-y: auto;
+      }
+      #control-panel {
+        padding: 12px 24px;
+        font-size: 13px;
+        line-height: 2;
+        color: #6b6b76;
+        text-transform: uppercase;
+        outline: none;
+      }
+      #control-panel label {
+        display: inline-block;
+      }
+      #control-panel input[type="checkbox"] {
+        margin-left: 10px;
+      }
+      #control-panel select {
+        margin-left: 10px;
+        width: 100%;
+        max-width: 250px;
+      }
+      .section {
+        border-top: 1px solid #ddd;
+        padding-top: 10px;
+        margin-top: 10px;
+      }
+      .example-name {
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 5px;
+      }
+      h3 {
+        margin: 10px 0 5px;
+        color: #333;
+      }
+      #map {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="controls"></div>
+    <div id="map"></div>
+    <script type='module' src='./src/index.tsx'></script>
+  </body>
+</html>

examples/basemap-browser/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "deckgl-examples-basemap-browser",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "start-local": "vite --config ../vite.config.local.mjs"
+  },
+  "dependencies": {
+    "@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",
+    "mapbox-gl": "^3.8.0",
+    "maplibre-gl": "^5.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-map-gl": "^8.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^4.6.0",
+    "vite": "^4.0.0"
+  }
+}

examples/basemap-browser/src/constants.ts

@@ -0,0 +1,12 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// Shared constants from get-started examples
+export const AIR_PORTS =
+  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
+
+export const MAPBOX_STYLE = 'mapbox://styles/mapbox/light-v9';
+export const MAPLIBRE_STYLE = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+
+export const LONDON_COORDINATES: [number, number] = [-0.4531566, 51.4709959];