An interactive web application for exploring global weather data from Windborne Systems balloon stations with real-time visualizations and analytics.
- Global Coverage: Explore weather stations worldwide with an interactive Mapbox-powered map
- Smart Clustering: Automatically groups nearby stations for better visualization at different zoom levels
- Smooth Navigation: Pan, zoom, and click to explore weather data seamlessly
- Hourly Patterns: Visualize temperature variations across 24-hour periods
- Historical Trends: Track temperature changes over multiple days
- Dynamic Color Scaling: Automatically adjusts color ranges based on actual data
- Interactive Tooltips: Hover over any data point for detailed information
- Direction Distribution: See prevailing wind directions across 16 compass points
- Speed Categories: Wind speeds grouped into 5 ranges (0-5, 5-10, 10-15, 15-25, >25 mph)
- Statistical Summary: Average speed, maximum speed, and prevailing direction
- Polar Visualization: Intuitive circular chart showing wind patterns
- API Key Protection: API key stored only in browser session storage
- Session-Based: Key persists until browser tab is closed
- No Server Required: All validation happens client-side
- Easy Setup: Just enter your API key when the app loads
- Station ID and network information
- Elevation and timezone data
- Precise GPS coordinates
- Historical data point counts
- Date range coverage
- A modern web browser (Chrome, Firefox, Safari, or Edge)
- A Mapbox API key (Get one free here)
- A local web server or hosting platform
-
Clone the repository
git clone https://github.com/yourusername/weather-map.git cd weather-map -
Get a Mapbox API key
Sign up at Mapbox and get your free API key.
-
Serve the application
Using Python:
python -m http.server 8000
Or using Node.js:
npx http-server -p 8000
-
Access the application
Open your browser and navigate to:
http://localhost:8000/auth.html -
Enter your API key
When prompted, enter your Mapbox API key. It will be stored in your browser session.
weather-map/
├── index.html # Main application page
├── auth.html # Authentication page
├── app.js # Core application logic
├── config.js # Configuration and API key hash
├── styles.css # Application styles
├── assets/ # Images and icons
│ └── weather-balloon.png
└── README.md # This file
The application uses a simple session-based approach:
- Session Storage: Your API key is stored in browser session storage
- Session Lifetime: Key persists until you close the browser tab
- No Transmission: Your API key is never sent to any server except Mapbox's official API
- No Repository Exposure: The key is never committed to your Git repository
In app.js, change the Mapbox style:
const map = new mapboxgl.Map({
style: "mapbox://styles/mapbox/streets-v12", // or dark-v11, light-v11, etc.
});- Push to GitHub
git add . git commit -m "Initial commit" git push origin main
- Enable GitHub Pages in repository settings
- Set source to main branch
- Access at
https://yourusername.github.io/weather-map/auth.html - Enter your API key when prompted
- Connect your repository to Netlify
- Set build command: (none needed)
- Set publish directory:
/ - Deploy
vercel --prod- Weather Data: Windborne Systems API
- Map Tiles: Mapbox GL JS
- Charts:
- ApexCharts for temperature heatmaps
- Highcharts for wind rose diagrams
✈️ Aviation Planning: Analyze wind patterns for flight route optimization- 🌾 Agriculture Monitoring: Track temperature and weather trends for crop management
- 💨 Wind Energy Assessment: Evaluate wind resources for renewable energy projects
- 🔬 Climate Research: Study long-term weather patterns and anomalies
- 🌤️ Weather Forecasting: Access historical data for prediction models
- Frontend Framework: Vanilla JavaScript (ES6+)
- Mapping: Mapbox GL JS v3.15.0
- Charting Libraries:
- ApexCharts v3.x
- Highcharts v11.x
- Styling: Custom CSS3 with modern features
- Security: Web Crypto API (SHA-256)
- AI-powered weather insights
- Natural language queries
- Pattern recognition and analysis
- Real-time airplane tracking
- Collision risk assessment with weather balloons
- Safety alerts and notifications
- Large datasets may cause performance issues on older browsers
- Some stations may have incomplete historical data
- Wind rose requires sufficient data points for accurate visualization
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Your Name
- GitHub: @yourusername
- LinkedIn: Your Name
- Windborne Systems for providing weather balloon data
- Mapbox for the mapping platform
- ApexCharts & Highcharts for visualization libraries
- The open-source community for inspiration and support
For questions or support, please open an issue or contact your.email@example.com
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.
If you want to add additional security:
- Use Mapbox token URL restrictions in your Mapbox account
- Set usage limits on your token
- Rotate your API keys periodically
Made with ❤️ and ☕
⭐ Star this repo if you find it helpful!