Skip to content

moeinghaeini/Geospatial-Data-Management

Repository files navigation

๐ŸŒ Italy Geospatial Explorer

A comprehensive full-stack geospatial data management application that provides interactive mapping, spatial analysis, and data visualization capabilities for Italian landmarks and geographical features. Built with React, Node.js, Express, and PostgreSQL with PostGIS extension.

๐ŸŽฏ Purpose & Functionality

This application serves as a geospatial data management platform specifically designed to:

๐Ÿ—บ๏ธ Interactive Geographic Exploration

  • Visualize Italian Landmarks: Explore famous Italian monuments, cities, and geographical features
  • Interactive Mapping: Navigate through Italy's geography with an intuitive Leaflet-based map interface
  • Feature Discovery: Click on map features to discover detailed information about Italian landmarks like the Colosseum, Leaning Tower of Pisa, Venice Grand Canal, and more

๐Ÿ“Š Spatial Data Analysis

  • Proximity Analysis: Find the nearest landmarks to any given location
  • Radius Queries: Discover all features within a specified distance from a point
  • Bounding Box Filtering: Efficiently filter features within a rectangular area for map viewport optimization
  • Distance Calculations: Perform accurate spatial measurements between geographical features

๐Ÿ“ˆ Data Visualization & Statistics

  • Interactive Charts: Visualize feature type distributions, geometry statistics, and spatial patterns
  • Real-time Analytics: Monitor data quality metrics and performance indicators
  • Statistical Analysis: Analyze feature attributes, coverage areas, and geographical distributions

๐Ÿ—„๏ธ Geospatial Data Management

  • CRUD Operations: Create, read, update, and delete geospatial features
  • GeoJSON Support: Import and export standard geospatial data formats
  • Property Management: Handle rich metadata and attributes for geographical features
  • Database Integration: Leverage PostgreSQL with PostGIS for advanced spatial operations

๐Ÿ›๏ธ Italian Landmarks Showcase

The application currently features a curated collection of Italian geographical and cultural landmarks:

  • ๐Ÿ›๏ธ Historical Monuments: Colosseum, Leaning Tower of Pisa, Florence Cathedral
  • ๐Ÿ›๏ธ City-States: Vatican City with precise boundary visualization
  • ๐ŸŒŠ Waterways: Venice Grand Canal and other significant water features
  • ๐Ÿ”๏ธ Natural Features: Lake Como, Amalfi Coast coastline
  • ๐Ÿ›๏ธ Archaeological Sites: Pompeii and other historical locations

๐ŸŽจ User Experience

Interactive Map Interface

  • Responsive Design: Works seamlessly on desktop and mobile devices
  • Feature Selection: Click on any landmark to view detailed information
  • Hover Effects: Visual feedback when exploring features
  • Popup Information: Rich popups with landmark details, descriptions, and metadata

Multi-Panel Dashboard

  • Data Panel: Manage and interact with geospatial features
  • Analysis Panel: Perform spatial analysis operations
  • Statistics Panel: View data visualizations and analytics
  • Mobile-Friendly: Collapsible sidebar for mobile devices

โœจ Features

๐Ÿ—บ๏ธ Interactive Mapping

  • Leaflet Integration: Interactive maps with multiple tile layers
  • Real-time Data Visualization: Display geospatial data as GeoJSON features
  • Feature Selection: Click to select and view feature details
  • Responsive Design: Works on desktop and mobile devices

๐Ÿ“Š Spatial Analysis

  • Nearest Neighbors: Find closest features to a point
  • Radius Analysis: Discover features within a specified distance
  • Bounding Box Queries: Efficient spatial filtering
  • Distance Calculations: Accurate spatial measurements

๐Ÿ“ˆ Data Visualization

  • Interactive Charts: Bar charts, pie charts, and statistical graphs
  • Feature Type Distribution: Visualize geometry type statistics
  • Property Analysis: Analyze feature attributes and properties
  • Real-time Statistics: Live data quality metrics

