PageSourceSearch

https://www.pmuguda.com/open-sar-triad/

html pmuguda.com collected 2026-10-09 22:08:36 UTC 27,483 bytes, 468 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" data-theme="dark">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>open-sar-triad — SAR discovery console</title>
7  <meta name="description" content="Explore 14,000+ open SAR scenes from ICEYE, Umbra, and Capella on an interactive map. Filter by provider, sensor mode, orbit, date, and area of interest. Download scenes directly." />
8  <link rel="canonical" href="https://www.pmuguda.com/open-sar-triad/" />
9  <meta name="author" content="Pavan Muguda Sanjeevamurthy" />
10  <meta name="theme-color" content="#0d1117" />
11  <meta name="application-name" content="open-sar-triad" />
12  <meta name="apple-mobile-web-app-title" content="SAR Triad" />
13  <meta name="apple-mobile-web-app-capable" content="yes" />
14  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
15  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' https://unpkg.com https://cdn.jsdelivr.net; style-src 'self' https://unpkg.com https://cdn.jsdelivr.net https://fonts.googleapis.com 'unsafe-inline'; font-src https://fonts.gstatic.com; img-src 'self' https: data: blob:; connect-src 'self' https://cdn.jsdelivr.net https://raw.githubusercontent.com https://images.weserv.nl https://umbra-open-data-catalog.s3.amazonaws.com https://umbra-open-data-catalog.s3.us-west-2.amazonaws.com https://capella-open-data.s3.amazonaws.com https://iceye-open-data-catalog.s3.amazonaws.com; manifest-src 'self'; worker-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none';" />
16  <meta http-equiv="X-Content-Type-Options" content="nosniff" />
17  <link rel="manifest" href="manifest.json" />
18  <link rel="icon" href="assets/pwa-icon.svg" type="image/svg+xml" />
19  <link rel="icon" href="assets/pwa-icon-192.png" sizes="192x192" />
20  <link rel="apple-touch-icon" href="assets/pwa-icon-192.png" />
21  <link rel="preconnect" href="https://fonts.googleapis.com" />
22  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
23  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@500;600;700&display=swap" rel="stylesheet" />
24  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
25        integrity="sha384-sHL9NAb7lN7rfvG5lfHpm643Xkcjzp4jFvuavGOndn6pjVqS6ny56CAt3nsEVT4H"
26        crossorigin="anonymous" />
27  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.draw.css"
28        integrity="sha384-NZLkVuBRMEeB4VeZz27WwTRvlhec30biQ8Xx7zG7JJnkvEKRg5qi6BNbEXo9ydwv"
29        crossorigin="anonymous" />
30  <link rel="stylesheet" href="css/style.css?v=landuse-1" />
31  <link rel="stylesheet" href="css/tour.css?v=tour-logo-1" />
32</head>
33<body>
34
35<!-- Detail panel collapse tab (fixed, right side) -->
36<button id="detail-toggle" class="hidden" title="Toggle detail panel">
37  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
38    <path d="M6 3l5 5-5 5"/>
39  </svg>
40</button>
41
42<div class="app" id="app">
43
44  <!-- ═══════════ CONSOLE ═══════════ -->
45  <aside class="console" id="console">
46    <div class="console-scroll">
47
48      <!-- identity -->
49      <div class="brand">
50        <div class="mark" aria-hidden="true">
51          <svg viewBox="0 0 48 48" fill="none">
52            <rect x="3.5" y="3.5" width="41" height="41" stroke="currentColor" stroke-opacity="0.45" stroke-width="1.2"/>
53            <path d="M10 14h28M10 24h28M10 34h28M14 10v28M24 10v28M34 10v28" stroke="currentColor" stroke-opacity="0.16" stroke-width="0.8"/>
54            <polygon points="14,32 29,23 37,29 21,39" fill="currentColor" fill-opacity="0.12" stroke="currentColor" stroke-width="1.2"/>
55            <polygon points="17,28 27,22 32,26 22,32" fill="currentColor" fill-opacity="0.18" stroke="currentColor" stroke-opacity="0.65" stroke-width="0.8"/>
56            <path d="M11 13l22 18" stroke="var(--iceye)" stroke-width="1.6" stroke-linecap="round"/>
57            <path d="M24 9l7 23" stroke="var(--umbra)" stroke-width="1.6" stroke-linecap="round"/>
58            <path d="M38 14l-16 23" stroke="var(--capella)" stroke-width="1.6" stroke-linecap="round"/>
59            <circle cx="11" cy="13" r="2.2" fill="var(--iceye)"/>
60            <circle cx="24" cy="9" r="2.2" fill="var(--umbra)"/>
61            <circle cx="38" cy="14" r="2.2" fill="var(--capella)"/>
62            <circle cx="27" cy="31" r="1.6" fill="currentColor"/>
63          </svg>
64        </div>
65        <div class="brand-txt">
66          <div class="wordmark">open<span class="sep">·</span>
66sar<span class="sep">·</span>triad</div>
67          <div class="brand-sub">
68            <span class="brand-sensor" style="--sc:var(--iceye)">ICEYE</span>
69            <span class="brand-sep">·</span>
70            <span class="brand-sensor" style="--sc:var(--umbra)">Umbra</span>
71            <span class="brand-sep">·</span>
72            <span class="brand-sensor" style="--sc:var(--capella)">Capella</span>
73          </div>
74        </div>
75        <div class="theme-toggle" role="group" aria-label="Theme">
76          <button data-theme-btn="dark" aria-pressed="true">DARK</button>
77          <button data-theme-btn="paper" aria-pressed="false">PAPER</button>
78        </div>
79      </div>
80
81      <!-- FILTERS -->
82      <div class="mod" id="filters-mod">
83        <button class="mod-h tray-toggle" type="button" aria-expanded="true" aria-controls="filters-tray">
84          <span class="ttl">Acquisition</span><span class="rule"></span><span class="meta">FILTERS</span><span class="chev" aria-hidden="true"></span>
85        </button>
86
87        <div class="tray-body acq-tray" id="filters-tray">
88          <div class="field acq-card">
89            <div class="flabel compact"><span>Mode</span><span class="v" id="modeVal">ALL</span></div>
90            <div class="selx">
91              <select id="modeSel">
92                <option value="">All modes</option>
93              </select>
94            </div>
95          </div>
96
97          <div class="field acq-card">
98            <div class="flabel compact"><span>Land use</span><span class="v" id="luVal">ALL</span></div>
99            <div class="lu-chips" id="luChips" role="group" aria-label="Filter by land use"></div>
100            <p class="lu-note">What the map says is at each location, not what the radar shows.</p>
101          </div>
102
103          <div class="field acq-card">
104            <div class="flabel compact"><span>Polarization</span><span class="v" id="polVal">ALL</span></div>
105            <div class="selx">
106              <select id="polSel" aria-label="Filter by polarization">
107                <option value="">All polarizations</option>
108              </select>
109            </div>
110          </div>
111
112          <div class="field acq-card acq-geometry">
113            <div class="seg-line">
114              <span class="k">Orbit</span>
115              <div class="seg" data-group="orbit">
116                <button data-v="all" aria-pressed="true">ALL</button>
117                <button data-v="asc" aria-pressed="false"><span class="ar">↑</span>ASC</button>
118                <button data-v="desc" aria-pressed="false"><span class="ar">↓</span>DESC</button>
119              </div>
120            </div>
121            <div class="seg-line">
122              <span class="k">Look</span>
123              <div class="seg" data-group="look">
124                <button data-v="all" aria-pressed="true">ALL</button>
125                <button data-v="left" aria-pressed="false"><span class="ar">←</span>LEFT</button>
126                <button data-v="right" aria-pressed="false"><span class="ar">→</span>RIGHT</button>
127              </div>
128            </div>
129          </div>
130
131          <button class="btn reset compact-reset" id="resetBtn">↺ Reset filters</button>
132        </div>
133      </div>
134
135      <!-- COVERAGE / STATS -->
136      <div class="mod" id="stats-mod">
137        <button class="mod-h tray-toggle" type="button" aria-expanded="true" aria-controls="stats-tray">
138          <span class="ttl">Coverage</span><span class="rule"></span><span class="meta" id="covTotal">— SCENES</span><span class="chev" aria-hidden="true"></span>
139        </button>
140        <div class="tray-body" id="stats-tray">
141          <div class="cov">
142            <div class="cell" style="--sc:var(--iceye)">
143              <div class="cov-row">
144                <div class="lab">ICEYE</div>
145                <div class="num" data-cov="iceye">—</div>
146              </div>
147              <div class="bar"><i data-covbar="iceye" style="width:0%"></i></div>
148            </div>
149            <div class="cell" style="--sc:var(--umbra)">
150              <div class="cov-row">
151                <div class="lab">Umbra</div>
152                <div class="num" data-cov="umbra">—</div>
153              </div>
154              <div class="bar"><i data-covbar="umbra" style="width:0%"></i></div>
155            </div>
156            <div class="cell" style="--sc:var(--capella)">
157              <div class="cov-row">
158                <div class="lab">Capella</div>
159                <div class="num" data-cov="capella">—</div>
160              </div>
161              <div class="bar"><i data-covbar="capella" style="width:0%"></i></div>
162            </div>
163          </div>
164
165          <div class="section-label">Mode breakdown</div>
166          <div class="modes" id="modes"></div>
167        </div>
168      </div>
169
170      <!-- RECENT ACTIVITY -->
171      <div class="mod" id="recent-mod">
172        <button class="mod-h tray-toggle" type="button" aria-expanded="true" aria-controls="recent-tray">
173          <span class="ttl">Recent</span><span class="rule"></span><span class="meta" id="recentMeta">NEWLY ADDED</span><span class="chev" aria-hidden="true"></span>
174        </button>
175        <div class="tray-body" id="recent-tray">
176          <div class="recent-tabs" id="recent-tabs"></div>
177          <button type="button" id="recentOnlyToggle" class="recent-only-toggle" aria-pressed="false">Show recent only on map</button>
178          <div class="recent-list" id="recentList"></div>
179        </div>
180      </div>
181
182      <!-- DOWNLOAD LIST -->
183      <div class="mod" id="sel-mod">
184        <button class="mod-h tray-toggle" type="button" aria-expanded="true" aria-controls="sel-tray">
185          <span class="ttl">Download list</span><span class="rule"></span><span class="meta" id="selMeta">EMPTY</span><span class="chev" aria-hidden="true"></span>
186        </button>
187        <div class="tray-body" id="sel-tray">
188          <p id="sel-note" class="export-note"></p>
189          <div class="recent-list sel-list" id="selList"></div>
190
191          <div class="format-select dl-format" id="dl-format">
192            <div class="format-label">Data to download</div>
193            <div class="format-chips" id="dl-family-chips" role="group" aria-label="Product families"></div>
194            <button class="fmt-more" id="dl-exact-toggle" type="button" aria-expanded="false" aria-controls="export-fmt-chips">Exact formats</button>
195            <div class="format-chips fmt-exact" id="export-fmt-chips" role="group" aria-label="Exact data formats" hidden></div>
196            <p id="dl-count" class="export-note"></p>
197          </div>
198        </div>
199      </div>
200
201      <!-- EXPORT -->
202      <div class="mod" id="export-mod">
203        <button class="mod-h tray-toggle" type="button" aria-expanded="true" aria-controls="export-tray">
204          <span class="ttl">Export</span><span class="rule"></span><span class="meta">STAC · SH · LINK</span><span class="chev" aria-hidden="true"></span>
205        </button>
206        <div class="tray-body" id="export-tray">
207          <button class="btn ghost" data-export="stac">
208            <span class="gi"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" stroke="currentColor" stroke-width="1.3"/><line x1="2" y1="6" x2="14" y2="6" stroke="currentColor" stroke-width="1.1"/><line x1="6" y1="6" x2="6" y2="14" stroke="currentColor" stroke-width="1.1"/></svg></span>
209            Export as STAC collection
210          </button>
211          <button class="btn ghost" data-export="script">
212            <span class="gi"><svg viewBox="0 0 16 16" fill="none"><path d="M5 4 2 8l3 4M11 4l3 4-3 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
213            Generate download script
214          </button>
215          <button class="btn ghost" data-export="link">
216            <span class="gi"><svg viewBox="0 0 16 16" fill="none"><path d="M6.5 9.5 9.5 6.5M7 4l1-1a3 3 0 0 1 4 4l-1 1M9 12l-1 1a3 3 0 0 1-4-4l1-1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg></span>
217            Copy share link
218          </button>
219        </div>
220      </div>
221
222    </div>
223
224    <div class="cfoot">
225      <div class="cfoot-row">
226        <span>By <a href="https://pmuguda.github.io/" target="_blank" rel="noopener">Pavan Muguda Sanjeevamurthy</a></span>
227        <a class="icon-link" href="https://github.com/pmuguda/open-sar-triad" target="_blank" rel="noopener" aria-label="GitHub">
228          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
229            <path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.18-3.37-1.18-.45-1.15-1.1-1.46-1.1-1.46-.9-.61.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.33 1.08 2.9.83.09-.64.35-1.08.63-1.33-2.22-.25-4.56-1.11-4.56-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02A9.56 9.56 0 0 1 12 7.02c.85 0 1.7.11 2.5.34 1.91-1.29 2.75-1.02 2.75-1.02.55 1.37.2 2.39.1 2.64.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.86v2.55c0 .27.18.58.69.48A10 10 0 0 0 12 2Z"/>
230          </svg>
231        </a>
232        <a class="icon-link" href="https://ko-fi.com/pavan_muguda" target="_blank" rel="noopener" aria-label="Support on Ko-fi">
233          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
234            <path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.793 1.904.989 1.832 2.694.723 4.141zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/>
235          </svg>
236        </a>
237      </div>
238      <div class="cfoot-row">
239        <a class="kofi-link" href="https://ko-fi.com/pavan_muguda" target="_blank" rel="noopener">if it helped, support me on Ko-fi</a>
240      </div>
241    </div>
242  </aside>
243
244  <button class="collapse" id="collapseBtn" aria-label="Toggle console"><span class="cv">‹</span></button>
245
246  <!-- ═══════════ VIEWPORT ═══════════ -->
247  <main class="viewport" id="viewport">
248    <div id="map"></div>
249
250    <!-- top-left map dock: preview controls, then download-list actions -->
251    <div id="map-dock">
252    <div id="drape-ctl" class="hidden">
253      <!-- Header names the scope, exactly as the dock below does: this pane acts
254           on the one draped image, that one acts on the download list. -->
255      <div class="pane-head">Preview</div>
256      <div class="drape-row">
257        <span class="drape-id"></span>
258        <button class="drape-btn" id="drape-toggle" data-tip="Hide this preview" aria-label="Hide or show preview" aria-pressed="false">
259          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
260        </button>
261        <button class="drape-btn" id="drape-fs" data-tip="View fullscreen" aria-label="View fullscreen">
262          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M16 21h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
263        </button>
264        <button class="drape-btn" id="drape-close" data-tip="Remove preview" aria-label="Remove preview">
265          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
266        </button>
267      </div>
268      <div class="drape-row drape-op">
269        <span class="drape-op-label">OPACITY</span>
270        <input type="range" id="drape-opacity" min="30" max="100" value="100" aria-label="Preview opacity">
271      </div>
272    </div>
273
274      <!-- Its own pane, not a second row of the preview controls: the header names
275           what these four buttons act on, and every glyph is unique to this dock. -->
276      <div id="dl-dock" role="group" aria-label="Download list actions">
277        <div class="dl-dock-head" id="selDockCount" aria-live="polite">Download list · empty</div>
278        <div class="dl-dock-row">
279          <button class="tb-btn" id="selPick" aria-label="Add scenes by clicking the map" aria-pressed="false" data-tip="Click the map to add scenes">
280            <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
281              <path d="M4.6 3.1v12.1l3-2.8 2.1 4.4 2.2-1.1-2-4.2 4.3-.4z"/>
282            </svg>
283          </button>
284          <button class="tb-btn" id="selIsolate" aria-label="Show only the download list on the map" aria-pressed="false" aria-disabled="true" data-tip="Show only the list on the map">
285            <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
286              <path d="M3 7V4.6A1.6 1.6 0 0 1 4.6 3H7M13 3h2.4A1.6 1.6 0 0 1 17 4.6V7M17 13v2.4a1.6 1.6 0 0 1-1.6 1.6H13M7 17H4.6A1.6 1.6 0 0 1 3 15.4V13"/>
287              <rect x="8.1" y="8.1" width="3.8" height="3.8" rx=".6" fill="currentColor" stroke="none"/>
288            </svg>
289          </button>
290          <div class="tb-divider"></div>
291          <button class="tb-btn" id="selAddVisible" aria-label="Add all filtered scenes to the download list" data-tip="Add every filtered scene">
292            <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round">
293              <path d="M10 4v12M4 10h12"/>
294            </svg>
295          </button>
296          <button class="tb-btn tb-clear" id="selClear" aria-label="Clear the download list" aria-disabled="true" data-tip="Empty the list">
297            <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
298              <path d="M4 6h12M7.5 6V4.7c0-.6.5-1.1 1.1-1.1h2.8c.6 0 1.1.5 1.1 1.1V6"/>
299              <path d="M5.7 6l.7 9.4c0 .6.5 1 1 1h5.2c.5 0 1-.4 1-1L14.3 6"/>
300              <path d="M8.7 9.1v4.6M11.3 9.1v4.6"/>
301            </svg>
302          </button>
303        </div>
304      </div>
305    </div>
306
307    <!-- static overlays -->
308    <div class="mo" aria-hidden="true">
309      <div class="corner tl"></div><div class="corner tr"></div>
310      <div class="corner bl"></div><div class="corner br"></div>
311    </div>
312
313    <!-- coordinate status bar -->
314    <div class="coordbar">
315      <div class="seg-c"><span class="live"><span class="blip"></span>LIVE</span></div>
316      <div class="seg-c"><span class="k">LAT</span><span class="num" id="rdLat">20.0000</span></div>
317      <div class="seg-c"><span class="k">LNG</span><span class="num" id="rdLng">0.0000</span></div>
318      <div class="seg-c"><span class="k">Z</span>
318<span class="num" id="rdZ">2</span></div>
319      <div class="seg-c"><span class="k">PROJ</span><span class="num">EPSG:3857</span></div>
320    </div>
321
322    <!-- legend / quick toggles -->
323    <div class="maplegend" id="mapLegend">
324      <div class="lg" data-sensor="iceye"   aria-pressed="true" style="--sc:var(--iceye)"><span class="d"></span>ICEYE</div>
325      <div class="lg" data-sensor="umbra"   aria-pressed="true" style="--sc:var(--umbra)"><span class="d"></span>Umbra</div>
326      <div class="lg" data-sensor="capella" aria-pressed="true" style="--sc:var(--capella)"><span class="d"></span>Capella</div>
327    </div>
328    <!-- People, not a globe: the AOI toolbar's country picker already uses a
329         globe, and two globes meaning different things reads as the same tool. -->
330    <button class="helpbtn usagebtn" id="usageBtn" title="Visitors — who is using open-sar-triad" aria-label="Visitors — who is using open-sar-triad" aria-expanded="false" aria-controls="usage-modal">
331      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
332        <circle cx="6.1" cy="5.3" r="2.6"/>
333        <path d="M1.5 13.6c0-2.6 2.1-4.3 4.6-4.3s4.6 1.7 4.6 4.3"/>
334        <path d="M10.9 3.1a2.4 2.4 0 0 1 0 4.5"/>
335        <path d="M12.3 9.6c1.3.5 2.2 1.8 2.2 3.3"/>
336      </svg>
337    </button>
338    <!-- A link, not a button: it goes to a page, so middle-click and "open in
339         new tab" should work the way they do everywhere else. -->
340    <a class="helpbtn apibtn" id="apiBtn" href="api.html" title="API reference — use this catalog from code" aria-label="API reference">API</a>
341    <button class="helpbtn" id="helpBtn">?</button>
342
343    <!-- Visitors world map (Google Search Console, published to data/usage.json) -->
344    <div id="usage-modal" class="usage-modal" hidden role="dialog" aria-modal="true" aria-labelledby="usage-title">
345      <div class="usage-card">
346        <div class="mod-h usage-h">
347          <span class="ttl" id="usage-title">Who is using open-sar-triad</span><span class="rule"></span><span class="meta">VISITORS</span>
348          <button type="button" class="usage-close" data-usage-close aria-label="Close">×</button>
349        </div>
350        <div id="usage-body">
351          <div class="usage-stats" id="usage-stats"></div>
352          <div id="usage-map" class="usage-map" aria-label="World map of visitors by country"></div>
353          <p class="usage-meta" id="usage-meta"></p>
354          <p class="usage-note">Visitors are people who reached this site from Google Search over the reporting window shown above, as reported by Search Console. Direct and shared-link visits are not counted, so real usage is higher.</p>
355        </div>
356      </div>
357    </div>
358
359    <!-- Floating AOI toolbar (draggable) -->
360    <div id="aoi-toolbar">
361      <button class="tb-btn" id="tb-bbox" title="Draw BBox">
362        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
363          <rect x="3" y="3" width="14" height="14" rx="1"/>
364          <circle cx="3" cy="3" r="1.6" fill="currentColor" stroke="none"/>
365          <circle cx="17" cy="3" r="1.6" fill="currentColor" stroke="none"/>
366          <circle cx="3" cy="17" r="1.6" fill="currentColor" stroke="none"/>
367          <circle cx="17" cy="17" r="1.6" fill="currentColor" stroke="none"/>
368        </svg>
369      </button>
370      <button class="tb-btn" id="tb-poly" title="Draw Polygon">
371        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
372          <polygon points="10,2 18,8 15,17 5,17 2,8"/>
373        </svg>
374      </button>
375      <div class="tb-divider"></div>
376      <label class="tb-btn" title="Upload GeoJSON" style="cursor:pointer">
377        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
378          <path d="M10 13V3M6 9l4-6 4 6"/><path d="M3 16h14"/>
379        </svg>
380        <input type="file" id="tb-upload" accept=".geojson,.json" hidden>
381      </label>
382      <div class="tb-divider"></div>
383      <button class="tb-btn" id="tb-country" title="Country Picker">
384        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
385          <circle cx="10" cy="10" r="8"/>
386          <path d="M2 10h16"/><path d="M10 2a14 14 0 010 16"/><path d="M10 2a14 14 0 000 16"/>
387        </svg>
388      </button>
389      <div class="tb-divider"></div>
390      <button class="tb-btn tb-clear" id="tb-clear" title="Clear all">
391        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
392          <path d="M5 5l10 10M15 5L5 15"/>
393        </svg>
394      </button>
395    </div>
396
397    <!-- Hint banner -->
398    <div id="hint-banner"></div>
399
400    <!-- Country tooltip -->
401    <div id="country-tooltip"></div>
402
403    <!-- Detail panel -->
404    <div id="detail-panel" class="hidden">
405      <div id="detail-content"></div>
406    </div>
407
408    <!-- Toast -->
409    <div class="toast" id="toast"><span class="ok">✦</span><span id="toastMsg">Done</span><button type="button" class="toast-act" id="toastAct" hidden></button></div>
410
411    <!-- Temporal scrubber -->
412    <div class="timeline" id="timeline">
413      <div class="tl-cap">
414        <span class="k">Acquisition window</span>
415        <span class="rng"><span id="rngFrom">—</span><span class="arrow">→</span><span id="rngTo">—</span></span>
416        <span class="dur" id="rngDur">— months</span>
417      </div>
418      <div class="tl-main">
419        <div class="tl-hist" id="hist"></div>
420        <div class="tl-axis" id="axis"></div>
421        <div class="tl-track" id="track">
422          <div class="tl-sel" id="sel"></div>
423          <div class="tl-h" id="hFrom" data-h="from"><span class="grip" id="gFrom">—</span></div>
424          <div class="tl-h" id="hTo" data-h="to"><span class="grip" id="gTo">—</span></div>
425        </div>
426      </div>
427      <div class="tl-foot">
428        <span class="k">In view</span>
429        <span class="big" id="visCount">—</span>
430        <span class="sm">scenes visible</span>
431      </div>
432    </div>
433
434  </main>
435</div>
436
437<!-- Loading overlay -->
438<div id="loading">
439  <div class="spinner"></div>
440  <p>Loading SAR scenes…</p>
441</div>
442
443<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
444        integrity="sha384-cxOPjt7s7Iz04uaHJceBmS+qpjv2JkIHNVcuOrM+YHwZOmJGBXI00mdUXEq65HTH"
445        crossorigin="anonymous"></script>
vendor: 1 bytes, line 445
445
446<script src="https://unpkg.com/[email protected]/dist/leaflet.draw.js"
447        integrity="sha384-JP5UPxIO2Tm2o79Fb0tGYMa44jkWar53aBoCbd8ah0+LcCDoohTIYr+zIXyfGIJN"
448        crossorigin="anonymous"></script>
vendor: 1 bytes, line 448
448
449<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/topojson-client.min.js"
450        integrity="sha384-Ukv1p/xTma6P4/2bY5KzWBw+ydSpXmhCMtyciIQVDJ1RmOxtCYNMF1uXT9T63H67"
451        crossorigin="anonymous"></script>
451
452<div id="img-lightbox" role="dialog" aria-modal="true" aria-label="Image preview">
453  <div id="lb-toolbar">
454    <button id="lb-zoom-in"  title="Zoom in">+</button>
455    <button id="lb-zoom-out" title="Zoom out">−</button>
456    <button id="lb-reset"    title="Reset zoom">⊡</button>
457    <span   id="lb-zoom-label">100%</span>
458    <span   id="lb-spacer"></span>
459    <button id="lb-close"    title="Close (Esc)">✕</button>
460  </div>
461  <div id="lb-viewport">
462    <img id="lb-img" alt="SAR scene preview" /><!-- impeccable-disable broken-image -->
463  </div>
464</div>
465<script src="js/app.js?v=landuse-1"></script>
vendor: 1 bytes, line 465
465
466<script src="js/tour.js?v=tour-v12"></script>
466
467</body>
468</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.