Build a Geolocation Weather App

Source Demo

By Samay Shamdasani

Getting Started

This weather app tutorial will use HTML geolocation to auto-detect the user’s latitude and longitude and then will use those coordinates to determine the weather using the Dark Sky API. Before we start, you must sign up for your API key over at Dark Sky. Once you sign up and reach to your console, take note of your API key. Just for your information, this API is free for up to 1,000 requests/day.

Now that we have our API key, we can create our files:

index.html - for our markup
style.css - for styling
app.js - for the function(s), API

As you probably saw in the preview above, we’re going to be displaying the current temperature, a short summary, and the coordinates based on the user’s location. That’s why we’ll need three divs in addition to adding the jQuery CDN (for the API request) and linking our style.css and app.js files.

  <html>
     <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css" />
        <title> Weather </title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     </head>

     <body>
        <h1><div id="temp"></div><div id="minutely"></div></h1>
        <h2><div id="location"></div></h2>
     </body>
     <script src="app.js"></script>
  </html>

The weather() function

Our JS file will be centered around HTML’s geolocation.

This is what we need to incorporate:

set the location div to a variable
set the API key and the url(https://api.forecast.io/forecast/) equal to variables.
write the geolocation.getCurrentPosition method with the parameters (success, error)
write the success function consisting of the following:
- set the position.coords.latitude and position.coords.longitude to their own variables
- use the location div’s variable to display the latitude and longitude for the location
- use the $.getJSON jQuery method to make a request to the weather API url
- set the temp and daily div values to the data.currently.temperature and data.minutely.summary (docs on weather API request)
write an error function to tell the user that the location could not be retrieved
set the location div’s value to “Locating…”
call the weather() function

  function weather() {

    var location = document.getElementById("location");
    var apiKey = 'INSERT API KEY';
    var url = 'https://api.forecast.io/forecast/';

    navigator.geolocation.getCurrentPosition(success, error);

    function success(position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;

      location.innerHTML = 'Latitude is ' + latitude + '° Longitude is ' + longitude + '°';

       $.getJSON(url + apiKey + "/" + latitude + "," + longitude + "?callback=?", function(data) {
        $('#temp').html(data.currently.temperature + '° F');
        $('#minutely').html(data.minutely.summary);
      });
    }

    function error() {
      location.innerHTML = "Unable to retrieve your location";
    }

    location.innerHTML = "Locating...";
  }

  weather();

There you have it! We now have a functional weather app :)

Some styling

Here’s my take on some basic centering and font changes in CSS. Feel free to style the page to your liking.

  html {
    font-family: "Avenir Next", Helevetica, sans-serif;
    text-align: center;
  }

  body {
    margin: 0 auto;
  }

  h1, h2 {
    font-weight: 300;
  }

I encourage you to try to explore more with the world of APIs. You can build a Quote Generator that uses a quote API, or you could even further advance this project by adding more weather details from the Dark Sky API!