This feature branch adds an interactive map visualization to the world clock application. The map shows the approximate location of the selected timezone.
New Features
Interactive map that updates when a timezone is selected
Visual representation of the current timezone location
Responsive design that works on both mobile and desktop
Feature flag to enable/disable the map functionality
Implementation Details
This feature uses:
Leaflet.js for the map visualization
A mapping of timezone identifiers to geographic coordinates
Responsive layout with grid for desktop and stacked for mobile
Files Added/Modified
index-with-map.html - HTML file with map component added
script-with-map.js - JavaScript file with map functionality
server-with-map.js - Updated server file with feature flag support
How to Test
Access the application with the map feature by adding ?map=true to the URL
Or navigate to /map which will redirect to the map version
Select different timezones from the dropdown
Observe how the map updates to show the approximate location
Test on different screen sizes to ensure responsive behavior
Implementation Notes
The map uses OpenStreetMap tiles which don't require an API key
Each timezone has an approximate geographic coordinate associated with it
When a timezone is selected, the map centers on that location
For local time, the map attempts to use the browser's timezone to determine location
The map includes a marker with a popup showing the timezone name
Future Improvements
Add timezone boundary polygons instead of just center points
Add day/night visualization overlay
Allow clicking on the map to select the nearest timezone