Public
Like
worldclock
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
This feature branch adds an interactive map visualization to the world clock application. The map shows the approximate location of the selected timezone.
- 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
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
index-with-map.html- HTML file with map component addedscript-with-map.js- JavaScript file with map functionalityserver-with-map.js- Updated server file with feature flag support
- Access the application with the map feature by adding
?map=trueto the URL - Or navigate to
/mapwhich 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
- 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
- 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