Skip to content

Commit 3e788a3

Browse files
suhaastejasuhaasteja
committed
- Created comprehensive README with detailed project overview, features, and setup instructions
- Added authentication page (auth.html) for secure API key management
1 parent 1e51e15 commit 3e788a3

File tree

8 files changed

+592
-4
lines changed

8 files changed

+592
-4
lines changed

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Weather Balloon Monitor
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
# 🎈 Weather Balloon Monitor
2+
3+
An interactive web application for exploring global weather data from Windborne Systems balloon stations with real-time visualizations and analytics.
4+
5+
![Weather Map](https://img.shields.io/badge/Status-Active-success)
6+
![License](https://img.shields.io/badge/License-MIT-blue)
7+
![Mapbox](https://img.shields.io/badge/Mapbox-GL%20JS%20v3.15.0-blue)
8+
9+
## 📸 Screenshot
10+
11+
![Weather Map Application](assets/demo.png)
12+
13+
---
14+
15+
## ✨ Features
16+
17+
### 🗺️ Interactive Map
18+
- **Global Coverage**: Explore weather stations worldwide with an interactive Mapbox-powered map
19+
- **Smart Clustering**: Automatically groups nearby stations for better visualization at different zoom levels
20+
- **Smooth Navigation**: Pan, zoom, and click to explore weather data seamlessly
21+
22+
### 📊 Advanced Analytics
23+
24+
#### Temperature Heatmaps
25+
- **Hourly Patterns**: Visualize temperature variations across 24-hour periods
26+
- **Historical Trends**: Track temperature changes over multiple days
27+
- **Dynamic Color Scaling**: Automatically adjusts color ranges based on actual data
28+
- **Interactive Tooltips**: Hover over any data point for detailed information
29+
30+
#### Wind Rose Analysis
31+
- **Direction Distribution**: See prevailing wind directions across 16 compass points
32+
- **Speed Categories**: Wind speeds grouped into 5 ranges (0-5, 5-10, 10-15, 15-25, >25 mph)
33+
- **Statistical Summary**: Average speed, maximum speed, and prevailing direction
34+
- **Polar Visualization**: Intuitive circular chart showing wind patterns
35+
36+
### 🔒 Simple Authentication
37+
- **API Key Protection**: API key stored only in browser session storage
38+
- **Session-Based**: Key persists until browser tab is closed
39+
- **No Server Required**: All validation happens client-side
40+
- **Easy Setup**: Just enter your API key when the app loads
41+
42+
### 📍 Station Details
43+
- Station ID and network information
44+
- Elevation and timezone data
45+
- Precise GPS coordinates
46+
- Historical data point counts
47+
- Date range coverage
48+
49+
---
50+
51+
## 🚀 Getting Started
52+
53+
### Prerequisites
54+
55+
- A modern web browser (Chrome, Firefox, Safari, or Edge)
56+
- A Mapbox API key ([Get one free here](https://account.mapbox.com/auth/signup/))
57+
- A local web server or hosting platform
58+
59+
### Installation
60+
61+
1. **Clone the repository**
62+
```bash
63+
git clone https://github.com/yourusername/weather-map.git
64+
cd weather-map
65+
```
66+
67+
2. **Get a Mapbox API key**
68+
69+
Sign up at [Mapbox](https://account.mapbox.com/auth/signup/) and get your free API key.
70+
71+
3. **Serve the application**
72+
73+
Using Python:
74+
```bash
75+
python -m http.server 8000
76+
```
77+
78+
Or using Node.js:
79+
```bash
80+
npx http-server -p 8000
81+
```
82+
83+
4. **Access the application**
84+
85+
Open your browser and navigate to:
86+
```
87+
http://localhost:8000/auth.html
88+
```
89+
90+
5. **Enter your API key**
91+
92+
When prompted, enter your Mapbox API key. It will be stored in your browser session.
93+
94+
---
95+
96+
## 📁 Project Structure
97+
98+
```
99+
weather-map/
100+
├── index.html # Main application page
101+
├── auth.html # Authentication page
102+
├── app.js # Core application logic
103+
├── config.js # Configuration and API key hash
104+
├── styles.css # Application styles
105+
├── assets/ # Images and icons
106+
│ └── weather-balloon.png
107+
└── README.md # This file
108+
```
109+
110+
---
111+
112+
## 🔧 Configuration
113+
114+
### API Key Security
115+
116+
The application uses a simple session-based approach:
117+
118+
1. **Session Storage**: Your API key is stored in browser session storage
119+
2. **Session Lifetime**: Key persists until you close the browser tab
120+
3. **No Transmission**: Your API key is never sent to any server except Mapbox's official API
121+
4. **No Repository Exposure**: The key is never committed to your Git repository
122+
123+
### Customization
124+
125+
#### Modify Map Style
126+
127+
In `app.js`, change the Mapbox style:
128+
```javascript
129+
const map = new mapboxgl.Map({
130+
style: "mapbox://styles/mapbox/streets-v12", // or dark-v11, light-v11, etc.
131+
});
132+
```
133+
134+
---
135+
136+
## 🌐 Deployment
137+
138+
### GitHub Pages
139+
140+
1. **Push to GitHub**
141+
```bash
142+
git add .
143+
git commit -m "Initial commit"
144+
git push origin main
145+
```
146+
2. **Enable GitHub Pages** in repository settings
147+
3. **Set source** to main branch
148+
4. **Access** at `https://yourusername.github.io/weather-map/auth.html`
149+
5. **Enter your API key** when prompted
150+
151+
### Netlify
152+
153+
1. **Connect your repository** to Netlify
154+
2. **Set build command**: (none needed)
155+
3. **Set publish directory**: `/`
156+
4. **Deploy**
157+
158+
### Vercel
159+
160+
```bash
161+
vercel --prod
162+
```
163+
164+
---
165+
166+
## 📊 Data Sources
167+
168+
- **Weather Data**: [Windborne Systems API](https://sfc.windbornesystems.com/)
169+
- **Map Tiles**: [Mapbox GL JS](https://www.mapbox.com/)
170+
- **Charts**:
171+
- [ApexCharts](https://apexcharts.com/) for temperature heatmaps
172+
- [Highcharts](https://www.highcharts.com/) for wind rose diagrams
173+
174+
---
175+
176+
## 🎯 Use Cases
177+
178+
- **✈️ Aviation Planning**: Analyze wind patterns for flight route optimization
179+
- **🌾 Agriculture Monitoring**: Track temperature and weather trends for crop management
180+
- **💨 Wind Energy Assessment**: Evaluate wind resources for renewable energy projects
181+
- **🔬 Climate Research**: Study long-term weather patterns and anomalies
182+
- **🌤️ Weather Forecasting**: Access historical data for prediction models
183+
184+
---
185+
186+
## 🛠️ Technologies Used
187+
188+
- **Frontend Framework**: Vanilla JavaScript (ES6+)
189+
- **Mapping**: Mapbox GL JS v3.15.0
190+
- **Charting Libraries**:
191+
- ApexCharts v3.x
192+
- Highcharts v11.x
193+
- **Styling**: Custom CSS3 with modern features
194+
- **Security**: Web Crypto API (SHA-256)
195+
196+
---
197+
198+
## 🔮 Upcoming Features
199+
200+
### 🤖 Interactive Chatbot
201+
- AI-powered weather insights
202+
- Natural language queries
203+
- Pattern recognition and analysis
204+
205+
### ✈️ Flight Collision Analysis
206+
- Real-time airplane tracking
207+
- Collision risk assessment with weather balloons
208+
- Safety alerts and notifications
209+
210+
---
211+
212+
## 🐛 Known Issues
213+
214+
- Large datasets may cause performance issues on older browsers
215+
- Some stations may have incomplete historical data
216+
- Wind rose requires sufficient data points for accurate visualization
217+
218+
---
219+
220+
## 🤝 Contributing
221+
222+
Contributions are welcome! Please follow these steps:
223+
224+
1. Fork the repository
225+
2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
226+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
227+
4. Push to the branch (`git push origin feature/AmazingFeature`)
228+
5. Open a Pull Request
229+
230+
---
231+
232+
## 📝 License
233+
234+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
235+
236+
---
237+
238+
## 👤 Author
239+
240+
**Your Name**
241+
- GitHub: [@yourusername](https://github.com/yourusername)
242+
- LinkedIn: [Your Name](https://linkedin.com/in/yourprofile)
243+
244+
---
245+
246+
## 🙏 Acknowledgments
247+
248+
- **Windborne Systems** for providing weather balloon data
249+
- **Mapbox** for the mapping platform
250+
- **ApexCharts & Highcharts** for visualization libraries
251+
- The open-source community for inspiration and support
252+
253+
---
254+
255+
## 📧 Contact
256+
257+
For questions or support, please open an issue or contact [your.email@example.com](mailto:your.email@example.com)
258+
259+
---
260+
261+
## 🔐 Security Note
262+
263+
**Important**: Your Mapbox API key is stored only in your browser's session storage and is never committed to the repository. The key is cleared when you close the browser tab.
264+
265+
If you want to add additional security:
266+
- Use Mapbox token URL restrictions in your [Mapbox account](https://account.mapbox.com/)
267+
- Set usage limits on your token
268+
- Rotate your API keys periodically
269+
270+
---
271+
272+
<div align="center">
273+
<p>Made with ❤️ and ☕</p>
274+
<p>⭐ Star this repo if you find it helpful!</p>
275+
</div>

‎app.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
import { MAPBOX_TOKEN } from "./config.js";
2-
3-
mapboxgl.accessToken = MAPBOX_TOKEN;
1+
// Check if user has provided API key
2+
const storedKey = sessionStorage.getItem('mapbox_api_key');
3+
4+
if (!storedKey) {
5+
// Redirect to authentication page to get API key
6+
window.location.href = 'auth.html';
7+
} else {
8+
// Use the API key from session storage
9+
mapboxgl.accessToken = storedKey;
10+
}
411

512
const map = new mapboxgl.Map({
613
container: "map",
@@ -686,6 +693,14 @@ function closeSidebar() {
686693

687694
window.closeSidebar = closeSidebar;
688695

696+
// Logout functionality
697+
document.getElementById('logout-btn').addEventListener('click', () => {
698+
if (confirm('Are you sure you want to logout? You will need to re-enter your API key.')) {
699+
sessionStorage.removeItem('mapbox_api_key');
700+
window.location.href = 'auth.html';
701+
}
702+
});
703+
689704
// create heatmaps for each station weather or other best representation for weather - temperature done
690705
// retry api or error handling for api format failure
691706
// integrate station history api - done

‎assets/demo.png‎

450 KB
Loading

0 commit comments

Comments
 (0)