Weather app - variable assignment

1

Hi guys,

I’m trying to do the weather app at the moment and got stuck on something which I hope you can help me with. Here’s the code:

  var lat;
  var lon;
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      lat = position.coords.latitude;
      lon = position.coords.longitude;   
      console.log(lat);
    });
  }
  console.log(lon);

so my problem was the global variables “lat” and “lon” were not changed outside of the if statement and I do not understand why. the console.log(lat) statement in the if statement worked correctly but the console.log(lon) statement at the end returned “undefined”.

I meanwhile figured out that I can do the lat and lon assignment outside of the if statement but I’d really like to know the reason behind it.

thanks for any help

2

Getting the geolocation works asynchronous. So the console.log will have run before the geolocation finished getting the location. You can call a function inside of the getCurrentPosition:

  var lat;
  var lon;
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      lat = position.coords.latitude;
      lon = position.coords.longitude;  
      someFunction();
      console.log(lat);
    });
  }
  console.log(lon);

  function someFunction(){
    console.log(lat, lon);
  }
1 Like
3

[EDIT] Wish I could delete my stupid attempt at an answer but then @BenGitter 's answer wouldn’t make sense and what he says actually helped me. I shall endure my embarrassment then !

I’m not sure I get your question but as to why console.log(lon) returns undefined when outside the if is about scope. You can think of the curly brackets as membranes isolating bits of code, or like bubbles.

So in this case, your console.log(lon) has the Browser (or whatever) looking for the variable lon in the global bubble, and in the global scope you haven’t defined it: var lon;.

Whereas console.log(lat) is in the same bubble (it’s in the curly brackets of your if statement) and so lat is defined as lat = position.coords.latitude.

4

oh sh*** have I said something completely stupid then?

sorry… :flushed:

5

so if I understand you correctly, the variables lat and lon were assigned the new value, it just happened after my whole program has run and therefore too late??

6

maybe I should explain that I only did the console.log statements to see what’s going on. I am using lat and lon in the url to get the weather data and lat and lon show up as “undefined”

7

Do you have a CodePen or something? It should work if you call a function from within the getCurrentPosition.[quote=“bluecherryme, post:5, topic:66714”]
the variables lat and lon were assigned the new value, it just happened after my whole program has run and therefore too late?
[/quote]

Yes, since it happened async, your program kept running (in this case only the console.log) and some time after that the values were changed.

8

here’s the link to my codepen: http://codepen.io/bluecherryme/pen/JbLdXp
I thought I had it working but I was mistaken
how to I get the longitude and latitude assigned to my variables lon and lat?
I know it seem so easy…that’s why it is so annoying grrr

9

Kinda :slight_smile: Though what you said, should be one of the first things to check if you unexpectedly get undefined.

Since lat and lon are defined outside any function, changing their value inside the function will not change their scope (which is outside the function).

If you use var if-statements are not considered different scopes. I believe if you use let they are limited to that block.

1 Like
10

Are you using Chrome? Chrome won’t allow geolocation acces if you use http. And if you use https they want you to use https for other requests as well, so your api call should be to a secure (https) API. Unfortunately, openweathermap only supports http.

Basically, there are a lot of tiny little things that makes this project really difficult. It is really important to have your browser console open to see if there are any errors.

Will have a look now…

11

it is working though. the console.log statement within the if statement returns the correct value.
I’ve tested all the single parts and they are all working by themselves.

I’m just trying to wrap my head around how to change the global variables lon and lat from within the if statement?

12

Yes, geolocation should work (use https on Chrome).

BTW: Bootstrap needs jQuery, so you should first add jQuery and then Bootstrap (in the JS settings tab). You can swap them by dragging one of them, using the “hamburger” icon on its left.

EDIT: So to get it to work you need to change this:

  • wrap all the API code in a function. From var APIKey = ... till the end (request.send)
  • call that function in the getCurrentPosition callback.
  • to ensure it works in Chrome: always use https when you link to your codepen and change API to: var API = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=" + APIKey;

cors-anywhere.herokuapp.com is just a trick to let Chrome think you are using a secure connection (https), but it just routes the openweathermap api (http).

Also, since you are already using jQuery, using $.getJSON is super easy:

$.getJSON(API, function(data){
  console.log(data);
});
13

thanks for your help Ben, I will get working on that…it makes sense now…