Overview
Farmers Truck Map is a React application that helps users locate farmers markets and mobile food trucks on an interactive Google Map. A key feature is the food desert overlay, which visualizes USDA Food Access Research Atlas data to highlight areas with limited access to affordable and nutritious food. The overlay renders census tract polygons directly on the map, allowing operators to identify underserved communities and strategically plan their market stops.
Tech
The map is built with the Google Maps JavaScript API and uses a custom hook architecture to separate concerns. Food desert data is fetched as GeoJSON from a Supabase edge function and rendered on the map's Data layer. A multi-level caching strategy using in-memory state and IndexedDB with a 7-day TTL keeps the experience fast after the initial load. State boundaries are pre-loaded from OpenStreetMap's Nominatim API in batches to respect rate limits.
Map Overlay
The overlay system uses four USDA LILA (Low Income Low Access) measures that users can toggle independently: vehicle access, half-mile/10-mile, 1-mile/10-mile, and 1-mile/20-mile thresholds. When a user pans the map, the app detects the current state via reverse geocoding and dynamically loads the corresponding GeoJSON data. Census tracts matching the enabled filters are drawn as amber polygons on the map. Race conditions and redundant network requests are handled through refs and loading state tracking, while a blue state border outline provides visual feedback during data loads.
