How to modify openweathermap JS to use latitude longitude values

Question

I recently posted another question about the following JS openweathermap weather app i'm re-purposing. This is a follow up question to that.

https://codepen.io/stack-findover/pen/vYgQrPP

Currently, the code uses city search and geolocation for the getWeather function. I'd like to modify the code to use a specific set of Lat / Long coordinates instead. What would be the best way to do that?

Thanks for any help you can provide.

Relevant code blocks below:

var weatherData = {};
var api = "https://api.openweathermap.org/data/2.5/forecast?lat=&lon=-&units=imperial";
var id = "&APPID=acc38546e41e0baf9aa6ba45661c094b";
var cnt =  "&cnt=4"
var country="";
var ctyName = "";
var options = {
              weekday: "long", year: "numeric", month: "short",
              day: "numeric", hour: "2-digit", minute: "2-digit"
            };

var curDate = $(".cur-date");
curDate.html(new Date().toLocaleTimeString('en-US', options));

$.ajax({url: "https://ipinfo.io/json?"})
.done( function(res) {
  console.log(res);
  country = res.country;
  ctyName = "q="+res.city+","+country;

  getWeather();
});


function getWeather() {
$.ajax({url: api+ctyName+id+cnt, dataType: 'json', success: function(result) {
  $('#loader').hide();
  console.log(result);
  weatherData = result;
  var icons= [];

  $("#loc").html(result.city.name+", "+result.city.country);
  $("#cur-weath").html(result.list[0].weather[0].main);
  $("#cur-deg").html(Math.round((result.list[0].main.temp * (9/5)) - 459.67)+"°");
  $("#cur-desc").html(result.list[0].weather[0].description);
  var icon = result.list[0].weather[0].icon;
  setBackground(icon);
  //icons.push(result.list[0].weather[0].icon+".png");
  console.log(Icons[icon].icn);
  skycons.set("cur-icon",Icons[icon].icn);
 // $("#cur-icon").html("<img src='http://openweathermap.org/img/w/"+icons[0]+"'style='width:100px;height:100px;'>");
  for(var i=1;i<4;i++) {
    var $next=$(".next-weath");
    icons.push(result.list[i].weather[0].icon);
    var dt = new Date(result.list[i].dt_txt);
    if(dt == "Invalid Date") { //modify dt for internet explorer compatibility
      var ar = result.list[i].dt_txt.split(" ");
      dt = new Date(ar[0]+"T"+ar[1]);
    }
    var hour = dt.toLocaleTimeString('en-US', {hour: "2-digit", minute: "2-digit", hour12: true,  });
    $next.eq(i-1).find(".next-hour").html(hour);
    $next.eq(i-1).find(".next-desc").text(result.list[i].weather[0].description);
    $next.eq(i-1).find(".next-deg").html(Math.round((result.list[i].main.temp * (9/5)) - 459.67)+"°");
    skycons.set($next.eq(i-1).find(".next-icon")[0], Icons[icons[i-1]].icn);
  }


},

error: function(error, errorType, errorMessage) {
    $("#loc").html("Unable to Locate").next().hide();
},

beforeSend: function() {
    $("#loc").html("loading").next().show();

}});
}

$("button").on("click", getCityWeather);

$("input").keydown(function(event){
  if (event.which == 13)
    getCityWeather();
});

$(".next-deg").on("click", function() {
  if(weatherData)
    changeTempScale( $(this));
});

$("#cur-deg").on("click", function() {
  if(weatherData)
    changeTempScale( $(this));
});


function setBackground(icon) {
$(".wrap").css('background-image', 'url(' + Icons[icon].bg + ')');
}

function getCityWeather() {
$("input").val()
ctyName = "q="+$("input").val();
getWeather();
}

Ive attempted to override the functions by modifying the openweathermap api link, as in the following.. but this did not give the expected result.

var weatherData = {};
var api = "https://api.openweathermap.org/data/2.5/forecast?lat=&lon=&units=imperial";

Answer 1

The api variable currently contains lat=&lon=. Try removing that from the api variable. Then remove your variables for country and ctyName. Finally, create new variables for lat and lon to build the request URL and see if that works for you.

The resulting request URL should look something like:

https://api.openweathermap.org/data/2.5/forecast?units=imperial&APPID=acc38546e41e0baf9aa6ba45661c094b&cnt=4&lat=43&lon=-70.2