Overview

This project uses globe.gl to allow a user to select a location on the globe. This location is then sent back to the server to query real time weather data for that location.

Weather API

The weather data comes from OpenWeatherMap for both current weather data and future forecast data. The reason we have the client go through the server to query the OpenWeatherMap api is so we don't expose our api key. It also allows us to predefine our query params to request imperial weather data and limit how many future results we want in our forecast.

Javascript Frontend

Finally once the frontend client queries /api/weather and /api/forecast we then display the results as items on a CSS grid above the globe object. This grid is also adaptive if the client has more height than width (aka portrait mode).

Fun Fact

The wind direction arrow is actually a svg element that I set the rotate property equal to the wind direction degree sent back by the weather api. It was a tough one to figure out!

If you're interested, you can view the code below.

• Javascript
• API Endpoints