используя карты openweather и буклет let, как отобразить карту города, набрав название города в java-скрипте

Question

У меня есть код, который отображает мое текущее местоположение, используя мой лат и лонг, Мне нужно динамически отображать карты города каждый раз, когда я набираю название города. Я использую листовку, чтобы получить карты и открыть карты погоды, чтобы узнать погоду.

У меня есть два js-файла: первый называется main.js, который использует открытые карты погоды для получения погоды, а вторая страница называется map.js, которая отображает карту с помощью листовки с ключом веб-сайта.

main.js:

 let appId="db3306e07ea58337883b5487d2c870c2";
let units="metric";
let searchMethod;

function getSearchMethod(searchTerm) {
  if (searchTerm.length === 5 && Number.parseInt(searchTerm) +"" === searchTerm)
  searchMethod ='zip';
  else
  searchMethod= 'q';

}



function searchWeather(searchTerm) {
getSearchMethod(searchTerm);

  fetch(`http://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`).then(result => {
    return result.json();
  }).then(result => {

    init(result);

  })
}
function init(resultFromServer){
  switch (resultFromServer.weather[0].main) {
    case 'Clear':
    document.body.style.backgroundImage ='url("clear.jpg")';

    break;

    case 'Clouds':
    document.body.style.backgroundImage ='url("cloudy.jpg")';

    break;

    case 'Rain':
    case 'Drizzle':
    case 'Mist':
    document.body.style.backgroundImage ='url("rain.jpg")';

    break;

    case 'Thunderstorm':
    document.body.style.backgroundImage ='url("storm.jpg")';

    break;

    case 'Snow':
    document.body.style.backgroundImage ='url("snow.jpg")';

    break;


    default:
    break;
  }

let weatherDescriptionHeader = document.getElementById('weatherDescriptionHeader');
let temperatureElement = document.getElementById('temperature');
let humidityElement = document.getElementById('humidity');
let windSpeedElement = document.getElementById('windSpeed');
let cityHeader = document.getElementById('cityHeader');
let weatherIcon = document.getElementById('documentIconImg');


weatherIcon.src = 'http://openweathermap.org/img/w/' + resultFromServer.weather[0].icon + '.png';

let resultDescription = resultFromServer.weather[0].description;
weatherDescriptionHeader.innerText = resultDescription.charAt(0).toUpperCase() + resultDescription.slice(1);

temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '&#176';
windSpeedElement.innerHTML = 'winds at ' + Math.floor(resultFromServer.wind.speed) + ' m/s' ;
cityHeader.innerHTML =resultFromServer.name;
humidityElement.innerHTML ='Humidity levels at ' + resultFromServer.main.humidity + ' %';


setPositionForWeatherInfo();

}



document.getElementById('searchBtn').addEventListener('click', () => {
  let searchTerm = document.getElementById('searchInput').value;
  if(searchTerm)
  searchWeather(searchTerm);
})

map.js для получения карт из листовки:

var mymap = L.map('mapid').setView([44.456147,1.4531450000000001], 13);


L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoibWFzc291ZHNsa2RsayIsImEiOiJjanJhaTM4dWowMWVjM3ltcnA5d21xNHhwIn0.GY8XX8dLAyOapUOS2EGxZg'
}).addTo(mymap);

var marker = L.marker([44.456147,1.4531450000000001]).addTo(mymap);


var circle = L.circle([44.456147,1.4531450000000001], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(mymap);


marker.bindPopup("<b>Bonjours!</b><br>Vous étes ici.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");



var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap);


    function onMapClick(e) {
        alert("You clicked the map at " + e.latlng);
    }

    mymap.on('click', onMapClick);

    var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}

mymap.on('click', onMapClick);