Lunar Element Mapping - ISRO Inter_IIT Project

A comprehensive Full-Stack application for analyzing and visualizing lunar elemental composition data. This project integrates a Python Flask backend for data processing with a Next.js frontend for interactive visualization.

📋 Project Overview

This application enables users to:

• Input lunar coordinates (latitude/longitude)
• Analyze elemental composition (Magnesium vs Sodium, Calcium, Iron, Aluminum, Silicon)
• Generate interactive maps with SNR (Signal-to-Noise Ratio) detection
• Visualize lunar surface data with geographical overlays

Use Case: ISRO lunar mapping and scientific analysis for identifying mineral-rich regions on the Moon's surface.

---

🏗️ Project Structure

Inter_IIT_13.0-main/
├── Inter_iit_isro-main/          # Python Flask Backend
│   ├── app.py                    # Flask application & route handlers
│   ├── coordinate_skibidi.py     # Map generation & polygon logic
│   ├── requirement.txt           # Python dependencies
│   ├── data/                     # Element composition CSV files
│   │   ├── Mg_vs_Na.csv
│   │   ├── Mg_vs_Ca.csv
│   │   ├── Mg_vs_Fe.csv
│   │   ├── Mg_vs_Al.csv
│   │   └── Mg_vs_Si.csv
│   ├── map_images/              # Pre-generated map HTML files
│   ├── templates/               # Flask HTML templates
│   │   ├── index.html           # Input form
│   │   └── map.html             # Map display
│   └── static/                  # Static assets
│       └── css/styles.css
└── Mapping_isro/                 # Next.js Frontend
    ├── package.json             # Node dependencies
    ├── tsconfig.json            # TypeScript configuration
    ├── next.config.ts           # Next.js configuration
    ├── app/                     # Next.js app directory
    ├── pages/                   # Page routes
    │   ├── index.tsx            # Home page
    │   ├── map.tsx              # Map visualization page
    │   └── api/process-data.ts  # API routes
    ├── components/              # React components
    │   ├── Layout.tsx
    │   ├── InputForm.tsx
    │   ├── earth.tsx
    │   ├── SolarSystem.tsx
    │   └── Splash.tsx
    ├── public/                  # Static files
    └── styles/                  # Global styles

---

🚀 Quick Start

Prerequisites

• Python 3.8+
• Node.js 16+
• npm or yarn

Backend Setup (Python Flask)

1. Navigate to the backend directory:

   cd Inter_iit_isro-main

2. Install Python dependencies:

   pip install -r requirement.txt

3. Run the Flask server:

   python app.py

   • Server runs on http://localhost:5000

4. API Endpoints:

   • GET / - Render input form
   • POST /generate_map - Generate map for given coordinates

Frontend Setup (Next.js)

1. Navigate to the frontend directory:

   cd Mapping_isro

2. Install Node dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

   • Open http://localhost:3000 in your browser

4. Build for production:

   npm run build
   npm start

---

📊 Data Files

The data/ directory contains CSV files with lunar element composition data:

File	Description
Mg_vs_Na.csv	Magnesium vs Sodium distribution
Mg_vs_Ca.csv	Magnesium vs Calcium distribution
Mg_vs_Fe.csv	Magnesium vs Iron distribution
Mg_vs_Al.csv	Magnesium vs Aluminum distribution
Mg_vs_Si.csv	Magnesium vs Silicon distribution

Data Format: Each CSV contains polygonal regions with SNR values for elemental analysis.

---

🔧 Technology Stack

Backend

• Flask - Web framework
• Folium - Map visualization (uses NASA Moon imagery)
• Pandas - Data processing
• Shapely - Geometric operations
• Python - Core language

Frontend

• Next.js - React framework
• React 18 - UI components
• TypeScript - Type safety
• Leaflet - Interactive maps
• Mapbox GL - Advanced mapping
• Three.js - 3D visualization
• Plotly.js - Data visualization
• Framer Motion - Animations

---

🎯 Features

Core Functionality

✅ Coordinate Input - Enter lunar latitude/longitude
✅ Elemental Analysis - View SNR data for 5 element combinations
✅ Interactive Maps - Folium-based polygon visualization
✅ NASA Imagery Integration - LRO WAC Mosaic base layer
✅ Error Handling - Validation for invalid coordinates
✅ Responsive Design - Mobile-friendly interface

Advanced Features

• Multi-element comparison
• SNR-based polygon highlighting
• Dynamic color generation
• Polygon boundary detection
• Historical map caching

---

🔄 Workflow

User Input (Latitude, Longitude)
           ↓
    Flask Form Submission
           ↓
    Backend Processing (generate_map)
           ↓
    CSV Data Lookup & Analysis
           ↓
    Shapely Polygon Detection
           ↓
    Folium Map Generation
           ↓
    HTML Output
           ↓
    Frontend Display

---

📝 API Documentation

POST /generate_map

Request Body:

{
  "latitude": "20.5",
  "longitude": "35.2"
}

Response:

• Success: HTML map with highlighted polygons
• Error: Error message (invalid coordinates or no polygons found)

Error Codes:

• ValueError - Invalid numerical input
• KeyError - Missing form parameters
• Exception - General server error

---

🛠️ Environment Configuration

Flask

• Debug mode enabled by default (change in production)
• Port: 5000
• Template directory: templates/
• Static directory: static/

Next.js

• Port: 3000
• API base: /api/
• Environment variables configured in .env.local

---

📦 Dependencies Summary

Python (Backend)

Flask          - Web framework
pandas         - Data manipulation
folium         - Map visualization
shapely        - Geometric operations

Node.js (Frontend)

next           - React framework
react          - UI library
react-dom      - React DOM
leaflet        - Interactive maps
mapbox-gl      - Advanced mapping
three          - 3D graphics
plotly.js      - Data charts
framer-motion  - Animations

---

🐛 Troubleshooting

Issue	Solution
Module not found (Python)	Run pip install -r requirement.txt
Port already in use	Change port in app.py or package.json
Invalid coordinates	Ensure latitude (-90 to 90) and longitude (-180 to 180)
No polygons found	Try different coordinates on lunar surface
Build errors (Next.js)	Run npm install and clear .next/ directory

---

📚 Resources

• Flask Documentation
• Next.js Documentation
• Folium Documentation
• Leaflet Documentation
• NASA Moon Imagery

---

👥 Team

Inter_IIT Project - Collaboration between IIT institutions
ISRO Lunar Mapping Initiative

---

📄 License

This project is part of the Inter_IIT 13.0 competition. All rights reserved.

---

🎓 Educational Purpose

This application demonstrates:

• Full-Stack JavaScript/Python development
• Geospatial data processing
• Interactive map visualization
• Scientific data analysis
• Backend-Frontend integration

---

📞 Support

For issues or questions:

1. Check the Troubleshooting section
2. Review error messages in browser console
3. Check Flask server logs
4. Verify data files exist in data/ directory

---

Last Updated: February 2026
Version: 1.0.0