I can't use openweathermap API any longer on codepen because google chrome blocks mixed content

Question

The API has to be HTTPS because codepen is HTTPS, but the API doesn't work on HTTPS, so I'm stuck, what can I do?

Here's the code:

    $(document).ready(function() {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(handleGetCurrentPosition, onError);
  }
  function handleGetCurrentPosition(location) {
    console.log(location.coords.longitude + " " + location.coords.latitude);
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=-0.5507657&lon=47.475692800000004&appid=c024988151d2439343bc4617141ac25d", function(result) {
      console.log("City: "+result.city.name + " Weather: "+ result.list[0].weather[0].description);
    });
  }
  function onError() {
    $('body').innerHTML = "";
    $('body').innerHTML = "<h1>Sorry, there was a technical problem. Please reload the page later.";
  }
});

and here's the error message:

jquery.min.js:4 Mixed Content: The page at 'https://codepen.io/Gochaia/pen/ZWVoYz' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=-0.5507657&lon=47.475692800000004&appid=c024988151d2439343bc4617141ac25d'. This request has been blocked; the content must be served over HTTPS.

thanks.

UPDATE

I found a solution, thanks to @AlexChance. Forecast.io API is hosted over SSL, so there is no more mixed content.