WeatherWay.mp4
WeatherWay is an application that shows the weather conditions along a route. The user can specify the starting and ending points of their trip, and the application will display both high-level and low-level weather data along their route.
- Weather markers: Easy-to-understand weather summaries are displayed along the route, highlighting potential areas of severe weather. This allows for quick identification of potential trouble spots.
- Customizable overlays: Users have the option to switch between different weather marker overlays on the map. This includes options for overall weather score, temperature, precipitation, or wind speed, allowing users to focus on the weather aspects most relevant to their needs.
- Interactive route: Users can click anywhere on the route to access detailed data for that specific location at the time they will reach it along the route. This includes data such as rainfall, snowfall, snow depth, visibility, and more.
- Adjustable departure time: Users have the ability to define their intended departure time. This triggers an update to the displayed route, weather data, and forecasted conditions. This feature streamlines the process of comparing weather conditions across different departure windows, enabling users to plan their trip accordingly.
Technologies used:
- React: Front-end development
- JavaScript: Language for server
- Express: Library used to create the server according to the REST API standards
- Jest: Framework for unit tests
- Axios: Library to call APIs from both the front end and the server
- MapBox: Maps API to display the map on the front end and get directions on the server
- Open-Meteo: Weather API to get weather data
The front end is a React application that uses axios for data retrieval. The core components of this application are the interactive map and the sidebar. Upon receiving user input, a GET request is sent to the server to fetch a GeoJSON object from the MapBox API. Once the route data is obtained, the application retrieves and displays markers along the route with their corresponding data.
When a user clicks on the route, a GET request is made to the backend to fetch weather data for that specific point, which is then displayed in a popup on the map. Similarly, when the user switches between different marker overlay options, a request is sent to retrieve the relevant data, and the markers are re-rendered accordingly.
The server contains three main controllers: geocode, route, and weather.
Geocode controller: a simple controller that returns the name of a city/location for a given longitude and latitude. It utilizes MapBox's reverse geocoding functionality, which returns information about a certain longitude and latitude.
Route controller: a controller that does three things:
- Retrieves data for displaying a route using MapBox's directions API.
- Obtains display markers based on heuristics and assumptions about driving, placing markers roughly every 90 miles with a minimum of 5 markers.
- Calculates the time it takes to reach a certain point along the route using the
turflibrary. By analyzing the geometry line segments returned by MapBox, it computes the total duration to the point of interest.
Weather controller: This controller fetches weather data for a specific time along the route using Open-Meteo's API. To get intra-hour data, it uses linear interpolation between hours. Additionally, it computes a weather score using a normalization algorithm and heuristics to ensure that safe-range values do not impact the score, while dangerous-range values have a significant effect.
- Clone this repository
- Install the required dependencies
- In the root of the repository and
./backend, runnpm i
- In the root of the repository and
- In the root of the repository and
./backend, rename the.env.examplefile to.env - Change the values inside of the new
.envfile with your API keys and port selection - Run
npm run startornpm run devin the root of the repository and./backend
WeatherWay is under the MIT License. See LICENSE for more details.