990

Live Visitors Map

[{"lat":37.7749000000000023646862246096134185791015625,"lng":-122.419399999999995998223312199115753173828125},{"lat":51.50739999999999696456143283285200595855712890625,"lng":-0.1277999999999999969357844520345679484307765960693359375},{"lat":13.0827000000000008839151632855646312236785888671875,"lng":80.270700000000005047695594839751720428466796875},{"lat":-33.86880000000000023874235921539366245269775390625,"lng":151.209300000000013142198440618813037872314453125},{"lat":40.7128000000000014324541552923619747161865234375,"lng":-74.006000000000000227373675443232059478759765625}] // Initialize the map const map = L.map('map').setView([20, 0], 2); // Default view (centered globally) // Add OpenStreetMap tiles L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, }).addTo(map); // Function to load visitor data function loadVisitorData() { fetch('/api/get-visitors.php') // Fetch visitor data from the PHP API .then(response => response.json()) .then(data => { data.forEach(visitor => { L.marker([visitor.lat, visitor.lng]).addTo(map) .bindPopup(`Visitor at Lat: ${visitor.lat}, Lng: ${visitor.lng}`) .openPopup(); }); }) .catch(error => console.error('Error fetching visitor data:', error)); } // Initial load loadVisitorData(); // Refresh every 30 seconds for real-time updates setInterval(loadVisitorData, 30000);