Open full window; show on map; footprints with image centres

README.md

@@ -30,6 +30,8 @@ panel: dataset
   -> app.js:        MapLibre globe; cursor shows the cell and whether it has a sample
 click a cell -> its footprint rows (page index) -> the image file on Hugging Face (one row group per sample)
   -> samples.js: that row group's thumbnail column -> panel, with acquisition time, cloud cover or orbit, product
+the shown image: Open (full window, zoom and pan) or Show on map (over its footprint, opacity slider): every image
+  is 10,680 m square in its UTM zone, centred on the sample's centre_lat, centre_lon, so corners need no band read
 in the background: the other datasets' footprints once the first is drawn; after a click, the same cell's samples
   and first thumbnail in the other datasets (kept, so switching dataset shows them at once)
 ```
@@ -45,7 +47,7 @@ in the background: the other datasets' footprints once the first is drawn; after
 | `parquet.js` | range requests for hyparquet, with bytes and time counted |
 | `tiles.js`, `labels.js`, `places.json` | copied from the Climate Globe: cells and tiles, place names |
 | `build_index.py` | Core `metadata.parquet` -> `footprints/<name>.parquet` and `footprints/datasets.json` |
-| `footprints/` | built files, not in git: uploaded to the Space once (S2L2A and S2L1C 20.5 MB each, S1RTC 12.1 MB, DEM 4.5 MB) |
+| `footprints/` | built files, not in git: uploaded to the Space once (S2L2A and S2L1C 32.9 MB each, S1RTC 20.6 MB, DEM 14.5 MB) |
 
 ## Reads
 

app.js

@@ -5,9 +5,11 @@
 //   click -> cell -> its samples (footprint rows, page index) -> image file on Hugging Face, one row group,
 //     thumbnail column (samples.js) -> panel
 //   cursor -> cell under it -> outline + name, position, whether it has a sample
+//   the shown image -> full window (zoom, pan) or on the map over its footprint (corners from its UTM centre)
 
 import * as maplibregl from 'https://cdn.jsdelivr.net/npm/maplibre-gl@6.14.0/dist/maplibre-gl.mjs'
 import { feature } from 'https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/+esm'
+import proj4 from 'https://cdn.jsdelivr.net/npm/proj4@2.12.1/+esm'
 import { DATASETS, loadCoverage, samplesAt } from './footprints.js'
 import { placeLabels } from './labels.js'
 import { imageUrl, loadThumbnail } from './samples.js'
@@ -278,13 +280,14 @@ map.on('click', e => {
 $('pick-clear').addEventListener('click', () => {
   pick.cell = null; pick.ticket++; $('pick').hidden = true
   map.getSource('selected').setData({ type: 'FeatureCollection', features: [] })
+  showOnMap()
 })
 
 /** The selected cell in the shown dataset: its samples, then the first one's thumbnail. */
 async function pickCell() {
   const ticket = ++pick.ticket, { row, col } = pick.cell, name = state.name
   pick.samples = []; pick.thumbnail = null
-  showThumbnail(null, 'Looking up the cell…')
+  showThumbnail(null, 'Looking up the cell…'); showOnMap()
   $('choices').replaceChildren(); $('pick-meta').replaceChildren(); $('pick-stats').textContent = ''
   let samples
   try {
@@ -316,8 +319,9 @@ async function choose(i) {
   try {
     const [loading, fresh] = thumbnailOf(state.name, sample), t = await loading
     if (ticket !== pick.ticket) return
-    pick.thumbnail = t
+    pick.thumbnail = { ...t, sample }
     showThumbnail(t.src)
+    showOnMap()
     meta(sample, t.productId, info)
     $('pick-stats').textContent = `Thumbnail: ${kb(t.stats.bytes)} in ${t.stats.requests} requests · ${secs(t.stats.read)}` +
       (fresh ? '' : ' (loaded before)')
@@ -329,10 +333,84 @@ async function choose(i) {
 
 function showThumbnail(src, note = '') {
   $('thumb').hidden = !src
+  $('image-actions').hidden = !src
   if (src) $('thumb').src = src
   $('thumb-note').textContent = src ? '' : note
 }
 
+// ---- the shown image on the map -------------------------------------------------------------------------------
+// Every Core image is 10,680 m square in its UTM zone, centred on the sample's centre_lat, centre_lon (checked
+// against the GeoTIFF bounds), north up: its corners are the centre +- 5,340 m, back in longitude and latitude.
+
+const HALF = 5340
+
+/** Corners of a sample's image, [lon, lat], from top left clockwise (as MapLibre's image source wants them). */
+function corners(s) {
+  const zone = s.epsg % 100, south = s.epsg > 32700
+  const utm = proj4(`+proj=utm +zone=${zone}${south ? ' +south' : ''} +datum=WGS84 +units=m +no_defs`)
+  const [x, y] = utm.forward([s.centre_lon, s.centre_lat])
+  return [[x - HALF, y + HALF], [x + HALF, y + HALF], [x + HALF, y - HALF], [x - HALF, y - HALF]].map(p => utm.inverse(p))
+}
+
+/** The shown thumbnail over its footprint when "Show on map" is ticked; otherwise none. */
+function showOnMap() {
+  const t = pick.thumbnail, on = $('on-map').checked && t && pick.cell
+  if (map.getLayer('sample')) map.removeLayer('sample')
+  if (map.getSource('sample')) map.removeSource('sample')
+  if (!on) return
+  map.addSource('sample', { type: 'image', url: t.src, coordinates: corners(t.sample) })
+  map.addLayer({ id: 'sample', type: 'raster', source: 'sample',
+    paint: { 'raster-opacity': Number($('opacity').value) / 100, 'raster-fade-duration': 0 } }, 'coast')
+}
+$('on-map').addEventListener('change', showOnMap)
+$('opacity').addEventListener('input', () => {
+  if (map.getLayer('sample')) map.setPaintProperty('sample', 'raster-opacity', Number($('opacity').value) / 100)
+})
+window.sampleCorners = () => (pick.thumbnail ? corners(pick.thumbnail.sample) : null)     // for automated checks
+
+// ---- the shown image in the full window -----------------------------------------------------------------------
+//   opens fitted to the window; scroll zooms about the cursor, drag pans, Esc or Close closes
+
+const view = { scale: 1, x: 0, y: 0, drag: null }
+
+function openImage() {
+  if (!pick.thumbnail) return
+  const img = $('lightbox-img')
+  img.src = pick.thumbnail.src
+  $('lightbox-title').textContent = `${pick.cell.name} · ${state.info.label}` +
+    (pick.thumbnail.sample.timestamp ? ` · ${when(pick.thumbnail.sample.timestamp)}` : '')
+  $('lightbox').hidden = false
+  img.decode().then(() => {
+    const w = innerWidth, h = innerHeight - 44, s = Math.min(w / img.naturalWidth, h / img.naturalHeight)
+    Object.assign(view, { scale: s, x: (w - img.naturalWidth * s) / 2, y: 44 + (h - img.naturalHeight * s) / 2 })
+    place()
+  })
+}
+const place = () => { $('lightbox-img').style.transform = `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }
+const closeImage = () => { $('lightbox').hidden = true }
+
+$('thumb').addEventListener('click', openImage)
+$('open-image').addEventListener('click', openImage)
+$('lightbox-close').addEventListener('click', closeImage)
+document.addEventListener('keydown', e => { if (e.key === 'Escape' && !$('lightbox').hidden) closeImage() })
+$('lightbox').addEventListener('wheel', e => {
+  e.preventDefault()
+  const k = Math.exp(-e.deltaY * 0.0015), s = Math.min(Math.max(view.scale * k, 0.05), 40)
+  view.x = e.clientX - (e.clientX - view.x) * (s / view.scale)
+  view.y = e.clientY - (e.clientY - view.y) * (s / view.scale)
+  view.scale = s; place()
+}, { passive: false })
+$('lightbox').addEventListener('pointerdown', e => {
+  if (e.target.closest('button')) return
+  view.drag = [e.clientX - view.x, e.clientY - view.y]
+  $('lightbox').classList.add('dragging'); $('lightbox').setPointerCapture(e.pointerId)
+})
+$('lightbox').addEventListener('pointermove', e => {
+  if (!view.drag) return
+  view.x = e.clientX - view.drag[0]; view.y = e.clientY - view.drag[1]; place()
+})
+$('lightbox').addEventListener('pointerup', () => { view.drag = null; $('lightbox').classList.remove('dragging') })
+
 /** "20200213T023821" -> "2020-02-13 02:38 UTC". */
 const when = t => `${t.slice(0, 4)}-${t.slice(4, 6)}-${t.slice(6, 8)} ${t.slice(9, 11)}:${t.slice(11, 13)} UTC`
 

