🌍 Web GIS Application with OpenLayers & GeoServer 🗺️

📝 Description

A modern web mapping application built using OpenLayers and GeoServer that allows users to visualize geographical data, create spatial features, and interact with maps. The application includes drawing tools, geolocation features, and spatial data management capabilities.

🎥 Demonstration Video

Watch the video demonstration

🛠 Architecture

Screenshots

🛠️ Technologies Used

• Frontend:

• 🌐 HTML5, CSS3, JavaScript

• 🗺️ OpenLayers

• 🎨 jQuery

• 🎯 Bootstrap

• Middleware:

• 🚀 Express.js

• 📡 Node.js

• Backend:

• 🗄️ PostgreSQL/PostGIS

• 🌐 GeoServer

✨ Features

• 🗺️ Interactive map visualization
• 📍 User geolocation
• ✏️ Drawing tools (Points, Lines, Polygons)
• 💾 Spatial data storage
• 🔄 Real-time coordinate display
• 🎨 Layer management
• 🎯 Map controls (zoom, pan, etc.)

🚀 Getting Started

Prerequisites

• Node.js installed
• PostgreSQL with PostGIS extension
• GeoServer installed and configured

Installation Steps

1. Clone the repository:

git clone https://github.com/nouhabenhamada/Web-Mapping-Application-OpenLayers-GeoServer.git
cd Web-Mapping-Application-OpenLayers-GeoServer

2. Install dependencies:

npm install

3. Configure database connection :

const db = {
    host: 'your_host',
    port: 'your_port',
    database: 'your_database',
    user: 'your_username',
    password: 'your_password'
}

4. Start the server:

node server.js

📝 Usage

1. Open the application in your browser
2. Use the top toolbar to select drawing tools
3. Click "My Position" to see your current location
4. Toggle layers using the layer switcher
5. Draw features on the map and save them to the database

👥 Authors

Nouha Ben Hamada & Nour Laabidi