You must be looking at a different console than I am because I have a “Mixed Content: The page at ‘https://codepen.io/AeriaGlorisia/pen/eWvmmq’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint” error in mine. (There is a console on codepen, but that doesn’t show all of the errors - the browser console does.)
Here’s what I wrote on a post with a similar problem:
++++++++++++++
Looking in the Chrome console, I see that you’re getting a “mixed content” message. You’re trying to call openweathermap from your https codepen. Bad coder! The problem (in my limited understanding) is that openweathermap doesn’t accept calls from https. You could use your pen on http, but then (as I understand it) navigator.geolocation.getCurrentPosition won’t work because it doesn’t like http. (I know, makes me want to scratch my eyes out too.)
So, you either have to change everything to http or https. You can get your coords on http on ip-api.com or I think Dark Sky API works on https if you want.
I chose the former route:
$.getJSON("http://ip-api.com/json", function (data) {
lat = data.lat;
lon = data.lon;
/*
* more code
*/
If you call your codepen over http, that should work.
I’m sure there is a better solution, but it’s late and I wasn’t sure if you were going to get an answer tonight. I have an image of you shivering in your underwear staring at the screen with bloodshot eyes, waiting for a response. I know I’ve been there.
This seems to work:
function use_api(lat, lon){
var api_key = '8a7759132e2cad3a28a84ec1abf616fd';
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&APPID=' + api_key,
success: function(data){
display_info(data);
}, //end of success function
error: function(data){
console.log(data);
} //end of error function
}) //end of ajax
}; //end of use_api
$(document).ready(function(){
$.getJSON("http://ip-api.com/json", function (data) {
use_api(data.lat, data.lon);
});
});
Just remember to change your codepen url to http in the address bar.
Yeah, APIs drive me crazy too.
++++++++++++++
You’ll have to adjust it to your needs, but you get the idea.