' +
pm25Value +
"
",
}),
})
.addTo(map)
.bindPopup(
"" +
siteName +
"PM2.5 Value: " + pm25Value + "
AQI Category: " + aqiCategory ); } var AQI_INDEX_COLORS = { good: "green", moderate: "yellow", u4sg: "orange", unhealthy: "red", very_unhealthy: "purple", hazardous: "maroon", }; function addLegend() { var legend = L.control({ position: "bottomleft" }); legend.onAdd = function (map) { var div = L.DomUtil.create("div", "legend"); div.innerHTML = '
AQI Index
' +
'' +
"
";
return div;
};
legend.addTo(map);
}
$("#search-button").click(function () {
var searchQuery = $("#search-input").val().toLowerCase();
var matchingResults = apiResponse.measurements.filter(function (
measurement
) {
return measurement.siteDetails.description
.toLowerCase()
.includes(searchQuery);
});
displaySearchResults(matchingResults);
});
function displaySearchResults(results) {
var resultsContainer = $("#search-results");
resultsContainer.empty(); // Clear previous results
if (results.length === 0) {
// No results found
resultsContainer.append(
'- " +
'
- Good ' + '
- Moderate ' + '
- Unhealthy for Sensitive Groups ' + '
- Unhealthy ' + '
- Very Unhealthy ' + '
- Hazardous ' + "
No results found.
'
);
resultsContainer.append(
''
);
$(".close-results").click(function () {
resultsContainer.hide(); // Hide the results pane
});
} else {
// Display search results
results.forEach(function (result) {
var resultElement = $('');
resultElement.text(result.siteDetails.description);
resultElement.click(function () {
zoomToLocation(
result.siteDetails.approximate_latitude,
result.siteDetails.approximate_longitude
);
resultsContainer.hide(); // Hide the search results overlay
});
resultsContainer.append(resultElement);
});
}
resultsContainer.show(); // Show the search results overlay
}
function zoomToLocation(lat, lon) {
map.setView([lat, lon], 14);
}
// Initially hide the search results container
$("#search-results").hide();
// Show the search results container when the search button is clicked
$("#search-button").click(function () {
$("#search-results").show();
});
// Hide the search results container when a search result is clicked
$(document).on("click", ".search-result", function () {
$("#search-results").hide();
});