build_index.py

@@ -3,7 +3,9 @@
     <core>/Core-<name>/metadata.parquet (one row per sample: grid_row_u, grid_col_r, parquet_url, parquet_row, ...)
       -> parquet_url -> part number (every URL is <base>/images/part_NNNNN.parquet; checked)
       -> rows sorted by grid_row_u, grid_col_r
-      -> footprints/<name>.parquet: grid_row_u, grid_col_r, part, parquet_row, timestamp, + cloud_cover / orbit_state
+      -> footprints/<name>.parquet: grid_row_u, grid_col_r, part, parquet_row, timestamp, + cloud_cover / orbit_state,
+         centre_lat, centre_lon, epsg: every image is 10,680 m square in its UTM zone (epsg), centred there exactly
+         (checked against the GeoTIFF bounds), so the app places it on the map without reading a band
          row groups of 65,536 rows with statistics and a page index, no value dictionaries (as the climate files):
          the app reads the two position columns for the coverage map and, for a click, the page holding the cell
       -> footprints/datasets.json: per dataset its label, the URL base of its image files, its samples
@@ -31,7 +33,7 @@ def index(metadata: Path, name: str) -> tuple[pa.Table, str]:
     """The footprint table of one dataset, and the URL base of its image files."""
     have = pq.read_schema(metadata).names
     table = pq.read_table(metadata, columns=["grid_row_u", "grid_col_r", "parquet_url", "parquet_row",
-                                             *[c for c in EXTRA if c in have]])
+                                             *[c for c in EXTRA if c in have], "centre_lat", "centre_lon", "crs"])
     base = f"https://huggingface.co/datasets/Major-TOM/Core-{name}/resolve/main/images/"
     urls = table.column("parquet_url").to_pylist()
     part = [re.fullmatch(re.escape(base) + r"part_(\d{5})\.parquet", u) for u in urls]