๐Ÿ—„๏ธ Data Management

  • CRUD Operations: Create, read, update, and delete geospatial data
  • GeoJSON Support: Import and export standard geospatial formats
  • Property Management: Rich metadata and attribute handling
  • Database Integration: PostgreSQL with PostGIS for spatial operations

๐Ÿ—๏ธ Technical Architecture

Frontend Technology Stack

  • React 18: Modern UI framework with hooks and functional components
  • Leaflet: Open-source mapping library for interactive maps
  • React-Leaflet: React integration for Leaflet maps
  • Bootstrap 5: Responsive CSS framework for UI components
  • Recharts: Data visualization library for charts and graphs
  • Context API: React's built-in state management for global state
  • Axios: HTTP client for API communication

Backend Technology Stack

  • Node.js: JavaScript runtime environment
  • Express.js: Web application framework
  • PostgreSQL: Relational database with spatial capabilities
  • PostGIS: Spatial database extension for advanced geospatial operations
  • CORS: Cross-origin resource sharing for API access
  • RESTful API: Clean REST endpoints for geospatial operations

Python Backend (Advanced Features)

  • FastAPI: Modern, fast web framework for building APIs
  • Geopandas: Advanced geospatial data manipulation
  • Shapely: Geometric objects and operations
  • Scikit-learn: Machine learning algorithms
  • Folium: Interactive mapping and visualization
  • Plotly: Advanced data visualization
  • Matplotlib/Seaborn: Statistical plotting
  • WebSocket: Real-time communication

Key Technical Features

  • Spatial Indexing: GIST indexes for optimal spatial query performance
  • GeoJSON Support: Standard geospatial data format compliance
  • Real-time Updates: Live data synchronization between frontend and backend
  • Error Handling: Comprehensive error management and user feedback
  • Responsive Design: Mobile-first approach with Bootstrap components
  • Component Architecture: Modular, reusable React components for maintainability

๐ŸŽฏ Use Cases & Applications

Educational & Tourism

  • Cultural Heritage Exploration: Students and tourists can explore Italy's rich cultural heritage
  • Geographic Learning: Interactive learning tool for understanding Italian geography and landmarks
  • Tourism Planning: Discover nearby attractions and plan travel routes

Research & Analysis

  • Spatial Research: Academic research on Italian geographical and cultural features
  • Data Analysis: Statistical analysis of landmark distributions and patterns
  • Geographic Information Systems (GIS): Professional GIS applications for spatial analysis

Development & Learning

  • Full-Stack Development: Learn modern web development with geospatial technologies
  • GIS Programming: Understand spatial databases and PostGIS operations
  • React & Node.js: Practice with modern JavaScript frameworks and libraries

๐Ÿš€ Quick Start

Prerequisites

  • Node.js (v16 or higher)
  • PostgreSQL (v12 or higher)
  • PostGIS extension

Installation

  1. Clone the repository

    git clone <repository-url>
    cd Geospatial-Data-Management
  2. Install dependencies

    npm run install-all
  3. Set up the database

    # Create PostgreSQL database
    createdb geospatial_db
    
    # Enable PostGIS extension
    psql -d geospatial_db -c "CREATE EXTENSION postgis;"
    
    # Run initialization script
    psql -d geospatial_db -f server/scripts/init-db.sql
  4. Configure environment variables

    cp env.example .env
    # Edit .env with your database credentials
  5. Start the application

    Option 1: Basic Node.js application

    npm run dev

    Option 2: Complete application with Python integration

    npm run start-complete
    # or
    ./start_complete_app.sh

    Option 3: Manual setup

    # Terminal 1: Start Node.js backend
    npm run server
    
    # Terminal 2: Start React frontend
    npm run client
    
    # Terminal 3: Start Python backend (optional)
    npm run python

The application will be available at:

