// VIEW 3 — Map. Dark field atlas, now backed by Mapbox GL JS v3. // // 3-column layout: property index rail / atlas / season feed. // // Mapbox integration: // - init once on mount, with dark-v11 style and the whole prairie in view // - one HTML marker per property, coloured by dominant-ownership rollup // - selecting a property (here, from the other views, or via "Zoom Mapbox →" // in the drawer) flies the camera to that block at zoom ~10 // - satellite toggle swaps between dark-v11 and satellite-streets-v12 const MapView = ({ forcedSelect, onSwitchView }) => { const [sel, setSel] = useState(null); const [hover, setHover] = useState(null); const [satellite, setSatellite] = useState(false); const [mapReady, setMapReady] = useState(false); const mapContainerRef = useRef(null); const mapRef = useRef(null); const markersRef = useRef({}); // propId -> { marker, element } const rollups = useMemo(() => { const m = {}; D.properties.forEach((p) => { m[p.id] = rollupProperty(p.id).rollup; }); return m; }, []); // Pick the colour for a property's marker based on which ownership state // dominates its rollup. Falls back to "owned" when counts tie. const dominantColor = (id) => { const r = rollups[id]; if (r.sold > r.owned && r.sold > r.rented) return OWN.sold.color; if (r.rented > r.owned) return OWN["rented-monette"].color; return OWN["owned-monette"].color; }; // ── init map once ──────────────────────────────────────────────── useEffect(() => { if (!mapContainerRef.current || mapRef.current) return; if (!window.mapboxgl) return; // mapbox-gl CDN not yet loaded window.mapboxgl.accessToken = window.MAPBOX_TOKEN; const map = new window.mapboxgl.Map({ container: mapContainerRef.current, style: window.MAPBOX_STYLE_DARK, center: window.MAPBOX_HOME.center, zoom: window.MAPBOX_HOME.zoom, attributionControl: true, projection: "mercator", }); map.addControl(new window.mapboxgl.NavigationControl({ visualizePitch: false }), "bottom-right"); map.on("load", () => setMapReady(true)); mapRef.current = map; return () => { map.remove(); mapRef.current = null; }; }, []); // ── add markers once map is ready ─────────────────────────────── useEffect(() => { const map = mapRef.current; if (!map || !mapReady) return; // Clear any prior markers (style changes keep them, but safe to re-sync). Object.values(markersRef.current).forEach(({ marker }) => marker.remove()); markersRef.current = {}; D.properties.forEach((p) => { const color = dominantColor(p.id); const size = Math.max(14, Math.round(Math.sqrt(p.titled) / 9)); const el = document.createElement("div"); el.className = "mb-pin"; el.style.width = size + "px"; el.style.height = size + "px"; el.style.background = color; el.style.color = color; el.style.border = `2px solid ${color}`; el.style.opacity = "0.82"; const label = document.createElement("div"); label.className = "mb-pin-label"; label.textContent = p.name; el.appendChild(label); const ac = document.createElement("div"); ac.className = "mb-pin-ac"; ac.textContent = fmt(p.titled) + " ac"; el.appendChild(ac); el.addEventListener("click", (e) => { e.stopPropagation(); setSel(p); }); el.addEventListener("mouseenter", () => setHover(p)); el.addEventListener("mouseleave", () => setHover(null)); const marker = new window.mapboxgl.Marker({ element: el, anchor: "center" }) .setLngLat([p.lng, p.lat]) .addTo(map); markersRef.current[p.id] = { marker, element: el }; }); }, [mapReady]); // ── highlight + flyTo on selection ────────────────────────────── useEffect(() => { Object.entries(markersRef.current).forEach(([id, { element }]) => { element.classList.toggle("is-active", sel?.id === id); }); if (sel && mapRef.current) { mapRef.current.flyTo({ center: [sel.lng, sel.lat], zoom: 9.5, duration: 2000, essential: true }); } }, [sel]); // ── forced select from a cross-view deep-link ─────────────────── useEffect(() => { if (forcedSelect) { const p = D.properties.find((x) => x.id === forcedSelect); if (p) setSel(p); } }, [forcedSelect]); // ── satellite toggle ──────────────────────────────────────────── useEffect(() => { const map = mapRef.current; if (!map || !mapReady) return; map.setStyle(satellite ? window.MAPBOX_STYLE_SATELLITE : window.MAPBOX_STYLE_DARK); // style swap clears markers; re-add when the new style is idle map.once("style.load", () => setMapReady((m) => m && true)); }, [satellite]); const hoverOrSel = hover || sel; return (
Monette · Field Atlas
● LIVE · CCAA DAY 0 · APR 21, 2026
{/* Property index */}
PROPERTIES
{D.properties.map((p) => { const active = sel?.id === p.id; const r = rollups[p.id]; return (
setHover(p)} onMouseLeave={() => setHover(null)} onClick={() => setSel(p)} style={{ padding: "10px 10px", borderLeft: active ? `3px solid ${OWN["owned-monette"].color}` : "3px solid transparent", background: active ? "#1e1b16" : "transparent", cursor: "pointer", marginBottom: 2, }}>
{p.name} {p.province}
{fmt(p.titled)} ac · {p.parcels} parcels
{[ ["owned", r.owned, OWN["owned-monette"].color], ["rented", r.rented, OWN["rented-monette"].color], ["sold", r.sold, OWN.sold.color], ["unknown", r.unknown, OWN.unknown.color], ].map(([k, v, c]) => v ?
: null )}
); })}
{/* Atlas — real Mapbox GL JS map */}
● MAPBOX · LIVE
{hoverOrSel && (
{hoverOrSel.province} · {hoverOrSel.region}
{hoverOrSel.name}
Titled {fmt(hoverOrSel.titled)} Parcels {hoverOrSel.parcels} Seeded q {rollups[hoverOrSel.id].seeded} Sold q {rollups[hoverOrSel.id].sold}
)}
{/* Season feed */}
SEASON FEED · FIRST TO SEE IT
{D.properties.slice(0, 6).map((p) => { const r = rollups[p.id]; return (
setSel(p)} style={{ padding: "10px 12px", border: "1px solid #2a2620", background: "#1a1813", cursor: "pointer" }}>
{p.name} {p.province}
{r.seeded}/{r.total} seeded {r.sprayed} sprayed {r.harvested} harv.
); })}
setSel(null)} />
); }; window.MapView = MapView;