Geo location not working in repl.it

I am attempting to make a weather app in JS on repl.it.

–> https://repl.it/@Michael_Nicol/Weather-App#index.js

Here is my code:

var lat;
var lon;
var key = "e80a62396fd860ba12759cf3345e3cf5"
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function() {
     lat = position.coords.latitude;
     lon = position.coords.longitude;
    });
} else {
    alert('Browser Geolocation disabled');
}
async function getWeatherData() {
 let response = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat={${lat}}&lon={${lon}}&exclude={part}&appid={${key}}`)
}

getWeatherData().then(data => console.log(data))

My issue is that I am getting a error that navigation is not defined.

I have no idea why this is happening.

This code is patch work from what I have found online since I have not working on APIs that much. I do roughly understand what is happening, just not 100%.

I have no idea how .then() is getting data from the getWeatherData() function since it does not return anything… If it is even working since the code won’t run that far.

I also do not understand what async and await are doing either.

Hello!

I took a look at your code, it looks fine, but there is one issue with the repl.it instance (which I am not too sure how to remedy on their website as I am unfamiliar with it).

The summary however: this repl.it instance is using node.js, which, while this uses js as it’s backbone, the features and functions it has access to are different from that of say, Chrome’s js.

Without getting into too much detail, web-browsers like Chrome, Firefox, Internet Explorer provide different functions in JavaScript than that of node. In our instance here, we are attempting to use the global navigator class. This navigator class is provided by a browser, like Chrome.

If you would like to test this out, try opening your browser of choice and access your Developer Utils (If one Chrome it’s NavBar -> View -> Developer -> Developer Tools) and in the console tab entering in navigator and hitting enter.

You can actually take this a step further and copy + paste your code into the developer tools as well, it should execute (albiet it with a different error now, but that’s for you to debug :wink: )


If you would like a really cool explanation of what I was talking about above, feel free to checkout this video on NodeJS,


Also if that key provided is an API Key, I would highly suggest editing that out, and then remaking your key for that account. By sharing that key online you allow anyone to make requests to that API Service on your behalf. If it is meant to be public, ignore this, but I wanted to give a heads up :slightly_smiling_face:

you can create a HTML/JS/CSS repl and see that instead there it works

Thank you for the response.

I first tried pasting it into the Dev console and got the error you were stating.

Even when pasting it it, I get a error that position is undefined. This gives me undefined for the lat and lon which I may be thinking is giving me the 401 error.

The navigator seems to be enabled according to my console. Not sure though.

cookieEnabled: true
credentials: CredentialsContainer
deviceMemory: 8
doNotTrack: "1"

For the API key, its a free one that has 2,000 calls a day. I understood by using it publicly I could be risking it getting taken, I just have no other way to really test this without showing people the code.

  1. The callback to getCurrentPosition should be passed position as an argument.

  2. You are not using the variables correctly in the template string, it should just be ${varName} not {${varName}}

  3. getCurrentPosition is asynchronous, you do not have access to lat and lon when getWeatherData runs.

  4. getWeatherData is not returning anything.

https://repl.it/@lasjorg/WhirlwindRundownDeeplearning