[EDITED] I Need some help with the JavaScript for this Project

Here’s what I’ve got so far:

if (Modernizr.geolocation) {
  navigator.geolocation.getCurrentPosition(success, fail);
} else {
  console.log("Cannot use geolocator.");
}

function success(position) {
  var long = position.coords.longitude;
  var lat = position.coords.latitude;
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    switch (xhr.status) {
      case 200:
        responseObject = JSON.parse(xhr.responseText);
        console.log(responseObject);
        break;
      case 401:
        console.log("Access denied.");
        break;
      case 404:
        console.log("Not found.");
        break;
      case 500:
        console.log("Internal server error.");
        break;
      default:
        console.log("Something went wrong.");
    }
  };
  xhr.open('GET', 'https://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&appid=7c2db20133c273642814d36d8ca08d9e', true);
  xhr.send(null);
}

function fail() {
  console.log("Unable to retrieve location");
}

Whenever this runs, I’m thinking I should be getting asked for the browser to get my location and then print the API response object to the console. However, this is what Chrome Dev Tools throws at me:

Ideas?

EDIT: I have a new problem: Chrome requires that getCurrentPosition() be loaded over a secure origin (https), but the API call keeps timing out when called with https. :frowning:

If I plug the call straight into the browser’s address bar and use good ol’ http, it works fine. Using https however causes it to time out ever time. Does anyone have a clue how to circumvent this conundrum!?!? :confounded:

Are you using CodePen or are you working locally on your computer? If you are on CodePen, in your browser, change the http part of the url for your pen to https:// it should take care of the insecure origins error.

CodePen. And that fixed insecure origins… now if I can just figure out how to keep the request from timing out… :stuck_out_tongue:

Thanks @sonorangirl.

Check this forum link if you haven’t seen it already. It has a lot of information on how to get a location to send to openweatherapi. The gist of it is that openweather doesnt work with an https request so you’ll need to send them the latitude and longitude of the viewer, and you can get that from a few other web api’s out there instead of using the browser’s geolocation service. Hope this helps!

Oops here’s the link: http://forum.freecodecamp.com/t/show-the-local-weather-cant-use-geolocation-api-on-insecure-server-codepen-io/1215

1 Like

Okay, so I’ve switched from attempting to use the built-in geolocation method, but I’m still having problems:

var ajax = new XMLHttpRequest();
ajax.onload = function() {
  if (ajax.status === 200) {
    response = JSON.parse(ajax.responseText);
    var lat = response.latitude;
    var lon = response.longitude;
  }
};
ajax.open('GET', 'https://freegeoip.net/json/131.107.0.116', true);
ajax.send(null);

var xhr = new XMLHttpRequest();
xhr.onload = function() {
  if (xhr.status === 200) {
    responseObj = JSON.parse(xhr.responseText);
    var name = responseObj.name;
    var icon = responseObj.weather[0].icon;
    var descrip = responseObj.weather[0].description;
    var temp = responseObj.main.temp;
    document.getElementById('name').textContent = name;
    var img = document.getElementById('icon');
    var iconUrl = 'http://openweathermap.org/img/w/' + icon + '.png';
    img.src = iconUrl;
    document.getElementById('description').textContent = descrip;
    document.getElementById('temp').textContent = temp;
  }
};
var imp = '&units=imperial';
var met = '&units=metric';
xhr.open('GET', 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + met + '&appid=7c2db20133c273642814d36d8ca08d9e', true);
xhr.send(null);

I know that the lat and lon variables in the first call must be out of scope to use in the second call, but I’ve no idea how to make them accessible. Thoughts?

ok im not great with code yet but i have managed this project (just have to work on the html design part)
1… yes your lon and lat are out of scope as they are declared in a function so have no scope outside that function…
Other problem i think is when first requests is sent for location coords the second request is then sent even before first request returns with the results.

what i did for my weather app was to send off request by self calling function … (function(){})(); inside this function had a request sent for lat and lon coordinates assigned the results to a var lat and var lon … and then also in that main function at end i called another function … this function contained my call to the openweather app and i passed the lat and lon as paramaters into this function when i called it … this sorted two things … the lat and lon scope and second the call to openweathermap couldnt run until the first function got back the info and then called the openweathermap function;
check out this link dose very good job of sending requests and might help … after watching this i had no problem doing the weather app plus have most of wiki app up and running too

I was going to suggest the same as JohnL3, call a function from the function calling the geo coords api and pass it the Lat and Lon coords , or the response object itself. I’m currently at work, so won’t be able to type some demo code, but this process should get you the coords to use when calling the openweather api.