Weather Map Web App

A simple web application that displays a map and weather information for a selected location using the OpenWeather API.

Features

• Interactive OpenStreetMap-based map
• Click anywhere on the map to get weather details
• Weather data fetched through a local PHP proxy to keep the API key secure
• Lightweight front-end built with plain HTML, CSS, and JavaScript

Project Structure

• weather.html — Main page containing the map and output panel
• weather.js — Front-end logic for the map and weather requests
• proxy.php — PHP proxy that forwards requests to the OpenWeather API using a local environment variable
• .env — Local API key storage (ignored by Git)
• .gitignore — Prevents sensitive files from being pushed to GitHub

Prerequisites

• XAMPP installed on your computer
• PHP with curl enabled
• An OpenWeather API key

Install XAMPP

1. Download and install XAMPP from the official website.
2. Open the XAMPP Control Panel.
3. Start the Apache module by clicking the Start button next to Apache.
4. If prompted, allow the application through your firewall.

Setup

1. Place this project inside the XAMPP web root folder, usually:

C:/xampp/htdocs/

or on macOS/Linux:

/Applications/XAMPP/xamppfiles/htdocs/

2. Create a .env file in the project root and add your API key:

WEATHER_API_KEY=your_openweather_api_key_here

3. Make sure your PHP environment can access the .env file and curl is enabled.

How to Run

1. Open the XAMPP Control Panel.
2. Start Apache if it is not already running.
3. Open the project in your browser:

http://localhost/project3%202/weather.html

3. Click on the map to view the weather for that location.

Troubleshooting

• If the weather does not load, verify that:
  • Apache is running
  • PHP is installed and working
  • Your API key is valid
  • The .env file is present in the project root