39 lines
1.5 KiB
JavaScript
39 lines
1.5 KiB
JavaScript
|
|
var map;
|
|
var layers;
|
|
var currentLayer = null;
|
|
var owmApiKey = 'ff101be91e4bbe53d6ffbbec1868dfc0';
|
|
|
|
function showLayer(layerName) {
|
|
if (currentLayer) {
|
|
map.removeLayer(currentLayer);
|
|
}
|
|
if (layers[layerName]) {
|
|
currentLayer = layers[layerName];
|
|
currentLayer.addTo(map);
|
|
}
|
|
document.querySelectorAll('.map-btn').forEach(btn => btn.classList.remove('active'));
|
|
document.querySelector(`.map-btn[data-layer="${layerName}"]`)?.classList.add('active');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var mapContainer = document.getElementById('weather-map');
|
|
if (!mapContainer) return;
|
|
|
|
map = L.map('weather-map').setView([35.2271, -80.8431], 8);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(map);
|
|
|
|
layers = {
|
|
temp: L.tileLayer('https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=' + owmApiKey, { opacity: 0.85 }),
|
|
precip: L.tileLayer('https://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=' + owmApiKey, { opacity: 0.85 }),
|
|
clouds: L.tileLayer('https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=' + owmApiKey, { opacity: 0.85 }),
|
|
wind: L.tileLayer('https://tile.openweathermap.org/map/wind_speed/{z}/{x}/{y}.png?appid=' + owmApiKey, { opacity: 0.85 })
|
|
};
|
|
|
|
L.marker([35.2271, -80.8431]).addTo(map).bindPopup('Charlotte, NC').openPopup();
|
|
|
|
showLayer('temp');
|
|
});
|