Weather Feature
The Weather Layer and Forecast System adds optional weather overlays and forecast banners to your route maps. Using the OpenWeatherMap API (free tier), it provides cyclists with wind direction, temperature, precipitation, and other weather data to help plan their rides.
Overview
The weather feature consists of three main components:
- Weather Layers - Map overlays showing wind, temperature, precipitation, clouds, and pressure
- Forecast Banner - A scrollable forecast summary below the map showing 3-hour intervals for 5 days
- Time Selection Tool - An interactive timeline to view forecasts for different times
Weather features are only displayed on main route pages (single route and full map view), not on mini maps, route cards, or listing pages.
Setting Up Weather
Getting an OpenWeatherMap API Key
- Visit OpenWeatherMap and create a free account.
- Navigate to your account's API keys section.
- Copy your API key.
- 60 API calls per minute
- 1,000,000 calls per month
- Includes current weather, 5-day forecast, and weather map tiles
Configuring Weather in Route Finder
- Navigate to Routes → Config.
- Click on the Weather tab (under Map Options).
- Enter your OpenWeatherMap API key.
- Click Test Connection to verify the key works.
- Configure your preferred default settings.
- Click Save Changes.
Weather Layers
Weather layers are map overlays that display real-time weather data. Users can toggle these on and off from the weather control panel in the top-right corner of the map.
Available Layers
| Layer | Description |
|---|---|
| Wind | Wind speed and direction with optional animated arrows |
| Temperature | Temperature overlay with colour gradient |
| Precipitation | Rain and snow overlay |
| Clouds | Cloud coverage |
| Pressure | Sea level pressure |
Layer Controls
The weather control panel (accessible via the weather icon) allows users to:
- Toggle individual layers on or off
- Adjust layer opacity (transparency)
- Toggle wind direction arrows (when wind layer is active)
Forecast Banner
The forecast banner displays a scrollable summary of weather conditions for the next 5 days, in 3-hour intervals.
What's Displayed
- Time and date
- Weather icon showing conditions (sunny, cloudy, rainy, etc.)
- Temperature (actual and "feels like")
- Wind speed and direction
- Precipitation probability
Banner Modes
You can configure how the forecast banner appears:
- Show - Banner is visible and expanded by default
- Hidden - Banner is collapsed by default (users can expand it)
- Disabled - Banner is not available at all
Time Selection Tool
The timeline allows users to view forecast data for different times. It appears above the forecast banner.
Features
- Slider to scrub through 5 days of forecast data
- Step forward/back buttons for precise navigation
- Keyboard navigation (arrow keys)
- Both map layers and forecast banner update when time is changed
Default Time Options
You can configure what time is shown by default when users first view a route:
- Now - Shows current weather
- Custom - A specific date and time you choose
- Next Saturday - Perfect for weekend ride planning, set the default time (e.g., 9:00 AM)
Admin Configuration
Weather settings are found in Routes → Config → Weather tab.
API Settings
- API Key - Your OpenWeatherMap API key
- Test Connection - Validates your key and shows API call count
Default Layers
- Select which layers are enabled by default
- Set default opacity (0-100%)
- Toggle wind arrows on or off
Display Options
- Units - Metric (°C, km/h) or Imperial (°F, mph)
- Banner Mode - Show, Hidden, or Disabled
- Cache Duration - How long to cache weather data (15-60 minutes)
Advanced Options
- Clear Weather Cache - Force refresh of all cached weather data
- API Usage Statistics - Monitor your API usage
Troubleshooting
Weather Controls Not Appearing
- Check that weather is enabled in Routes → Config → Weather
- Verify your API key is set and valid
- Ensure you're on a single route page (not the route archive or listings)
Layers Not Loading
- Check your browser's console for API errors
- Verify your API quota has not been exceeded
- Check that your API key has the required permissions
Forecast Banner Empty
- Check that forecast data is being fetched successfully
- Verify the route has valid GPS coordinates
- Check the browser's Network tab for failed requests