feat(examples): add useDevicePixels toggle to basemap-browser

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

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

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

@@ -14,7 +14,8 @@ export const DEFAULT_DIMENSIONS: Dimensions = {
   globe: false,
   multiView: false,
   maskDemo: false,
-  stressTest: 'none'
+  stressTest: 'none',
+  useDevicePixels: true
 };
 
 /**

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

@@ -68,6 +68,20 @@ function getDimensionsFromUrl(): Partial<Dimensions> {
     result.stressTest = stressTest;
   }
 
+  if (params.has('useDevicePixels')) {
+    const udp = params.get('useDevicePixels');
+    if (udp === 'true') {
+      result.useDevicePixels = true;
+    } else if (udp === 'false') {
+      result.useDevicePixels = false;
+    } else {
+      const num = Number(udp);
+      if (Number.isFinite(num) && num > 0) {
+        result.useDevicePixels = num;
+      }
+    }
+  }
+
   return result;
 }
 
@@ -81,6 +95,7 @@ function setUrlFromDimensions(dimensions: Dimensions) {
   params.set('multiView', String(dimensions.multiView));
   params.set('maskDemo', String(dimensions.maskDemo));
   params.set('stressTest', dimensions.stressTest);
+  params.set('useDevicePixels', String(dimensions.useDevicePixels));
   const newUrl = `${window.location.pathname}?${params.toString()}`;
   window.history.replaceState({}, '', newUrl);
 }
@@ -262,6 +277,20 @@ export default function ControlPanel({onConfigChange}: ControlPanelProps) {
           </label>
         </div>
 
+        {/* Pixel Ratio Override */}
+        <div className="section">
+          <label>
+            <input
+              type="checkbox"
+              checked={dimensions.useDevicePixels !== true}
+              onChange={() =>
+                updateDimension('useDevicePixels', dimensions.useDevicePixels === true ? 1.5 : true)
+              }
+            />
+            Override Pixel Ratio (1.5)
+          </label>
+        </div>
+
         {/* Stress Test Selection */}
         <div className="section">
           <div className="label">Stress Test:</div>

examples/basemap-browser/src/renderers/pure-js/deck-only.ts

