MyTreeMap is an open-source platform that maps, monitors, and celebrates India's urban forests. The project aims to create awareness about the importance of trees in our cities and provide valuable data for urban forest management and conservation efforts.
MyTreeMap serves as an educational and environmental platform focused on raising awareness about urban forests in India. It visualizes tree data, provides environmental impact insights, and encourages community engagement with urban forestry initiatives.
- Environmental Activists: Individuals working on urban forest conservation
- Urban Planners & Municipal Bodies: Officials making decisions about urban green spaces
- Educational Institutions: Schools and universities teaching about environmental science
- General Public: Citizens interested in their city's green infrastructure
- Interactive Map: Explore urban tree coverage across major Indian cities
- City Statistics Dashboard: Data visualization of environmental impact metrics
- AI Tree Identifier: Claude-powered tool for identifying tree species from photos
- Audio Guides: ElevenLabs-powered narrations about urban forests in each city
- Community Contributions: Supabase-powered platform for sharing tree planting stories
- Embeddable Widgets: Tools for sharing tree data on external websites
- Explore tree distribution and environmental impact data for their city
- Identify trees using the AI-powered tree identification tool
- Share their tree planting and conservation stories
- Embed interactive widgets on their own websites
- Learn about urban forestry research and government initiatives
- Claude AI (Anthropic): Powers the tree species identification feature
- Supabase: Manages user contributions and community engagement data
- ElevenLabs: Provides text-to-speech narration for city tree tours
- Sentry: Monitors application performance and tracks errors
| City | 🌳 Trees | 🌿 CO₂ Sequestration | 💨 AQI Improvement |
|---|---|---|---|
| Delhi | 2.38M | 18,000 tons/yr | 15-20 points |
| Mumbai | 1.2M | 12,500 tons/yr | 10-15 points |
| Bangalore | 1.8M | 8,000 tons/yr | 8-12 points |
- Green India Mission: ₹944 Cr allocated
- Nagar Van Yojana: 546 urban forests approved
- Ek Ped Maa Ke Naam: 135 crore trees target
- Delhi: Tree Transplantation Policy
- Maharashtra: Mangrove Cell
- Karnataka: Urban Forestry Project
- 🗺️ Interactive Tree Map: Explore tree locations across major Indian cities
- 📈 City Statistics: View detailed tree statistics for each city
- 🌤️ Air Quality Data: Real-time AQI data and its correlation with tree cover
- 🤖 AI Tree Identification: Identify tree species from photos using Claude AI
- 🔊 Audio Tours: Listen to narrated guides about each city's urban forest
- 👥 Community Stories: Share and view tree planting initiatives from citizens
- 📱 Embeddable Widgets: Free widgets to share tree data on your website
- 🌿 Environmental Impact: Visualize the benefits of urban trees on air quality and climate
- 📚 Research Integration: Access to research papers and methodologies
The platform currently includes data for the following cities:
- 🏙️ Delhi
- 🏙️ Mumbai
- 🏙️ Bangalore
- 🏙️ Chennai
- 🏙️ Kolkata
- 🏙️ Hyderabad
- 🏙️ Ahmedabad
- 🏙️ Pune
More cities are being added regularly
- 🎨 shadcn/ui components
- 📊 Recharts for data visualization
- 🔍 Lucide Icons for beautiful iconography
- 🔄 TanStack Query for efficient data fetching
- 🤖 Claude AI for tree species identification
- 🔊 ElevenLabs for audio tour narration
- 🚨 Sentry for error tracking and monitoring
- Clone the repository:
git clone https://github.com/liveupx/MyTreeMap.git
cd MyTreeMap- Install dependencies:
npm install- Create a
.envfile in the root directory with:
VITE_MAPBOX_TOKEN=pk.YOUR_OWN_TOKEN_KEY
- Start the development server:
npm run dev- Open http://localhost:3000 in your browser
src/
├── components/ # UI components
│ ├── ui/ # shadcn/ui components
│ ├── MapBox.tsx # Map rendering component
│ ├── TreeIdentifier.tsx # Claude AI tree identification
│ ├── AudioGuide.tsx # ElevenLabs audio narration
│ ├── StatsPanel.tsx # City statistics visualizations
│ └── ... # Other components
├── pages/ # Application pages
│ ├── Index.tsx # Homepage
│ ├── About.tsx # About page
│ └── ... # Other pages
├── hooks/ # Custom React hooks
├── lib/ # Utilities and helper functions
├── App.tsx # Main application component
└── main.tsx # Application entry point with Sentry
MyTreeMap provides free embeddable widgets that can be added to any website:
- Visit https://preview--treecity-explorer.lovable.app/widgets
- Choose a widget type (Tree Count, AQI, or Statistics)
- Customize the widget
- Copy the embed code and paste it into your website
Example embed code:
<iframe
src="https://preview--treecity-explorer.lovable.app/embed?city=Delhi&type=treeCount&theme=light"
width="300"
height="200"
frameborder="0"
title="MyTreeMap - Delhi tree count widget"
></iframe>We welcome contributions from developers, data scientists, urban planners, and tree enthusiasts!
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
For major changes, please open an issue first to discuss what you would like to change.
MyTreeMap uses data from various sources, including:
- 🏙️ Municipal corporation tree censuses
- 🛰️ Satellite imagery analysis
- 👥 Community reporting
- 🔬 Scientific research studies
For more information about our data methodology, visit https://preview--treecity-explorer.lovable.app/methodology
The MyTreeMap application integrates several advanced technologies:
The TreeIdentifier component demonstrates Claude integration by:
- Simulating an AI-powered tree species identification feature
- Processing uploaded images and returning structured tree data
- Providing confidence scores and environmental benefits information
The project uses Supabase for data storage and user contributions:
- The
supabase-client.tsfile initializes the Supabase client with demo credentials - Community contributions are stored and retrieved from Supabase tables
- File storage is simulated for tree images
- Fallback to mock data when in demo mode ensures the UI remains functional
Error tracking and monitoring with Sentry:
- Initialized in
main.tsxwith proper DSN configuration - React Router instrumentation configured in
App.tsxfor route-based error tracking - Error boundaries wrap the application to provide graceful failure handling
- Custom error capture for API failures with proper context
Audio narration capabilities:
- The AudioGuide component uses ElevenLabs for text-to-speech narration
- Uses ElevenLabs voices for natural-sounding city tour guides
- Provides fallback audio content for demo mode
The entire application is built using Lovable:
- React and TypeScript for robust frontend development
- Tailwind CSS for responsive design
- shadcn/ui components for consistent UI patterns
- Modular component architecture for maintainability
- Responsive design principles throughout the application
This architecture ensures the application demonstrates all required integrations while maintaining a clean, maintainable codebase that gracefully handles both online and offline/demo scenarios.
The MyTreeMap platform offers several key interactive features that engage visitors:
- The MapBox component allows users to explore urban tree coverage across major Indian cities
- Users can zoom in/out and pan across the map
- Tree locations are plotted with interactive markers
- Dropdown menu enabling users to switch between different Indian cities
- Each selection updates the map view, statistics, and environmental impact data
- Claude-powered feature allowing users to upload tree photos
- Image processing provides species identification with confidence scores
- Displays detailed information about identified tree species and benefits
- ElevenLabs-powered narration about urban forests in each city
- Play/pause functionality with visual playback indicators
- Audio controls for volume adjustment
- Supabase-powered feature where users can view and share tree planting stories
- Image upload capability for community contribution photos
- Like and comment functionality on community posts
- Interactive data visualizations showing environmental metrics
- Toggles between different environmental impact categories
- Responsive charts that adapt to different screen sizes
The platform encourages several key user actions:
- Visitors can explore tree distribution across different cities
- View detailed statistics about urban forests in each location
- Access research data and methodology information
- Upload photos to identify tree species using AI technology
- Learn about specific tree benefits and characteristics
- Discover native and non-native species in their area
- Share personal tree planting experiences and photos
- Engage with content from other community members
- Participate in tree planting initiatives
- Listen to audio narrations about urban forests
- Access research papers and government initiatives
- Understand environmental impacts of urban trees
- Embed interactive tree data widgets on external websites
- Share city statistics and environmental impact data
- Integrate tree count displays on personal or organization sites
The platform is designed to be educational, engaging, and action-oriented, encouraging visitors to not only learn about urban forests but also participate in their preservation and expansion.
- ✉️ Email: mohit@liveupx.com (For support/help/donations)
- 💼 General Inquiries: ceo@liveupx.com
- 🔌 More Widgets: https://widgetx.site
This project is licensed under the MIT License - see the LICENSE file for details.
- 👨💻 Developed by Mohit Chaprana, Founder of Liveupx.com
- 🌆 Inspired by NYC's Tree Map project
- 🤝 Thanks to all our partner organizations
- ✨ Special thanks to all contributors and tree enthusiasts