\n \n

\n);\n\n// Floating clouds with animation\nconst Clouds = () => (\n <>\n \n \n \n \n);\n\n// Golden Gate Bridge - improved illustration\nconst GoldenGateBridge = ({ x, y }: { x: number; y: number }) => (\n \n);\n\n// Alcatraz Island\nconst Alcatraz = ({ x, y }: { x: number; y: number }) => (\n \n);\n\n// Water waves animation\nconst WaterWaves = () => (\n

\n \n \n

\n);\n\n// Mini California map\nconst MiniMap = () => (\n

\n \n

\n);\n\nexport const MapView: React.FC = ({ neighborhoods, selectedTimeIndex }) => {\n const containerRef = useRef(null);\n const [dimensions, setDimensions] = useState({ \n width: typeof window !== 'undefined' ? window.innerWidth : 400, \n height: typeof window !== 'undefined' ? window.innerHeight - 180 : 500 \n });\n\n // Update dimensions on resize and initial mount\n useEffect(() => {\n const updateDimensions = () => {\n if (containerRef.current) {\n const rect = containerRef.current.getBoundingClientRect();\n if (rect.width > 0 && rect.height > 0) {\n setDimensions({ width: rect.width, height: rect.height });\n }\n }\n };\n\n // Initial update after a short delay to ensure layout is complete\n updateDimensions();\n const timeoutId = setTimeout(updateDimensions, 100);\n \n window.addEventListener(\"resize\", updateDimensions);\n return () => {\n window.removeEventListener(\"resize\", updateDimensions);\n clearTimeout(timeoutId);\n };\n }, []);\n\n // Create D3 projection and path generator\n const { projection, pathGenerator, sfPath, marinPath } = useMemo(() => {\n const padding = 30;\n \n // Create Mercator projection and fit it to the SF boundary\n const proj = d3.geoMercator();\n \n // Use fitExtent to automatically scale and center the projection\n // Leave padding on all sides, more at top for header and bottom for time scrubber\n proj.fitExtent(\n [\n [padding, padding + 60], // Top-left with extra top padding for header\n [dimensions.width - padding, dimensions.height - padding - 20] // Bottom-right\n ],\n SF_BOUNDARY_GEOJSON as any\n );\n\n const path = d3.geoPath().projection(proj);\n \n return {\n projection: proj,\n pathGenerator: path,\n sfPath: path(SF_BOUNDARY_GEOJSON as any) || \"\",\n marinPath: path(MARIN_GEOJSON as any) || \"\",\n };\n }, [dimensions]);\n\n // Calculate landmark positions\n const bridgePos = projection([-122.4785, 37.8199]) || [0, 0];\n const alcatrazPos = projection([-122.4230, 37.8267]) || [0, 0];\n\n // Project neighborhood coordinates\n const projectedNeighborhoods = useMemo(() => {\n return Object.entries(NEIGHBORHOOD_COORDS).map(([name, coords]) => {\n const [x, y] = projection([coords.lon, coords.lat]) || [0, 0];\n const forecast = neighborhoods[name];\n \n if (!forecast) return null;\n\n const safeIndex = Math.min(\n selectedTimeIndex,\n (forecast.temperature_2m?.length || 1) - 1\n );\n\n return {\n name,\n shortName: coords.shortName,\n x,\n y,\n temp: forecast.temperature_2m?.[safeIndex] ?? 50,\n realfeel: forecast.apparent_temperature?.[safeIndex] ?? forecast.temperature_2m?.[safeIndex] ?? 50,\n windSpeed: forecast.wind_speed_10m?.[safeIndex] ?? 0,\n precip: forecast.precipitation?.[safeIndex] ?? 0,\n };\n }).filter(Boolean);\n }, [neighborhoods, selectedTimeIndex, projection]);\n\n return (\n

\n {/* Sky gradient background */}\n

\n \n {/* Decorative elements */}\n \n \n \n \n \n {/* Main SVG map container */}\n \n\n {/* Landmarks */}\n \n \n\n {/* Neighborhood pins */}\n

\n {projectedNeighborhoods.map((n) => n && (\n \n ))}\n

\n\n {/* CSS animations */}\n \n

\n );\n};\n","deleted","label",[179,180,160],"frontend","components","permalink","https://www.val.town/x/shapedlines/breezy/code/frontend/components/MapView.tsx","extension","actionData","errors"]