feat: add image export, style improvements

Author: hrodmn

index.html

@@ -13,7 +13,24 @@
     <div id="controls"></div>
 
     <div id="brand">
-      <div class="brand-name">titiler-cmr</div>
+      <div class="brand-header">
+        <div class="brand-name">titiler-cmr</div>
+        <div class="brand-actions">
+          <button id="share-btn" title="Copy link" aria-label="Copy link">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+            </svg>
+          </button>
+          <button id="export-btn" title="Export PNG" aria-label="Export PNG">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+              <polyline points="7 10 12 15 17 10"/>
+              <line x1="12" y1="15" x2="12" y2="3"/>
+            </svg>
+          </button>
+        </div>
+      </div>
       <div class="brand-links">
         <a href="https://developmentseed.org/titiler-cmr" target="_blank" rel="noopener">docs</a>
         <a href="https://github.com/developmentseed/titiler-cmr-browser" target="_blank" rel="noopener">source</a>

src/config.ts

@@ -97,6 +97,8 @@ export type QueryParamConfig =
 
 export type CollectionConfig = {
   label: string;
+  /** Short slug included in export filenames (useful when a dataset has multiple collections). */
+  slug?: string;
   collectionConceptId: string;
   assetsRegex?: string;
   minzoom: number;
@@ -132,6 +134,7 @@ export const DATASETS: DatasetConfig[] = [
     collection: [
       {
         label: "HLSS30 (Sentinel-2)",
+        slug: "hlss30",
         collectionConceptId: "C2021957295-LPCLOUD",
         assetsRegex: "B[0-9][0-9A-Za-z]",
         backend: "rasterio",
@@ -175,6 +178,7 @@ export const DATASETS: DatasetConfig[] = [
       },
       {
         label: "HLSL30 (Landsat 8/9)",
+        slug: "hlsl30",
         collectionConceptId: "C2021957657-LPCLOUD",
         assetsRegex: "B[0-9][0-9]",
         minzoom: 5,
@@ -227,8 +231,8 @@ export const DATASETS: DatasetConfig[] = [
       backend: "xarray",
       minzoom: 6,
       maxzoom: 13,
-      attribution: '<a href="https://nisar.jpl.nasa.gov/" target="_blank">NISAR GCOV (NASA JPL / ASF DAAC)</a>',
-      date: { mode: "range" },
+      attribution: '<a href="https://nisar.jpl.nasa.gov/" target="_blank">NISAR GCOV (NASA JPL / ISRO / ASF DAAC)</a>',
+      date: { mode: "range", default: ["2026-01-01", "2026-04-01"] },
       queryParams: [
         {
           type: "attribute",
@@ -316,7 +320,7 @@ export const DATASETS: DatasetConfig[] = [
       maxzoom: 7,
       attribution:
         '<a href="https://ceos.org/gst/micasa.html" target="_blank">MiCASA (NASA GES DISC)</a>',
-      date: { mode: "single" },
+      date: { mode: "single", default: "2024-12-31" },
       renders: [
         {
           label: "Net Primary Productivity (NPP)",

src/controls.ts

@@ -124,8 +124,12 @@ function renderDateControls(
     container.appendChild(input);
     inputs = [input];
     fetchMetadata(collection.collectionConceptId).then((umm) => {
-      const begin = umm?.TemporalExtents?.[0]?.RangeDateTimes?.[0]?.BeginningDateTime;
-      if (begin) inputs.forEach((el) => (el.min = begin.slice(0, 10)));
+      const range = umm?.TemporalExtents?.[0]?.RangeDateTimes?.[0];
+      if (range?.BeginningDateTime) inputs.forEach((el) => (el.min = range.BeginningDateTime!.slice(0, 10)));
+      if (range?.EndingDateTime && !range.EndsAtPresentFlag) {
+        const endYMD = range.EndingDateTime.slice(0, 10);
+        inputs.forEach((el) => { if (endYMD < el.max) el.max = endYMD; });
+      }
     });
     return () => {
       const d = input.value || defaultVal;
@@ -144,8 +148,12 @@ function renderDateControls(
     container.appendChild(input);
     inputs = [input];
     fetchMetadata(collection.collectionConceptId).then((umm) => {
-      const begin = umm?.TemporalExtents?.[0]?.RangeDateTimes?.[0]?.BeginningDateTime;
-      if (begin) inputs.forEach((el) => (el.min = begin.slice(0, 7)));
+      const range = umm?.TemporalExtents?.[0]?.RangeDateTimes?.[0];
+      if (range?.BeginningDateTime) inputs.forEach((el) => (el.min = range.BeginningDateTime!.slice(0, 7)));
+      if (range?.EndingDateTime && !range.EndsAtPresentFlag) {
+        const endYM = range.EndingDateTime.slice(0, 7);
+        inputs.forEach((el) => { if (endYM < el.max) el.max = endYM; });
+      }
     });
     return () => monthToDatetimeRange(input.value || defaultMonth);
   } else {
@@ -169,8 +177,12 @@ function renderDateControls(
     container.appendChild(endInput);
     inputs = [startInput, endInput];
     fetchMetadata(collection.collectionConceptId).then((umm) => {
-      const begin = umm?.TemporalExtents?.[0]?.RangeDateTimes?.[0]?.BeginningDateTime;
-      if (begin) inputs.forEach((el) => (el.min = begin.slice(0, 10)));
+      const range = umm?.TemporalExtents?.[0]?.RangeDateTimes?.[0];
+      if (range?.BeginningDateTime) inputs.forEach((el) => (el.min = range.BeginningDateTime!.slice(0, 10)));
+      if (range?.EndingDateTime && !range.EndsAtPresentFlag) {
+        const endYMD = range.EndingDateTime.slice(0, 10);
+        inputs.forEach((el) => { if (endYMD < el.max) el.max = endYMD; });
+      }
     });
     return () => {
       const s = startInput.value || defaultStart;

src/export.ts

@@ -0,0 +1,55 @@
+import type { Map } from "maplibre-gl";
+
+/**
+ * Captures the current map canvas and triggers a PNG download.
+ * If `attribution` is provided (an HTML string), it is stripped to plain text
+ * and rendered as an overlay in the bottom-right corner of the image.
+ * If `label` is provided it is slugified and included in the filename.
+ * Requires the map to be initialized with `preserveDrawingBuffer: true`.
+ */
+export function exportMapImage(
+  map: Map,
+  attribution?: string,
+  datasetSlug?: string,
+  collectionSlug?: string,
+  label?: string,
+  dateStr?: string
+): void {
+  const mapCanvas = map.getCanvas();
+  const { width, height } = mapCanvas;
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d")!;
+
+  ctx.drawImage(mapCanvas, 0, 0);
+
+  if (attribution) {
+    const text = attribution.replace(/<[^>]*>/g, "");
+    const fontSize = 11;
+    const padding = 5;
+    ctx.font = `${fontSize}px system-ui, sans-serif`;
+    const textWidth = ctx.measureText(text).width;
+    const boxW = textWidth + padding * 2;
+    const boxH = fontSize + padding * 2;
+    const x = width - boxW - 4;
+    const y = height - boxH - 4;
+
+    ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+    ctx.fillRect(x, y, boxW, boxH);
+    ctx.fillStyle = "#e8e8e8";
+    ctx.fillText(text, x + padding, y + padding + fontSize - 1);
+  }
+
+  const datasetPart = datasetSlug ? `-${datasetSlug}` : "";
+  const collectionPart = collectionSlug ? `-${collectionSlug}` : "";
+  const labelPart = label
+    ? "-" + label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/-+$/, "")
+    : "";
+  const datePart = dateStr ? `-${dateStr}` : "";
+  const link = document.createElement("a");
+  link.download = `titiler-cmr${datasetPart}${collectionPart}${labelPart}${datePart}.png`;
+  link.href = canvas.toDataURL("image/png");
+  link.click();
+}

src/layers.ts

@@ -20,6 +20,7 @@ function removeCmrLayers(map: Map): void {
   }
 }
 
+
 /**
  * Builds the shared URLSearchParams for a TileJSON request.
  * Handles string | string[] param values and repeated `attribute` filters.
@@ -113,4 +114,5 @@ export function updateLayer(map: Map, state: ControlState): void {
     p.set("minzoom", String(collection.minzoom));
     addRasterLayer(map, "cmr-0", `${base}?${p}`, collection.minzoom, undefined, collection.attribution);
   }
+
 }

src/loading.ts

@@ -1,21 +1,38 @@
 import type { Map } from "maplibre-gl";
 
+/**
+ * Sets visibility on all symbol layers in the current style (basemap labels).
+ */
+function setBasemapLabelsVisible(map: Map, visible: boolean): void {
+  const visibility = visible ? "visible" : "none";
+  for (const layer of map.getStyle().layers ?? []) {
+    if (layer.type === "symbol") {
+      map.setLayoutProperty(layer.id, "visibility", visibility);
+    }
+  }
+}
+
 /**
  * Shows a loading indicator while map tiles are being fetched, but only when
  * the map is at or above the active layer's minimum zoom (below that, no data
  * tiles are requested). `getMinZoom` is called on each event so it always
  * reflects the currently selected collection.
+ *
+ * Also toggles basemap labels: shown while tiles are loading (so the map
+ * isn't a blank dark canvas), hidden once tiles finish rendering.
  */
 export function initLoading(map: Map, getMinZoom: () => number): void {
   const el = document.getElementById("loading")!;
 
   map.on("dataloading", () => {
     if (map.getZoom() >= getMinZoom()) {
       el.classList.add("visible");
+      setBasemapLabelsVisible(map, true);
     }
   });
 
   map.on("idle", () => {
     el.classList.remove("visible");
+    setBasemapLabelsVisible(map, map.getZoom() < getMinZoom());
   });
 }

src/main.ts

@@ -14,23 +14,23 @@ import { initZoomGuard } from "./zoom-guard";
 import { initAbout } from "./about";
 import { initCollectionDetails } from "./collection-details";
 import { decodeState, encodeState, getRawDateFromDom } from "./url-state";
+import { exportMapImage } from "./export";
 
 initAbout();
 initCollectionDetails();
 
-// Add share button to brand links
-const shareBtn = document.createElement("button");
-shareBtn.id = "share-btn";
-shareBtn.textContent = "copy link";
+// Wire share button (pre-existing in HTML)
+const shareBtn = document.getElementById("share-btn") as HTMLButtonElement;
 shareBtn.addEventListener("click", () => {
   navigator.clipboard.writeText(window.location.href).then(() => {
-    shareBtn.textContent = "copied!";
+    shareBtn.title = "Copied!";
+    shareBtn.style.color = "#64a0ff";
     setTimeout(() => {
-      shareBtn.textContent = "copy link";
+      shareBtn.title = "Copy link";
+      shareBtn.style.color = "";
     }, 2000);
   });
 });
-document.querySelector(".brand-links")!.appendChild(shareBtn);
 
 const initialUrlState = decodeState();
 
@@ -39,9 +39,27 @@ const map = new maplibregl.Map({
   style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
   center: [0, 20],
   zoom: 2,
+  canvasContextAttributes: { preserveDrawingBuffer: true },
 });
 
 map.addControl(new maplibregl.NavigationControl(), "bottom-right");
+map.addControl(
+  new maplibregl.GeolocateControl({
+    positionOptions: { enableHighAccuracy: true },
+    fitBoundsOptions: { maxZoom: 10 },
+  }),
+  "bottom-right"
+);
+
+document.getElementById("export-btn")!.addEventListener("click", () => {
+  const { collection, render } = getState();
+  const { datasetId } = getUrlMeta();
+  const rawDate = getRawDateFromDom(collection.date.mode);
+  const dateStr = rawDate.s && rawDate.e
+    ? `${rawDate.s}_${rawDate.e}`
+    : (rawDate.dt ?? undefined);
+  exportMapImage(map, collection.attribution, datasetId, collection.slug, render.label, dateStr);
+});
 
 let mapReady = false;
 
@@ -59,6 +77,8 @@ function updateUrl() {
     lng: parseFloat(center.lng.toFixed(4)),
     lat: parseFloat(center.lat.toFixed(4)),
     z: parseFloat(map.getZoom().toFixed(2)),
+    b: parseFloat(map.getBearing().toFixed(1)) || undefined,
+    pt: parseFloat(map.getPitch().toFixed(1)) || undefined,
     p:
       Object.keys(state.extraParams).length > 0
         ? state.extraParams
@@ -106,6 +126,8 @@ map.on("load", () => {
     map.jumpTo({
       center: [initialUrlState.lng, initialUrlState.lat],
       zoom: initialUrlState.z,
+      bearing: initialUrlState.b ?? 0,
+      pitch: initialUrlState.pt ?? 0,
     });
   }
 
@@ -117,3 +139,11 @@ map.on("load", () => {
 map.on("moveend", () => {
   if (mapReady) updateUrl();
 });
+
+map.on("rotateend", () => {
+  if (mapReady) updateUrl();
+});
+
+map.on("pitchend", () => {
+  if (mapReady) updateUrl();
+});

src/style.css

@@ -216,13 +216,46 @@ body {
   padding: 8px 12px;
 }
 
+.brand-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
 .brand-name {
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.02em;
   color: #e8e8e8;
 }
 
+.brand-actions {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+}
+
+.brand-actions button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: #666;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+.brand-actions button:hover {
+  color: #e8e8e8;
+  background: rgba(255, 255, 255, 0.08);
+}
+
 .brand-links {
   display: flex;
   gap: 10px;