26:T4a50,(() => { function mapStageRect(viewportWidth, viewportHeight) { var desktop = viewportWidth >= 1024; return { left: 0, top: desktop ? 48 : 0, width: desktop ? viewportWidth - 380 : viewportWidth, height: desktop ? viewportHeight - 48 : viewportHeight - 56 }; } function mercator(longitude, latitude, zoom) { var world = 512 * Math.pow(2, zoom); var lat = Math.max(-85, Math.min(85, latitude)); var x = (longitude + 180) / 360 * world; var s = Math.sin(lat * Math.PI / 180); var y = (0.5 - Math.log((1 + s) / (1 - s)) / (4 * Math.PI)) * world; return [x, y]; } function pinOffset(longitude, latitude, centerLon, centerLat, zoom, width, height) { var point = mercator(longitude, latitude, zoom); var center = mercator(centerLon, centerLat, zoom); return [point[0] - center[0] + width / 2, point[1] - center[1] + height / 2]; } if (window.__arcFastPins) return; window.__arcFastPins = "drawing"; const armBasemap = () => { if (document.querySelector("script[data-boot-map]")) return; const css = document.createElement("link"); css.rel = "stylesheet"; css.href = "/maplibre-gl.css"; document.head.appendChild(css); const loader = document.createElement("script"); loader.type = "module"; loader.src = "/boot-map.mjs"; loader.dataset.bootMap = "1"; document.head.appendChild(loader); }; const armAfterHydration = () => { if (window.__arcHydrated) { armBasemap(); return; } window.addEventListener("arc-hydrated", armBasemap, { once: true }); }; const raw = document.getElementById("arc-first-pins") && document.getElementById("arc-first-pins").textContent; const boot = document.getElementById("arc-pin-boot"); if (!raw || !boot) { window.__arcFastPins = "missing"; armAfterHydration(); return; } let data; try { data = JSON.parse(raw); } catch (error) { window.__arcFastPins = "bad-json"; armAfterHydration(); return; } const features = data && data.features; if (!features || !features.length) { window.__arcFastPins = "empty"; armAfterHydration(); return; } const lon = Number(boot.dataset.lon); const lat = Number(boot.dataset.lat); const zoom = Number(boot.dataset.zoom); const centerLon = Number.isFinite(lon) ? lon : 0; const centerLat = Number.isFinite(lat) ? lat : 20; const viewZoom = Number.isFinite(zoom) ? zoom : 1.4; const start = () => { const canvas = document.createElement("canvas"); canvas.id = "arc-fast-pins"; canvas.dataset.layer = "circle"; canvas.dataset.webgl = "1"; canvas.style.pointerEvents = "none"; document.body.appendChild(canvas); const gl = canvas.getContext("webgl", { alpha: true, antialias: false, preserveDrawingBuffer: true, premultipliedAlpha: true }); if (!gl) { canvas.remove(); window.__arcFastPins = "no-webgl"; armAfterHydration(); return; } const vs = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vs, "attribute vec2 p; uniform float s; void main(){ gl_Position=vec4(p,0.0,1.0); gl_PointSize=s; }"); gl.compileShader(vs); const fs = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fs, "precision mediump float; uniform vec4 u; uniform float h; void main(){ vec2 c=gl_PointCoord-vec2(0.5); float d=dot(c,c); if (d>0.25) discard; if (h>0.0 && d { const value = parseInt(String(hex || "#9AA6B4").slice(1), 16); if (!Number.isFinite(value)) return [154, 166, 180]; return [(value >> 16) & 255, (value >> 8) & 255, value & 255]; }; const place = (rect) => { canvas.width = Math.max(2, Math.round(rect.width)); canvas.height = Math.max(2, Math.round(rect.height)); canvas.style.position = "fixed"; canvas.style.left = rect.left + "px"; canvas.style.top = rect.top + "px"; canvas.style.width = rect.width + "px"; canvas.style.height = rect.height + "px"; canvas.style.zIndex = "4"; const width = canvas.width; const height = canvas.height; const groups = {}; pins = []; for (let index = 0; index < features.length; index += 1) { const feature = features[index]; const pair = feature.geometry && feature.geometry.coordinates; if (!pair) continue; const point = pinOffset(pair[0], pair[1], centerLon, centerLat, viewZoom, width, height); if (point[0] < -12 || point[1] < -12 || point[0] > width + 12 || point[1] > height + 12) continue; const props = feature.properties || {}; const color = props.pinColor || "#9AA6B4"; const fill = props.pinFill === "solid" ? "solid" : "outline"; const key = color + "|" + fill; if (!groups[key]) groups[key] = { color: color, fill: fill, pts: [] }; groups[key].pts.push(point[0] / width * 2 - 1, 1 - point[1] / height * 2); if (point[0] >= 4 && point[1] >= 4 && point[0] < width - 4 && point[1] < height - 4) { pins.push({ x: point[0], y: point[1], lon: pair[0], lat: pair[1], id: props.id || "", title: props.title || "", source: props.source || "", sourceUrl: props.sourceUrl || "", verification: props.verification || "", observedAt: props.observedAt || "", confidenceLabel: props.confidenceLabel || "", precisionLabel: props.precisionLabel || "", license: props.license || "", feedSource: props.feedSource || props.source || "", status: props.status || "", sourceCountLabel: props.sourceCountLabel || "", qaFixture: props.qaFixture || "", role: props.pinRole || "news", color: color, fill: fill, rgb: hexRgb(color) }); } } gl.viewport(0, 0, width, height); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); const keys = Object.keys(groups); let count = 0; for (let index = 0; index < keys.length; index += 1) { const group = groups[keys[index]]; const ndc = new Float32Array(group.pts); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, ndc, gl.STATIC_DRAW); gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, 0, 0); const rgb = hexRgb(group.color); gl.uniform4f(colorLoc, rgb[0] / 255, rgb[1] / 255, rgb[2] / 255, 1); gl.uniform1f(holeLoc, group.fill === "outline" ? 0.1 : 0); gl.uniform1f(sizeLoc, group.fill === "outline" ? 18 : 14); gl.drawArrays(gl.POINTS, 0, ndc.length / 2); count += ndc.length / 2; } return count; }; const rectOf = () => { const slot = document.getElementById("arc-map-slot"); if (slot) { const rect = slot.getBoundingClientRect(); if (rect.width >= 2 && rect.height >= 2) return { left: rect.left, top: rect.top, width: rect.width, height: rect.height }; } return mapStageRect(document.documentElement.clientWidth || window.innerWidth, window.innerHeight); }; const readAt = (x, y, pixel) => { const px = Math.round(x); const py = Math.round(canvas.height - y - 1); if (px < 0 || py < 0 || px >= canvas.width || py >= canvas.height) return false; gl.readPixels(px, py, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel); return true; }; const matchedSample = (pin) => { const pixel = new Uint8Array(4); const outline = pin.fill !== "solid"; const radii = outline ? [6, 7, 8] : [0]; const dirs = outline ? [[1, 0], [-1, 0], [0, 1], [0, -1], [0.7, 0.7], [-0.7, 0.7]] : [[0, 0]]; for (let radius = 0; radius < radii.length; radius += 1) { for (let dir = 0; dir < dirs.length; dir += 1) { if (!readAt(pin.x + dirs[dir][0] * radii[radius], pin.y + dirs[dir][1] * radii[radius], pixel)) continue; if (pixel[3] > 120 && Math.abs(pixel[0] - pin.rgb[0]) <= 24 && Math.abs(pixel[1] - pin.rgb[1]) <= 24 && Math.abs(pixel[2] - pin.rgb[2]) <= 24) { return pixel[0] + "," + pixel[1] + "," + pixel[2] + "," + pixel[3]; } } } return ""; }; const bootMap = () => { if (booted) return; booted = true; armAfterHydration(); }; const draw = () => { const count = place(rectOf()); canvas.dataset.count = String(count); bootMap(); if (!count) return count; let kharkiv = null; let kharkivDistance = 0.6; for (let index = 0; index < pins.length; index += 1) { const pin = pins[index]; if (pin.role !== "news") continue; const distance = Math.hypot(pin.lon - KHARKIV.lon, pin.lat - KHARKIV.lat); if (distance > kharkivDistance) continue; kharkiv = pin; kharkivDistance = distance; } if (kharkiv && !document.documentElement.getAttribute("data-kharkiv-role")) { const sample = matchedSample(kharkiv); if (sample) { document.documentElement.setAttribute("data-kharkiv-color", kharkiv.color); document.documentElement.setAttribute("data-kharkiv-sample", sample); document.documentElement.setAttribute("data-kharkiv-role", kharkiv.role); } } if (painted) return count; for (let index = 0; index < pins.length; index += 1) { const pin = pins[index]; if (!TIMED[pin.source]) continue; const sample = matchedSample(pin); if (!sample) continue; painted = true; canvas.dataset.sample = sample; const stamp = String(Math.round(performance.now())); boot.dataset.pinsPaintedAt = stamp; boot.dataset.fastPins = "drawn"; boot.dataset.pinRole = pin.role; boot.dataset.pinSource = pin.source; document.documentElement.setAttribute("data-pins-painted-at", stamp); document.documentElement.setAttribute("data-pin-sample", sample); document.documentElement.setAttribute("data-pin-layer", "circle"); document.documentElement.setAttribute("data-pin-role", pin.role); document.documentElement.setAttribute("data-pin-source", pin.source); document.documentElement.setAttribute("data-pin-color", pin.color); performance.mark("arc-pins-painted"); window.__arcFastPins = "drawn"; break; } return count; }; const ignored = (target) => { if (!target || !target.closest) return false; return Boolean(target.closest("[data-testid='live-feed'], #arc-fast-callout, [data-testid='map-detail'], .maplibregl-ctrl, button, a, input, select, textarea, [role='button']")); }; const showCallout = (pin) => { let node = document.getElementById("arc-fast-callout"); if (!node) { node = document.createElement("div"); node.id = "arc-fast-callout"; node.setAttribute("data-testid", "map-detail"); node.style.cssText = "position:fixed;left:0;right:0;bottom:0;z-index:40;background:#1a2029;color:#f2f4f7;padding:16px 16px 24px;font:16px/1.4 sans-serif;"; document.body.appendChild(node); } node.replaceChildren(); const title = document.createElement("p"); title.textContent = pin.title || "Event"; const badge = document.createElement("p"); badge.setAttribute("data-testid", "popup-confidence"); badge.textContent = pin.confidenceLabel || "Unconfirmed"; node.append(title, badge); const review = pin.source === "usgs" ? (pin.status === "automatic" ? "Preliminary" : pin.status === "reviewed" ? "Reviewed" : "") : ""; if (review) { const line = document.createElement("p"); line.setAttribute("data-testid", "usgs-review"); line.textContent = review; node.append(line); } const count = pin.sourceCountLabel || (pin.source === "nws" ? "1 source" : ""); if (count) { const line = document.createElement("p"); line.setAttribute("data-testid", "source-count"); line.textContent = count; node.append(line); } }; let openedAt = 0; const publish = (pin) => { const now = performance.now(); if (now - openedAt < 700) return; openedAt = now; showCallout(pin); const detail = { id: pin.id, title: pin.title, source: pin.source, sourceUrl: pin.sourceUrl, verification: pin.verification, observedAt: pin.observedAt, confidenceLabel: pin.confidenceLabel, precisionLabel: pin.precisionLabel, license: pin.license, feedSource: pin.feedSource, status: pin.status, sourceCountLabel: pin.sourceCountLabel, qaFixture: pin.qaFixture, longitude: pin.lon, latitude: pin.lat }; window.__arcPendingPin = detail; window.dispatchEvent(new CustomEvent("arc-open-pin", { detail: detail })); }; const nearest = (clientX, clientY) => { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / Math.max(1, rect.width); const scaleY = canvas.height / Math.max(1, rect.height); const x = (clientX - rect.left) * scaleX; const y = (clientY - rect.top) * scaleY; let best = null; let bestD = 36 * 36; for (let index = 0; index < pins.length; index += 1) { const dx = pins[index].x - x; const dy = pins[index].y - y; const distance = dx * dx + dy * dy; if (distance <= bestD) { best = pins[index]; bestD = distance; } } return best; }; const mapReady = () => { const slot = document.getElementById("arc-map-slot"); const map = slot && slot.__arcMap; return Boolean(map && map.getLayer && map.getLayer("feed-pins")); }; const fromMap = (clientX, clientY, open) => { const slot = document.getElementById("arc-map-slot"); const map = slot && slot.__arcMap; if (!map || !map.queryRenderedFeatures || !map.getLayer) return null; const surface = map.getCanvas ? map.getCanvas() : slot; const rect = surface.getBoundingClientRect(); const x = clientX - rect.left; const y = clientY - rect.top; const layers = ["feed-pin-hit", "feed-pins", "feed-cluster-hit", "feed-clusters", "event-hit", "event-points", "clusters"].filter((id) => map.getLayer(id)); if (!layers.length) return null; let hits = []; try { hits = map.queryRenderedFeatures([[x - 36, y - 36], [x + 36, y + 36]], { layers: layers }); } catch (error) { return null; } let feature = null; let bestD = 36 * 36; for (let index = 0; index < hits.length; index += 1) { const candidate = hits[index]; const pair = candidate.geometry && candidate.geometry.coordinates; if (!pair || !map.project) continue; const projected = map.project(pair); const dx = projected.x - x; const dy = projected.y - y; const distance = dx * dx + dy * dy; if (distance <= bestD) { feature = candidate; bestD = distance; } } if (!feature) return null; if (feature.properties && feature.properties.point_count != null && feature.properties.cluster_id != null) { if (open && !(slot && slot.dataset && slot.dataset.feedClicks === "on")) { const sourceId = feature.source || (feature.layer && feature.layer.source) || "feed-pins"; const source = map.getSource && map.getSource(sourceId); if (source && source.getClusterExpansionZoom) { source.getClusterExpansionZoom(feature.properties.cluster_id).then((nextZoom) => { const coordinates = feature.geometry && feature.geometry.coordinates; if (nextZoom > map.getZoom() + 0.05 && coordinates) map.easeTo({ center: coordinates, zoom: nextZoom }); }); } } return { cluster: true }; } const props = feature.properties || {}; const pair = feature.geometry && feature.geometry.coordinates; return { id: props.id || "", title: props.title || "", source: props.source || "", sourceUrl: props.sourceUrl || "", verification: props.verification || "", observedAt: props.observedAt || "", confidenceLabel: props.confidenceLabel || "", precisionLabel: props.precisionLabel || "", license: props.license || "", feedSource: props.feedSource || props.source || "", status: props.status || "", sourceCountLabel: props.sourceCountLabel || "", qaFixture: props.qaFixture || "", lon: pair ? Number(pair[0]) : 0, lat: pair ? Number(pair[1]) : 0 }; }; const onPoint = (event, open) => { if (ignored(event.target)) return; if ((event.touches && event.touches.length > 1) || (event.changedTouches && event.changedTouches.length > 1)) return; const slot = document.getElementById("arc-map-slot"); if (mapReady() || (slot && slot.dataset && slot.dataset.feedClicks === "on")) return; const touch = event.changedTouches && event.changedTouches[0]; const clientX = touch ? touch.clientX : event.clientX; const clientY = touch ? touch.clientY : event.clientY; if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) return; const mapped = fromMap(clientX, clientY, open); const pin = mapped && mapped.cluster ? null : mapped || (mapReady() ? null : nearest(clientX, clientY)); if (!pin && !(mapped && mapped.cluster)) return; if (open && event.cancelable) event.preventDefault(); if (open) event.stopPropagation(); if (open && pin) publish(pin); }; document.addEventListener("touchend", (event) => onPoint(event, true), true); document.addEventListener("click", (event) => onPoint(event, true), true); draw(); const follow = () => { const slot = document.getElementById("arc-map-slot"); if (slot && slot.dataset.pinsPaintedAt == null && boot.dataset.pinsPaintedAt) { slot.dataset.pinsPaintedAt = boot.dataset.pinsPaintedAt; slot.dataset.fastPins = "drawn"; const host = document.querySelector("[data-testid='public-map']"); if (host) host.setAttribute("data-pins-painted-at", boot.dataset.pinsPaintedAt); } if (!painted) draw(); else if (canvas.isConnected) place(rectOf()); const map = slot && slot.__arcMap; if (painted && map && map.getLayer) { const readyLayers = ["feed-pins", "feed-clusters", "feed-pin-hit", "feed-cluster-hit"].filter((id) => map.getLayer(id)); if (readyLayers.length) { try { const found = map.queryRenderedFeatures(undefined, { layers: readyLayers }); if (found && found.length) { canvas.remove(); return; } } catch (error) { /* The map is still starting. */ } } } requestAnimationFrame(follow); }; requestAnimationFrame(follow); }; if (window.__arcHydrated) start(); else window.addEventListener("arc-hydrated", start, { once: true }); })();6:[["$","script",null,{"id":"arc-first-pins","type":"application/geo+json","dangerouslySetInnerHTML":{"__html":"{\"type\":\"FeatureCollection\",\"features\":[]}"}}],["$","div",null,{"id":"arc-pin-boot","data-lon":31.5,"data-lat":48.5,"data-zoom":5.5,"hidden":true}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$26"}}],"$L27"]