The Agri-Tech Builder

Coding smart solutions for off-grid farming

Project Log: Building a Real-Time Crop Disease Outbreak Map

Published: May 17, 2026

When a farmer scans a diseased plant, that data is valuable for treating the specific crop. But when you aggregate hundreds of those scans across a region, that data becomes a vital early-warning system for the entire agricultural community. Today, I am documenting how I built an interactive outbreak map for the Uni-Farm app to track the spread of crop diseases.

The Tech Stack: Lightweight and Open-Source

Heavy mapping libraries can drain mobile data and slow down rural internet connections. Instead of relying on bloated commercial SDKs, I chose Leaflet.js paired with OpenStreetMap tiles. It is incredibly lightweight, mobile-friendly, and perfect for initializing local community views, like my default center over the Davao region.

The Cloud-to-Local Performance Hack

One of the biggest challenges with interactive maps is database costs. If the app queries the cloud database every time a user filters the map, the server bills will skyrocket. To solve this, I built a "Fetch Once, Filter Locally" architecture:

// Fetches data ONCE, stores it, and triggers the first render
const { data: log, error } = await supabaseClient.from('field_logs').select('*');

// Save to local memory for instant slider filtering
this.allScans = log;

By caching the field_logs into a local array, I was able to build a custom HTML range slider that filters the pins by date. Because the slider is reading local memory rather than polling the cloud, it responds instantly without lag, even on older mobile devices.

Visualizing the Spread with Dynamic Opacity

An outbreak map isn't very useful if a 30-day-old scan looks identical to a scan from this morning. To help farmers visualize the active edge of a disease spread, I wrote a rendering function that dynamically lowers the opacity of a map marker as it ages:

This allows the community to literally watch a disease cluster move across the map over time, giving them the warning they need to apply preventative treatments to their own fields.