Destinazione Palermo

Questo portale è una soluzione avanzata per la visualizzazione di punti d'interesse (POI) e la gestione di itinerari personalizzati basati su mappa interattiva. Ideale per siti turistici, portali culturali o eventi, il sistema consente agli utenti di esplorare, filtrare e navigare tra diverse località o percorsi.

Il portale rappresenta un MVP di un progetto più avanzato non più in sviluppo al momento che comprendeva un meccanismo di acquisto di ticket per i musei e attrazioni direttamente in pagina ed ulteriori personalizzazioni e funzionalità lato ux/ui.

Lo stile si ispira allo stesso Google Maps che per le grandi città stilizza in monumenti in sovraimpressione. Grazie al supporto del team di Feedback e CoopCulture ho potuto realizzare questo progetto che cha previsto un grande sforzo di design oltreché di sviluppo.

Caratteristiche principali

• Mappa interattiva
• Cluster di marker
• Geolocalizzazione utente
• Itinerari personalizzati
• Filtri avanzati
• InfoWindow personalizzate

Funzionalità chiave:

1. Mappa Interattiva:

   • Visualizzazione dei POI su una mappa Google personalizzata con marker.
   • Personalizzazione del layout e dello stile della mappa.

2. Cluster di Marker:

   • Raggruppamento automatico dei marker vicini tramite MarkerClusterer.

3. Geolocalizzazione utente:

   • Posizionamento in tempo reale dell'utente sulla mappa.
   • Aggiornamento dinamico della posizione grazie a navigator.geolocation.

4. Itinerari personalizzati:

   • Possibilità di visualizzare itinerari specifici sulla mappa.
   • Personalizzazione dei marker in base agli itinerari.

5. Navigazione e indicazioni:

   • Calcolo di percorsi tra la posizione dell'utente e un POI selezionato.
   • Mostra tempi di percorrenza e distanze in tempo reale.

6. Filtri avanzati:

   • Filtraggio dinamico dei POI basato su checkbox per itinerari o categorie.

7. InfoWindow personalizzate:

   • Popup interattivi per ogni marker con immagini, descrizioni e pulsanti.

Caratteristiche tecniche

• Framework e librerie:

  • Google Maps API per la gestione della mappa e dei percorsi.
  • MarkerClusterer per il clustering dei marker.
  • jQuery per interazioni e gestione degli eventi.

• Tecnologie utilizzate:

  • WordPress Plugin: Sistema integrato per abilitare la funzionalità direttamente nel backend.
  • AJAX: Per il caricamento dinamico dei dati dei POI e degli itinerari.
  • Responsive Design: Adattamento automatico dell'altezza della mappa per dispositivi mobili e desktop.

• Architettura del codice:

  • Modularizzazione in più file JS per mantenere la scalabilità.
  • Suddivisione logica tra inizializzazione della mappa, aggiunta dei marker, gestione dei percorsi e filtri dinamici.

• Backend:

  • Endpoint AJAX per recuperare i dati degli itinerari o dei POI da un database WordPress.
  • Personalizzazione semplice attraverso shortcode o opzioni del plugin.

Valore aggiunto

Questo sistema rappresenta una soluzione completa e personalizzabile per siti che necessitano di una mappa interattiva avanzata, combinando l'uso di tecnologie moderne con l'integrazione perfetta in WordPress. Il vantaggio di un integrazione totale col db permette di gestire non solo i contenuti ma anche la stileistica e la funzionalità del plugin.