Update prefix-lookup.astro

Author: sqldevelop

src/pages/prefix-lookup.astro

@@ -91,16 +91,39 @@ const breadcrumb = {
     .lookup-note { margin-top: 2rem; font-size: .9rem; }
     .lk-spin { display:inline-block; width:14px; height:14px; border:2px solid rgba(79,140,255,.3); border-top-color: var(--accent); border-radius:50%; animation: lkspin .7s linear infinite; vertical-align:-2px; margin-right:.5rem; }
     @keyframes lkspin { to { transform: rotate(360deg); } }
+    .lkm-wrap { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#070d1c; min-height:90px; }
+    .lkm-svg { display:block; width:100%; height:auto; }
+    .lkm-ocean { fill:#070d1c; }
+    .lkm-land { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.14); stroke-width:.5; }
+    .lkm-cur { fill: rgba(45,212,191,.16); stroke: rgba(45,212,191,.55); stroke-width:.9; }
+    .lkm-dot { fill: var(--accent); }
+    .lkm-ring { fill:none; stroke: var(--accent); stroke-width:1.5; }
+    .lkm-pulse { fill: var(--accent); opacity:.5; transform-box: fill-box; transform-origin:center; animation: lkmpulse 1.8s ease-out infinite; }
+    @keyframes lkmpulse { 0%{ transform:scale(.5); opacity:.55; } 70%{ transform:scale(2.8); opacity:0; } 100%{ opacity:0; } }
+    .lkm-cap { margin-top:.6rem; font-size:.85rem; }
+    .lkm-fail { padding:1rem; }
   </style>
 
   <script is:inline type="module">
     import { parquetReadObjects } from 'https://esm.sh/hyparquet@1';
     import { compressors } from 'https://esm.sh/hyparquet-compressors@1';
+    import { geoMercator, geoPath, geoContains } from 'https://esm.sh/d3-geo@3';
+    import { feature as topoFeature } from 'https://esm.sh/topojson-client@3';
 
     const cfg = document.getElementById('lookupConfig').dataset;
     const RELEASE = cfg.release;
     const BASE = cfg.base;
 
+    // Natural Earth country outlines (public domain) — for the location pin map. Lazy-loaded once.
+    const WORLD_URL = 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json';
+    let WORLD = null;
+    async function ensureWorld() {
+      if (WORLD) return WORLD;
+      const tj = await fetch(WORLD_URL).then((r) => r.json());
+      WORLD = topoFeature(tj, tj.objects.countries).features;
+      return WORLD;
+    }
+
     const form = document.getElementById('lookupForm');
     const input = document.getElementById('lookupInput');
     const statusEl = document.getElementById('lookupStatus');
@@ -169,9 +192,48 @@ const breadcrumb = {
 
     const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
 
+    // IPInfo-style location map: auto-zoom to the block's country (point-in-polygon, no code tables),
+    // pulsing pin at the exact /24 coordinate. No tiles, no API — Natural Earth outline only.
+    async function renderMap(row) {
+      const mount = document.getElementById('lkmMount');
+      const cap = document.getElementById('lkmCap');
+      if (!mount) return;
+      const lat = Number(val(row.Latitude));
+      const lon = Number(val(row.Longitude));
+      if (!isFinite(lat) || !isFinite(lon)) return;
+      let feats;
+      try { feats = await ensureWorld(); }
+      catch { mount.innerHTML = '<div class="lkm-fail muted">Map unavailable right now.</div>'; return; }
+      const W = 860, H = 340, PAD = 18;
+      let country = null;
+      for (const f of feats) { if (geoContains(f, [lon, lat])) { country = f; break; } }
+      const proj = geoMercator();
+      if (country) {
+        proj.fitExtent([[PAD, PAD], [W - PAD, H - PAD]], country);
+        if (proj.scale() > 2400) proj.scale(2400).center([lon, lat]).translate([W / 2, H / 2]);
+      } else {
+        proj.center([lon, lat]).scale(820).translate([W / 2, H / 2]);
+      }
+      proj.clipExtent([[0, 0], [W, H]]); // clip to viewport — keeps off-screen path data tiny
+      const path = geoPath(proj);
+      const land = feats.map((f) => { const d = path(f); return d ? `<path d="${d}" class="lkm-land${f === country ? ' lkm-cur' : ''}"/>` : ''; }).join('');
+      const p = proj([lon, lat]);
+      const px = p ? p[0] : W / 2, py = p ? p[1] : H / 2;
+      mount.innerHTML =
+        `<svg viewBox="0 0 ${W} ${H}" class="lkm-svg" role="img" aria-label="Approximate location of the block">` +
+        `<rect width="${W}" height="${H}" class="lkm-ocean"/><g>${land}</g>` +
+        `<g class="lkm-pin" transform="translate(${px.toFixed(1)},${py.toFixed(1)})">` +
+        `<circle class="lkm-pulse" r="7"/><circle class="lkm-ring" r="7"/><circle class="lkm-dot" r="3.4"/></g></svg>`;
+      const parts = [val(row.CityName), val(row.RegionName), val(row.CountryCode)].filter(Boolean);
+      cap.textContent = (parts.length ? parts.join(', ') + ' · ' : '') + `${lat.toFixed(4)}, ${lon.toFixed(4)}`;
+    }
+
     function render(prefix, row) {
+      const _lat = Number(val(row.Latitude)), _lon = Number(val(row.Longitude));
+      const hasCoord = isFinite(_lat) && isFinite(_lon);
       const head = `<div class="lk-card"><div class="lk-head">${esc(prefix)}</div>
         <div class="muted" style="margin-top:.2rem">Snapshot ${esc(val(row.snapshot_month) || RELEASE)}</div></div>`;
+      const mapCard = hasCoord ? `<div class="lk-card lkm-card"><h2>Approx. location</h2><div id="lkmMount" class="lkm-wrap"></div><div id="lkmCap" class="lkm-cap muted"></div></div>` : '';
       const cards = FIELDS.map(([title, fields]) => {
         const rows = fields.map(([key, label]) => {
           let v = val(row[key]);
@@ -188,8 +250,9 @@ const breadcrumb = {
         }).join('');
         return rows ? `<div class="lk-card"><h2>${title}</h2><div class="lk-grid">${rows}</div></div>` : '';
       }).join('');
-      resultEl.innerHTML = head + cards;
+      resultEl.innerHTML = head + mapCard + cards;
       resultEl.hidden = false;
+      if (hasCoord) renderMap(row);
     }
 
     async function doLookup(e) {