Issues with local weather challenge

I cant seem to output anything from my jquery function, for example in my console log i tried to output the url variable but I can’t and I don’t know why. Can anybody help me? Thank you.
Here’s my code.
HTML:

Local Weather

CSS:
body{
background-color:#555;
text-align:center;
font-family:Dosis;
color:#fff;
}

JS:
$(document).ready(function(){
var long;
var lat;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {

long = position.coords.longitude;
lat = position.coords.latitude;

var url='http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=3f03e3e0569f04ffcc024fcf0b4958c6';

$.getJSON(url, function(data){
var weatherType=data.weather[0].description;
var kelvin=data.main.temp;
var windSpeed=data.wind.speed;
var city=data.name;
$("#data").html(city);
});
$("#data").html(‘url’);
});
}

});

Most likely a cross-origin issue. Happens when using a http api on a https page, if you check your browser console, you should see it flagged up in red.

Quick fix would be to add https://cors-anywhere.herokuapp.com/ onto the start of your api url.

OK thanks that worked