// Viewpoint — the architect plan and three geographically anchored public-road // cameras on the left, source-locked before/after comparisons on the right. function Radar() { const pins = [ { id: 'south', x: 47.64, y: 92.19, heading: 0, name: 'South Frontage', from: 'County Line Rd · looking north', dist: '0.8 mi', before: '/images/piedmont-g01-south-before-v2.webp', patch: '/images/piedmont-g01-south-patch-v2.webp' }, { id: 'west', x: 25.50, y: 78.10, heading: 90, name: 'West Frontage', from: 'N 2910 Rd · looking east', dist: '0.7 mi', before: '/images/piedmont-g02-west-before.webp', patch: '/images/piedmont-g02-west-patch.webp' }, { id: 'east', x: 73.97, y: 50.85, heading: 270, name: 'East Frontage', from: 'N 2920 Rd · looking west', dist: '0.5 mi', before: '/images/piedmont-g04-east-before.webp', patch: '/images/piedmont-g04-east-patch.webp' }, ]; const [active, setActive] = useState(pins[0].id); const activePin = pins.find(p => p.id === active); const [split, setSplit] = useState(55); const dragging = useRef(false); const onMove = useCallback((clientX, rect) => { const pct = Math.max(2, Math.min(98, ((clientX - rect.left) / rect.width) * 100)); setSplit(pct); }, []); const baRef = useRef(null); useEffect(() => { const up = () => { dragging.current = false; document.body.style.cursor = ''; }; const move = (e) => { if (!dragging.current || !baRef.current) return; const rect = baRef.current.getBoundingClientRect(); const cx = e.touches ? e.touches[0].clientX : e.clientX; onMove(cx, rect); }; window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); window.addEventListener('touchmove', move, { passive: true }); window.addEventListener('touchend', up); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchmove', move); window.removeEventListener('touchend', up); }; }, [onMove]); useEffect(() => { setSplit(50); }, [active]); const onSliderKeyDown = (e) => { let next = split; if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') next -= 5; else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') next += 5; else if (e.key === 'Home') next = 2; else if (e.key === 'End') next = 98; else return; e.preventDefault(); setSplit(Math.max(2, Math.min(98, next))); }; // SVG arc path for the direction wedge (cone). Compass: 0° = N (up), CW. const wedgePath = (headingDeg, fovDeg, radius) => { const start = ((headingDeg - fovDeg / 2 - 90) * Math.PI) / 180; const end = ((headingDeg + fovDeg / 2 - 90) * Math.PI) / 180; const x1 = (radius * Math.cos(start)).toFixed(2); const y1 = (radius * Math.sin(start)).toFixed(2); const x2 = (radius * Math.cos(end)).toFixed(2); const y2 = (radius * Math.sin(end)).toFixed(2); const largeArc = fovDeg > 180 ? 1 : 0; return `M 0 0 L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`; }; return (
05 Visual impact

See the campus from the roads around it.

Three mapped public-road views. Choose a road, then drag the photograph to compare today’s rural context with the illustrative campus layer.

Choose a road view The map and photograph update together.
{pins.map((p, i) => { const isActive = p.id === active; return ( ); })}
View {pins.findIndex(p => p.id === active) + 1} · {activePin.name}
{activePin.from}
Drag to compare
{ dragging.current = true; document.body.style.cursor = 'ew-resize'; onMove(e.clientX, e.currentTarget.getBoundingClientRect()); }} onTouchStart={(e) => { dragging.current = true; onMove(e.touches[0].clientX, e.currentTarget.getBoundingClientRect()); }}>
{`${activePin.name}
Existing contextExisting
{`${activePin.name}
Campus conceptCampus
{[ { k: '19', v: 'Plan-traced buildings' }, { k: '3', v: 'Mapped road views' }, { k: '1:1', v: 'Same source frame' }, ].map((s, i) => (
{s.k}
{s.v}
))}
What is mapped

Camera origins, road directions, and positions on the same 19-building plan.

The rural plates and campus layer are rights-safe visualizations for scale and direction—not survey-grade visibility studies or final architecture.
); } window.Radar = Radar;