Map Visualization Feature for World Clock

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

  1. Access the application with the map feature by adding ?map=true to the URL
  2. Or navigate to /map which will redirect to the map version
  3. Select different timezones from the dropdown
  4. Observe how the map updates to show the approximate location
  5. 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
  • Add search functionality for locations