Esempio: Google Maps

copia link

Introduzione

In questo articolo viene descritto un componente di esempio che è possibile scaricare ed integrare nelle proprie applicazioni. Il componente mette a disposizione una classe Document Oriented tramite la quale è possibile utilizzare le mappe di Google.

N.B.: Per poter utilizzare il componente in applicazioni web pubbliche occorre ottenere una chiave di registrazione sul sito di Google http://www.google.com/apis/maps/signup.html; la registrazione va fatta per il dominio su cui gira l'applicazione e prevede alcune limitazioni, come ad esempio il numero di istanze della mappa effettuabili giornalmente. Per le applicazioni usate in locale su localhost non è necessario.

Le operazioni da compiere per integrare il componente sono piuttosto semplici. Vediamole nel dettaglio.

Download del componente

Per cominciare occorre scaricare l'archivio IDZ contenente il componente.

Importazione del componente

Il prossimo passo è quello di avviare Instant Developer, aprire il progetto entro cui si vuole incorporare il componente ed importare l'IDZ. Se si vuole importare il componente in un nuovo progetto occorre prima salvare il progetto. Per importare il componente occorre selezionare il comando Importa componente visibile nel menù contestuale del progetto:

Comando di importazione componente.

Instant Developer aprirà la seguente videata:

Videata per l'importazione del componente. Selezionare la prima riga nella lista in basso, quella con l'icona che indica che vogliamo importare i sorgenti del componente.

Ora selezioniamo la prima riga della lista in basso e premiamo il bottone Importa. Dopo qualche secondo vedremo apparire un nuovo oggetto nel progetto:

Nuovo componente importato nel progetto.

Utilizzo del componente

Ora per visualizzare una mappa basta creare un pannello con solo il layout di dettaglio nella propria videata basato sulla classe Document Oriented GoogleMap, ad esempio tirando la classe su un frame vuoto. Se diamo un'occhiata al pannello possiamo vedere che contiene i seguenti campi:

ToGMap: questo campo viene utilizzato dal pannello per comunicare con la mappa;
ID, Latitudine, Longitudine: questi campi vengono valorizzati dalla mappa quando l'utente muove un'oggetto o clicca su un punto su di essa;
Mappa: questo campo è il contenitore della mappa; generalmente viene dimensionato quanto tutto il pannello in modo da sovrastare i campi "di servizio" precedenti.

Inizializzazione della mappa

Il componente richiede alcune istruzioni di inizializzazione:

nell'evento di Initialize dell'applicazione occorre impostare la GoogleMapsKey (vedi sopra come ottenerla); se l'applicazione viene utilizzata in locale non è necessaria;
nell'evento di Load della videata occorre creare un'istanza della classe GoogleMap da mostrare nel pannello.

// **************************************************************
// Evento notificato dall'applicazione quando viene inizializzata
// **************************************************************
event NuovaApplicazioneWeb.Initialize()
{
  Parameters.GoogleMapsKey = GoogleMapsKey
}

// *********************************************************************
// Evento notificato alla videata al momento del caricamento in memoria.
// *********************************************************************
event NuovaVideata.Load()
{
  GoogleMap mappa = new() // Creo un'istanza della mappa
  //
  // Indico alla mappa su quale pannello viene mostrata;
  // la mappa recupererà dal pannello tutte le informazioni che gli servono
  mappa.AttachToPanel(GoogleMap.IDPanel())
  //
  // Dico al pannello che deve mostrare la mia istanza
  GoogleMap.setDocument(mappa, true)
}

Visualizziamo qualcosa nella mappa

Una volta creato il pannello ed inizializzata la mappa proviamo a visualizzare un marker in corrispondenza di dove ci troviamo. Per farlo possiamo creare un comando di menu con una procedura nella quale scriviamo il seguente codice:

// ***************************************************************
// Mostro sulla mappa un marker in corrispondenza di dove mi trovo
// ***************************************************************
public void NuovaVideata.MostraDoveMiTrovo()
{
  GoogleMap mappa = GoogleMap.document
  GeoMarker marker = new()
  //
  // Imposto l'immagine e il tooltip
  marker.Icona = spillo
  marker.Tooltip = "Ecco dove mi trovo"
  //
  // Geodecodifico il mio indirizzo per posizionare il marker
  GeoPoint coord = mappa.GeocodeAddress("Via Pincopallino, Bologna")
  marker.Latitudine = coord.Latitudine
  marker.Longitudine = coord.Longitudine
  //
  // Aggiungo il marker alla mappa
  mappa.AddObject(marker)
  //
  // Dico alla mappa di aggiornarsi:
  // questa operazione va fatta dopo aver aggiunto tutti gli oggetti
  mappa.UpdateMap()
}

Funzionalità della mappa

La versione 1.0 del componente mette a disposizione le seguenti funzionalità:

geodecodificazione di indirizzi: tramite il metodo GeocodeAddress si può ottenere le coordinate geografiche di un dato indirizzo;
visualizzazione di Marker e Poligoni: istanziando le classi GeoMarker e GeoPolygon tramite il metodo AddObject è possibile mostrare nella mappa questo tipo di oggetti;
drag & drop dei Marker: attivando la proprietà Draggabile del marker l'utente potrà spostare il marker sulla mappa; implementando l'evento di AfterCommit del pannello si potrà sapere quale marker e dove è stato spostato leggendo i campi ID, Latitudine e Longitudine;
individuazione di un punto sulla mappa: quando l'utente clicca su un punto qualsiasi della mappa i campi Latitudine e Longitudine vengono valorizzati con le coordinate del punto cliccato.

Ultima modifica: 23/03/2021 / Validità: da 9.0.3940