๐Ÿ—บ๏ธ What You'll See

When you start the application, you'll be greeted with:

Interactive Map of Italy

  • Centered on Italy: The map automatically centers on Italy's geographical location
  • Italian Landmarks: Pre-loaded with 8 famous Italian landmarks including:
    • ๐Ÿ›๏ธ Colosseum (Rome) - Ancient Roman amphitheater
    • ๐Ÿ›๏ธ Leaning Tower of Pisa - Famous bell tower
    • ๐ŸŒŠ Venice Grand Canal - Main waterway in Venice
    • ๐Ÿ›๏ธ Vatican City - Independent city-state with precise boundaries
    • ๐Ÿ›๏ธ Florence Cathedral - Cathedral of Santa Maria del Fiore
    • ๐ŸŒŠ Amalfi Coast - Stunning southern Italian coastline
    • ๐Ÿ”๏ธ Lake Como - Beautiful northern Italian lake
    • ๐Ÿ›๏ธ Pompeii - Ancient Roman archaeological site

Interactive Features

  • Click any landmark to see detailed information in a popup
  • Hover effects provide visual feedback
  • Responsive design works on desktop and mobile
  • Multiple data panels for analysis and statistics

Demo Data Structure

Each landmark includes:

  • Geographic coordinates (latitude/longitude)
  • Rich metadata (name, description, type, historical facts)
  • Geometry types (Points, Polygons, LineStrings)
  • Cultural context (historical periods, architectural details)

๐Ÿ“ Project Structure

Geospatial-Data-Management/
โ”œโ”€โ”€ client/                 # React frontend
โ”‚   โ”œโ”€โ”€ public/            # Static assets
โ”‚   โ”œโ”€โ”€ src/
โ”‚   โ”‚   โ”œโ”€โ”€ components/    # React components
โ”‚   โ”‚   โ”œโ”€โ”€ context/       # State management
โ”‚   โ”‚   โ””โ”€โ”€ App.js         # Main application
โ”‚   โ””โ”€โ”€ package.json       # Frontend dependencies
โ”œโ”€โ”€ server/                # Node.js backend
โ”‚   โ”œโ”€โ”€ config/            # Database configuration
โ”‚   โ”œโ”€โ”€ routes/            # API routes
โ”‚   โ”œโ”€โ”€ scripts/           # Database scripts
โ”‚   โ””โ”€โ”€ index.js           # Server entry point
โ”œโ”€โ”€ package.json           # Root dependencies
โ””โ”€โ”€ README.md              # This file

๐Ÿ”ง API Endpoints

Geospatial Data

  • GET /api/geospatial/data - Get all geospatial data
  • GET /api/geospatial/data/bbox - Get data within bounding box
  • GET /api/geospatial/data/radius - Get data within radius
  • POST /api/geospatial/data - Add new geospatial data
  • PUT /api/geospatial/data/:id - Update geospatial data
  • DELETE /api/geospatial/data/:id - Delete geospatial data

Data Analysis

  • GET /api/data/stats - Get database statistics
  • GET /api/data/by-type - Get data by geometry type
  • GET /api/data/analysis/nearest - Find nearest neighbors
  • GET /api/data/analysis/buffer - Buffer analysis
  • GET /api/data/analysis/intersection - Spatial intersection

๐Ÿ—„๏ธ Database Schema

geospatial_data Table

CREATE TABLE geospatial_data (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255),
    description TEXT,
    geometry GEOMETRY,
    properties JSONB,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Indexes

  • Spatial Index: GIST index on geometry column
  • Properties Index: GIN index on JSONB properties
  • Timestamp Index: B-tree index on created_at

๐ŸŽจ UI Components

MapComponent

  • Interactive Leaflet map
  • Feature selection and highlighting
  • Popup information display
  • Responsive design

DataPanel

  • CRUD operations for geospatial data
  • Feature property management
  • Data import/export capabilities

