{ Lekker Logic }

Technology Solutions

Dark Sky Forecast.io Weather API – Part 3 – Building the user interface

Wrapping up this Dark Sky Forecast.io Weather API example we take all the data and begin to display it in the final product.  The working demo can be seen here and source files can be downloaded as well.  Part 1 & Part 2 can be used for background to this point.


The front-end is built on Bootstrap since this always makes things easy and quick. Love or hate bootstrap all you want, but it gets the job done.  I will skip the majority of the HTML/CSS items as I assume most readers will have a good understanding of this already.

There are a few key points to cover with my implementation on this.  For the home page I begin with weather in Denver, CO so I include the lat/lng for Denver at the start to include in our api.php file.  I also must set the timezone ($tz) for the page so the correct forecast times are shown accurately for that location.  For navigation menu highlighting I include an active page variable to know where things are in the nav hierarchy.  This nav reference ties into the partial_nav.php file.

Next I obtain the users location automatically using the HTML Geolocation service.  This allows me to use the location of the user to pinpoint the exact weather where they are.  I then bind the lat/lng data points into a form field that I can later submit when called on.

The location form to store the users lat/lng points is shown below.  I post this data to the loc_geo.php page using  action="loc_geo.php"  Also make sure to invoke the function on load of the page  <body onload="getLocation()">

Now that I have the users location we $_POST the lat/lng data to the loc_geo.php file to request the data for that location.  This is handled in the loc_geo.php file.  I set the $latitude and $longitude variables for use in the api.php file.  To finish it all off I used Google Maps geocode to get the reverse lookup address for where this location is referencing.

I broke up the various sections of this application into partial files to easily edit and update in the future.  This can be seen with  <?php require 'partials/part_nav.php' ?> and  <?php require 'partials/part_current.php' ?>Showing an example of the partial file is part_daily.php below.  This is for the daily forecast during the week:

Here I echo variables from the api.php file using a foreach on the $dailyCond array to sort through each days data such as $wTempHigh = round($cond['temperatureMax']);  for the max temp that day.  I have counters in place to skip the first iteration since I am displaying that data in the “Today’s Forecast” section and also to count when the data reaches three items to insert another bootstrap row <div>.

By using Forecast.io icon names from the data I can easily tie into the Skycons Icon Library to make things a bit more visual.  This is as simple as including the necessary dependencies in the page and calling the data with: <canvas class="<?php echo $curIcon; ?>" width="64" height="120"></canvas>

Skycons script reference:

Next I put in some quick geocoding in order to lookup a city or location from a text field.  Using the awesome Geocomplete library this was pretty simple. Again, a simple script reference in the footer file to include the script and library:

Then use the form field to submit the search once the location is found (partial_nav.php):

Similar as I did with the location based data, the submit points to action="lookup_geo.php"  to handle the lookup and inserting the values of the lat/lng from the geocode library.  Our lookup_geo.php file brings in the form data via $_POST and sets the $latitude and $longitude variables to be used in our api.php file.  Again, I reference Google Maps API to reverse lookup the lat/lng point to get an address.


There you have it.  A simple weather web app using the Forecast.io API.  There is more you can do with this API, but for my purposes this was all I needed to sort out.

Posts in this series cover the following:

Part 1 – Introduction & Project Outline

Part 2 – Working with the Data

Part 3 – Building the user interface

Lekker Logic
Tags: API, API Services, Forecast.io, JSON, PHP, Programming, Tutorials, weather