Daylight Tracker draws a world map with a live overlay marking which regions are currently in daylight and which are in night, and plots a list of cities on it so you can see each one's local time and day/night status at a glance.
Before you start
- A landscape screen works best. The map is a wide rectangle (roughly 2:1); on a narrow phone in portrait orientation it renders letterboxed with blank space above and below.
- Location permission, only if you plan to use Auto-detect my location. Your browser prompts you the first time you turn it on.
- The cities you want to track. They come from a built-in list of major cities — there's no lookup for arbitrary place names, so check yours is available before building a display around it.
Set it up
- Open Daylight Tracker. The control panel opens directly on the Custom tab, with Settings and Locations sub-tabs.
- Give the map a moment to load — the continents appear once the boundary data finishes loading, usually well under a second.
- In the Locations tab, add cities either way: pick one from Select a city and choose Add Selected City, or type into the search box below it and select a match from the buttons that appear. Search matches on city name or country, so "Japan" finds Tokyo.
- Remove any of the five default cities you don't need with the trash icon next to that entry.
- Back in the Settings tab, set Map Projection and toggle the display options to match what you want on screen.
- Select Go Fullscreen for a wall display or standalone view.
You'll know it worked when your added cities appear as dots on the map — amber for daylight, indigo for night — and their names and local times show in the panel in the bottom-left corner.
What each control does
| Control | Range / Options | What it changes |
|---|---|---|
| Show City Labels | On/off | Shows or hides the name text next to each city dot on the map. The bottom-left location list always shows names regardless. |
| Show Day/Night Line | On/off | Turns the entire night shading, terminator, and twilight bands on or off — not just a line. City dots still switch between amber and indigo on their own even with this off. |
| Show Twilight Bands | On/off | Adds a set of dashed rings around the terminator marking dawn and dusk zones — amber on the sunrise side, purple on the sunset side. Has no effect if Show Day/Night Line is off. |
| Show Current Time | On/off | Shows or hides the clock in the header. That clock is your device's own local time, not any tracked city's time. |
| Map Projection | Mercator, Natural Earth, Orthographic | The shape the world is drawn in. Mercator is the familiar rectangular map; Natural Earth is a rounded whole-earth view; Orthographic renders a 3D-look globe. |
| Globe Rotation — Longitude | -180° to 180° (Orthographic only) | Spins the globe horizontally. Appears only when Map Projection is set to Orthographic. |
| Globe Rotation — Latitude | -90° to 90° (Orthographic only) | Tilts the globe vertically. Appears only when Map Projection is set to Orthographic. |
| Auto-detect my location | On/off | Requests your browser's location permission and, if granted, adds a red-highlighted marker for where you are. |
| Update Interval | 1–60 minutes | How often the current time, terminator, and city day/night status recalculate. Lower values refresh more often; the default is 1 minute. |
Cities are added and removed from the Locations tab, not a slider.
With Orthographic selected, you can also drag directly on the globe to spin it. The angle you release at is kept, and the Longitude and Latitude sliders update to match — drag for a rough angle, then fine-tune with the sliders.
Common setups
- A distributed team's office wall display. Mercator projection, Show City Labels on, Update Interval 5 minutes. Replace the default five cities with your actual office locations from the dropdown.
- A classroom geography lesson. Orthographic projection with Show Twilight Bands on. The curved globe and the dawn/dusk rings explain the day-night boundary better than a flat map, and dragging the globe mid-lesson to face a region keeps it there while you talk.
- A personal desktop background. Natural Earth projection, Show City Labels off for a cleaner look, Update Interval 15 minutes since a background doesn't need minute-by-minute precision.
- A quick check before scheduling a call. Leave the projection on Mercator and add just the one or two cities you're coordinating with — the bottom-left panel gives you local time and day/night status without reading the whole map.
Troubleshooting
The map shows a plain gradient with no continents. The country outline file failed to load, and a notice appears above the map when that happens. The day/night overlay and city markers are unaffected and still accurate — only the landmass shapes are missing. Reopening the effect retries the load.
The city I searched for isn't in the results. Search only covers the built-in list of major cities, matching on city name or country. There's no lookup for arbitrary place names, so pick the nearest listed city in the same time zone instead — the day/night status will be effectively identical.
Auto-detect my location didn't add anything. Location permission was likely denied or blocked, and the effect shows no error when that happens. Check your browser's address bar for a blocked-location icon, allow access, then toggle the switch off and back on.
I added more than six cities but only some show up in the list at the bottom. That panel is capped at 6 entries. Every added city still appears as a dot on the map — remove cities you no longer need from the Locations tab to keep the list focused.
All my tracked cities and settings are gone after I reloaded the page. Expected — nothing on this effect is saved. Rebuild your city list and re-set your display options each time you revisit.
Next steps
For a simpler side-by-side time zone readout without the map, try Analog World Clock or Digital World Clock.