[V0_FILE]typescriptreact:file="App.tsx" isEdit="true" isMerged="true" import AustraliaRailMap from "./AustraliaRailMap" function App() { return (

) } export default App [V0_FILE]css:file="styles.css" isEdit="true" isMerged="true" .australia-rail-map { max-width: 800px; margin: 0 auto; padding: 20px; } .australia-rail-map h1 { text-align: center; color: #333; font-family: Arial, sans-serif; } .australia-rail-map svg { width: 100%; height: auto; } [V0_FILE]typescriptreact:file="MapComponent.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import { MapContainer, TileLayer, Polyline, Marker, Tooltip } from "react-leaflet" import L from "leaflet" import "leaflet/dist/leaflet.css" // Define custom icon for stations const stationIcon = new L.Icon({ iconUrl: 'data:image/svg+xml;utf8,', iconSize: [10, 10], iconAnchor: [5, 5], className: "station-icon", }) interface MapComponentProps { somertonRoutes: any stationCoordinates: { [key: string]: [number, number] } getCoordinates: (stationName: string) => [number, number] | null getRouteStyle: (routeNumber: number) => any handleRouteHover: (routeNumber: number | null) => void handleRouteClick: (routeNumber: number) => void selectedRoute: number | null } const MapComponent: React.FC = ({ somertonRoutes, stationCoordinates, getCoordinates, getRouteStyle, handleRouteHover, handleRouteClick, selectedRoute, }) => { return ( {Object.entries(somertonRoutes).map(([routeNumberStr, routeData]) => { const routeNumber = Number(routeNumberStr) const coordinates = routeData.path.map((station) => getCoordinates(station)).filter((c) => c !== null) as [ number, number, ][] return ( handleRouteHover(routeNumber), mouseout: () => handleRouteHover(null), click: () => handleRouteClick(routeNumber), }} /> ) })} {Object.entries(stationCoordinates).map(([name, coords]) => ( {name.replace(/_/g, " ")} ))} ) } export default MapComponent [V0_FILE]typescript:file="routeData.ts" export const somertonRoutes = { 1: { name: "Melbourne to Dimboola", stations: ["Melbourne", "Rockbank", "Gordon", "Ouyen", "Ararat", "Beulah", "Antwerp", "Bordertown", "Dimboola"], path: ["Melbourne", "Rockbank", "Gordon", "Ouyen", "Ararat", "Beulah", "Antwerp", "Bordertown", "Dimboola"], }, 2: { name: "Melbourne to Panitya", stations: [ "Melbourne", "Tallarook", "Bendigo", "Inglewood", "Malmsbury", "Pyalong", "Arnold", "Navarre", "Elmhurst", "Tatyoon", "Panitya", ], path: [ "Melbourne", "Tallarook", "Bendigo", "Inglewood", "Malmsbury", "Pyalong", "Arnold", "Navarre", "Elmhurst", "Tatyoon", "Panitya", ], }, 3: { name: "Melbourne to Callington", stations: [ "Melbourne", "Lexton", "Inglewood", "Ararat", "Bordertown", "Ouyen", "Apsley", "Irymple", "Alawoona", "Qualco", "Callington", ], path: [ "Melbourne", "Lexton", "Inglewood", "Ararat", "Bordertown", "Ouyen", "Apsley", "Irymple", "Alawoona", "Qualco", "Callington", ], }, 4: { name: "Islington to Bordertown", stations: [ "Islington", "Tailem Bend", "Tintinara", "Meningie", "Tatiara", "Serviceton", "Apsley", "Mundulla", "Serviceton", "Tatiara", "Geranium", "Alawoona", "Bordertown", ], path: [ "Islington", "Tailem_Bend", "Tintinara", "Meningie", "Tatiara", "Serviceton", "Apsley", "Mundulla", "Serviceton", "Tatiara", "Geranium", "Alawoona", "Bordertown", ], }, } export const somertonCodeLines = ["MRGOABABD", "MTBIMPANETP", "MLIABOAIAQC", "ITTMTSAMSTGAB"] [V0_FILE]typescript:file="stationCoordinates.ts" export const stationCoordinates: { [key: string]: [number, number] } = { Melbourne: [-37.8136, 144.9631], Adelaide: [-34.9285, 138.6007], Dimboola: [-36.45, 142.0333], Bordertown: [-36.3119, 140.7731], Ararat: [-37.2833, 142.9333], Ouyen: [-35.0667, 142.3167], Serviceton: [-36.3333, 140.9833], Rockbank: [-37.7456, 144.67], Gordon: [-37.59, 144.0967], Beulah: [-35.9167, 142.4167], Antwerp: [-36.05, 142.3667], Tallarook: [-37.1, 145.1], Bendigo: [-36.757, 144.2794], Inglewood: [-36.5667, 143.8667], Malmsbury: [-37.1333, 144.3833], Pyalong: [-37.0833, 144.8667], Arnold: [-36.6333, 143.7333], Navarre: [-37.0, 143.1167], Elmhurst: [-37.2, 143.2667], Tatyoon: [-37.4167, 142.9333], Panitya: [-35.9167, 140.9167], Lexton: [-37.2667, 143.5], Apsley: [-36.95, 141.0833], Irymple: [-34.2167, 142.15], Alawoona: [-34.7167, 140.35], Qualco: [-34.35, 140.6333], Callington: [-35.1167, 139.0333], Tailem_Bend: [-35.25, 139.4667], Tintinara: [-35.8833, 140.05], Meningie: [-35.6833, 139.3333], Tatiara: [-36.25, 140.5], Mundulla: [-36.35, 140.6833], Geranium: [-35.75, 140.5833], Islington: [-34.8667, 138.5833], } export const getCoordinates = (stationName: string): [number, number] | null => { const cleanName = stationName.replace(" (x)", "").replace(/ /g, "_") return stationCoordinates[cleanName] || null } [V0_FILE]typescriptreact:file="AustraliaRailMap.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import dynamic from "next/dynamic" import { somertonRoutes, somertonCodeLines } from "./routeData" import { stationCoordinates, getCoordinates } from "./stationCoordinates" const MapComponent = dynamic(() => import("./MapComponent"), { ssr: false }) const AustraliaRailMap: React.FC = () => { const [isMounted, setIsMounted] = useState(false) const [activeRoute, setActiveRoute] = useState(null) const [selectedRoute, setSelectedRoute] = useState(null) useEffect(() => { setIsMounted(true) }, []) const handleRouteHover = (routeNumber: number | null) => { setActiveRoute(routeNumber) } const handleRouteClick = (routeNumber: number) => { setSelectedRoute((prev) => (prev === routeNumber ? null : routeNumber)) } const getRouteStyle = (routeNumber: number) => { const isSelected = selectedRoute === routeNumber return { color: isSelected ? "red" : routeNumber === 1 ? "#e53935" : routeNumber === 2 ? "#1e88e5" : routeNumber === 3 ? "#43a047" : "#fb8c00", weight: isSelected ? 4 : 3, opacity: selectedRoute === null || selectedRoute === routeNumber ? 1 : 0.3, dashArray: isSelected ? "5, 10" : undefined, } } return (

{isMounted && ( )}

Australian Rail Journeys Map

Salesman's Continuous Journey (1948)

Somerton Man

An unidentified man found dead on Somerton Beach, Adelaide in 1948.

Mysterious code:

{somertonCodeLines.map((line, index) => (

{line}

))}

{activeRoute && (

Route: {somertonRoutes[activeRoute].name}

Stations:

{somertonRoutes[activeRoute].stations.join(", ")}

)} {selectedRoute !== null && (

Selected Route: {somertonRoutes[selectedRoute].name}

Stations:

{station}

)}

Legend

{selectedRoute !== null && ( )} {Object.entries(somertonRoutes).map(([routeNumber, route]) => (

handleRouteClick(Number(routeNumber))}>{route.name}

))}

Selected Route

Station

(x) Rail Car Exit

Note: Station positions are approximate. Drawn lines represent connections between stations and do not necessarily follow exact train routes.

) } export default AustraliaRailMap

About

About