EzzEldinx/Archeological-Map-of-Alexandria

Cartalex is an interactive digital cartography platform developed for the Centre d'Études Alexandrines (CEAlex). It serves as a specialized tool for visualizing, managing, and exploring the rich archaeological heritage and historical topography of Alexandria, Egypt. The platform bridges the gap between historical data and modern technology # CartAlex - WebSIG for Centre d'Études Alexandrines (CEAlex) ## 📖 Project Overview **CartAlex** is an advanced Web Geographic Information System (WebSIG) engineered specifically for the **Centre d'Études Alexandrines (CEAlex)**. It serves as a central digital platform for visualizing, analyzing, and managing the rich archaeological and historical data of Alexandria, Egypt. The system is designed to handle multi-layered spatial data, integrating high-density vector datasets (excavation sites) with historical raster maps (1866, 1934, 1993) in a seamless, interactive interface. ## ✨ Key Features ### 🗺️ Interactive Mapping * **Engine:** Powered by **MapLibre GL JS** for high-performance vector rendering. * **Hybrid Visualization:** Concurrent display of modern satellite imagery, OpenStreetMap, and historical georeferenced plans. * **Vector Tiles:** Utilizes MVT (Mapbox Vector Tiles) for smooth rendering of thousands of archaeological points. ### 🔍 Advanced Filtering & Search * **Dynamic Querying:** Filter excavation sites by: * **Period** (e.g., Roman, Hellenistic). * **Vestige Type** (e.g., Cistern, Mosaic). * **Discovery Details** (Date, Discoverer). * **Bibliographic References**. * **Numeric Ranges:** Filter sites by specific year ranges. * **Contextual Search:** Dropdown menus populated dynamically from the database. * **Smart Sorting:** Filter UIs automatically sort French terminology properly (accounting for diacritics like é, è, â) using localized string comparison. ### 📱 Responsive User Interface (v2.0) The application features a completely separated logic for Desktop and Mobile to ensure maximum stability: * **Desktop Mode:** * Collapsible side panels (`volet_haut`, `volet_gauche`). * Accordion-style filters with multi-select checkboxes. * **Mobile Mode:** * **Touch-Optimized:** Bottom-sheet interface with swipe gestures. * **Grid Layout:** Custom CSS Grid implementation for optimal screen usage. * **Scoped Events:** Isolated event listeners to prevent …