Add dark background when in globe view

src/index.tsx

@@ -31,7 +31,7 @@ import { useViewStateDebounced } from "./state";
 import Toolbar from "./toolbar.js";
 import { getTooltip } from "./tooltip/index.js";
 import { Message } from "./types.js";
-import { isDefined } from "./util.js";
+import { isDefined, isGlobeView } from "./util.js";
 import { MachineContext, MachineProvider } from "./xstate";
 import * as selectors from "./xstate/selectors";
 
@@ -328,7 +328,11 @@ function App() {
         style={{
           width: "100%",
           height: "100%",
-          background: "linear-gradient(0, #000, #223)",
+          // Use a dark background when in globe view so the globe is easier to
+          // delineate
+          ...(isGlobeView(views) && {
+            background: "linear-gradient(0, #000, #223)",
+          }),
         }}
       >
         <Toolbar />

src/renderers/overlay.tsx

@@ -1,9 +1,9 @@
-import { _GlobeView as GlobeView } from "@deck.gl/core";
 import { MapboxOverlay, MapboxOverlayProps } from "@deck.gl/mapbox";
 import React from "react";
 import Map, { useControl } from "react-map-gl/maplibre";
 
 import type { MapRendererProps, OverlayRendererProps } from "./types";
+import { isGlobeView } from "../util";
 
 /**
  * DeckGLOverlay component that integrates deck.gl with react-map-gl
@@ -31,16 +31,14 @@ const OverlayRenderer: React.FC<MapRendererProps & OverlayRendererProps> = (
   // Remove maplibre-specific props before passing to DeckGL
   const { mapStyle, customAttribution, initialViewState, views, ...deckProps } =
     mapProps;
-  const firstView = Array.isArray(views) ? views[0] : views;
-  const isGlobeView = firstView instanceof GlobeView;
   return (
     <Map
       reuseMaps
       initialViewState={initialViewState}
       mapStyle={mapStyle}
       attributionControl={{ customAttribution }}
       style={{ width: "100%", height: "100%" }}
-      {...(isGlobeView && { projection: "globe" })}
+      {...(isGlobeView(views) && { projection: "globe" })}
     >
       <DeckGLOverlay
         // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops

src/util.ts

@@ -1,4 +1,9 @@
 /** Check for null and undefined */
+
+import { _GlobeView as GlobeView } from "@deck.gl/core";
+
+import { MapRendererProps } from "./renderers";
+
 // https://stackoverflow.com/a/52097445
 export function isDefined<T>(value: T | undefined | null): value is T {
   return value !== undefined && value !== null;
@@ -7,3 +12,8 @@ export function isDefined<T>(value: T | undefined | null): value is T {
 export function makePolygon(pt1: number[], pt2: number[]) {
   return [pt1, [pt1[0], pt2[1]], pt2, [pt2[0], pt1[1]], pt1];
 }
+
+export function isGlobeView(views: MapRendererProps["views"]) {
+  const firstView = Array.isArray(views) ? views[0] : views;
+  return firstView instanceof GlobeView;
+}