EcoCarto

Mapping Nature's Urgency. A powerful tool that visualizes air quality and vegetation data to identify, recommend, and track ecological interventions making environmental planning smarter and greener.

Comment

Inspiration

EcoCarto was born out of a simple but urgent question: How can we make ecological awareness accessible and actionable for everyone?
Living in a time of rising pollution, shrinking green cover, and unpredictable climate patterns, I wanted to build something that helps individuals, planners, and communities make informed environmental decisions. The lack of visual tools that combine real-time ecological data with historical context led to the creation of EcoCarto Developed by Kavya Trivedi.

What it does

EcoCarto is an interactive web-based Environmental Health Map that displays the ecological status of any location using air quality (AQI) and vegetation index (NDVI) data.
Key features include:

  • Location-based Eco Score (based on AQI, vegetation, humidity, and temperature)
  • Historical environmental data viewer
  • Color-coded ecological risk zones (Green / Moderate / High Risk)
  • Smart Plantation Suggestions to improve degraded areas
  • Downloadable Environmental Reports

How we built it

  • Frontend:
    Built with React and Next.js, ensuring a modular and high-performance UI. Tailwind CSS was used for a clean and responsive design across devices.

  • Maps & Visualizations:
    We used Leaflet.js for interactive map rendering, layering environmental zones, and customizing overlays for AQI, NDVI, and risk levels.
    The Google Maps Platform APIs played a crucial role in:

    • Geocoding and address search (via Maps JavaScript API & Geocoding API)
    • Place information display (via Places API)

  • Environmental Data Sources:

    • AQI (Air Quality Index): Pulled from OpenAQ API
    • NDVI (Vegetation Health): Integrated from open-source satellite data providers
    • Weather Data: Temperature & humidity sourced using APIs like Open-Meteo

  • Eco Score Algorithm:
    Combined air quality, vegetation, temperature, and humidity into a unified “Eco Score” (graded A–F) for intuitive environmental insight.

  • Features Implemented:

    • Live location search with geolocation suggestions
    • Interactive heatmap and zone classification (Green, Moderate, High-Risk)
    • Historical data slider to view environmental trends over time
    • Plantation suggestions based on region's health
    • Downloadable report generation (PDF) for ecological planning

  • Deployment:
    Deployed on Vercel for fast global delivery and CI/CD integration.

Challenges we ran into

  • Data Integration & Accuracy:
    Aggregating and aligning environmental data (AQI, NDVI, humidity, temperature) from different APIs and sources like OpenAQ and satellite indices was challenging due to differing formats, units, and coordinates.

  • Map Layer Synchronization:
    Implementing multiple overlays (AQI zones, NDVI highlights) on top of the Leaflet map while maintaining smooth interactivity and performance required extensive optimization.

  • Historical Data Representation:
    Displaying accurate historical data in a user-friendly way while supporting time-based filtering and zone classification involved both design and backend logic hurdles.

  • Responsive Design & UX:
    Ensuring a clean and responsive UI across devices with dynamic map and panel components took several iterations, especially when integrating Leaflet with React and Tailwind.

  • Eco Score Calculation Logic:
    Defining a meaningful, simplified Eco Score that merges real-time environmental factors into one intuitive grade (A–F) demanded thoughtful weight balancing and testing.

  • Performance Optimization:
    Large datasets and visual layers sometimes slowed rendering. We had to lazy load data and components, debounce search actions, and cache geolocation queries to ensure fluid UX.

Accomplishments that we're proud of

  • Developed a Fully Functional Platform in Under 48 Hours:
    We turned an idea into a complete, responsive, and interactive environmental health mapping web app within the hackathon time limit.

  • Combined Real-World Data Sources:
    Successfully integrated live AQI (Air Quality Index) and NDVI (vegetation health) data to generate real-time ecological insights.

  • Designed an Intuitive "Eco Score" System:
    Created a simple yet effective color-coded and letter-grade based system to represent complex environmental conditions.

  • Enabled Historical Environmental Analysis:
    Implemented a year-based slider that allows users to explore changes in air quality and greenery from 2015 to 2024.

  • Planted the Seeds for Actionable Change:
    Provided specific, data-driven plantation recommendations that can help city planners and activists prioritize green initiatives.

  • Report Generation Feature:
    Added downloadable reports to enable users to export eco insights for offline planning and decision-making.

  • Global Accessibility with Free/Open Tools:
    Leveraged Leaflet.js and OpenStreetMap to keep the platform open and accessible to everyone without API billing barriers.

  • Solved API Limitations Creatively:
    Overcame challenges like Google Maps quota restrictions and API costs by integrating alternative open APIs like OpenAQ and Nominatim.

What we learned

  • Real-World Environmental Data Handling:
    We learned how to fetch, clean, and merge real-time environmental data (AQI & NDVI) to create meaningful insights for ecological health.

  • Using Open-Source Mapping Tools Effectively:
    We explored the power of Leaflet.js and OpenStreetMap as free and flexible alternatives to Google Maps Platform for scalable map-based apps.

  • Combining Multiple APIs and Data Layers:
    It was challenging but insightful to coordinate and integrate data from different APIs (AQICN, OpenAQ, Earth Engine exports) into a unified format.

  • Simplifying Complex Environmental Metrics:
    We developed new strategies to make environmental data more digestible through a 3-color zone system and a calculated "Eco Score."

  • Rapid Prototyping & Iteration:
    Building under tight time constraints taught us to prioritize key features, iterate fast, and focus on MVP delivery.

  • Designing for Social and Environmental Impact:
    We realized the power of tech to support sustainable development goals — especially in urban ecology and public planning.

  • Performance Optimization in Mapping Apps:
    We picked up techniques like lazy loading, debounced searches, and memoization to ensure our platform ran smoothly despite data-heavy components.

What's next for EcoCarto

  1. Server Components: Convert to Next.js Server Components for improved performance
  2. API Routes: Create backend API routes for data processing
  3. Database Integration: Add database for saving user locations and reports
  4. Machine Learning: Implement predictive models for environmental forecasting
  5. PWA Features: Add offline capabilities and mobile optimization

Built With

Share this project:

Updates