Thank you for this! Huge lifesaver.
Just finished the “show local weather” project.
At first the navigator.getGeolocation didn’t work, because my chromium browser needs an https call to get the coords. With ip-location, my location was shown about 600 km south from where I live, so it was not the same weather as here.
I then struggled a bit with asynchronous calling (which I am not used to before): I didn’t want to nest my two function calls but this was bad, because the open weather api was called before the location call has updated the coords.
But with https, the open weather api didn’t work. So I use a proxy I can call with https to get the open weather data. It’s even harder to get the weather icon as image with https but I finally managed it.
Your code really helped me to understand how to make this project. I should confess that many things I just took from your code and put into mine.
Thanks! It did the trick!
You can fix this problem changing your codepen link. Change https for http.
I find both of these give me a location that is a lot further south then my current location. They are not accurate enough. My only real option is to use the GeoLocation method and use HTTPS with codepen?
My weather app has worked for 2 days using the Geolocation API before getting the mixed content problem on Codepen. I’ve now switched to freegeoip.net and it’s working again. However, the location doesn’t seem to be as accurate as using the geolocation API, but it’s acceptable nonetheless. Thanks for the info :
This caused me many hours of frustration.
If you still want to use the Geolocation API instead of using the IP tracking sites it was recommended to me by another user to use the CrossOrigin CORS Proxy.
This Proxy allows you to successfully share data between HTTP and HTTPS sites.
Append the CrossOrigin URL before your weather API url.
Also, when using CodePen, ensure you are accessing it via HTTPS://
Hope this helps!
Hey Nims, your solution with crossorigin.me + accessing codepen via https is by far the better in my case. I didn’t have to rewrite all the application (finished a long time ago), thanks to your trick. I owe you one! Thanks a lot, Donatien.
No problem, I’m glad I could be of assistance. The community for FreeCodeCamp is great!
This worked like a charm!
I have spent so many hours trying to figure this out. I just can’t do it. I’ve even copied several people’s codes, and tweaked and tried countless combinations to get the damn geo location data.
Can someone just tell me how to do it? I can figure out everything else on my own, I’m just tired of wasting my time trying to figure this out. I have tried every suggestion in this thread, and I keep getting errors. This challenge has driven me insane.
Crossorigin.me just shows an empty page with “Origin: header is required” written on it for me. So pretty much can’t use the true geolocation of the device because we have to use https, which prevents us from using http API calls (which weathermap has).
To sum it up, we either use ip address location (innacurate sometimes) or use some sort of proxy magic to use real geolocation with weathermap API.
This is a new issue, I have been travelling the world for the past 4 months and have not been coding. The cross origin proxy was working before I left, but this seems to be a new issue.
If anyone can offer assistance that would be great!
It seems to be an issue from the crossorigin proxy. Time to start trouble shooting.
If you use html5 geolocation, you must use https, and CORS issue will come. To solve this, just use http and another location api. However, I still don’t know how to solve problem with loc propertiy.
I am using geolocation API with https. I call the owm API like so:
EDIT: apparently it’s not advised to use it, but I leave the decision up to you. More info is here: https://github.com/Rob–W/cors-anywhere/#demo-server
dude. so much help! thanks!
Thank you so much; saved my app!