]; // Add more countries up to 200+ as needed... ]; let map = L.map('map').setView([20, 0], 2); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); const markers = []; countries.forEach(country => { const marker = L.marker([country.lat, country.lng]).addTo(map); const flagUrl = `https://flagcdn.com/w40/${country.code}.png`; const time = moment().tz(country.timezone).format("YYYY-MM-DD HH:mm:ss"); marker.bindPopup(`flag ${country.name}
Time: ${time}`); markers.push({ marker, code: country.code, timezone: country.timezone }); }); function updateTimes() { markers.forEach(({ code, timezone }) => { const timeEl = document.getElementById(`${code}-time`); if (timeEl) { timeEl.textContent = moment().tz(timezone).format("YYYY-MM-DD HH:mm:ss"); } }); } setInterval(updateTimes, 1000); function toggleTheme() { document.body.classList.toggle('dark'); } document.getElementById('search').addEventListener('input', function () { const value = this.value.toLowerCase(); markers.forEach(({ marker, code }) => { const country = countries.find(c => c.code === code); if (country.name.toLowerCase().includes(value)) { marker.setOpacity(1); } else { marker.setOpacity(0.2); } }); });