Weather project error message: "{'error':'Please provide longitude as lon and latitude as lat as numbers/floats.'}"

// global variables
var base_url = "";
var lat = '' ;
var lon = '' ;

//window.addEventListener('load', getLocation);

//<iframe src="" allow="geolocation"></iframe>

$(document).ready(function getLocation() {
  if (navigator.geolocation) {
  } else {
    var para = document.createElement('p');
  para.textContent = "Geolocation is not supported by your browser";

    function success(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;

var url = base_url + lat + '&' + lon ;

var weatherRequest = new XMLHttpRequest(); 
 //might need to add actual URL'GET', url);

      weatherRequest.onload = function() {


Ok, so figured out the problem specifically lies with the url i’m using. When I load the end point, it loads to the console no problem. So i’d like to understand how I can get my “var url” variable to load and pass coordinates so I can get a proper response. Additionally, when I check the chrome console I get the following errors:

“pen.js:12 [Deprecation] getCurrentPosition and watchPosition usage in cross-origin iframes is deprecated and will be disabled in M63, around December 2017. To continue to use this feature, it must be enabled by the embedding document using Feature Policy, e.g. <iframe allow=“geolocation” …>. See for more details.”

but when I use the iframe code, I get the following error:
“Unexpected token <”

Your URL will look like:

But it shoud look like:

Have a look here:

Thank you! Super helpful.