+
+
+ Select a colormap:
+
+ setSelected(e.target.value)}
+ style={{
+ padding: "0.5rem",
+ borderRadius: "4px",
+ border: "1px solid var(--ifm-color-emphasis-300)",
+ }}
+ >
+ {colormaps.map((cm) => (
+
+ {cm}
+
+ ))}
+
+
+
+
+
+
+ 0
+ 0.5
+ 1
+
+
+
+ The {selected} colormap is commonly used for{" "}
+ {selected === "terrain"
+ ? "elevation and topographic data"
+ : selected === "coolwarm"
+ ? "diverging data like temperature anomalies"
+ : "sequential data visualization"}
+ .
+
+
+ );
+}
diff --git a/docs/src/components/Map/COGMap.tsx b/docs/src/components/Map/COGMap.tsx
new file mode 100644
index 00000000..996b05e5
--- /dev/null
+++ b/docs/src/components/Map/COGMap.tsx
@@ -0,0 +1,67 @@
+import type { DeckProps } from "@deck.gl/core";
+import { MapboxOverlay } from "@deck.gl/mapbox";
+import { COGLayer, proj } from "@developmentseed/deck.gl-geotiff";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { useRef } from "react";
+import type { MapRef } from "react-map-gl/maplibre";
+import { Map as MaplibreMap, useControl } from "react-map-gl/maplibre";
+
+function DeckGLOverlay(props: DeckProps) {
+ const overlay = useControl