Skip to main content

Build a weather dashboard

· 4 min read

Retool is great for quickly building business software but you can also use it for side projects, prototyping, etc. For example, with just a few API calls, you can build your own weather dashboard.

What you'll build​

You're going to create a weather dashboard that shows the forecast and the National Weather Service (NWS) forecast discussion. The combination of standard forecast data (highs, lows, etc.) and text discussion from meteorologists makes for a well-rounded forecast.

The forecast data is provided by MyRadar, and the NWS discussion comes from the NWS API. Both the MyRadar and NWS APIs are free to use with some standard limitations.

Prerequisites​

To build the weather dashboard, you need:

  1. A Retool account.
  2. A MyRadar developer account. Make sure to note down your Subscription Key after creating your account.

You can find this information later but you also need:

  1. The latitude and longitude of the location you want a forecast for. You can use Google Maps to search for the location, then right click the pin to get the coordinates. This guide uses Detroit, with the coordinates 42.34899378680771, -83.07695478794027.
  2. An NWS forecast office code. This guide uses Detroit's code (dtx), but if you want to find the office closest to you, click the location on this map. It opens a new page and the code is in the URL (Detroit's NWS office URL: https://www.weather.gov/dtx/).

1. Create a MyRadar resource​

Resources are how you connect your data sources to Retool.

  1. Navigate to /resources in Retool and click Create new -> Resource.
  2. Select Rest API.
  3. Fill out the resource configuration page like this:

Adding a resource

  1. Click Create resource and then Create an app. This opens another modal where you name the app and then click Create app.

2. Retrieve forecast data​

If you don't have the latitude and longitude for your location yet, see the prerequisites section.

To retrieve forecast data:

  1. Create a query and name it getMyRadarForecast.
  2. Select the resource you just created.
  3. Pass the coordinates (42.34899378680771,-83.07695478794027) in the endpoint.
  4. In the URL parameters section, set units to us.
  5. Click Save and run.

3. Display forecast data​

The data returned is split up into timeframes (currently, minutely, hourly, and daily). This app is going to show the current weather and the hourly forecast, but you can adjust this if you want.

To display the current weather:

  1. Drag a Key Value component to the canvas and set Data to {{getMyRadarForecast.data.currently}}.
  2. In the right panel, edit properties as needed.

To display the hourly forecast:

  1. Drag a Table component to the canvas and set its Data property to {{ getMyRadarForecast.data.hourly.data }}.
  2. Convert the UNIX timestamp in the time column by selecting the column in the right panel, and then set Mapped value to {{moment.unix(item).format("MM/DD/YYYY h:mm:ss A")}}.
  3. Adjust the table's appearance as needed.

4. Retrieve forecast discussion​

If you don't have an NWS forecast office code yet, see the prerequisites section. You can also use the one in the examples (dtx) below if you don't want to use your local office.

To retrieve the forecast discussion:

  1. Create a new resource query and name it get_all_forecast_discussions.
  2. Set the Resource to RESTQuery (restapi).
  3. Set the endpoint to https://api.weather.gov/products/types/AFD/locations/DTX, replacing DTX with your local office code if needed.
  4. Click Save and run.

Creating the get_all_forecast_discussions query

This query retrieves URLs for every available forecast discussion for the office. To retrieve the latest discussion:

  1. Duplicate the query you just created and name it get_latest_forecast_discussion.
  2. Set the endpoint to {{get_all_forecast_discussions.data['@graph']['0']['@id']}}.
  3. Click Save and run.

Creating the get_latest_forecast_discussion query

5. Display the forecast discussion​

To display the forecast discussion:

  1. Drag a Text component to the canvas and set its value to {{get_latest_forecast_discussion.data.productText}}.
  2. Forecast discussions can be long, so set the Height to fixed on the Text component and adjust it as needed.

6. Add polish​

You now have all the weather data in the app, but if you want to polish things up:

  1. Use Text components to add headers to each part of the app.
  2. Rearrange the components so they fit together well.
  3. Edit the theme and make usability adjustments.
  4. Add a Button component that reruns the queries to refresh the data.

With some modifications, your dashboard might look something like this.

A slightly polished weather dashboard

If you want to import the app, here's the JSON.