feat: add globe view (#282)

Closes #145

Author: gadomski

src/components/header.tsx

@@ -6,6 +6,7 @@ import { uploadFile } from "../utils/upload";
 import { Examples } from "./examples";
 import HrefInput from "./href-input";
 import { ColorModeButton } from "./ui/color-mode";
+import { ProjectionButton } from "./ui/projection";
 
 export default function Header() {
   const setUploadedFile = useStore((store) => store.setUploadedFile);
@@ -36,6 +37,7 @@ export default function Header() {
           Examples
         </Button>
       </Examples>
+      <ProjectionButton variant={"surface"} />
       <ColorModeButton variant={"surface"} />
     </HStack>
   );

src/components/map.tsx

@@ -32,10 +32,12 @@ export default function Map() {
     "positron-gl-style",
     "dark-matter-gl-style"
   );
+  const projection = useStore((store) => store.projection);
   const value = useStore((store) => store.value);
   const collections = useStore((store) => store.collections);
   const setBbox = useStore((store) => store.setBbox);
   const cogHref = useStore((store) => store.cogHref);
+  const cogSources = useStore((store) => store.cogSources);
   const pagedCogSources = useStore((store) => store.pagedCogSources);
   const hoveredItem = useStore((store) => store.hoveredItem);
   const pickedItem = useStore((store) => store.pickedItem);
@@ -185,15 +187,15 @@ export default function Map() {
           })
     );
 
-  if (cogHref)
+  if (cogHref && projection === "mercator")
     layers.push(
       new COGLayer({
         id: "cog-" + cogHref,
         geotiff: cogHref,
         geoKeysParser,
       })
     );
-  else if (visualizeItems && pagedCogSources)
+  else if (visualizeItems && pagedCogSources && projection === "mercator")
     pagedCogSources.forEach((page, i) => {
       if (page)
         layers.push(
@@ -214,6 +216,24 @@ export default function Map() {
           })
         );
     });
+  else if (visualizeItems && cogSources && projection === "mercator")
+    layers.push(
+      new MosaicLayer({
+        id: "cog-mosaic",
+        sources: cogSources,
+        getSource: async (source) => {
+          return source.assets.data.href;
+        },
+        renderSource: (source, { data, signal }) => {
+          return new COGLayer({
+            id: `cog-${source.id}`,
+            geotiff: data,
+            geoKeysParser,
+            signal,
+          });
+        },
+      })
+    );
 
   return (
     <MaplibreMap
@@ -224,6 +244,7 @@ export default function Map() {
         latitude: 0,
         zoom: 1,
       }}
+      projection={projection}
       mapStyle={`https://basemaps.cartocdn.com/gl/${mapStyle}/style.json`}
       style={{ zIndex: 0 }}
       onLoad={() => setIsLoaded(true)}

src/components/ui/projection.tsx

@@ -0,0 +1,30 @@
+import type { IconButtonProps } from "@chakra-ui/react";
+import { IconButton } from "@chakra-ui/react";
+import * as React from "react";
+import { LuGlobe, LuMap } from "react-icons/lu";
+import { useStore } from "../../store";
+
+function ProjectionIcon() {
+  const projection = useStore((store) => store.projection);
+  return projection === "globe" ? <LuGlobe /> : <LuMap />;
+}
+
+interface ProjectionButtonProps extends Omit<IconButtonProps, "aria-label"> {}
+
+export const ProjectionButton = React.forwardRef<
+  HTMLButtonElement,
+  ProjectionButtonProps
+>(function ProjectionButton(props, ref) {
+  const toggleProjection = useStore((store) => store.toggleProjection);
+  return (
+    <IconButton
+      onClick={toggleProjection}
+      variant="ghost"
+      aria-label="Toggle projection"
+      ref={ref}
+      {...props}
+    >
+      <ProjectionIcon />
+    </IconButton>
+  );
+});

src/components/value/items.tsx

@@ -37,6 +37,7 @@ export default function Items({ items }: { items: StacItem[] }) {
   const searchedItems = useStore((store) => store.searchedItems);
   const itemSource = useStore((store) => store.itemSource);
   const setItemSource = useStore((store) => store.setItemSource);
+  const projection = useStore((store) => store.projection);
 
   const hasStatic = staticItems && staticItems.length > 0;
   const hasSearched = searchedItems && searchedItems.length > 0;
@@ -141,6 +142,7 @@ export default function Items({ items }: { items: StacItem[] }) {
               onClick={() => setVisualizeItems(!visualizeItems)}
               size={"xs"}
               variant={"ghost"}
+              disabled={projection === "globe"}
             >
               {visualizeItems ? <LuEye /> : <LuEyeClosed />}
               {visualizeItems

src/store/index.ts

@@ -9,6 +9,7 @@ import { createDatetimeSlice, type DatetimeState } from "./datetime";
 import { createHrefSlice, type HrefState } from "./href";
 import { createInputSlice, type InputState } from "./input";
 import { createItemsSlice, type ItemsState } from "./items";
+import { createMapSlice, type MapState } from "./map";
 import {
   createStacGeoparquetState,
   type StacGeoparquetState,
@@ -33,6 +34,7 @@ export interface State
     UploadedFileState,
     ConnectionState,
     DatetimeState,
+    MapState,
     StacGeoparquetState {
   fillColor: [number, number, number, number];
   lineColor: [number, number, number, number];
@@ -53,6 +55,7 @@ export const useStore = create<State>((...a) => ({
   ...createStacGeoparquetState(...a),
   ...createCatalogsSlice(...a),
   ...createDatetimeSlice(...a),
+  ...createMapSlice(...a),
   fillColor: [207, 63, 2, 50] as [number, number, number, number],
   lineColor: [207, 63, 2, 100] as [number, number, number, number],
   lineWidth: 2,

src/store/map.ts

@@ -0,0 +1,20 @@
+import type { StateCreator } from "zustand";
+import type { State } from ".";
+
+export type Projection = "mercator" | "globe";
+
+export interface MapState {
+  projection: Projection;
+  setProjection: (projection: Projection) => void;
+  toggleProjection: () => void;
+}
+
+export const createMapSlice: StateCreator<State, [], [], MapState> = (
+  set,
+  get
+) => ({
+  projection: "mercator",
+  setProjection: (projection) => set({ projection }),
+  toggleProjection: () =>
+    set({ projection: get().projection === "mercator" ? "globe" : "mercator" }),
+});