// Viewpoint — campus plan card (with meramec-authored pin positions + direction // wedges) on the left, drag-to-compare before/after on the right. function Radar() { const pins = [ { id: 'north', x: 4, y: 28, heading: 100, name: 'North Neighborhood', from: 'View from Prairie Ridge Dr.', dist: '0.8 mi', before: '/images/pin-1-before.webp', after: '/images/pin-1-after.webp' }, { id: 'south', x: 27, y: 61, heading: 30, name: 'South Open Space', from: 'View from state park trail', dist: '1.4 mi', before: '/images/pin-2-before.webp', after: '/images/pin-2-after.webp' }, { id: 'east', x: 78, y: 8, heading: 245, name: 'East Homes', from: 'View along County Rd 2850', dist: '1.1 mi', before: '/images/pin-3-before.webp', after: '/images/pin-3-after.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]); // 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 (
Visual impact

Designed to recede into the landscape.

The most intensive activity stays in the campus interior. Earth berms, preserved tree lines, and 150‑foot perimeter setbacks keep the view from surrounding homes substantially the same as it is today. Select a viewpoint and drag to compare.

{/* Campus plan */}
Fig. 02 · Campus plan
{pins.length} viewpoints
Overhead site plan with viewpoint markers {/* Scale + compass overlay */}
N ↑ SCALE 1:3000
{/* Pins — meramec-style: numbered green circle + direction wedge cone + needle */} {pins.map((p, i) => { const isActive = p.id === active; const headingRad = (p.heading * Math.PI) / 180; const needleX = (52.8 * Math.sin(headingRad)).toFixed(2); const needleY = (-52.8 * Math.cos(headingRad)).toFixed(2); return ( ); })}
{pins.map((p, i) => { const isActive = p.id === active; return ( ); })}
{/* Before/After */}
{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()); }}>
Current
With campus
{[ { k: '150 ft', v: 'Minimum setback' }, { k: '10%+', v: 'Open space preserved' }, { k: 'Interior', v: 'Equipment orientation' }, ].map((s,i) => (
0 ? 18 : 0 }}>
{s.k}
{s.v}
))}
Photographs are reference imagery. Final renderings will be produced once the site design is finalized.
); } window.Radar = Radar;