import jfkVisits from "~/data/jfk-visits-1961.json"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Calendar, MapPin, Globe, Play, Pause, RotateCcw } from "lucide-react"; export function JFKVisitsMap() { const { data } = useData(jfkVisits); const [isLoaded, setIsLoaded] = React.useState(false); const mapContainer = React.useRef(null); const map = React.useRef(null); const [isPlaying, setIsPlaying] = React.useState(false); const [currentStep, setCurrentStep] = React.useState(0); const markersRef = React.useRef([]); const animationRef = React.useRef(null); React.useEffect(() => { const loadMapLibre = () => { if (window.maplibregl) { setIsLoaded(true); return; } const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://unpkg.com/maplibre-gl@5.7.3/dist/maplibre-gl.css'; document.head.appendChild(link); const script = document.createElement('script'); script.src = 'https://unpkg.com/maplibre-gl@5.7.3/dist/maplibre-gl.js'; script.onload = () => setIsLoaded(true); document.head.appendChild(script); }; loadMapLibre(); }, []); React.useEffect(() => { if (!isLoaded || !mapContainer.current || map.current) return; const maplibregl = window.maplibregl; map.current = new maplibregl.Map({ container: mapContainer.current, style: { version: 8, sources: { 'osm': { type: 'raster', tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'], tileSize: 256, attribution: '© OpenStreetMap contributors' } }, layers: [ { id: 'osm', type: 'raster', source: 'osm', minzoom: 0, maxzoom: 19 } ] }, center: [-20, 40], zoom: 2 }); const visits = data.visits || []; markersRef.current = []; visits.forEach((visit, index) => { const el = document.createElement('div'); el.className = 'marker'; el.style.backgroundColor = visit.type === 'international' ? '#3b82f6' : '#10b981'; el.style.width = '24px'; el.style.height = '24px'; el.style.borderRadius = '50%'; el.style.border = '3px solid white'; el.style.cursor = 'pointer'; el.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)'; el.style.transition = 'opacity 0.5s'; el.style.opacity = '0'; const popup = new maplibregl.Popup({ offset: 25 }).setHTML( `

${visit.location}

${visit.date}

Purpose: ${visit.purpose}

${visit.description}

` ); const marker = new maplibregl.Marker(el) .setLngLat(visit.coordinates) .setPopup(popup) .addTo(map.current); markersRef.current.push({ marker, element: el, visit }); }); map.current.on('load', () => { map.current.addSource('route', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: [] } } }); map.current.addLayer({ id: 'route', type: 'line', source: 'route', layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': '#ef4444', 'line-width': 3, 'line-dasharray': [2, 2] } }); }); if (visits.length > 0) { const coordinates = visits.map(v => v.coordinates); const bounds = coordinates.reduce((bounds, coord) => { return bounds.extend(coord); }, new maplibregl.LngLatBounds(coordinates[0], coordinates[0])); map.current.fitBounds(bounds, { padding: 80 }); } }, [isLoaded, data]); const playStory = () => { if (!map.current || isPlaying) return; setIsPlaying(true); const visits = data.visits || []; const animate = (step) => { if (step >= visits.length) { setIsPlaying(false); return; } setCurrentStep(step); const visit = visits[step]; const markerData = markersRef.current[step]; if (markerData) { markerData.element.style.opacity = '1'; } map.current.flyTo({ center: visit.coordinates, zoom: 5, duration: 2000, essential: true }); if (step > 0) { const routeCoords = visits.slice(0, step + 1).map(v => v.coordinates); map.current.getSource('route').setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: routeCoords } }); } animationRef.current = setTimeout(() => { animate(step + 1); }, 2500); }; animate(0); }; const pauseStory = () => { setIsPlaying(false); if (animationRef.current) { clearTimeout(animationRef.current); } }; const resetStory = () => { pauseStory(); setCurrentStep(0); markersRef.current.forEach(({ element }) => { element.style.opacity = '0'; }); if (map.current && map.current.getSource('route')) { map.current.getSource('route').setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: [] } }); } const visits = data.visits || []; if (visits.length > 0 && map.current) { const coordinates = visits.map(v => v.coordinates); const bounds = coordinates.reduce((bounds, coord) => { return bounds.extend(coord); }, new window.maplibregl.LngLatBounds(coordinates[0], coordinates[0])); map.current.fitBounds(bounds, { padding: 80 }); } }; React.useEffect(() => { return () => { if (animationRef.current) { clearTimeout(animationRef.current); } }; }, []); const visits = data.visits || []; const metadata = data.metadata || {}; return (

{metadata.title || "JFK's Presidential Visits"} Interactive map showing President Kennedy's travels during his first year in office (1961)

{!isPlaying ? ( ) : ( )}

{currentStep < visits.length && currentStep >= 0 && visits[currentStep] && (

{visits[currentStep].location}

{visits[currentStep].type}

{visits[currentStep].date}

Purpose: {visits[currentStep].purpose}

{visits[currentStep].description}

Visit {currentStep + 1} of {visits.length}

)}

Visit Timeline

{visits.map((visit) => (

{visit.type}

{visit.location}

{visit.date}

Purpose: {visit.purpose}

{visit.description}

))}

); }