var marker = L.marker([point.latitude, point.longitude], { icon: L.divIcon({ className: 'custom-icon', html: '
' }) }).bindPopup('' + point.name + '
' + point.action + '
' + point.fdate + '
' + point.area + '
' + point.user).addTo(drawnItems); marker.on('click', function(e) { markerToEdit = e.target; document.getElementById('fname').value = point.name; document.getElementById('sector').value = point.sector; document.getElementById('action').value = point.action; document.getElementById('fdate').value = point.fdate; document.getElementById('area').value = point.area; document.getElementById('user').value = point.user; document.getElementById('address').value = point.address; }); }); showMessage('Data loaded successfully.', 'success'); } else if (this.readyState == 4) { showMessage('Error loading data.', 'error'); } }; xhttp.open('GET', 'loadData.php', true); xhttp.send(); } function showMessage(message, type) { var messageDiv = document.getElementById('message'); messageDiv.innerHTML = message; if (type === 'success') { messageDiv.style.color = 'green'; } else if (type === 'error') { messageDiv.style.color = 'red'; } setTimeout(function() { messageDiv.innerHTML = ''; }, 3000); } function clearForm() { document.getElementById('fname').value = ''; document.getElementById('sector').value = ''; document.getElementById('action').value = ''; document.getElementById('fdate').value = ''; document.getElementById('area').value = ''; document.getElementById('user').value = ''; document.getElementById('address').value = ''; }