AnalysisPanel

  • Spatial analysis tools
  • Nearest neighbor queries
  • Radius-based searches
  • Location services integration

StatsPanel

  • Data visualization charts
  • Statistical analysis
  • Data quality metrics
  • Performance monitoring

๐Ÿ” Spatial Analysis Features

Nearest Neighbors

Find the closest features to a specified point using spatial indexing for optimal performance.

Radius Analysis

Discover all features within a specified distance from a point, useful for proximity analysis.

Bounding Box Queries

Efficiently filter features within a rectangular area for map viewport optimization.

Distance Calculations

Accurate spatial distance measurements using PostGIS functions.

๐Ÿ“Š Data Visualization

Interactive Charts

  • Bar Charts: Feature type distribution
  • Pie Charts: Geometry type breakdown
  • Line Charts: Temporal data analysis
  • Scatter Plots: Spatial correlation analysis

Statistical Analysis

  • Feature count statistics
  • Coverage area calculations
  • Data quality metrics
  • Performance indicators

๐Ÿš€ Deployment

Production Build

npm run build

Environment Variables

DB_HOST=localhost
DB_PORT=5432
DB_NAME=geospatial_db
DB_USER=postgres
DB_PASSWORD=your_password
PORT=5000
NODE_ENV=production

Docker Deployment

# Dockerfile example
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 5000
CMD ["npm", "start"]

๐Ÿงช Testing

Backend Testing

npm test

Frontend Testing

cd client
npm test

๐Ÿ“ˆ Performance Optimization

Database Optimization

  • Spatial indexing with GIST
  • Query optimization with EXPLAIN ANALYZE
  • Connection pooling
  • Prepared statements

Frontend Optimization

  • Component memoization
  • Lazy loading
  • Bundle optimization
  • Caching strategies

๐Ÿ”’ Security Considerations

  • Input validation and sanitization
  • SQL injection prevention
  • CORS configuration
  • Environment variable protection
  • HTTPS enforcement in production

๐Ÿค Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

๐Ÿ†˜ Support

For support and questions:

  • Create an issue in the repository
  • Check the documentation
  • Review the API endpoints

๐Ÿ“Š Current Demo Status

What's Working Now

โœ… Interactive Map: Fully functional Leaflet map with Italian landmarks
โœ… Feature Interaction: Click and hover effects on map features
โœ… Responsive Design: Works on desktop and mobile devices
โœ… API Endpoints: Complete REST API for geospatial operations
โœ… Data Visualization: Charts and statistics panels
โœ… Spatial Analysis: Proximity queries and radius searches
โœ… CRUD Operations: Add, edit, and delete geospatial features

Demo Data Included

  • 8 Italian Landmarks: Pre-loaded with rich metadata
  • Multiple Geometry Types: Points, Polygons, and LineStrings
  • Cultural Information: Historical facts and architectural details
  • Geographic Accuracy: Real coordinates for authentic locations

Ready for Development

  • Full-Stack Setup: Complete development environment
  • Database Schema: PostGIS-ready database structure
  • API Documentation: Comprehensive endpoint documentation
  • Component Library: Reusable React components
  • Docker Support: Containerized deployment options

๐Ÿ”ฎ Future Enhancements

  • Real-time Data Streaming: WebSocket integration for live updates
  • Advanced Spatial Analysis: Complex spatial algorithms and ML integration
  • Mobile App Development: React Native mobile application
  • Cloud Deployment: AWS, Google Cloud, or Azure deployment options
  • Advanced Visualization: 3D mapping and augmented reality features
  • Data Import/Export: Support for multiple geospatial formats (Shapefile, KML, etc.)
  • User Authentication: Multi-user support with role-based access
  • Internationalization: Multi-language support for global users

๐Ÿ›๏ธ Built with โค๏ธ for exploring Italy's rich cultural heritage and advancing geospatial technology

About

University project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published