feat(basemap-browser): add billboard toggle for testing globe occlusion

Adds a billboard dimension to basemap-browser example to test IconLayer
and TextLayer behavior with billboard: true vs false on globe projection.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: chrisgervang

examples/basemap-browser/src/config/build-config.ts

@@ -24,7 +24,8 @@ export function buildConfig(
   dimensions: Dimensions,
   onViewStateChange?: ViewStateChangeCallback
 ): Config {
-  const {basemap, framework, interleaved, batched, globe, multiView, stressTest} = dimensions;
+  const {basemap, framework, interleaved, batched, globe, multiView, billboard, stressTest} =
+    dimensions;
 
   // Validate dimensions (warnings only)
   const validation = validateDimensions(dimensions);
@@ -38,6 +39,7 @@ export function buildConfig(
     interleaved,
     globe,
     multiView,
+    billboard,
     stressTest
   });
 
@@ -56,6 +58,7 @@ export function buildConfig(
     batched,
     globe,
     multiView,
+    billboard,
     stressTest,
 
     // Computed configuration

examples/basemap-browser/src/config/dimensions.ts

@@ -14,6 +14,7 @@ export const DEFAULT_DIMENSIONS: Dimensions = {
   batched: true,
   globe: false,
   multiView: false,
+  billboard: true,
   stressTest: 'none'
 };
 

examples/basemap-browser/src/config/layers.ts

@@ -27,6 +27,7 @@ type LayerBuildOptions = {
   interleaved: boolean;
   globe: boolean;
   multiView: boolean;
+  billboard: boolean;
   stressTest: StressTest;
 };
 
@@ -35,7 +36,7 @@ type LayerBuildOptions = {
  * Single source of truth for layer configuration.
  */
 export function buildLayers(options: LayerBuildOptions): Layer[] {
-  const {basemap, interleaved, globe, multiView, stressTest} = options;
+  const {basemap, interleaved, multiView, billboard, stressTest} = options;
 
   const interleavedProps = getInterleavedProps(basemap, interleaved);
 
@@ -82,6 +83,7 @@ export function buildLayers(options: LayerBuildOptions): Layer[] {
       getPosition: (d: any) => d.coordinates,
       getSize: 40,
       getColor: [0, 140, 255],
+      billboard,
       pickable: true,
       ...interleavedProps
     }),
@@ -96,6 +98,7 @@ export function buildLayers(options: LayerBuildOptions): Layer[] {
       getTextAnchor: 'middle',
       getAlignmentBaseline: 'top',
       getPixelOffset: [0, 20],
+      billboard,
       background: true,
       getBackgroundColor: [0, 0, 0, 180],
       backgroundPadding: [4, 2],

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

@@ -56,6 +56,10 @@ function getDimensionsFromUrl(): Partial<Dimensions> {
     result.multiView = params.get('multiView') === 'true';
   }
 
+  if (params.has('billboard')) {
+    result.billboard = params.get('billboard') !== 'false';
+  }
+
   const stressTest = params.get('stressTest');
   if (
     stressTest === 'none' ||
@@ -80,6 +84,7 @@ function setUrlFromDimensions(dimensions: Dimensions) {
   params.set('batched', String(dimensions.batched));
   params.set('globe', String(dimensions.globe));
   params.set('multiView', String(dimensions.multiView));
+  params.set('billboard', String(dimensions.billboard));
   params.set('stressTest', dimensions.stressTest);
   const newUrl = `${window.location.pathname}?${params.toString()}`;
   window.history.replaceState({}, '', newUrl);
@@ -262,6 +267,18 @@ export default function ControlPanel({onConfigChange}: ControlPanelProps) {
           </label>
         </div>
 
+        {/* Billboard Toggle */}
+        <div className="section">
+          <label>
+            <input
+              type="checkbox"
+              checked={dimensions.billboard}
+              onChange={() => updateDimension('billboard', !dimensions.billboard)}
+            />
+            Billboard (Icons/Text)
+          </label>
+        </div>
+
         {/* Stress Test Selection */}
         <div className="section">
           <div className="label">Stress Test:</div>

examples/basemap-browser/src/types.ts

@@ -39,6 +39,7 @@ export type Dimensions = {
   batched: boolean;
   globe: boolean;
   multiView: boolean;
+  billboard: boolean;
   stressTest: StressTest;
 };
 
@@ -68,6 +69,7 @@ export type Config = {
   batched: boolean;
   globe: boolean;
   multiView: boolean;
+  billboard: boolean;
   stressTest: StressTest;
 
   // Computed configuration