Weather Radar Map - VS Code Extension

An interactive weather radar extension for VS Code with animated forecasts, time-based views, and beautiful dark theme interface.

Features

• 🗺️ Interactive Map - Leaflet-based radar map with smooth navigation
• ⏰ Time-Based Forecasts - View radar from Now to +24 hours ahead
• 🎬 Animation Playback - Watch storm progression with animated radar
• 🌧️ Precipitation Tracking - Real-time radar showing rain, snow, and storms
• 🎨 Dark Theme - Beautiful dark interface that matches VS Code
• 📍 ZIP Code Search - Quick location search by US ZIP code
• 🔄 Live Updates - Fresh radar data from RainViewer API

Demo

Usage

Method 1: Command Palette

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "Show Weather Radar Map"
3. Press Enter
4. Enter a 5-digit US ZIP code

Method 2: Keyboard Shortcut

• Windows/Linux: Ctrl+Shift+R
• Mac: Cmd+Shift+R

Features in Detail

🕐 Time Selection

Click any of the time buttons to view radar at different times:

• Now - Current radar conditions
• +1hr, +2hr, +3hr - Short-term forecasts
• +6hr, +12hr, +24hr - Extended forecasts

The active time is highlighted in blue, and the timestamp is displayed below the controls.

🎬 Animation

Click "Play Animation" to watch:

1. Past radar - Recent precipitation (last 2 hours)
2. Current conditions - Live radar data
3. Future forecast - Predicted precipitation path

The animation plays at 2 frames per second, creating a smooth movie-like experience. Click "Stop" to pause at any frame.

🔍 Search

• Enter any US ZIP code in the search box
• Press Enter or click "Search" button
• Map automatically centers on the location
• Blue marker shows your searched location

📊 Legend

The color legend shows precipitation intensity:

• Cyan - Light rain/drizzle
• Green - Moderate rain
• Yellow - Heavy rain
• Red - Intense precipitation/storms

How It Works

Data Sources

• Radar Data: RainViewer API - Free weather radar data
• Geocoding: Zippopotam.us - ZIP code to coordinates
• Map Tiles: CartoDB Dark Matter theme

Technology Stack

• Leaflet.js - Interactive map rendering
• VS Code Webview API - Extension interface
• TypeScript - Type-safe development
• RainViewer Nowcast - Precipitation prediction

Customization

Change Keyboard Shortcut

Edit in package.json:

"keybindings": [
  {
    "command": "radar-map.showRadar",
    "key": "ctrl+alt+r"  // Change this to your preference
  }
]

Requirements

• VS Code version 1.80.0 or higher
• Internet connection (for API calls and map tiles)
• Valid US ZIP code

Known Limitations

• Only works for US locations (ZIP code limitation)
• Requires internet connection
• Radar data depends on RainViewer API availability
• Nowcast forecasts are predictions and may not be 100% accurate

Troubleshooting

"Invalid ZIP code" error:

• Ensure you're using a 5-digit US ZIP code
• Check your internet connection

Radar not displaying:

• The RainViewer API may be temporarily unavailable
• Check your firewall settings
• Try refreshing by searching again

Animation stuttering:

• This is normal during initial frame loading
• Frames are cached after first load for smooth playback

Map tiles not loading:

• Check internet connection
• CartoDB tiles may be temporarily unavailable
• The extension will still work, just without the base map

Privacy & Data

This extension:

• Does not collect or store any personal data
• Does not track user behavior
• Only makes API calls when you explicitly search for weather
• All data requests are made directly from your machine

Credits

• Weather radar data provided by RainViewer
• Geocoding by Zippopotam.us
• Map rendering with Leaflet.js
• Dark map tiles by CartoDB

License

MIT

Track storms and weather without leaving VS Code! ⛈️🌧️☀️

Tips & Tricks

Best Practices

1. Check radar before starting outdoor activities - Quick weather check without browser
2. Monitor storm progression - Use animation to see if storms are moving toward you
3. Plan ahead - Use +6hr and +12hr forecasts for planning your day
4. Compare time frames - Click through different hours to see weather changes

Keyboard Shortcuts

• Ctrl/Cmd + Shift + R - Open radar map
• Enter - Search for ZIP code
• Esc - Close webview panel

Pro Tips

• Save favorite ZIPs - The search box retains your last ZIP code
• Multiple views - Open multiple panels to compare different locations
• Full-screen - Maximize the webview for better map viewing
• Quick refresh - Re-search the same ZIP to get latest radar data

FAQ

Q: How often is radar data updated?
A: RainViewer updates radar data every 10 minutes. Click Search again to fetch the latest frames.

Q: How accurate are the forecasts?
A: Nowcast forecasts (+1hr to +2hr) are quite accurate. Longer forecasts (+6hr to +24hr) become less precise as they predict further into the future.

Q: Can I use this outside the US?
A: Currently only US ZIP codes are supported. International support may be added in future versions.

Q: Does this work offline?
A: No, the extension requires an internet connection to fetch radar data and map tiles.

Q: Why isn't my location showing radar?
A: Some remote areas may have limited radar coverage. Try a nearby larger city's ZIP code.

Q: Can I export or save the radar images?
A: Currently, this feature is not supported, but you can take screenshots using your OS screenshot tool.