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.
This application serves as a geospatial data management platform specifically designed to:
- 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
- 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
- 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
- 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
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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Node.js (v16 or higher)
- PostgreSQL (v12 or higher)
- PostGIS extension
-
Clone the repository
git clone <repository-url> cd Geospatial-Data-Management
-
Install dependencies
npm run install-all
-
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
-
Configure environment variables
cp env.example .env # Edit .env with your database credentials -
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.shOption 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:
- Frontend (React): http://localhost:3000
- Backend API (Node.js): http://localhost:5001
- Python API: http://localhost:8000
- Python API Docs: http://localhost:8000/docs
When you start the application, you'll be greeted with:
- 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
- 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
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)
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
GET /api/geospatial/data- Get all geospatial dataGET /api/geospatial/data/bbox- Get data within bounding boxGET /api/geospatial/data/radius- Get data within radiusPOST /api/geospatial/data- Add new geospatial dataPUT /api/geospatial/data/:id- Update geospatial dataDELETE /api/geospatial/data/:id- Delete geospatial data
GET /api/data/stats- Get database statisticsGET /api/data/by-type- Get data by geometry typeGET /api/data/analysis/nearest- Find nearest neighborsGET /api/data/analysis/buffer- Buffer analysisGET /api/data/analysis/intersection- Spatial intersection
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
);- Spatial Index:
GISTindex on geometry column - Properties Index:
GINindex on JSONB properties - Timestamp Index: B-tree index on created_at
- Interactive Leaflet map
- Feature selection and highlighting
- Popup information display
- Responsive design
- CRUD operations for geospatial data
- Feature property management
- Data import/export capabilities
- Spatial analysis tools
- Nearest neighbor queries
- Radius-based searches
- Location services integration
- Data visualization charts
- Statistical analysis
- Data quality metrics
- Performance monitoring
Find the closest features to a specified point using spatial indexing for optimal performance.
Discover all features within a specified distance from a point, useful for proximity analysis.
Efficiently filter features within a rectangular area for map viewport optimization.
Accurate spatial distance measurements using PostGIS functions.
- Bar Charts: Feature type distribution
- Pie Charts: Geometry type breakdown
- Line Charts: Temporal data analysis
- Scatter Plots: Spatial correlation analysis
- Feature count statistics
- Coverage area calculations
- Data quality metrics
- Performance indicators
npm run buildDB_HOST=localhost
DB_PORT=5432
DB_NAME=geospatial_db
DB_USER=postgres
DB_PASSWORD=your_password
PORT=5000
NODE_ENV=production# Dockerfile example
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 5000
CMD ["npm", "start"]npm testcd client
npm test- Spatial indexing with GIST
- Query optimization with EXPLAIN ANALYZE
- Connection pooling
- Prepared statements
- Component memoization
- Lazy loading
- Bundle optimization
- Caching strategies
- Input validation and sanitization
- SQL injection prevention
- CORS configuration
- Environment variable protection
- HTTPS enforcement in production
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
For support and questions:
- Create an issue in the repository
- Check the documentation
- Review the API endpoints
โ
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
- 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
- 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
- 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