API answer is not integrated on click. Could you help me to find the issue please ?
API url is https://www.aviationweather.gov/adds/dataserver_current/httpparam?datasource=metars&requestType=retrieve&format=xml&mostRecentForEachStation=true&hoursBeforeNow=48&stationString=LFPG
Ans script is the one below.
<script>
const lat = 49.004800830809685;
const lon = 2.555933679530433;
const mymap = L.map('mapid').setView([lat, lon], 7);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
const marker = L.marker([lat, lon]).addTo(mymap);
marker.bindPopup("Loading temperature data...");
async function main() {
const mtr = await fetch(`https://www.aviationweather.gov/adds/dataserver_current/httpparam?datasource=metars&requestType=retrieve&format=xml&mostRecentForEachStation=true&hoursBeforeNow=48&stationString=LFPG`)
.then(response => response.text())
.then(xml => new DOMParser().parseFromString(xml, "text/xml"));
console.log(mtr);
displayMETARINFO(mtr);
}
function displayMETARINFO(data) {
const raw_text = data.querySelector("METAR raw_text").textContent;
marker.bindPopup(`Current METAR:<br>${raw_text}`);
}
main();
</script>