Description
We will use the OpenWeatherMap Hourly Forecast API to make aweather widget. By default, our app shows the weather in Davis,
but the user can select other cities in the region as well. Current
conditions appear on the left, and a doppler radar map from theNational Weather Service on the right; the map can be animated.
Along the bottom, we see the weather forecast for the next sixhours.
Entering a city name or a zip code in the box on the left shouldeither switch to showing the weather for that place, or leave thedisplay the same an put up a message saying “Not found”. Sincethe radar map is roughly a 150-mile radius around Sacramento,
places farther away than that can be “Not found”.
Our main goal in this assignment will be using the
OpenWeatherMap API to get the forecasts and getting that
information onto the screen.
Animating the weather map is thesecond most important part. The third priority will be getting thedisplay to look like the design, as nearly as possible; we’ll learnsome new css in the process.
I recommend you stick to pure Javascript and CSS (includingflexbox), avoiding JQuery, and other libraries, since that is what
will be on the midterm.
Forecasts
The OpenWeatherMap Hourly Forecast API distributed information,
in JSON, using the CORS protocol. The result returned by
OpenWeatherMap includes a JSON string, from which we canextract the current conditions and forecasts for the next sixhours. To use the API, you need an API key; sign up on their Webpage. The URL to request the Davis hourly forecast looks like this:
http://api.openweathermap.org/data/2.5/forecast
/hourly?q=Davis,CA,US&units=imperial&APPID=xxx
where the xxx is replaced by your API key.
This demo,
makeRequest.zip, shows how to make a CORS request toOpenWeatherMap; put your API key into the URL in order to try it
out. Or, you can just put the URL into your browser and see what
happens.
Doppler Radar Map
The doppler radar map is downloaded from the National WeatherService. It is composed of three layers, each of which is an image:
the topographic map, which is opaque, the city names, which istransparent except for the text, and the actual doppler radar,
which changes every 10 minutes. The URLs for these images are:
http://radar.weather.gov/ridge/Overlays/Topo/Short
/DAX_Topo_Short.jpg
http://radar.weather.gov/ridge/Overlays/Cities/Short
/DAX_City_Short.gif
https://radar.weather.gov/ridge/RadarImg/N0R/DAX_N0R_0.gifTo make the display, the cities and doppler have to be overlayedover the topographic map; now is the time to try “position:
absolute”.
To put the map into its circular frame, we can use thecss clip-path property.
To animate the doppler radar map, we need not one doppler
image but several. Here is a demo collectPastDoppler.zip, whichgets the ten most recent doppler radar overlays from the National
Weather Service directory. To cycle through the ten images, I
suggest piling them all onto the weather map with “display: none”,
and then, one by one, changing to “display: inline”.
Design
This archive weatherDesign.zip contains mock-ups for tablet andWeb views. There are two versions of the mobile mockup, one forwhen it loads and one for after the up-arrow is pressed (downarrow goes back to the first view). Use a css animation to get asmooth “slide up/slide down” transition between the two views.
The appStandards file show color and font specs. The “assets”
directory contains 11 SVG icons for the different weather
conditions. OpenWeatherMap gives an icon code with everyforecast, and they have a day version and a night version of eachicon. For icon codes where we don’t have a night version, just usethe day version.
Turn in Instructions
Hand in the assignment as a zip file, using Canvas. You caninclude the assets (feel free to change them). Be sure to check thatunzipping gives you a working app, with nothing missing. If youwork with a partner, both of you should turn in the same code,
and include a readme with both your names on it.
