Geolocation and the Open Weather API

Recently, I was working on a Free Code Camp¬†project where I created a page to show the current weather in your location. I knew that in order to pull weather data for the user’s area, I needed to locate them first. When I tried to get geolocation information from the user, it initially failed. I realized after checking my page errors that versions of Chrome from 50 on do not support geolocation over a connection that isn’t secure (aka http). I tried accessing my site over https and successfully pulled longitude and latitude coordinates.

$(document).ready(function(){
  navigator.geolocation.getCurrentPosition(success, fail);
});

After attacking that, I started to integrate Open Weather’s API into my page per Free Code Camp’s suggestion. I tried to display the current weather on my page but nothing happened.

$.getJSON("http://api.openweathermap.org/data/2.5/weather?
  lat={lat}&lon={lon}&APPID=#",function(loc){
    $(".weather").html(loc.weather[0].main);
});

After a little digging, I figured out the problem. I needed to access the site over a secure connection for geolocation to work, but the Open Weather API only worked on http. I searched for some workarounds and eventually decided to move away from Open Weather completely. I went with Wunderground’s free API and successfully created my site with no problems over a secure connection.

Check out my GitHub repo here!