+
+**[Sky Swachh Citizen App Repository](https://github.com/aniksha23/Sky-Swachh---Citizen-App)**
+
+CitizenApp gamifies civic engagement in Bengaluru by empowering residents to take action against illegal waste dumping. The app acts as the primary data collection tool for the Sky Swachh ecosystem, seamlessly feeding citizen reports directly into the main map dashboard.
+
+**Core App Features:**
+- **📍 Smart Location Tracking**: Snap photos of illegal dump sites with automatic GPS tagging and time-stamps for precise location mapping.
+- **⚡ AI Verification**: Integrated AI-powered machine learning verifies waste presence in seconds before the report is logged.
+- **🎮 Gamification System**: Verified reports earn 50 points, unlocking ranks and badges to encourage continuous community participation.
+- **🏆 Leaderboards**: Compete on local leaderboards, become an Environmental Hero, and make cities cleaner together.
+- **🚨 Instant Alerts**: Automatically notifies cleanup authorities and syncs with the main municipal dashboard for prompt action.
+
+
+ 
+
+ `, { maxWidth: 250 });
marker.bindTooltip(`${site.ward}${site.ward || "Dump Site"}
+${site.description || "No description"}
+
+ ${site.severity?.toUpperCase?.() || "MEDIUM"}
+ ${site.status?.toUpperCase?.() || "DETECTED"}
+
+ ${site.description}`); marker.on('click', (e) => { L.DomEvent.stopPropagation(e); + marker.openPopup(); setSelectedSite(site); }); }); @@ -319,23 +403,7 @@ export function MapDashboard() { }); } - // CCTV Layer - if (layers.cctv) { - const CCTV_MOCK = [ - { id: 'c1', lat: 12.9780, lng: 77.5910, label: 'MG Road Junction' }, - { id: 'c2', lat: 12.9350, lng: 77.6144, label: 'Koramangala 8th Block' }, - ]; - CCTV_MOCK.forEach(c => { - L.marker([c.lat, c.lng], { - icon: L.divIcon({ - className: 'cctv-icon', - html: `
📹
`,
- iconSize: [16, 16],
- iconAnchor: [8, 8]
- })
- }).addTo(mapInstance.current!).bindPopup(c.label);
- });
- }
+ // CCTV Layer removed
// Active Route
if (activeRoute && activeRoute.geometry) {
@@ -369,6 +437,75 @@ export function MapDashboard() {
}).addTo(mapInstance.current!).bindPopup(`Destination: ${destPoint.display_name}`);
}
+ // Ward Boundaries
+ const WARD_COLORS: Record${f.properties.dumps} dump sites`, + { sticky: true } + ); + }); + + // Zoom to selected ward + if (selectedWard) { + const match = wardBoundaries.features.find((f: any) => f.properties.name === selectedWard); + if (match) { + mapInstance.current!.fitBounds(L.geoJSON(match).getBounds(), { padding: [40, 40] }); + } + } + } + + // Citizen Reports from Firestore + if (Array.isArray(citizenReports)) { + citizenReports.forEach((r: any) => { + const statusStyle = getReportStatusStyle(r.status); + const normalizedStatus = (r.status || "pending").toLowerCase(); + const photoThumb = r.photo + ? `` + : `
📍
`;
+ const icon = L.divIcon({
+ className: '',
+ html: `${photoThumb}
`,
+ iconSize: [48, 48],
+ iconAnchor: [24, 24],
+ });
+ const photoHtml = r.photo
+ ? `No photo
`; + L.marker([r.lat, r.lng], { icon }) + .addTo(mapInstance.current!) + .bindPopup(` +
+
+ `, { maxWidth: 240 });
+ });
+ }
+
// Report Marker
if (reportClick && reportMode && !reportSubmitted) {
L.marker([reportClick.y, reportClick.x], {
@@ -380,7 +517,7 @@ export function MapDashboard() {
}).addTo(mapInstance.current!);
}
- }, [liveDumps, liveTrucks, dumpPolygons, wasteProcessingUnits, dryWasteCentres, layers, activeRoute, sourcePoint, destPoint, reportClick, reportMode, reportSubmitted]);
+ }, [liveDumps, liveTrucks, dumpPolygons, wasteProcessingUnits, dryWasteCentres, wardBoundaries, selectedWard, citizenReports, layers, activeRoute, sourcePoint, destPoint, reportClick, reportMode, reportSubmitted]);
// --- Handlers ---
const handleMapClickInternal = (e: L.LeafletMouseEvent) => {
@@ -623,8 +760,7 @@ export function MapDashboard() {
Citizen Report
+${r.ward || 'Unknown ward'} • ${r.waste_type || 'Unknown'}
+ ${formatReportStatus(r.status)} + ${photoHtml} + ${r.description ? `${r.description}
` : ''} +MAP LAYERS
{[
- { key: "zones" as const, label: "BBMP Boundaries", icon:
@@ -694,6 +835,19 @@ export function MapDashboard() {
Bengaluru Waste Monitor
+
+
+
+
+
+
+