--- title: "Creare mappe personalizzate nelle applicazioni per dispositivi mobili" date: "2019-09-18" categories: - "mobile" - "mobile-development" - "mobiletogether" - "xquery" tags: - "app-development" - "maps" - "mobile-development" - "mobiletogether" - "xquery" description: Scoprite come creare mappe personalizzate e interattive all'interno di applicazioni mobile, utilizzando espressioni XQuery con MobileTogether, e come adattare le posizioni geografiche in tempo reale in base agli input forniti dagli utenti. --- Status: #blog Tags: #app-development #maps #mobile-development #mobiletogether #xquery Categories: [mobile-development](/blog/it/category/mobile-development.md) | [mobile-development](/blog/it/category/mobile-development.md) | [mobile-development](/blog/it/category/mobile-development.md) | [xpath+xquery](/blog/it/category/xpathxquery.md) # Creare mappe personalizzate nelle applicazioni per dispositivi mobili In un post precedente, abbiamo descritto come [integrare le mappe nelle applicazioni mobili multipiattaforma,](https://www.altova.com/blog/integrate-maps-into-mobile-apps/) 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](https://www.altova.com/it/mobiletogether), 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. ![](/blog/images/Blog_MT_windmill.jpg) 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. [![Creare un elenco di posizioni geografiche per mappe personalizzate all'interno di applicazioni mobili](/blog/images/custom_search.png)](custom_search-e1568826839242.png) 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. [![Un elenco di posizioni geografiche, creato dagli utenti, per una mappa personalizzata](/blog/images/search-results-list.png)](search-results-list.png) 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. [![Definizione delle proprietà per una mappa in un'applicazione mobile multipiattaforma](/blog/images/properties-1-1.png)](properties-1-1.png) 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 elenco di marcatori di geolocalizzazione predefiniti per mappe personalizzate nelle applicazioni mobili](/blog/images/marker-list-1.png)](marker-list-1.png) ### 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)](https://www.altova.com/it/mobiletogether/xpath-intro) 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 per creare marcatori su mappe personalizzate nelle applicazioni mobili ](/blog/images/marker-list-2.png)](marker-list-2.png) 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. [![Testare un'espressione XQuery utilizzando il valutatore XQuery](/blog/images/marker-list-evaluator.png)](marker-list-evaluator.png) 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: [![Aggiungere il controllo della mappa di geolocalizzazione a un progetto di app mobile utilizzando il software MobileTogether Designer](/blog/images/map-design.png)](map-design.png) 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: [![Definizione delle proprietà per mappe personalizzate nelle applicazioni mobile, utilizzando il software MobileTogether Designer](/blog/images/map-control-styles.png)](map-control-styles.png) 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: [![Definizione delle azioni da eseguire quando l'utente tocca un elemento interattivo su una mappa personalizzata in un'applicazione mobile](/blog/images/click-actions.png)](click-actions.png) 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: ![Schermate di mappe personalizzate visualizzate in un'applicazione mobile, eseguita su un iPhone e su un telefono Android](/blog/images/map-results.png) 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](https://www.altova.com/it/mobiletogether/download), 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](https://www.altova.com/it/mobiletogether/demos)