devthom_studios
README.md

Interactive Weather Map

An interactive weather map application built on Val Town that allows users to search for locations or click anywhere on a map to see current weather conditions and 5-day forecast.

Features

  • Search bar to find specific locations by name, address, or place
  • Interactive map powered by Leaflet.js
  • Real-time weather data from Open-Meteo API (no API key required)
  • Current weather conditions displayed in a clean table format
  • 5-day weather forecast with daily temperature ranges and precipitation chances
  • Visual weather indicators with emojis for all conditions
  • Location name detection using reverse geocoding
  • Pre-defined markers for major cities
  • Responsive design with Tailwind CSS

How to Use

  1. Open the application in your browser
  2. Search for a specific location using the search bar
  3. Or click anywhere on the map to see current weather conditions
  4. Click on city markers to quickly view weather in major cities
  5. View detailed current weather in the table format
  6. Check the 5-day forecast for planning ahead

Weather Information Displayed

Current Weather

  • Weather condition with visual indicator
  • Current temperature and "feels like" temperature
  • Humidity percentage
  • Precipitation amount
  • Wind speed and direction

5-Day Forecast

  • Daily weather conditions with visual indicators
  • Daily minimum and maximum temperatures
  • Daily precipitation amount and probability
  • Formatted dates for easy reading

Technical Details

  • Frontend: HTML, JavaScript, Leaflet.js, Tailwind CSS
  • Backend: Val Town HTTP handler with Hono.js
  • Weather Data: Open-Meteo API (free, no API key required)
  • Map Data: OpenStreetMap
  • Geocoding: Nominatim API for location search and reverse geocoding

Project Structure

  • /index.ts - Main HTTP handler and API endpoints
  • /frontend/index.html - Frontend application with map and weather display

Credits

Technical Details

  • Frontend: HTML, JavaScript, Leaflet.js, Tailwind CSS
  • Backend: Val Town HTTP handler with Hono.js
  • Weather Data: Open-Meteo API (free, no API key required)
  • Map Data: OpenStreetMap

Weather Information Displayed

  • Current temperature and "feels like" temperature
  • Weather conditions with visual indicator
  • Humidity percentage
  • Precipitation amount
  • Wind speed and direction

Project Structure

  • /index.ts - Main HTTP handler and API endpoints
  • /frontend/index.html - Frontend application with map and weather display

Credits