@@ -41,15 +43,26 @@ def index(metadata: Path, name: str) -> tuple[pa.Table, str]:
                     "grid_col_r": pc.cast(table.column("grid_col_r"), pa.int16()),
                     "part": pa.array(np.array([int(m[1]) for m in part], np.int16)),
                     "parquet_row": pc.cast(table.column("parquet_row"), pa.int16()),
-                    **{c: table.column(c) for c in EXTRA if c in have}})
+                    **{c: table.column(c) for c in EXTRA if c in have},
+                    "centre_lat": pc.cast(table.column("centre_lat"), pa.float32()),     # 4e-6 degrees: under 1 m
+                    "centre_lon": pc.cast(table.column("centre_lon"), pa.float32()),
+                    "epsg": pa.array(epsg(table.column("crs").to_pylist()), pa.int16())})
     if "cloud_cover" in out.column_names:
         out = out.set_column(out.schema.get_field_index("cloud_cover"), "cloud_cover",
                              pc.cast(out.column("cloud_cover"), pa.float32()))
     return out.sort_by([("grid_row_u", "ascending"), ("grid_col_r", "ascending")]), base
 
 
+def epsg(crs: list[str]) -> np.ndarray:
+    """EPSG codes from the metadata's crs strings ("EPSG:32701"; Core-S1RTC writes "EPSG:EPSG:32752")."""
+    codes = np.array([int(c.rsplit(":", 1)[1]) for c in crs])
+    if not np.all(((codes > 32600) & (codes <= 32660)) | ((codes > 32700) & (codes <= 32760))):
+        raise ValueError("a crs outside the UTM zones (EPSG 32601-32660, 32701-32760)")
+    return codes.astype(np.int16)
+
+
 def write(table: pa.Table, path: Path) -> None:
-    keys = ["grid_row_u", "grid_col_r", "orbit_state"]
+    keys = ["grid_row_u", "grid_col_r", "orbit_state", "epsg"]
     pq.write_table(table, path, row_group_size=ROW_GROUP, compression="zstd", write_statistics=True,
                    write_page_index=True, use_dictionary=[c for c in keys if c in table.column_names],
                    data_page_size=4096)

footprints/DEM.parquet

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6b4d67e3b790f7f216374a27a3b9289db9fd63e260e4ab9ffc5e9d15ba057347
-size 4482569
+oid sha256:cfbe11fe9c585e28f2d2176568d5b2de0c1d47253535a5685878e17c7b70991b
+size 14548640

footprints/S1RTC.parquet

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3089bd10a123b5052a5ee5a8c2956822f182c7401231b2f67cb9c30a84322ac3
-size 12103409
+oid sha256:f1be77107a4da96a4534bd862b5ce3db5868d21c2e2097830bf72a2f3b102c49
+size 20603249

