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.