I am having trouble understanding the behavior of my code. I am attempting to load data using the code provided below. However, when the 3 commented-out lines are uncommented, the console.log displays an empty array [], and the remaining code fails to function properly even though I am not currently utilizing the fetched data.
Interestingly, if I comment out the problematic 3 lines and the console.log shows (5) [i, i, i, i, i], the rest of the code executes as expected - plotting markers on a leaflet map. The consistency in numbering between the two sets of data (0-4) is puzzling, given that they appear to be formatted differently.
Any assistance would be greatly appreciated.
var groupMarkers = [];
async function getData() {
const response = await fetch('../../Export2.log'); //These are the lines causing problems
var data = await response.text(); //These are the lines causing problems
var formatedData = JSON.parse('[' + data.trim().replace(/\n/g, ',') + ']') //These are the lines causing problems
for (var i = 0; i < 5; i++){
marker = L.marker([51.5, -0.09]).bindPopup("I am a green leaf.");
groupMarkers.push(marker);
}
}
getData();
setInterval(getData, 5000);
L.layerGroup(groupMarkers).addTo(map);
console.log(groupMarkers);
If you'd like to test the entire page, here is the HTML snippet:
<!DOCTYPE html>
<html>
<head>
<title>Map Data Test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="305c5551565c554470011e061e00">[email protected]</a>/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="69050c080f050c1d2958475f4759">[email protected]</a>/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script type="text/javascript">
// Start Map
var map = L.map('map').setView([51.5, -0.09], 7);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <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>',
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var groupMarkers = [];
async function getData() {
const response = await fetch('../../Export2.log');
var data = await response.text();
var formatedData = JSON.parse('[' + data.trim().replace(/\n/g, ',') + ']')
for (var i = 0; i < 5; i++){
marker = L.marker([51.5, -0.09]).bindPopup("I am a green leaf.");
groupMarkers.push(marker);
}
}
getData();
setInterval(getData, 5000);
L.layerGroup(groupMarkers).addTo(map);
console.log(groupMarkers);
</script>
</body>
</html>