• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
evilmathwalnuts

evilmathwalnuts

worldclock

A simple, interactive world clock
Public
Like
worldclock
Home
Code
9
MAP-FEATURE-README.md
README.md
index-with-map.html
index.html
script-with-map.js
script.js
server-with-map.js
H
server.js
style.css
Branches
1
Pull requests
Remixes
History
Environment variables
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.
Sign up now
Code
/
MAP-FEATURE-README.md
Code
/
MAP-FEATURE-README.md
Search
5/15/2025
Viewing readonly version of main branch: v13
View latest version
MAP-FEATURE-README.md

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
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.