125 lines
5.8 KiB
PHP
125 lines
5.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Distribution Map - Food Rescue</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Poppins', sans-serif; background-color: #f8f9fa; }
|
|
.navbar { box-shadow: 0 2px 4px rgba(0,0,0,.1); }
|
|
#map { height: 600px; border-radius: 0.5rem; box-shadow: 0 4px 8px rgba(0,0,0,.1); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="index.php" style="font-weight: 600;">Food Rescue</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item"><a class="nav-link" href="index.php">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="add_listing.php">Add Listing</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="ngo_dashboard.php">NGO Dashboard</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="volunteer_signup.php">Volunteer Signup</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="volunteer_dashboard.php">Volunteer Dashboard</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="volunteer_hub_old.php">Find Pickups</a></li>
|
|
<li class="nav-item"><a class="nav-link active" href="distribution_map.php">Distribution Map</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="admin_panel.php">Admin Panel</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container my-5">
|
|
<div class="text-center mb-4">
|
|
<h1 class="h2">Food Distribution Points</h1>
|
|
<p class="lead text-muted">Find locations where food is being distributed.</p>
|
|
</div>
|
|
<div id="map"></div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Initialize the map, centered on a default location (e.g., New York City)
|
|
const map = L.map('map').setView([40.7128, -74.0060], 12);
|
|
|
|
// Add the OpenStreetMap tile layer
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
// Fetch location data from the API
|
|
fetch('api/locations.php')
|
|
.then(response => response.json())
|
|
.then(locations => {
|
|
if (locations.length === 0) {
|
|
// Optional: Handle case with no locations
|
|
console.log('No distribution points found.');
|
|
return;
|
|
}
|
|
|
|
const markers = [];
|
|
locations.forEach(loc => {
|
|
const lat = parseFloat(loc.latitude);
|
|
const lon = parseFloat(loc.longitude);
|
|
|
|
// Define marker color based on status
|
|
const markerColor = loc.status === 'assigned' ? 'orange' : 'green';
|
|
const icon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: `<div style="background-color:${markerColor};" class="marker-pin"></div><i></i>`,
|
|
iconSize: [30, 42],
|
|
iconAnchor: [15, 42]
|
|
});
|
|
|
|
const marker = L.marker([lat, lon], { icon: icon });
|
|
|
|
let popupContent = `<b>${loc.name}</b><br>Quantity: ${loc.quantity}<br>Status: ${loc.status}`;
|
|
marker.bindPopup(popupContent);
|
|
|
|
markers.push(marker);
|
|
});
|
|
|
|
// Add markers to the map
|
|
const featureGroup = L.featureGroup(markers).addTo(map);
|
|
|
|
// Fit map to show all markers
|
|
if (markers.length > 0) {
|
|
map.fitBounds(featureGroup.getBounds().pad(0.1));
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching locations:', error));
|
|
});
|
|
</script>
|
|
<style>
|
|
.marker-pin {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50% 50% 50% 0;
|
|
background: #007bff;
|
|
position: absolute;
|
|
transform: rotate(-45deg);
|
|
left: 50%;
|
|
top: 50%;
|
|
margin: -15px 0 0 -15px;
|
|
}
|
|
.marker-pin::after {
|
|
content: '';
|
|
width: 14px;
|
|
height: 14px;
|
|
margin: 8px 0 0 8px;
|
|
background: #fff;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|