Sito disponibile su: https://uniprmap.github.io
UniPR Interactive Map è una proposta di nuova mappa interattiva per l’Università di Parma, progettata principalmente per nuovi studenti e studenti Erasmus.
Fornisce una navigazione dettagliata delle strutture universitarie, sia all’interno degli edifici (piante dei piani) sia a livello cittadino.
Il progetto può essere considerato un’evoluzione dell’attuale mappa interattiva ufficiale dell’università, offrendo maggiore dettaglio, usabilità ed estendibilità.
- 🔍 Ricerca interattiva per individuare aule e servizi specifici
- 🏙️ Localizzazione degli edifici universitari distribuiti in città
- 🧭 Navigazione multi-piano per alcuni edifici universitari
- 🎨 Elementi colorati in base alla tipologia di luogo
- 💬 Tooltip e pop-up con informazioni dettagliate e link a Google Maps
- 📱 Interfaccia responsive, utilizzabile sia da desktop che da dispositivi mobili
- 🆓 Realizzato interamente con software libero e open-source
- 🧩 Progettato per essere facilmente estendibile con nuovi edifici
Ogni elemento poligonale disegnato in QGIS ed esportato in GeoJSON contiene cinque attributi:
- fid – Identificatore univoco dell’elemento (obbligatorio, auto-incrementale)
- Building – Nome dell’edificio (obbligatorio)
- Floor – Piano dell’edificio (obbligatorio)
- Type – Tipologia dell’elemento (obbligatorio)
- Name – Nome dell’elemento (facoltativo)
- Room
- Stairs
- Toilets
- Wall
- Tables
- Hallway
- Reception
- Door
- Staff Room
- Base
- Roof
- Refreshment Area
- Laboratory
- Study Room
- Wing
- Elevator
- Tutti i dati della mappa vengono caricati interamente all’avvio del sito
- I dati sono contenuti in file
.geojson:websiteFeatures.geojsoncontiene i marker puntuali legacymap.geojsoncontiene gli elementi poligonali disegnati in QGIS
- I GeoJSON sono esportati utilizzando il sistema di riferimento EPSG:4326
- Le piante dei piani provengono dal sito ufficiale dei piani di emergenza dell’università
- Tutto il lavoro di disegno in QGIS è svolto manualmente
La struttura dati principale utilizzata dall’applicazione è una Map, scelta per il suo accesso in tempo O(1).
Struttura:
{ Building || Markers: { Floor: { Type: [array di features] } } }
Durante l’utilizzo del sito viene utilizzata una seconda struttura dati per tracciare la vista corrente della mappa.
Il sito è stato pensato per essere autonomo, non sono stati utilizzati frameworks e non dispone di dipendenze esterne.
Le tecnologie utilizzate sono:
- 🟥 HTML
- 🟨 Javascript
- 🍃 Leaflet (libreria Javascript per gestire la mappa)
- 🌐 Geojson (file format dei dati)
- 🟪 CSS
- 🟩 QGIS
- 🗺️ OpenStreetMap
QGIS è un software GIS gratuito ed open-sorce. La mappa in background è OpenStreetMap.
Per aggiungere nuove tipologie di elementi alla mappa dato un nuovo file map.geojson aggiornato ed esportato da QGIS:
- Aggiornare la costante
LAYER_CONFIG - Aggiornare la costante
RENDER_ORDER - Aggiornare la costante
googleMapsAddressesDict
Tutte si trovano nel file mapElements.js.
Website available on: https://uniprmap.github.io
UniPR Interactive Map is a proposed new interactive map for the University of Parma, designed primarily for new students and Erasmus students.
It provides detailed navigation across university facilities, both inside buildings (floor plans) and across the city.
The project can be considered an evolution of the current official university interactive map, offering greater detail, usability, and extensibility.
- 🔍 Interactive search to locate specific rooms and facilities
- 🏙️ Campus-wide building locations distributed throughout the city
- 🧭 Multi-floor navigation for some university buildings
- 🎨 Color-coded elements based on location type
- 💬 Tooltips and pop-ups with detailed information and Google Maps links
- 📱 Fully responsive UI, designed for both desktop and mobile devices
- 🆓 Built entirely using free and open-source software
- 🧩 Designed to be easily expandable with new buildings
Each polygon element drawn in QGIS and exported to GeoJSON contains five attributes:
- fid – Unique identifier of the element (mandatory, auto-incremented)
- Building – Name of the building (mandatory)
- Floor – Floor number (mandatory, 99 for the roofs)
- Type – Type of element (mandatory)
- Name – Name of the element (optional)
- Room
- Stairs
- Toilets
- Wall
- Tables
- Hallway
- Reception
- Door
- Staff Room
- Base
- Roof
- Refreshment Area
- Laboratory
- Study Room
- Wing
- Elevator
- All map data is loaded entirely at website startup
- Data is stored in
.geojsonfiles:websiteFeatures.geojsoncontains point markers taken from the original map websitemap.geojsoncontains polygon elements drawn in QGIS
- GeoJSON files are exported using EPSG:4326
- Floor plans are sourced from the official university emergency plans
- All drawings in QGIS are created manually
The core data structure used by the application is a Map, chosen for its O(1) access complexity.
Structure:
{ Building || Markers: { Floor: { Type: [features array] } } }
During interaction with the website, a secondary data structure is used to track the current map view.
The website is thought to be autonomous, no frameworks were used and it hasn't any external dependency.
Implemented technologies are:
- 🟥 HTML
- 🟨 Javascript
- 🍃 Leaflet (JavaScript library to manage the map)
- 🌐 Geojson (data file format)
- 🟪 CSS
- 🟩 QGIS
- 🗺️ OpenStreetMap
QGIS is a geographic information system software that is free and open-source. Background map is OpenStreetMap.
To add support for new types of map elements given a new and updated map.geojson file exported from QGIS:
- Update the
LAYER_CONFIGconstant - Update the
RENDER_ORDERconstant - Update the
googleMapsAddressesDictconstant
All are located in the mapElements.js file.