EcoMap

Inspiration

We wanted to make environmental education interactive and accessible. Many people want to help the planet but don’t know where to start or how local issues connect to global sustainability. We were inspired by the idea that understanding the environment is the first step toward protecting it, so we built a tool that makes learning about environmental challenges engaging, conversational, and even gamified.

What it does

EcoMap is an interactive web application that combines Leaflet, React with Next.js, Gemini AI, and ElevenLabs voice chat to bring environmental awareness to life.

Users can explore any area of the world on a dynamic map and view overlays showing deforestation, air quality, and other sustainability data.
They can chat with Gemini about local environmental issues — or talk via voice with ElevenLabs for a more immersive experience.
Users can experiment with simulations like adding trees, solar panels, parks, and permeable pavements to see how these choices affect the ecosystem.
In Challenge Mode, EcoMap picks a random region facing environmental issues. Gemini explains the problems, and the user must apply sustainable solutions. Afterward, they receive an EcoScore, feedback, and the option to retry or learn more.

How we built it

We built EcoMap using:

Next.js and React for the front-end interface and dynamic rendering.
Leaflet.js for the interactive world map and overlays.
Gemini API to power the conversational environmental assistant.
ElevenLabs API for natural, real-time voice interactions.
GeoJSON and open environmental datasets to generate overlays for deforestation and air quality visualization. ## Challenges we ran into
Integrating real-time AI voice chat with map interactivity required careful state management.
Rendering environmental overlays without performance drops was tricky with large datasets.
Getting Gemini to respond contextually about specific map areas took prompt engineering and geolocation handling.
Designing Challenge Mode so it felt both educational and game-like without oversimplifying real environmental issues.

Accomplishments that we're proud of

-Seamlessly combining AI chat, real-time voice interaction, and environmental data visualization in one platform. -Creating a fun, educational experience that helps users understand how local actions impact global sustainability. -Building a fully functional Challenge Mode that personalizes environmental learning.

What we learned

-How to integrate multiple AI models and APIs in a single, responsive app. -The importance of user experience when teaching complex topics like sustainability. -That environmental engagement increases when people can visualize and experiment with solutions. -How collaborative coding and creative design can make technical tools meaningful.

What's next for EcoMap

EcoMap has laid the foundation for an interactive, educational environmental platform, but there is much more room to grow.

User Accounts and Progress Tracking: Currently, EcoMap does not have a user system. In the future, we plan to allow users to create profiles, save their challenges, track their EcoScores over time, and build personal sustainability streaks.
Daily Global Puzzles: Each day, EcoMap could feature a new real-world environmental scenario, such as droughts, deforestation, or urban pollution. Players could propose solutions, see their simulated outcomes, and compare results with others around the world.
Leaderboards and Achievements: Adding leaderboards for EcoScores and regional challenges would create friendly competition. Users could earn achievements for creativity, effectiveness, or collaboration, encouraging deeper engagement with environmental topics.
Environmental Trivia and Learning Quests: EcoMap could include short quizzes, trivia rounds, and guided learning paths to reinforce environmental knowledge and make education more interactive.
Community Forum and Map Discussions: A discussion feature would allow users to comment on or discuss specific map regions, share solutions, and explore real-world case studies together. This would turn EcoMap into a global community for environmental learning and collaboration.
Expanded Environmental Datasets: We plan to integrate additional data sources for water quality, biodiversity, soil health, and urban heat islands to enhance realism and educational value.
Educational Partnerships: We hope to collaborate with schools and environmental organizations to introduce EcoMap as a classroom or outreach tool that combines science, geography, and sustainability in a hands-on way.