Wheat Disease Detection Heatmap

A full-stack application for visualizing wheat disease detection data using Leaflet heatmaps. Integrates React frontend, Node.js backend, and Python ML data generation.

Project Structure

heatmap/
├── backend/          # Node.js/Express API server
│   ├── data/         # Heatmap data (generated by Python script)
│   ├── routes/       # API routes
│   └── test/         # Unit tests
├── frontend/         # React application
│   └── src/
│       └── components/
└── ml/               # Python ML data generation
    └── generate_sample_dataset.py

Quick Start

1. Generate Sample Data

First, generate the sample dataset:

python ml/generate_sample_dataset.py

This creates backend/data/heatmap_points.json with ~200 sample detection points across India.

2. Start Backend

cd backend
npm install
npm start

Backend runs on http://localhost:5000 (or PORT env variable).

Verify backend:

curl http://localhost:5000/api/health
curl http://localhost:5000/api/heatmap | jq '.features | length'

3. Start Frontend

In a new terminal:

cd frontend
npm install
npm start

Frontend opens at http://localhost:3000 in your browser.

What You Should See

1. Map of India with OpenStreetMap tiles
2. Heatmap overlay showing disease intensity (red = high, blue = low)
3. Controls panel (top-right) to toggle heatmap and point markers
4. Legend showing color intensity scale
5. Point markers (when enabled) showing individual detections with disease probability tooltips

API Endpoints

GET /api/health

Health check endpoint.

Example:

curl http://localhost:5000/api/health

Response:

{
  "status": "ok",
  "timestamp": "2024-01-01T00:00:00.000Z"
}

GET /api/heatmap

Returns GeoJSON FeatureCollection with wheat disease detection data.

Example:

curl http://localhost:5000/api/heatmap | jq '.features[0]'

Response:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [lng, lat]
      },
      "properties": {
        "intensity": 0.0-1.0,
        "disease_prob": 0.0-1.0,
        "timestamp": "ISO8601",
        "source": "simulated" | "ml"
      }
    }
  ]
}

Data Format

The backend expects backend/data/heatmap_points.json to be a GeoJSON FeatureCollection:

• type: "FeatureCollection"
• features: Array of Feature objects
  • geometry: Point with [lng, lat] coordinates
  • properties:
    • intensity: 0.0-1.0 (used for heatmap visualization)
    • disease_prob: 0.0-1.0 (ML model probability)
    • timestamp: ISO8601 timestamp
    • source: "simulated" or "ml"

Integration with ML Team

For ML team integration:

1. Replace ml/generate_sample_dataset.py with your actual ML inference pipeline
2. Output data in the same GeoJSON FeatureCollection format
3. Save to backend/data/heatmap_points.json
4. The backend will automatically serve the updated data

Example ML output format:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [lng, lat]},
            "properties": {
                "intensity": 0.85,
                "disease_prob": 0.87,
                "timestamp": "2024-01-01T12:00:00Z",
                "source": "ml"
            }
        }
    ]
}

Testing

Backend Tests

cd backend
npm test

Manual API Testing

# Health check
curl http://localhost:5000/api/health

# Get heatmap data
curl http://localhost:5000/api/heatmap | jq '.features | length'

# Check first feature
curl http://localhost:5000/api/heatmap | jq '.features[0]'

Environment Variables

Backend

• PORT: Server port (default: 5000)

Frontend

• REACT_APP_API_URL: Backend API URL (default: http://localhost:5000)

Technology Stack

• Frontend: React, react-leaflet, Leaflet, leaflet.heat
• Backend: Node.js, Express, CORS
• Data Generation: Python 3
• Map Tiles: OpenStreetMap (free)

Production Considerations

Current Limitations

• No database (reads from JSON file)
• No authentication/authorization
• No rate limiting
• No caching
• All data loaded at once (not suitable for very large datasets)

Recommended Improvements

1. Database: Use PostgreSQL/PostGIS or MongoDB for storing detection data
2. Vector Tiles: Serve data as vector tiles for better performance with large datasets
3. Caching: Add Redis caching for frequently accessed data
4. Rate Limiting: Implement rate limiting (e.g., express-rate-limit)
5. Authentication: Add JWT or OAuth for API access
6. Real-time Updates: Use WebSockets for live data updates
7. Map Alternatives: Consider Mapbox for production (better performance, but requires API key)

Troubleshooting

Backend won't start

• Check if port 5000 is already in use
• Verify backend/data/heatmap_points.json exists (run Python script first)
• Check Node.js version (requires Node 14+)

Frontend can't connect to backend

• Verify backend is running on port 5000
• Check CORS settings in backend
• Verify REACT_APP_API_URL environment variable

No heatmap visible

• Check browser console for errors
• Verify data file has valid GeoJSON
• Ensure leaflet.heat is properly installed
• Check that showHeatmap toggle is enabled

Map not loading

• Check internet connection (needs OpenStreetMap tiles)
• Verify Leaflet CSS is loaded
• Check browser console for tile loading errors

License

ISC

Contributing

This is a prototype/minimal implementation. For production use, consider the improvements listed above.