Levi/IWD2-02
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

JS project finished

Browse Source
This commit is contained in:
Levi
2026-02-12 15:10:50 -05:00
parent 1357b2362a
commit 71a5d36a7a
5 changed files with 255 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/js/map.js
+51 -26
View File
@@ -1,39 +1,64 @@
let map;
let meteorData = [];
let markers = [];
// Load the map from the Google Maps JS API
function loadMap() {
const map = new google.maps.Map(document.getElementById("map"), {
map = new google.maps.Map(document.getElementById("map"), {
center: {lat: 0, lng: 0}, // Center of the globe
zoom: 2
});
const infoWindow = new google.maps.InfoWindow(); // create InfoWindow object to use later
// Add custom markers from meteor data
fetch("./js/Meteorite_Landings.json")
.then((response) => response.json())
.then(data => {
data.splice(0,500).forEach(location => {
const marker = new google.maps.Marker({
position: { lat: location.reclat, lng: location.reclong},
map: map,
title: location.name
});
marker.addListener("click", () => { // Open and show the InfoWindow on click
const content = `
<div class="info-window">
<h3>${location.name}</h3>
<p><strong>Mass:</strong> ${location["mass (g)"]} g</p>
<p><strong>Year:</strong> ${location.year}</p>
<p><strong>Class:</strong> ${location.recclass}</p>
<p><strong>Fall Status:</strong> ${location.fall}</p>
<p><strong>Recorded Latitude:</strong> ${location.reclat}</p>
<p><strong>Recorded Longitude:</strong> ${location.reclong}</p>
</div>`; // By doing this I have more control over what I put in the InfoWindow and how to style it
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
});
meteorData = data.splice(0,500);
filteredData = [...meteorData];
drawMarkers(filteredData);
})
.catch(error => console.error(error));
};
function drawMarkers(data) {
clearMarkers();
const infoWindow = new google.maps.InfoWindow(); // create InfoWindow object to use later
// Add custom markers from meteor data
data.forEach(location => {
const lat = Number(location.reclat);
const lng = Number(location.reclong);
// Ignore entries that are not numbers (will cause errors)
if (isNaN(lat) || isNaN(lng)) return;
// Create marker from reclat and reclong
const marker = new google.maps.Marker({
position: { lat: lat, lng: lng},
map: map,
title: location.name
});
marker.addListener("click", () => { // Open and show the InfoWindow on click
const content = `
<div class="info-window">
<h3>${location.name}</h3>
<p><strong>Mass:</strong> ${location["mass (g)"]} g</p>
<p><strong>Year:</strong> ${location.year}</p>
<p><strong>Class:</strong> ${location.recclass}</p>
<p><strong>Fall Status:</strong> ${location.fall}</p>
<p><strong>Recorded Latitude:</strong> ${lat}</p>
<p><strong>Recorded Longitude:</strong> ${lng}</p>
</div>`; // By doing this I have more control over what I put in the InfoWindow and how to style it
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
markers.push(marker);
});
}
// Function to clear markers for use in drawMarkers()
function clearMarkers() {
markers.forEach(marker => marker.setMap(null));
markers = [];
}