Utilizing the Where the ISS at API to retrieve the current latitude and longitude coordinates of the ISS involves making a serverside request structured like this:
app.get("/coordinates", async (req,res) =>{
try{
const result = await axios.get(API_URL);
const latitude = result.data.latitude;
const longitude = result.data.longitude;
res.render("index.ejs", ({latitude: latitude, longitude: longitude}))
} catch (error) {
res.status(404).send(error.message);
}
})
The EJS template includes the following code snippet:
<!-- leaflet css -->
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="254940444349405165140b120b14">[email protected]</a>/dist/leaflet.css" />
</head>
<body>
<div id="map"></div>
<p>ISS Latitude: <span id="data-latitude"><%= latitude %></span> </p>
<p>ISS Longitude: <span id="data-longitude"> <%= longitude %></span></p>
<!-- leaflet js -->
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="264a4347404a4352661708110817">[email protected]</a>/dist/leaflet.js"></script>
<!-- Your custom JavaScript file -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
And the client-side JavaScript appears as follows:
const mapElement = document.getElementById('map');
const latitude = parseFloat(document.getElementById("data-latitude").textContent);
const longitude = parseFloat(document.getElementById("data-longitude").textContent);
// Map initialization with predetermined coordinates
var map = L.map(mapElement).setView([latitude, longitude], 8);
// osm layer
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
osm.addTo(map);
// Marker at predetermined coordinates
var marker = L.marker([latitude, longitude]).addTo(map);
Upon loading the specific route on my localhost, a text snippet reading "Copy Code" appears with the coordinates displayed underneath. While the coordinates are successfully retrieved, the map fails to render. As a beginner with leaflet, I am unsure of the issue causing this problem.