Creare mappe personalizzate nelle applicazioni per dispositivi mobili

In un post precedente, abbiamo descritto come integrare le mappe nelle applicazioni mobili multipiattaforma, utilizzando l'applicazione mappa nativa di ciascun dispositivo utilizzato dagli utenti finali. La nostra applicazione di esempio generava una mappa con dei segnaposto che indicavano i principali aeroporti degli Stati Uniti. Le immagini mostravano mappe generate dalla stessa applicazione su un telefono Android, un iPhone e un computer desktop Windows.

Cosa succede se l'elenco delle località da mappare non è noto in anticipo, ma viene generato in base all'attività dell'utente durante l'esecuzione del programma? MobileTogether, la Strumento di sviluppo di applicazioni mobili multipiattaforma, a basso codice, offerto da Altova, Permette inoltre agli sviluppatori di creare mappe personalizzate all'interno di applicazioni mobile in tempo reale, basandosi su un elenco di posizioni geografiche generate durante l'esecuzione del programma.

Qui è mostrata una schermata di un'applicazione mobile che effettua una richiesta API REST per recuperare un elenco di luoghi nelle vicinanze, in base a una frase inserita dall'utente.

Se foste un'azienda alla ricerca di una località per costruire un nuovo centro dati, una mappa sarebbe un elemento molto utile da aggiungere alla lista dei risultati.

Come abbiamo visto nell'applicazione "Stato dell'aeroporto" creata per il nostro precedente articolo, il componente "mappa" di MobileTogether include proprietà che definiscono i marcatori, un'area di visualizzazione per la mappa e delle azioni da eseguire quando l'utente fa clic su un punto sulla mappa.

Nell'applicazione "Stato degli aeroporti", l'elenco completo dei marcatori per i principali aeroporti era stato inserito direttamente nel codice dell'editor XPath/XQuery, nella sezione relativa alle proprietà dei marcatori

Un'espressione XQuery per creare marcatori sulla mappa

I marcatori non devono essere codificati in modo statico. Invece, l'intera lista di marcatori per le mappe personalizzate nelle applicazioni mobile può essere creata tramite un'espressione XQuery. Per creare mappe personalizzate nelle applicazioni mobile, è necessario un'espressione FLWOR (For-Let-Where-Order-Return) basata sui risultati della query di ricerca REST.

I parametri let, where e order nelle espressioni FLWOR sono opzionali, e non ne abbiamo bisogno per la nostra lista di elementi. Abbiamo semplicemente bisogno di For e Return per elaborare l'elenco di località restituito dalla richiesta REST:

Un'espressione XQuery può essere difficile da costruire correttamente al primo tentativo, anche senza i parametri "let", "where" e "order"! È qui che la sezione "Valutatore" della finestra "Espressione XQuery" si rivela utile. Cliccando sul pulsante "Valutatore", è possibile testare l'espressione mentre si lavora.

Se l'espressione contiene un errore, la valutazione fallisce e la descrizione dell'errore viene visualizzata nella finestra dei risultati.

Abbiamo aperto la finestra delle espressioni XQuery nel software MobileTogether Designer mentre il simulatore eseguiva l'applicazione in fase di sviluppo. Prima di tutto, abbiamo utilizzato il simulatore per eseguire una ricerca di testo, ottenendo così l'accesso a dati in tempo reale provenienti dalla query REST relativa all'"energia eolica" all'interno di un raggio di 160 chilometri da Amarillo, in Texas. Si noti che il nome "Cielo Wind Power LLC", presente nei risultati della ricerca visualizzati nell'angolo in basso a sinistra nello screenshot sopra, viene utilizzato per generare l'elemento di testo per il marcatore 1, visualizzato nei risultati dell'analizzatore (Evaluator Results) a destra.

Una volta che siamo soddisfatti dell'espressione utilizzata, possiamo semplicemente trascinare un nuovo controllo della mappa di geolocalizzazione sulla pagina dei risultati di ricerca, quindi copiare e incollare l'espressione nella proprietà "Marcatori". Ecco un'anteprima della pagina con la mappa visualizzata nel software MobileTogether Designer:

Ora possiamo impostare le proprietà rimanenti della mappa per adattarle al meglio alla nostra applicazione. Abbiamo scelto un tipo di mappa stradale con controlli di zoom. Altri tipi di mappa disponibili sono una mappa satellitare o una mappa ibrida che combina elementi satellitari e stradali. La proprietà "Viewport" è vuota perché MobileTogether imposterà automaticamente l'area di visualizzazione per includere tutti i marcatori presenti sulla mappa, come definito a runtime dall'espressione XQuery. Abbiamo inoltre utilizzato un'espressione XQuery per consentire la visualizzazione solo quando il numero di risultati delle richieste REST è maggiore di zero.

Ecco una rappresentazione della finestra di supporto delle proprietà della mappa:

Le impostazioni relative alla larghezza e all'altezza del controllo consentono a MobileTogether di impostare automaticamente le dimensioni della mappa per ogni dispositivo mobile.

Vogliamo mostrare all'utente maggiori informazioni su una determinata posizione quando viene cliccato un indicatore. Questo è definito nella proprietà "Azione di controllo". Il pulsante con i tre punti per l'azione di controllo apre una finestra di dialogo "Azioni" in cui lo sviluppatore può definire diverse azioni:

La nostra app utilizza le funzioni di estensione MobileTogether per raccogliere informazioni sul marker selezionato, quindi apre una sottopagina per visualizzare i dettagli relativi a quella posizione.

Di seguito sono mostrate la pagina dei risultati dell'app, visualizzata su un iPhone, e la sottosezione visualizzata dopo che l'utente ha cliccato su un elemento interattivo su un telefono Android:

Il pulsante etichettato "Visualizza i dati di produzione" nella sottosezione "Dettagli dei risultati" potrebbe interrogare un database per visualizzare i dati storici di produzione di energia elettrica per la specifica centrale eolica selezionata.

Scoprite di persona quanto è facile creare mappe personalizzate nelle applicazioni mobile. Scaricate il software MobileTogether Designer, gratuito, che include assistenza online ed esempi di applicazioni.

Scoprite altre applicazioni create con MobileTogether e visualizzate le dimostrazioni video all'indirizzo: https://www.altova.com/mobiletogether/demos