A small gesture, a big support! Buy me a coffee ☕ if you appreciate my work. Thanks in advance!

A complete Django application for managing and displaying interactive maps and floor plans with role-based authentication.

• 🚀 Features
• 🛠️ Technologies Used
• 📦 Installation
• ⚙️ Configuration
• 🏃‍♂️ Quick Start
• 📖 Usage
• 🏗️ Project Architecture
• 👥 Role System
• 🗂️ File Structure
• 🤝 Contribution
• 📄 License

• Interactive map visualization with Leaflet.js
• Floor plan display with layered navigation
• Custom markers with informative popups
• Polygon support to delineate areas

• Authentication system with role management
• Real-time map editor
• Map Manager with image upload
• Custom marker and icon management
• File upload organized by category
• User management (for administrators)

• Visual polygon editor by click
• Real-time preview of changes
• Drag-and-drop organization of maps
• Real-time validation of forms
• Responsive interface, mobile-friendly

• Django 5.1+ - Python web framework
• SQLite - Database (development)
• Python 3.8+ - Programming language

• Bootstrap 5 - Responsive CSS framework
• Leaflet.js - Interactive map library
• JavaScript ES6+ - Dynamic Interactions
• Font Awesome - Vector Icons

• Sortable.js - Drag and drop to reorder
• JSON - Map configuration storage

• Python 3.8 or higher
• pip (Python package manager)
• Git

Externals assets :

• bootstrap 5.3.3
• fontawesome free 6.4.0
• leaflet 1.9.4

git clone https://github.com/yann83/MapProject.git

pip install poetry

Install all packages

poetry install

Go to your floorproject folder and type

cd floorproject
python manage.py runserver

Credientials are admin and admin

The project uses two main JSON files for configuration:

{
"setView": {
"lat": 43.12568,
"lng": 5.94334, 
"zoom": 18 
}, 
"icons": { 
"icon_name": { 
"iconUrl": "marker-icone.png", 
"iconSize": [25, 41], 
"iconAnchor": [12, 41], 
"popupAnchor": [1, -34] 
} 
}, 
"markers": { 
"marker_id": { 
"type": "marker", 
"coordinates": [43.12568, 5.94334], 
"popup": "Marker description", 
"icon": "icon_name" 
} 
}
}

{ 
"bounds": [[0, 0], [2339, 3309]],
"map": {
"minZoom": -5,
"zoomDelta": 0.25,
"zoomSnap": 0,
"layers": "floor1",
"xy": [1100, 1600],
"z": -2
},
"plans": {
"floor1": {
"name": "Floor 1",
"image": "plan-etage1.png"
}
},
"markers": [
{
"marker_id": {
"type": "marker",
"bound": "floor1",
"xy": [800, 400],
"popup": "Point of Interest",
"icon": "icon_name"
}
}
]
}

Create a .env file for sensitive configurations :

SECRET_KEY=your_django_secret_key
DEBUG=True
ALLOWED_HOSTS=localhost,127.0.0.1

1. Access the application

• Public interface: http://localhost:8000/
• Admin interface: http://localhost:8000/administrator/
• Login: http://localhost:8000/login/

2. First use

• Log in with the created superuser
• Upload your first images to /administrator/upload
• Configure your maps in /administrator/edit/map
• Add your plans to /administrator/edit/plans

1. Viewing Maps

• Go to the "Mapping" → "Map" section
• Click on markers to view information
• Use the zoom and navigation controls

2. Viewing Plans

• Go to the "Mapping" → "Plans" section
• Use the layer selector to change floors
• Navigate plans with Leaflet controls

1. User Management

• Create accounts with different roles
• Assign appropriate permissions
• Manage user active/inactive status

2. Editing Maps

• Change the default view (center, zoom)
• Create and manage custom icons
• Add markers and polygons
• Test in real time on the map

3. Plan Management

• Upload plan images
• Configure limits and settings
• Organize the display order
• Associate markers with floors

floorproject/
├── administrator/ # Admin app
│ ├── templates/ # Admin HTML templates
│ ├── templatetags/ # Custom template tags
│ ├── models.py # Custom user model
│ ├── views.py # Admin views
│ ├── forms.py # Custom forms
│ └── decorators.py # Security decorators
├── public/ # Public app
│ ├── templates/ # Public HTML templates
│ └── views.py # Public Views
├── floorproject/ # Main Configuration
│ ├── static/ # Static Files
│ │ ├── css/ # CSS Styles
│ │ ├── js/ # JavaScript Scripts
│ │ ├── json/ # Map Configuration
│ │ ├── img/ # General Images
│ │ ├── markers/ # Marker Icons
│ │ └── plans/ # Map Images
│ ├── settings.py # Django Configuration
│ └── urls.py # Main Routing
└── manage.py # Django Management Script

Map from public interface, showing location of a building

Floor plans with markers

Admin interface where you select GPS coordinates or floor coordinates You can add edit and delete marker icon et location You can draw polygon.

Maanger user and role : admin, carte or plan

The project implements a three-tiered role system:

• Full permissions on all features
• User and role management
• Access to all editing sections
• File upload and deletion

• Edit global maps only
• Manage markers and icons for maps
• View all sections

• Edit floor plans only
• Manage markers associated with plans
• View all sections

@role_required(['admin', 'map']) # Only admin and map can access
def administrator_edit_map(request):
# Code for the view...

• Draw mode enabled when clicking on the coordinate field
• Real-time preview during creation
• Automatic validation of JSON format
• Seamless integration with the interface

• Uniqueness check of names/IDs in real time
• Visual feedback with colored messages
• Duplicate prevention before saving

• Automatic prefixes by category
• Preview of uploaded images
• AJAX deletion without reloading
• Format validation (PNG, JPG, JPEG)

Contributions are welcome! Here's how to participate:

1. Fork the project
2. Create a branch for your feature (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• Respect existing code style
• Add comments for Python beginners
• Test your changes before submitting
• Document new features

If you find a bug, please:

1. Check that it doesn't already exist in the issues
2. Create a new issue with:

• Detailed description of the problem
• Steps to reproduce
• Screenshots if relevant
• Python/Django version used

This project is licensed under the MIT License. See the LICENSE file for more details.

⭐ Please rate this project if it helps you!