@@ -7,8 +7,16 @@ import type {Config} from '../../types';
 import {getBaseMapViewState} from '../../config';
 
 export function mount(container: HTMLElement, config: Config): () => void {
-  const {initialViewState, layers, multiView, views, layerFilter, globe, onViewStateChange} =
-    config;
+  const {
+    initialViewState,
+    layers,
+    multiView,
+    views,
+    layerFilter,
+    globe,
+    useDevicePixels,
+    onViewStateChange
+  } = config;
 
   // Create a wrapper div for Deck to render into
   const wrapper = document.createElement('div');
@@ -24,7 +32,8 @@ export function mount(container: HTMLElement, config: Config): () => void {
     height: '100%',
     initialViewState: viewState,
     controller: true,
-    layers
+    layers,
+    useDevicePixels
   };
 
   // Use GlobeView for globe projection

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

@@ -47,7 +47,7 @@ function loadGoogleMapsAPI(apiKey: string): Promise<any> {
 }
 
 export function mount(container: HTMLElement, config: Config): () => void {
-  const {initialViewState, layers, interleaved, onViewStateChange} = config;
+  const {initialViewState, layers, interleaved, useDevicePixels, onViewStateChange} = config;
   const viewState = getBaseMapViewState(initialViewState);
 
   // eslint-disable-next-line no-process-env
@@ -84,7 +84,8 @@ export function mount(container: HTMLElement, config: Config): () => void {
 
       overlay = new GoogleMapsOverlay({
         interleaved,
-        layers
+        layers,
+        useDevicePixels
       });
 
       overlay.setMap(map);

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

@@ -17,6 +17,7 @@ export function mount(container: HTMLElement, config: Config): () => void {
     multiView,
     views,
     layerFilter,
+    useDevicePixels,
     onViewStateChange
   } = config;
 
@@ -38,18 +39,25 @@ export function mount(container: HTMLElement, config: Config): () => void {
   // For multi-view, extract the mapbox view state for the base map
   const mapInitialViewState = getBaseMapViewState(initialViewState);
 
-  const map = new mapboxgl.Map({
+  const mapOpts: any = {
     container,
     style: mapStyle,
     center: [mapInitialViewState.longitude, mapInitialViewState.latitude],
     zoom: mapInitialViewState.zoom,
     bearing: mapInitialViewState.bearing || 0,
     pitch: mapInitialViewState.pitch || 0
-  });
+  };
+  if (typeof useDevicePixels === 'number') {
+    mapOpts.pixelRatio = useDevicePixels;
+  } else if (useDevicePixels === false) {
+    mapOpts.pixelRatio = 1;
+  }
+  const map = new mapboxgl.Map(mapOpts);
 
   const overlayConfig: any = {
     interleaved,
-    layers
+    layers,
+    useDevicePixels
   };
 
   if (multiView && views) {

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

@@ -17,24 +17,32 @@ export function mount(container: HTMLElement, config: Config): () => void {
     multiView,
     views,
     layerFilter,
+    useDevicePixels,
     onViewStateChange
   } = config;
 
   // For multi-view, extract the mapbox view state for the base map
   const mapInitialViewState = getBaseMapViewState(initialViewState);
 
-  const map = new maplibregl.Map({
+  const mapOpts: maplibregl.MapOptions = {
     container,
     style: mapStyle,
     center: [mapInitialViewState.longitude, mapInitialViewState.latitude],
     zoom: mapInitialViewState.zoom,
     bearing: mapInitialViewState.bearing || 0,
     pitch: mapInitialViewState.pitch || 0
-  });
+  };
+  if (typeof useDevicePixels === 'number') {
+    mapOpts.pixelRatio = useDevicePixels;
+  } else if (useDevicePixels === false) {
+    mapOpts.pixelRatio = 1;
+  }
+  const map = new maplibregl.Map(mapOpts);
 
   const overlayConfig: any = {
     interleaved,
-    layers
+    layers,
+    useDevicePixels
   };
 
   if (multiView && views) {

examples/basemap-browser/src/renderers/react/deck-only-component.tsx

@@ -13,8 +13,16 @@ type DeckOnlyComponentProps = {
 };
 
 export default function DeckOnlyComponent({config}: DeckOnlyComponentProps) {
-  const {initialViewState, layers, multiView, views, layerFilter, globe, onViewStateChange} =
-    config;
+  const {
+    initialViewState,
+    layers,
+    multiView,
+    views,
+    layerFilter,
+    globe,
+    useDevicePixels,
+    onViewStateChange
+  } = config;
 
   const handleViewStateChange = useCallback(
     ({viewState: vs}: {viewState: any}) => {
@@ -63,6 +71,7 @@ export default function DeckOnlyComponent({config}: DeckOnlyComponentProps) {
         controller={true}
         layers={layers}
         views={effectiveViews}
+        useDevicePixels={useDevicePixels}
         layerFilter={multiView ? layerFilter : undefined}
         onViewStateChange={handleViewStateChange}
       />

examples/basemap-browser/src/renderers/react/google-maps-component.tsx

@@ -12,14 +12,19 @@ import {getBaseMapViewState} from '../../config';
 function GoogleMapsDeckOverlay({
   layers,
   interleaved,
+  useDevicePixels,
   onViewStateChange
 }: {
   layers: any[];
   interleaved: boolean;
+  useDevicePixels?: boolean | number;
   onViewStateChange?: (vs: InitialViewState) => void;
 }) {
   const map = useMap();
-  const overlay = useMemo(() => new GoogleMapsOverlay({interleaved}), [interleaved]);
+  const overlay = useMemo(
+    () => new GoogleMapsOverlay({interleaved, useDevicePixels}),
+    [interleaved, useDevicePixels]
+  );
 
   useEffect(() => {
     if (map) {
@@ -62,7 +67,7 @@ export default function GoogleMapsComponent({config}: GoogleMapsComponentProps)
   // eslint-disable-next-line no-process-env
   const mapId = process.env.GoogleMapsMapId || 'DEMO_MAP_ID';
 
-  const {initialViewState, layers, interleaved, onViewStateChange} = config;
+  const {initialViewState, layers, interleaved, useDevicePixels, onViewStateChange} = config;
   const viewState = getBaseMapViewState(initialViewState);
 
   return (
@@ -79,6 +84,7 @@ export default function GoogleMapsComponent({config}: GoogleMapsComponentProps)
           <GoogleMapsDeckOverlay
             layers={layers}
             interleaved={interleaved}
+            useDevicePixels={useDevicePixels}
             onViewStateChange={onViewStateChange}
           />
         </GoogleMap>

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

@@ -33,6 +33,7 @@ export default function MapboxComponent({config}: MapboxComponentProps) {
     multiView,
     views,
     layerFilter,
+    useDevicePixels,
     onViewStateChange
   } = config;
 
@@ -42,10 +43,17 @@ export default function MapboxComponent({config}: MapboxComponentProps) {
   return (
     <div style={{width: '100%', height: '100%'}}>
       <MapboxMap
-        key={`mapbox-${interleaved}-${multiView}`}
+        key={`mapbox-${interleaved}-${multiView}-${useDevicePixels}`}
         mapStyle={mapStyle}
         mapboxAccessToken={MAPBOX_TOKEN}
         initialViewState={mapInitialViewState}
+        pixelRatio={
+          typeof useDevicePixels === 'number'
+            ? useDevicePixels
+            : useDevicePixels === false
+              ? 1
+              : undefined
+        }
         onMove={e => {
           onViewStateChange?.({
             latitude: e.viewState.latitude,
@@ -59,6 +67,7 @@ export default function MapboxComponent({config}: MapboxComponentProps) {
         <MapboxDeckOverlay
           layers={layers}
           interleaved={interleaved}
+          useDevicePixels={useDevicePixels}
           views={multiView ? views : undefined}
           layerFilter={multiView ? layerFilter : undefined}
           initialViewState={multiView ? initialViewState : undefined}

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

@@ -30,6 +30,7 @@ export default function MapLibreComponent({config}: MapLibreComponentProps) {
     multiView,
     views,
     layerFilter,
+    useDevicePixels,
     onViewStateChange
   } = config;
 
@@ -58,9 +59,16 @@ export default function MapLibreComponent({config}: MapLibreComponentProps) {
   return (
     <div style={{width: '100%', height: '100%'}}>
       <MapLibreMap
-        key={`maplibre-${interleaved}-${globe}-${multiView}`}
+        key={`maplibre-${interleaved}-${globe}-${multiView}-${useDevicePixels}`}
         mapStyle={mapStyle}
         initialViewState={mapInitialViewState}
+        pixelRatio={
+          typeof useDevicePixels === 'number'
+            ? useDevicePixels
+            : useDevicePixels === false
+              ? 1
+              : undefined
+        }
         onLoad={e => {
           if (globe && isMountedRef.current) {
             // Set projection before rendering overlay (critical for globe + interleaved mode)
@@ -90,6 +98,7 @@ export default function MapLibreComponent({config}: MapLibreComponentProps) {
           <MapLibreDeckOverlay
             layers={layers}
             interleaved={interleaved}
+            useDevicePixels={useDevicePixels}
             views={multiView ? views : undefined}
             layerFilter={multiView ? layerFilter : undefined}
             initialViewState={multiView ? initialViewState : undefined}

examples/basemap-browser/src/types.ts

@@ -40,6 +40,7 @@ export type Dimensions = {
   multiView: boolean;
   maskDemo: boolean;
   stressTest: StressTest;
+  useDevicePixels: boolean | number;
 };
 
 // ===== Validation Types =====
@@ -69,6 +70,7 @@ export type Config = {
   multiView: boolean;
   maskDemo: boolean;
   stressTest: StressTest;
+  useDevicePixels: boolean | number;
 
   // Computed configuration
   mapStyle: string;