Integrare le mappe nelle applicazioni per dispositivi mobili
Gli sviluppatori possono creare applicazioni basate sulla localizzazione altamente personalizzate, sfruttando le funzionalità di geolocalizzazione integrate nei dispositivi mobili. Ora, con MobileTogether Strumento di sviluppo mobile multipiattaforma e a basso codice da Altova, consente l'integrazione avanzata di mappe all'interno delle applicazioni, supportando tutte le piattaforme mobili più diffuse.
Gli sviluppatori possono integrare mappe nelle applicazioni mobili, aggiungere marcatori personalizzati e definire azioni specifiche in base ai clic degli utenti sulla mappa. Ad esempio, un'azienda potrebbe voler includere un'applicazione con una mappa che mostri la posizione di tutte le filiali, e poi visualizzare l'inventario attuale quando viene selezionata una specifica filiale.
In un post precedente, abbiamo descritto un'applicazione mobile progettata per consentire agli utenti di verificare lo stato dei principali aeroporti statunitensi, selezionando un codice aeroportuale da un menu a tendina. Un'alternativa sarebbe quella di sostituire le 47 opzioni del menu a tendina con dei segnaposto su una mappa.
Consideriamo questo esempio.
Le schermate qui sotto mostrano la nuova applicazione "Airport Status" in esecuzione su un telefono Android, un iPhone e come applicazione desktop per Windows.
Su ogni dispositivo, la mappa viene generata utilizzando l'applicazione di mappe nativa e integrata. Gli utenti finali visualizzeranno automaticamente lo stile e il formato familiari su ogni piattaforma.
Se la mappa sposta alcune informazioni sullo stato al di sotto del bordo dello schermo, è possibile visualizzarle scorrendo verticalmente
È possibile integrare mappe nelle applicazioni mobile trascinando il controllo della mappa nell'applicazione, utilizzando le funzionalità di layout visivo di MobileTogether Designer. È possibile personalizzare le proprietà di ciascuna mappa. Lo screenshot qui sotto mostra una parte della nostra pagina principale sullo stato dell'aeroporto, con la finestra di aiuto per le proprietà della mappa visualizzata a destra.
I tipi di mappa disponibili sono: stradale, satellitare o ibrida. Oltre ai controlli di zoom opzionali, tutti i dispositivi touchscreen supportano lo scorrimento della mappa con un dito e il gesto familiare di pizzicamento con due dita per ingrandire o ridurre la visualizzazione.
L'area della mappa da visualizzare si basa su un elenco di uno o più marcatori, definiti utilizzando l'espressione "mt-geo-map-marker". Ogni marcatore include un identificativo, un titolo e un campo di testo. Questi valori possono essere recuperati quando il marcatore viene cliccato.
I colori dei marcatori possono essere nomi standard come rosso, verde e blu, oppure possono essere specificati tramite codici colore personalizzati, come abbiamo fatto nell'esempio precedente.
La proprietà "Viewport" definisce l'area totale da visualizzare, specificando le coordinate degli angoli in alto a sinistra e in basso a destra della mappa. Se lasciata vuota, il "Viewport" predefinito includerà tutti i marcatori definiti, più un piccolo margine. Abbiamo definito un'espressione per il "Viewport" con valori iniziali per gran parte del Nord America.
La proprietà "Azione di controllo" definisce cosa accade quando l'utente clicca su un qualsiasi elemento interattivo sulla mappa. La nostra applicazione leggerà il titolo dell'elemento, che è un codice aeroportuale di tre lettere, utilizzerà quel codice per recuperare lo stato dell'aeroporto dal servizio web della FAA e aggiornerà la visualizzazione.
La nostra app calcola nuove coordinate della finestra di visualizzazione per ingrandire la posizione dell'aeroporto selezionato
Scoprite di persona quanto è facile integrare le mappe nelle applicazioni mobile. Scaricate il programma MobileTogether Designer, gratuito, che include assistenza online ed esempi di applicazioni. Potete anche scaricare la nostra applicazione "Airport Status" da GitHub ed eseguirla direttamente nel programma Designer, oppure provarla come test sul vostro dispositivo mobile.
Scoprite altre applicazioni create con MobileTogether e visualizzate le dimostrazioni video all'indirizzo: https://www.altova.com/mobiletogether/demos