LeakMap

Inspiration

In many communities, water waste – from leaking pipes, overflowing drains, or contaminated taps – goes unreported for weeks or months. The few reports that do reach authorities are often lost in paperwork or lack the geographic context needed to prioritise action.

We wanted to build a tool that turns silent problems into visible, actionable data – a real‑time, crowd‑sourced water intelligence platform that empowers both citizens and utilities to work together.

What it does

LeakMap is a web‑based, real‑time reporting system for water‑related issues. Anyone can: Report a problem (leak, pollution, dry tap, illegal dumping, overflow, contamination) with a single click on a map or using GPS. Add a photo – compressed on the client side to save bandwidth. See live urgency scores – automatically computed from the severity of the issue plus how many other unresolved reports are nearby. Explore interactive dashboards – including neighbourhood EcoScores, 14‑day trends, resolution rates, and geographic hotspots. Mark issues as resolved – the map updates instantly for all users.Export data as CSV for offline analysis.

How we built it

• Frontend: Vanilla HTML, CSS, JavaScript – no frameworks, for maximum control and zero build step.
• Maps: Leaflet.js with MarkerCluster and leaflet.heat (dark CartoDB tiles for readability).
• Backend & real‑time sync: Firebase Firestore v10 – live onSnapshot listeners, server timestamps, and batch writes for seeding.
• File storage: Firebase Storage – images uploaded with client‑side compression.
• Charts: Chart.js v4 – dynamic, destroy‑and‑recreate pattern for full data freshness.
• Performance: Memoised expensive computations (hotspot clustering, neighbourhood scores), debounced search inputs, and blob URLs for photo previews to save memory. ## Challenges we ran into

Accomplishments that we're proud of

• A fully functional, real‑time water reporting system built in three weeks, with no backend code other than Firebase security rules.
• Urgency scoring that automatically highlights chronic hotspots (severity × nearby unresolved reports).
• EcoScore – a transparent, neighbourhood‑level metric (0–100) combining open reports, hotspots, resolution time, and recent resolved issues.
• Responsive mobile interface with bottom navigation and panel sliding – works on any smartphone.
• Single‑file deployment – judges can inspect, clone, and run the entire app in one HTML file.

What we learned

• Real‑time data sync is harder than it looks – managing local state while respecting server timestamps and offline edges requires careful design.
• O(n²) algorithms feel fine at 20 records, but they murder performance at 200. Profiling early and memoising hot paths saved the project.
• Security starts at the client, but it can’t end there. We now escape every dynamic value and avoid inline JavaScript execution.
• Firestore batch writes are magical – seeding 30 documents in one atomic operation is 30× faster than sequential addDoc calls.
• A good dashboard tells a story – charts, counts, and live maps need to work together, not just exist. ## What's next for LeakMap
• Push notifications – alert residents when their reported issue is marked resolved.
• User roles – citizen vs municipal officer, with verification of resolutions (e.g., photo evidence of fix).
• Integration with existing municipal systems – webhooks or Zapier to push high‑urgency hotspots to CRMs.
• Offline‑first PWA – cache reports in IndexedDB and sync when back online.
• More granular water savings estimation – use pipe diameter and leak duration for better calculations.
• Deploy as a public pilot in two municipalities to gather real usage data and iterate.

Built With

• batch-writes.-chart.js-v4-?-dynamic-dashboards-(doughnut
• chart.js
• css3
• custom-markers
• file-storage-(storage)
• filereader
• firebase
• google
• gps
• html5
• javascript
• leaflet.js
• line
• no-frameworks.-leaflet.js-?-interactive-maps
• server-timestamps
• tile-layers.-leaflet.markercluster-?-efficient-marker-clustering-for-hundreds-of-points.-leaflet.heat-?-density-heatmap-overlay.-firebase-v10-(modular-sdk)-?-real?time-firestore-database