π Introduction
MeteoRide is a web application designed for cyclists that lets you load GPX/KML routes and get detailed weather forecasts along the route.
The app automatically computes route steps based on the selected cycling speed and fetches data from multiple weather providers to show temperature, wind, precipitation, humidity, cloudiness, luminosity and more.
It includes automatic fallback options to ensure data even if a provider fails, and lets you compare forecasts from different sources.
It's ideal for planning safe, weather-aware rides.
π Getting Started
1. Load a GPX/KML Route
Click the π button to select your GPX or KML file. MeteoRide supports standard tracks, routes and waypoints.
π‘ Tip: You can also use direct URLs with parameters like ?gpx_url= to load routes automatically. For details about sharing routes from iOS or Android check the project page on GitHub.
π Export from Komoot/Bikemap: There is a Tampermonkey userscript that adds a button on Komoot and Bikemap to open the current route directly in MeteoRide. Note that GPX downloads on Komoot require a Premium account. See the README for installation instructions.
β‘οΈ Export from MeteoRide to Hammerhead: The project also includes a userscript that lets you export the current GPX from MeteoRide to Hammerhead (dashboard.hammerhead.io) by uploading a raw GPX to a configured share-server and requesting Hammerhead to import the URL. See the project README for installation and configuration details.
2. Configure Date and Time
Select when you plan to do the route. The system snaps to 15-minute intervals automatically.
3. Adjust Speed
Enter your estimated average speed or use the presets: 5, 10, 12, 15, 20 km/h.
4. Choose Interval
Select how frequently you want weather information (15 or 30 minutes).
5. Choose Weather Provider
Select the weather provider you want to use to obtain the data.
- Open-Meteo: Free, no API key required, up to 14 days forecast
- MeteoBlue: Requires API key, up to 7 days, very accurate
- OpenWeather: Requires API key, up to 5 days, detailed data
- AromeHD: High-resolution model from MeteoFrance, available via Open-Meteo. Only available for parts of Europe (~39-52Β°N, 10.5Β°W-16.5Β°E) and within 48 hours; otherwise the app falls back to the best provider available through Open-Meteo. Especially useful for wind and short-term precipitation.
- OpenWeather - AromeHD: Use OpenWeather for the first hour, then AromeHD up to 48 hours. Routes outside this period are calculated with Open-Meteo. Only available if you provide an OpenWeather API key. This chain leverages real-time OpenWeather data for immediate planning and hyper-local AROME precision for wind and precipitation forecasting.
- Compare (Comp.): Enable comparison mode to evaluate differences between providers.
π‘ Automatic Fallback: If your primary provider fails or has no data, MeteoRide automatically switches to Open-Meteo. MeteoRide will notify you with a brief message about the situation (if notifications are enabled in Settings).
6. Compare Dates Mode
This mode allows you to compare weather forecasts between two different dates/times for the same route:
- Select "Compare Dates" from the provider dropdown to enter this mode
- Set Date A and Date B using the date/time controls that appear
- Use the icon-only buttons to toggle between dates, use next buton to run the comparison
- The table displays 4 rows: intervals for Date A, summary for Date A, intervals for Date B, summary for Date B
- No automatic recalculation - you must manually run the comparison after changing controls
π€οΈ Weather Providers & Advantages
Provider Comparison
MeteoRide supports multiple weather providers, each with unique strengths:
- Open-Meteo: Free, no API key required, global coverage, up to 14 days. OpenMeteo uses its best model for your track, recommended for any situation, the best for long-term planning and global routes.
- MeteoBlue: Requires API key, up to 7 days, very accurate especially for mountain weather. Ideal for alpine routes and complex terrain.
- OpenWeather: Requires API key, up to 4 days, excellent real-time data and official weather alerts. Perfect for immediate departures and urban areas.
- AROME-HD: High-resolution model (~1-2km) from MeteoFrance, available for Europe within 48 hours. Superior for wind forecasting and short-term precipitation in France and nearby countries.
Provider Chains
Chains combine the strengths of multiple providers:
- OpenWeather β AROME-HD β Open-Meteo: Uses real-time OpenWeather data for the first hour, hyper-local AROME precision for the next 47 hours, then reliable Open-Meteo for longer forecasts. Requires OpenWeather API key.
π‘ Tip: Choose based on your needs: real-time accuracy (OpenWeather), local precision (AROME-HD), mountain terrain (MeteoBlue), or long-term planning (Open-Meteo).
π Install as App
MeteoRide can be installed as a Progressive Web App (PWA) on your device for an app-like experience.
Android
- Open MeteoRide in Chrome.
- Tap the menu (three dots) in the top right.
- Select "Add to Home screen".
- Confirm by tapping "Add".
iOS (iPhone/iPad)
- Open MeteoRide in Safari.
- Tap the Share button (square with arrow).
- Select "Add to Home Screen".
- Tap "Add" in the top right.
Chrome on Desktop
- Open MeteoRide in Chrome.
- Click the install icon in the address bar or in the menu.
- Click "Install".
Edge on Desktop
- Open MeteoRide in Edge.
- Click the install icon in the address bar.
- Click "Install".
Safari on Mac
- Open MeteoRide in Safari.
- Go to File > Add to Dock.
- Or, click the Share button and select "Add to Dock".
π οΈ Settings
π API Keys
For MeteoBlue and OpenWeather you need to register and obtain a free API key:
Use the π Check button to verify your API key works correctly.
π API Key Tests and Notices
In the settings panel there are Check buttons for MeteoBlue and OpenWeather. When pressed the app makes a simple request and the status is shown next to the field (valid / invalid / quota / HTTP).
There is also a checkbox Show non-critical notices that controls notification verbosity: if enabled you will see informational banners when fallbacks occur due to horizon limits, quota or API errors; if disabled only critical errors are shown.
When a provider exceeds its horizon or fails repeatedly, the app falls back to OpenβMeteo only for the affected steps. This is indicated with a brief notice in the header.
π Units
- Wind: km/h, m/s, mph
- Temperature: Β°C, Β°F
- Distance: km, mi
- Precipitation: mm, in
π Languages
The application supports Spanish and English. Select your preferred language in the settings to change the interface and messages.
π Interpreting the Data
π€οΈ Weather Table
The table shows information hour by hour:
- First row: Time and accumulated distance
- Second row: Weather icons
- Temperature: In degrees Celsius or Fahrenheit
- Wind: Speed + direction arrow (gusts in parentheses)
- Rain: Amount in mm/h (probability in parentheses)
- Humidity: Relative humidity percentage
- Cloudiness: Cloud cover percentage
- Luminosity: Shown as a vertical bar next to the weather icon in the second row (represents 0β100% of available light for that interval)
- UV: Ultraviolet index (integer) β appears in the combined "Cloud / UV" row
πΊοΈ Interactive Map
- Blue arrows: Light wind (<12 km/h)
- Red arrows: Strong wind (30-50 km/h)
- Purple arrows: Very strong wind (>50 km/h)
- Droplets π§: Expected precipitation
- Green/Red markers: Route start and end
π‘ Interactivity: Click any table column or a wind arrow on the map to see details for that point.
π± Advanced Features
π Horizontal Scrolling
The weather table is interactive and touch-friendly:
- Drag the table horizontally or use the mouse wheel to scroll columns (gestures and "dragβtoβscroll").
- Click any column (or any cell to select that column) and the row and map will be highlighted.
- The map recenters on the selected point if you click a wind arrow or the column.
- If the penultimate column is less than 5 minutes away from the last one, the app hides it to avoid visual duplicates.
Tip: use the small β icon that appears to indicate the table has more columns available when scrolling.
π
Solar Information
The app automatically shows:
- Sunrise and sunset times
- Civil twilight (marked with "c")
- Calculated luminosity according to time and conditions
π― Smart Fallbacks
MeteoRide handles automatically:
- Switching to Open-Meteo if your provider exceeds its time horizon
- Retries when there are temporary errors
- Clear notifications about data limitations
π URLs with Parameters
You can use direct links with parameters:
?gpx_url=https://example.com/route.gpx?datetime=2024-03-15T10:00?speed=25
πΊοΈ Recent routes (stored locally)
MeteoRide keeps a short list of the most recent GPX files you loaded so you can reload them quickly without re-uploading. This is a local-only feature β no routes are sent to any server.
- How to use: next to the file upload button (π) you'll find a compact dropdown with your recent routes. Choosing one loads it exactly as if you had uploaded the file now.
- Limit: the app stores the last 3 routes by default.
- Recommended size: supports larger GPX files up to about 750 KB. For much larger files consider hosting them and using
?gpx_url=.
- Privacy: GPX files are saved locally using IndexedDB (with localStorage fallback). They are never sent outside your device.
- Efficiency: Only metadata (name, size, timestamp) is kept in memory; the full GPX is loaded from the local store only when you select it.
πΎ Local cache and performance
Provider responses are stored in localStorage for ~30 minutes per step/hour.
This speeds up frequent reloads and reduces requests to rate-limited APIs. You can clear the cache from your browser devtools.
β οΈ Limitations and Tips
π¨ Important Limits
- Time horizon: Open-Meteo (14 days), MeteoBlue (7 days), OpenWeather (2 days)
- Accuracy: Forecasts are less reliable from day 3-4 onwards
- Free APIs: MeteoBlue and OpenWeather free tiers have usage limits (Open-Meteo does not require an API key)
β
Best Practices
- Use routes of maximum 100-200 km for better performance
- Plan 1-2 days in advance for greater accuracy
- Combine information from multiple sources for important decisions
- Always have a plan B for adverse conditions
- Carry rain gear even if the probability is low
π¨ Official Weather Alerts
MeteoRidΒΊe can display official weather warnings published by national meteorological services when these are exposed in the alerts of the OpenWeather. To enable alerts you must enter your OpenWeather API Key in Settings and check Show official weather alerts.
- Availability: Requires an OpenWeather API Key. If the key is configured MeteoRide will check for alerts even when OpenWeather is not the selected primary provider.
- Visibility: When an alert is detected a nonβinvasive info card will appear (autoβhides after 15 seconds). A persistent β οΈ indicator is also created in the UI so you can re-open all detected alerts.
- Sampling & efficiency: To limit API calls MeteoRide samples a representative set of points along the route (approx. 2/3 of steps, minimum 3). Alert responses are cached locally for ~1 hour.
- Time window: Only alerts whose period (start/end) overlap the route time windows are considered (a Β±1 hour tolerance is applied around the matching step).
- Testing: If you are a developer or validating the integration you can trigger test alerts from the browser console:
window.testWeatherAlerts().
β οΈ Important Notice
These alerts are provided for informational purposes only. Do not rely solely on them for safety-critical decisions. Always verify with your national meteorological service or competent authorities before undertaking activity that may be affected by severe weather. OpenWeather may have errors, delays or may omit local notices; MeteoRide does not replace official communications.
οΏ½π Troubleshooting
β Common Issues
- GPX/KML won't load: Verify that the file contains valid tracks
- No weather data: Check your API key or use Open-Meteo
- Date out of range: Reduce the time horizon
- Empty table: Ensure the route has sufficient length
π Privacy and Data
π‘οΈ Protecting your Privacy
MeteoRide runs completely on your device. All settings, preferences and data are stored only in your browser localStorage. Only when using shortcuts to share a GPX will the file be uploaded to Cloudflare. This is necessary for iOS Shortcuts that only accept POST (if you open the file directly from MeteoRide it will not be uploaded since it is processed locally). In any case, the GPX file is deleted automatically after a maximum of two minutes.
- No account: You don't need to create an account or provide personal data
- Full control: You can delete all data from your browser settings
- Open source: You can inspect the full source code on GitHub
π Data Shared with Weather Providers
To obtain forecasts, MeteoRide only shares:
- Geographic coordinates of the points in your route
- Dates and times for which you need the forecast
- Your API Key (if you use MeteoBlue or OpenWeather). They will now be stored in the local storage of your device. This means they could, hypothetically, be accessible by a third party. The risk with this type of keys is low, but it is recommended to use a free key from these providers with data that would not supose a problem in case of a leak. Alternatively, you can avoid using them and rely on providers (such as openmeteo-Arome) that do not require an API key.
π‘ Note: Weather providers (Open-Meteo, MeteoBlue, OpenWeather) have their own privacy policies. MeteoRide only acts as a client requesting the forecast data you need.
ποΈ What is stored locally
- Units and language settings
- API Keys (stored in your browser)
- Speed and interval preferences
- Temporary weather data cache (30 minutes)
π License and Credits
π¨βπ» Developer
MeteoRide has been developed by Lockevod.
π License
This project is licensed under the MIT License, which means:
- β
You can use the application freely
- β
You can modify the source code
- β
You can distribute your own version
- β
For personal and commercial use
- β
You've to inform about author and MIT license
π Source Code: The complete code is available on
GitHub. Contributions are welcome!
π Technologies and Services
- Maps: OpenStreetMap and contributors
- Weather Data: Open-Meteo, MeteoBlue, OpenWeather
- Weather Icons: Weather Icons by Erik Flowers
- Libraries: Leaflet.js, SunCalc, GPX parser
- Hosting: GitHub Pages (optional)
βοΈ Disclaimer
MeteoRide is a planning tool. Weather forecasts are estimates and may not be fully accurate. Always use your judgement and verify conditions before heading out. The developer is not responsible for decisions based on this information.
π Support and Contributions
π Report Issues
- Visit the GitHub repository
- Enable debug mode (π) to get technical details
- Include device and browser details
π€ Contribute to the Project
- Fork the repository on GitHub
- Report bugs or suggest improvements
- Translate to new languages
- Improve the documentation
Bikemap, Komoot, OpenWeatherMaps, Openmeteo, Meteoblue and Hammerhead are registerer marks. They can have specific propietary licenses, please if you use this code or the published webapp you have to comply with them. If you don't want you cannot use this code or the app.
This code and the webapp are designed with "zero trust" security in mind but it isn't a commercial code or service, the code and web app is provide as is, any liability or warranty is given with this code and webapp. You accept this if you donwload this repo, use the code or use the webapp.
Updated information about this app is always in GitHub. You accept all updated information, liabilities and restrictions in the github page linked if you use this app.
π‘ Final tip: Weather can change quickly! Use MeteoRide as a guide, but stay flexible and safe on your rides.
π° Support the Project
If you find MeteoRide useful, consider supporting the project with a donation:
