It seems to be a pretty common problem. I finished my Weather App and it worked great on my local host. It doesn’t work on codepen. I checked answers to similar plots and tried the solutions, but they didn’t work in my case.
Can anyone take a look and give me some feedback, please?
It may be because https://ip-api.com/json its not working. Why don’t you try using geolocation for getting lat and lon?
Hey, thanks.
This method, triggering location with the city, was recommended by the openweathermap.org
I also found it more precise and easier as the lat and lon would need to be rounded and it could lead to some issues with the geolocation. And as said, it worked great on my local host.
I tried http://ip-api.com/json and this one works. Still, changing the url to http didnt help.
Any other ideas? 
Blocked loading mixed active content “http://ip-api.com/json”
Reason: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
Change the IP lookup to another service and it works:
yes, I also tried this one. But this API is very unreliable. I tested it with friends and it shows wrong location. sometimes hundreds kms away from the actual one…
Do you know, by any chance, any other reliable IP lookups, with secure connection for free?
There are several out there. Just keep trying until you find a good one.
The IP based location its not so accurate as geolocation in case of an user having a dynamic ip
thanks @JohnnyBizzel and @sorinr
There are several out there yes, but you have to pay extra for https. For free they only offer http.
As I mentioned in another plot Show the Local Weather - can’t use geolocation API on insecure server (codepen.io)
I am wondering, if there is a way to finish this task. Even the freecodecamp example doesn’t work or shows weather in Japan, and I am in Germany.
navigator.geolocation.getCurrentPosition shows a town 300kms away.
Is there anyone who finished the task and their app is still working after shift from http to https?
here is my local weather app made about two years ago
The FCC API seems to return a default value of Shuzenji, JP most of the time no matter what GPS coordinates you provide. It will occasionally return the correct information, though.
I looked into other APIs, but found that they were even less reliable than the FCC one.
@RadekKosiada if you take a look to my js code you will see that after retrieving lat and lon using geolocation, I’m making an extra call to the google maps api just to retrieve the address that I observed openweather api not always report it right. This solution I found is a little tricky as google maps api format the json based on the country, so this [2] var address = location.results[2].formatted_address; in my js was the best solution i could find. changing 2 to other 0…9 number will give you diff info
@sorinr thank you for sharing this.
I took the liberty to try from a different angle.
I added submit form and user has to write his/her location themselves. The moment they submit their location, the weather in their town is displayed.
I made it disappeared in the first place. I thought it looked nicer and puts focus on the weather info.
I have added
if(confirm(‘Are you sure you spelled the city correctly? Please try again.’)){
window.location.reload();
so the page reloads after clicking OK and the frame appears again. It doesn’t work on the codepen though…
But you are right. I will leave the field so someone can enter different locations again and again.
As you decided to let the user input their city name i would just add an auto completion to that input. You may take a look at this google service: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
@sorinr That’s a great tip.
I added it and it works here http://bit.ly/RadWeatherApp but doesn’t on codepen.
But thanks so much. I learned so much it’s been fun working on this task.
I would also make the temp toFixed(0) to round it to an integer