I’m not sure what is happening by the stuffs in displayWeather() doesn’t execute.
Hi,
I’m not sure all the problems you might be having but to start the API call “$.getJSON” is not correct.
It should look like this:
$.getJSON(“http://api.openweathermap.org/data/2.5/weather?lat=” + latitude + “&lon=” + longitude +
"&APPID=put your API key here", function (data)
This assumes you are using the openweathermap API. If you are you first have to request the API key from their site and add it to your code. The function(data) at the end is where you will retrieve the information you need for your site that open weather returns to you for your API call.
So, get your navigator data to determine lat and long then create string for $getJSON call then explore what is returned to continue.
Hope that helps.
It’s not quite possible to tell if the api call is correct or not from that screenshot, but I was doing that same app the other day and I had the problem with the fact that browsers dont allow using the geolocation api if you are not using https and openweather only allows http requests from free accounts.
I tried using some other site with https to do the request instead but that one didn’t allow calls from webpages at all
In the end i just opted to get the general location of the user by some api that finds it over the ip.
Tho i wasn’t using code pen so it might be somewhat different
The URL that I got for my location is "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=1.5552315195971391&lon=103.75318658307009&units=imperial&type=accurate&APPID=4ffc33f6ba08e239ff0657cad3b62dfa&callback=JSON_CALLBACK"
and this URL works just fine by opening it in Safari.
My problem is that I assigned this URL to weatherURL and passed it to $.getJSON(weatherURL) …
but the blocks in the displayWeather() function just doesn’t execute
Oops! Omit the https://crossorigin.me/
That’s the exact thing i tried but openweather doesn’t use https fpr free accounts and crossorigin doesn’t respond to ajax requests made from web page scripts, or at least i couldn’t get it to. So really i don’t think there is any nice way to do this challenge
At least not using the built in geolocation.
Try to open codepen.io with Firefox and use http rather then https. Firefox has no restriction to using geolocation api with http.
So … are you getting an error?
Have you looked at the console? Tried using the debugging tools (F12)?
In short, displayWeather cannot execute where you are calling it (you are likely getting a “displayWeather is undefined” error message in the console).
It is defined inside of a callback to navigator.geolocation.getCurrentPosition Outside of that callback, no other code can access that function.
There’s no reason for it to be a function at the moment. leave the instructions inside the callback without the function displayWeather() … } wrapping and it will execute.
If you want to make it an external function that you call from within the callback (my preference) you need to define the function outside the geolocation function and then call it from inside the callback, passing it any data it needs (the weatherURL), just like you did with the getWeather() function.
Also - a side observation - you failed to declare your latitude and longitude variables with a var, let or const keyword, meaning they automatically attached as properties to the window object and became global variables (which is something you want to avoid).
And, a side-side observation - I was going to show you a change to your source code, but you used a screen shot and I decided that re-typing it wasn’t worth it. If you paste code inside of triple backticks rather than using screen shots, it’s easier to work with and show possible variations.
Regards,
Micheal
Following is my code.
- remove this +"&callback=JSON_CALLBACK" from the definition of weatherAPI
- you should not only define function displayWeather, but acctualy call it.
Hi all,
So I tried removing every function() and wrap the codes inside navigator.geolocation.getCurrentPosition(function(position) { … });
But still, the codes within $.getJSON(weatherAPI) doesn’t execute. Fyi, $.getJSON(weatherAPI) is inside the navigator.geolocatiojn.getCurrentPosition(function(position) { … });
Go with DarkSky instead of OpenWeather. They let you use HTTPS for free.
Hello !
Another easy to use resource is Google Geolocation API.
You need to create a google account and signup for Google Developers Console.
Solved many https and browser compatibility issues for me.
Good luck 