footprints/S2L1C.parquet

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1cc52c2e3b5ad3cf415b136eaa8cd93761b8fec5a9828d7a00ad88f5d1159752
-size 20484283
+oid sha256:70d02ba0a6c61266afb0c1341b7b5bf21b05ab835c062c3dbacbd53b9948afef
+size 32944059

footprints/S2L2A.parquet

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1cc52c2e3b5ad3cf415b136eaa8cd93761b8fec5a9828d7a00ad88f5d1159752
-size 20484283
+oid sha256:70d02ba0a6c61266afb0c1341b7b5bf21b05ab835c062c3dbacbd53b9948afef
+size 32944059

footprints/datasets.json

@@ -9,7 +9,10 @@
    "part",
    "parquet_row",
    "timestamp",
-   "cloud_cover"
+   "cloud_cover",
+   "centre_lat",
+   "centre_lon",
+   "epsg"
   ]
  },
  "S2L1C": {
@@ -22,7 +25,10 @@
    "part",
    "parquet_row",
    "timestamp",
-   "cloud_cover"
+   "cloud_cover",
+   "centre_lat",
+   "centre_lon",
+   "epsg"
   ]
  },
  "S1RTC": {
@@ -35,7 +41,10 @@
    "part",
    "parquet_row",
    "timestamp",
-   "orbit_state"
+   "orbit_state",
+   "centre_lat",
+   "centre_lon",
+   "epsg"
   ]
  },
  "DEM": {
@@ -46,7 +55,10 @@
    "grid_row_u",
    "grid_col_r",
    "part",
-   "parquet_row"
+   "parquet_row",
+   "centre_lat",
+   "centre_lon",
+   "epsg"
   ]
  }
 }

index.html

@@ -82,6 +82,25 @@
     margin-bottom: 10px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 13px; }
   #thumb { width: 100%; height: 100%; object-fit: contain; display: block; }
   #thumb[hidden] { display: none; }
+  #thumb { cursor: zoom-in; }
+  .image-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: -2px 0 10px; font-size: 13px; }
+  .image-actions button { font: inherit; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px;
+    background: var(--surface); color: var(--ink); cursor: pointer; }
+  .image-actions button:hover { border-color: var(--mt-blue); color: var(--mt-blue); }
+  .image-actions label { display: flex; align-items: center; gap: 6px; color: var(--ink-2); cursor: pointer; }
+  .image-actions input[type=checkbox], .image-actions input[type=range] { accent-color: var(--mt-blue); }
+  .image-actions input[type=range] { width: 90px; }
+  .image-actions[hidden] { display: none; }
+  #lightbox { position: fixed; inset: 0; z-index: 10; background: rgba(17,24,39,.88); overflow: hidden; cursor: grab;
+    touch-action: none; }
+  #lightbox[hidden] { display: none; }
+  #lightbox.dragging { cursor: grabbing; }
+  #lightbox img { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: pixelated; user-select: none;
+    -webkit-user-drag: none; }
+  #lightbox-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; gap: 12px;
+    align-items: center; padding: 10px 16px; color: #fff; font: 13px var(--mono); background: rgba(17,24,39,.6); }
+  #lightbox-bar button { font: 13px var(--sans); padding: 4px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px;
+    background: transparent; color: #fff; cursor: pointer; }
   #choices { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
   #choices:empty { display: none; }
   #choices button { font: 12px var(--mono); padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px;
@@ -156,6 +175,11 @@
       <div class="pick-name"><b id="pick-cell"></b><span id="pick-pos"></span></div>
       <div id="choices"></div>
       <div id="thumb-wrap"><img id="thumb" alt="Thumbnail of the selected sample" hidden><span id="thumb-note"></span></div>
+      <div class="image-actions" id="image-actions" hidden>
+        <button id="open-image">Open</button>
+        <label><input type="checkbox" id="on-map"> Show on map</label>
+        <label>Opacity <input type="range" id="opacity" min="0" max="100" value="100" aria-label="Opacity on the map"></label>
+      </div>
       <dl id="pick-meta"></dl>
       <div class="tiny" id="pick-stats"></div>
     </section>
@@ -188,6 +212,12 @@
   </aside>
 </main>
 
+<div id="lightbox" hidden role="dialog" aria-label="Selected image">
+  <img id="lightbox-img" alt="">
+  <div id="lightbox-bar"><span id="lightbox-title"></span><span>scroll to zoom · drag to pan · Esc to close
+    <button id="lightbox-close">Close</button></span></div>
+</div>
+
 <script>
   // A private Space is shown in huggingface.co's frame through a signed link (?__sign=...), and only requests that
   // carry the signature are let through there: modules imported by other modules would not. So every file of the app