// Interactive map component — Leaflet.js + OpenStreetMap tiles
const FIELD_SITES = [
{
id: "fs-01",
lat: 35.9,
lng: -76.4,
label: "Coastal North Carolina — Ghost Forest",
imageUrl: null,
},
{
id: "fs-02",
lat: 42.5356061,
lng: -72.1895687,
label: "Harvard Forest — Temperate Deciduous",
imageUrl: "images/field-sites/DSC_0086.jpg",
},
{
id: "fs-03",
lat: 44.064,
lng: -71.701,
label: "Bartlett Experimental Forest (BART)",
imageUrl: null,
},
{
id: "fs-04",
lat: 38.893,
lng: -77.027,
label: "Smithsonian Environmental Research Center (SERC)",
imageUrl: null,
},
{
id: "fs-05",
lat: 38.83,
lng: -78.55,
label: "Smithsonian Conservation Biology Institute (SCBI)",
imageUrl: null,
},
{
id: "fs-06",
lat: 38.03,
lng: -78.5,
label: "University of Virginia — Charlottesville",
imageUrl: null,
},
{
id: "fs-07",
lat: 65.15401,
lng: -147.50258,
label: "Caribou-Poker Creeks — Alaska Arctic (NEON BONA)",
imageUrl: "images/field-sites/IMG_6247.JPG",
},
{
id: "fs-08",
lat: 18.28,
lng: -65.79,
label: "El Yunque — Puerto Rico (MACROCOSM)",
imageUrl: null,
},
{
id: "fs-09",
lat: 29.25,
lng: -90.66,
label: "Coastal Louisiana — LUMCON Ghost Forest",
imageUrl: "images/field-sites/IMG_4922.jpg",
},
{
id: "fs-10",
lat: 38.45,
lng: -76.13,
label: "Blackwater Wildlife Refuge — Coastal Maryland",
imageUrl: "images/field-sites/IMG_3278_2.JPG",
},
{
id: "fs-11",
lat: 37.923653,
lng: -78.272329,
label: "UVA Pace Tower — Virginia",
imageUrl: "images/field-sites/DJI_0062.JPG",
},
{
id: "fs-12",
lat: -2.6091,
lng: -60.2093,
label: "Amazon Forest — Manaus, Brazil (GOAmazon)",
imageUrl: "images/field-sites/DSC_0145.jpg",
},
{
id: "fs-18",
lat: 10.4333,
lng: -83.9833,
label: "La Selva Biological Station — Costa Rica",
imageUrl: "images/field-sites/IMG_3277.jpg",
},
];
function InteractiveMapComponent({ sites }) {
const mapDivRef = React.useRef(null);
const leafletMapRef = React.useRef(null);
const markersRef = React.useRef([]);
const activeSites = sites || FIELD_SITES;
React.useEffect(() => {
// Leaflet must be loaded; bail if not
if (!window.L || !mapDivRef.current) return;
// Don't double-init
if (leafletMapRef.current) return;
const L = window.L;
// Init map centered on continental US
const map = L.map(mapDivRef.current, {
center: [38.5, -96.0],
zoom: 4,
zoomControl: false, // we supply our own buttons
scrollWheelZoom: true,
attributionControl: true,
});
leafletMapRef.current = map;
// Esri World Topo tile layer — shows terrain + vegetation at all zoom levels, no API key
L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}", {
maxZoom: 19,
attribution:
'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community',
}).addTo(map);
// Custom marker icon that matches the lab palette
function makeIcon(highlighted) {
return L.divIcon({
className: "",
iconAnchor: [12, 24],
popupAnchor: [0, -26],
html: ``,
});
}
// Add markers
activeSites.forEach((site) => {
const marker = L.marker([site.lat, site.lng], { icon: makeIcon(false) });
// Build popup content
let popupContent = `
${site.label}
${site.lat.toFixed(4)}° N, ${Math.abs(site.lng).toFixed(4)}° ${site.lng < 0 ? "W" : "E"}
`;
if (site.imageUrl) {
popupContent += `
`;
}
popupContent += `
View gallery →
`;
marker.bindPopup(popupContent, {
maxWidth: 280,
className: "peers-popup",
});
marker.addTo(map);
markersRef.current.push(marker);
});
return () => {
// Clean up on unmount
map.remove();
leafletMapRef.current = null;
markersRef.current = [];
};
}, []); // run once on mount
// Sync site list changes (if parent passes new sites)
React.useEffect(() => {
const map = leafletMapRef.current;
const L = window.L;
if (!map || !L) return;
// Remove old markers
markersRef.current.forEach((m) => m.remove());
markersRef.current = [];
function makeIcon() {
return L.divIcon({
className: "",
iconAnchor: [12, 24],
popupAnchor: [0, -26],
html: ``,
});
}
activeSites.forEach((site) => {
const marker = L.marker([site.lat, site.lng], { icon: makeIcon() });
let popupContent = `
${site.label}
${site.lat.toFixed(4)}° N, ${Math.abs(site.lng).toFixed(4)}° ${site.lng < 0 ? "W" : "E"}
`;
if (site.imageUrl) {
popupContent += `
`;
}
popupContent += `
View gallery →
`;
marker.bindPopup(popupContent, { maxWidth: 280, className: "peers-popup" });
marker.addTo(map);
markersRef.current.push(marker);
});
}, [sites]);
const zoomIn = () => leafletMapRef.current && leafletMapRef.current.zoomIn();
const zoomOut = () => leafletMapRef.current && leafletMapRef.current.zoomOut();
return (
{/* Map div — Leaflet mounts into this */}
{/* Custom zoom buttons — positioned over the map */}
{/* Site count badge */}
{activeSites.length} field site{activeSites.length !== 1 ? "s" : ""}
{/* Popup styles injected once */}