Tutorial #3
Embed a forecast.io Weather Forecast Basic   2013-11-01


forecast.io develop really nice web applications that display weather information. They combine sophisticated processing of multiple weather predictions with some beautiful graphics. They are well worth checking out.

They provide access to their data streams via an API which I hope to write about in the future. They also provide a free widget that displays a seven day weather forecast for a given location. In this tutorial I'm going to show you how to customize this and embed it in your web page.

It looks like this:

screenshot for Forecast Embed weather forecast widget

Their blog post on the widget is HERE.

Step by Step

1: Copy the code block from forecast.io or from the code block shown below.

2: Paste this into your target web page in the desired position, save and reload the page to show that it works.

3: The next step is to customize the script to give the forecast for your preferred location.

4: You need the Latitude and Longitude for your location. One easy way to get this is to visit iTouchMap, browse the world map or enter an address, and get the coordinates it provides.

You need the decimal version of the coordinates - for example 69.649205 and not 69°38'57'' N

5: Replace the numbers in the code block that follow lat= and lon= with your values.

6: Replace the place name that follows name=with your location. Be sure not to include any & or = in your name.

7: Save and reload your page - you should see your desired forecast.

Understanding the Code

The Forecast Embed widget is an iframe that loads the html from the URL http://forecast.io/embed followed by a number of key=value pairs of parameters.

You can copy that URL in its entirety into the Address bar of your browser and you will see the forecast directly. The iframe is simply a container.

The parameters that are available to you are lat, lon, name (which I covered in the previous section) as well as color, font and units.

color is a hexadecimal format for a RGB color that is used for the temperature range bars. font specifies the font to use for the text. units can be us or uk. To display temperatures in Fahrenheit specify us, for Celsius/Centigrade specify uk.

The only option you have to change the size of the widget is the value for the width tag of the iframe. Try changing it to, say, 50%. The height should remain fixed at 245px

Code for this Tutorial

Share this tutorial

Comment on this Tutorial

comments powered by Disqus