Le Entità selezionate con una Vista possono essere visualizzate non solo come un elenco o una tabella o una griglia, ma possono anche essere dislocate su una mappa geografica, grazie al modulo aggiuntivo "Geofield Map".
Installato ed attivato questo modulo, avremo a disposizione un nuovo tipo di Campo in cui memorizzare le coordinate geografiche dell'Entità, strumenti per memorizzarvi le coordinate selezionandole da una mappa o digitando l'indirizzo e un nuovo tipo di Visualizzazione per presentarle con una Vista su una mappa. Come esempio, georeferenziamo le Sedi della app "Vicinato".
Quale mappa?
Con Geofield Map è possibile utilizzare Google Maps oppure Leaflet. Google Maps mette a disposizione di Geofield Map molte più opzioni, ma richiede una configurazione più complessa (richiesta a Google di codici da inserire nel modulo) e pone alcuni limiti sulla numerosità di visualizzazioni nella versione non a pagamento. Leaflet ha meno funzioni, ma utilizza le mappe gratuite di Openstreetmap, che non richiedono registrazioni o pagamenti e non condivide con terzi le posizioni scritte nella tua app.
Per gli scopi di MieApp (e probabilmente per la maggior parte delle tue app) Leaflet è più che adeguato. Le istruzioni che seguono fanno quindi riferimento a Leaflet. Anche se Geofield Map può utilizzare Leaflet per georeferenziare le Entità, non consente però poi di mostrarle in una Vista con una mappa Leaflet: per far ciò è necessario installare ed attivare anche il modulo aggiuntivo "Leaflet".
| APPROFONDIMENTO: In realtà IL modulo Leaflet potrebbe sostituire integralmente il modulo Geofield Map ma, per scopi didattici, preferisco presentarli e farteli installare entrambi, così da lasciarti libero di usare Google Maps o Leaflet. |
Aggiungere coordinate ad una Entità
Per aggiungere coordinate ad una Entità è sufficiente aggiungere un Campo di tipo Geofield e stabilire quale sistema di mappa usare. Non definiamo su quale mappa mostrarla perché useremo a questo scopo una Vista.
| aggiungi un Campo Geofield al tipo di Entità | In Strutture - Tipi di Contenuto - Sede - Gestisci Campi aggiungi un Campo di tipo Geofield con nome "Coordinate", come Storage Backend seleziona Default (WKT) |
| scegli una posizione di default | Restando nella configurazione del Campo, attiva Set default value e seleziona sulla mappa una posizione di default. Ciò è utile per evitare che, quando inserisci la posizione di una Entità, ti venga mostrata una posizione a caso sulla mappa mondiale, tipicamente una mappa tutta blu perché posizionata in pieno oceano. |
| scegli la mappa con cui selezionare le coordinate | In Strutture - Tipi di Contenuto - Sede - Gestione visualizzazione form, per il Campo "Coordinate" come Widget seleziona Geofield. Viene segnalato un messaggio di errore per la mancanza di codici di accesso a Google Maps. Clicca sulla rotellina a fianco del Campo. Verifica che come Map Library sia selezionato Leaflet.js. Se per la tua app è utile proporre come punto di partenza della mappa la tua posizione, attiva l'opzione Use HTML5 Geolocation to set Default Values. Salva |
Georeferenziare l'Entità
Per definire la posizione geografica di una Sede, basta modificarla. Per il Campo "Coordinate" ti viene mostrata una mappa su cui cliccare per posizionare l'Entità. Se hai attivato l'opzione Use HTML5 Geolocation to set Default Values, viene mostrata una finestra che chiede l'autorizzazione a utilizzare la tua posizione attuale per posizionare il puntatore dentro la mappa:
Visualizzare le Entità su mappa con una Vista
Per mostrare su una mappa le Entità georeferenziate costruiamo una Vista che elenca le Entità su una Visualizzazione di tipo Mappa:
| crea la Vista | In Strutture - Viste aggiungi una Vista di nome "Mappa Sedi". che mostra Contenuti di tipo Sede, attiva la creazione di una pagina, come formato seleziona per ora Elenco non formattato di Campi. In Elementi da visualizzare seleziona 0 per mostrare tutte le Sedi. Salva |
| limita la Vista alle Sedi dotate di coordinate | In Criteri del filtro aggiungi il Campo "Coordinate" e come operatore seleziona Non è vuoto. Verifica sotto Anteprima che sia mostrato l'elenco delle Sedi |
| recupera le coordinate delle Sedi | In Campi aggiungi il Campo "Coordinate" |
| mostra le Sedi sulla mappa | In Formato seleziona Leaflet. In Impostazioni come Sorgente dati seleziona il Campo "Coordinate", come Tooltip Source seleziona "Titolo". Ci sono moltissime altre configurazioni possibili, ma per i nostri scopi didattici non servono, ad esempio c'è la possibilità di usare icone differenti per le Entità in base al valore di un loro Campo. |
Ecco il risultato: cliccando sul fumetto di una icona si viene portati direttamente alla pagina di quella Entità.
Volendo portare l'utente ad un'altra pagina, ad esempio alla Vista che elenca i prestiti in corso in quella Sede, basta aggiungere alla Vista un Campo Globale - Testo personalizzato in cui costruire il link a quella pagina e nelle Impostazioni del formato Leaflet selezionare quel Campo come Tooltip Source al posto di "titolo"
Posizionare le Entità tramite indirizzo
Georeferenziare una Entità cercandola visivamente su una mappa può dare un risultato impreciso. Se si dispone dell'indirizzo dell'Entità, può essere più comodo digitarlo e lasciare che sia Drupal a tradurre l'indirizzo in coordinate geografiche. A questa traduzione provvede uno dei servizi disponibili il modulo aggiuntivo Geocoder, che a sua volta richiama uno dei servizi di geocodifica disponibili on line.
PREDISPOSIZIONE ALLA GESTIONE DEGLI INDIRIZZI
Per predisporre la nostra app alla traduzione di indirizzi in coordinate, installiamo ed attiviamo i moduli "Geocoder" e "Address". Installiamo anche la libreria che connette Geocoder al servizio di geocodifica gratuito di Openstreetmap, dando questo comando nel terminale:
| ▶️ composer require 'geocoder-php/nominatim-provider' |
Infine configuriamo Geocoder perché utilizzi il servizio on line di Openstreetmap: in Configurazione - Geocoder - Fonti esterne - Add a Geocoder provider seleziona Openstreetmap.
| APPROFONDIMENTO: Le fonti elencate in Add a Geocoder provider dipendono dalle librerie installate. Per installare librerie diverse da Openstreetmap clicca sul link List of all possible Geocoder providers|packages e segui le istruzioni indicate nella pagina. |
TRADUZIONE DEGLI INDIRIZZI IN COORDINATE
Dopo aver provveduto a queste installazioni, vediamo come usare la traduzione di indirizzi in coordinate, esemplificando per gli indirizzi delle Sedi nella app "Vicinato":
| aggiungi il Campo "Indirizzo" alla Sede | In Strutture - Tipi di contenuto - Sede - Gestisci Campi aggiungi un Campo di tipo Indirizzo |
| definisci quali informazioni compongono il Campo "Indirizzo" | Nella configurazione del Campo "Indirizzo", in Paesi disponibili seleziona i Paesi di cui accettare gli indirizzi (es. la sola Italia); in Field overrides seleziona quali informazioni richiedere obbligatoriamente, facoltativamente o nascondere all'Utente (es. chiedere una riga di indirizzo, il CAP, la Città e la Provincia e nascondere tutte le altre) |
| Nel Campo "Coordinate" attiva Geocoder prelevando l'indirizzo dal Campo "Indirizzo" | In Strutture - Tipi di contenuto - Sede - Gestisci Campi - Coordinate - Modifica attiva l'opzione Geocode from an existing field. In Geocode from an existing field seleziona il Campo "Indirizzo". In Geocoder providers seleziona Openstreetmap, |
| nella pagina di creazione / modifica delle Sedi mostrare i Campi "Indirizzo" e "Coordinate" | In Strutture - Tipi di contenuto - Sede - Gestione visualizzazione form posiziona il Campo "Indirizzo" sopra il Campo "Coordinate". |
Puoi vedere l'effetto finale entrando nella app "Vicinato" e cliccando il comando "Sedi" nel menù.