An interactive world timezone map built with Next.js. Explore 60+ cities across every major timezone with a full-screen, color-coded map -- no API keys required.
- Full-screen interactive map powered by MapLibre GL with free CARTO basemap tiles
- 60+ city markers spanning all major timezones, color-coded by UTC offset
- Country timezone shading -- countries are filled by their actual timezone, reflecting real-world boundaries rather than straight vertical lines
- Timezone boundary lines drawn as dashed overlays across the map
- Click any marker to view a popup with live local time, date, UTC offset, and a comparison to your local time
- Hover a country to highlight every country sharing that same timezone
- City search bar for quick lookup
- Timezone time labels pinned to the bottom of the screen, positioned between boundary lines
- Geolocation with a pulsing blue dot showing your current position
- Toggle city markers on or off for a cleaner view
- Dark / light theme that follows your system preference automatically
- Map controls for zoom, locate-me, and fullscreen
- Node.js 18+
git clone <repo-url>
cd time-map
npm installnpm run devOpen http://localhost:3000 to view the app.
npm run build
npm start| Layer | Technology |
|---|---|
| Framework | Next.js 16 |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| UI Components | shadcn/ui |
| Map | MapLibre GL via mapcn |
| Basemap Tiles | CARTO (free, no API key) |
| Country Boundaries | TopoJSON (world-110m) |
| Icons | Lucide React |
MIT