Quando si parla di mappe su web, generalmente si pensa a Google Map. E' indubbio che questa applicazione abbia giocato un ruolo fondamentale nello sviluppo di questa tecnologia tanto da farla diventare una caratteristica ormai obbligatoria per qualunque sito o applicazione che tratti dati come indirizzi, mappe, luoghi pubblici o altre tipologie di dati relativi a località. In quest'arco di tempo, Microsoft non è certo stata con le mani in mano ed ha creato un prodotto che, già da diverso tempo, è maturo e pronto per fare concorrenza al suo rivale: Virtual Earth.

Le funzionalità di Virtual Earth

La struttura di Virtual Earth si divide in due parti principali: i controlli e le API. Se si facesse un paragone con ASP.NET, si potrebbe dire che le API sono paragonabili alle Membership API, mentre i controlli sono paragonabili ai controlli tipo Login, CreateUserWizard etc. etc. Questo significa che si possono utilizzare i controlli già inclusi in Virtual Earth, ma anche crearne di custom ed interfacciarsi direttamente con le API che vengono messe a disposizione. Ovviamente, per interagire con Virtual Earth si deve utilizzare javascript poiché il codice per richiedere le mappe, o qualunque altra informazione, gira sul client. Questo significa che per garantire la massima diffusione del prodotto, le API messe a disposizione da Virtual Earth sono assolutamente cross-browser e quindi compatibili con le ultime versioni di tutti i moderni browser.

Le API messe a disposizione dello sviluppatore sono diverse ed hanno molteplici finalità come ad esempio mostrare la mappa ( ad una certa latitudine o indirizzo e sia in formato topografico che in formato reale con vista dall'alto), ricercare ed evidenziare un indirizzo su una mappa, visualizzare i controlli di navigazione, creare dei punti (chiamati pushpin) sulla mappa e calcolare la rotta tra due punti (sia in auto che a piedi). Queste funzionalità sono comuni a tutti i sistemi di mappe, ma quello che rende Virtual Earth un prodotto veramente potente è la possibilità di evidenziare intere aree sulla mappa e l'ormai famigerata Bird View ovvero la possibilità di visualizzare una mappa non dall'alto ma da un'angolazione di 45 gradi rendendo così più facile l'individuazione di palazzi e/o strade.

Come detto, oltre alle API, ci sono i controlli. In tutto, quelli che sono messi a disposizione sono quattro:

• Map: è il controllo principale responsabile della visualizzazione delle mappe. Tramite questo controllo si può gestire l'intera mappa in quanto tutte le API precedentemente menzionate altro non sono che dei metodi che appartengono a questo controllo.
• MiniMap: è il controllo che mostra l'area visualizzata dal controllo Map all'interno di un'area più grande. Questo controllo risulta molto utile quando si ha una mappa con uno zoom molto elevato e si vuole vedere l'area circostante senza tornare indietro.
• Find: è il controllo che permette di ricercare un determinato indirizzo, città, punto di interesse o altro ancora. Questo controllo è molto rudimentale in quanto contiene solamente due textbox per ricercare rispettivamente un punto di interesse e/o un indirizzo, un bottone per lanciare la ricerca ed un layer per mostrare i risultati.
• 3DNav: si tratta di un plugin, che si installa OnDemand, che permette di visualizzare le mappe in 3D. Questo controllo non viene trattato nel proseguo dell'articolo.

Ovviamente queste sono solo le funzionalità più importanti che uno sviluppatore può utilizzare; ce ne sono molte altre che possono tornare utili ma che esulano dallo scopo di questo articolo in quanto richiedono un approfondimento a parte per la loro vastità.

Integrare una mappa in una pagina

Il primo passo per integrare una mappa all'interno di una pagina è creare un contenitore nel quale visualizzarla. Poiché si parla di HTML, il contenitore ideale è un tag div.

<div id="map" style="position:relative;width:800px; height:600px;"></div>

Molto importante è inserire nell'attributo "style" lo stile "position:relative" poiché senza questo, il logo di Virtual Earth e la barra della scala vengono posizionati al di fuori del div contenitore perdendo la loro formattazione. Allo stesso modo, è fondamentale dare un id al div poiché l'oggetto deve essere referenziabile visto che viene utilizzato da Virtual Earth per disegnarci dentro la mappa.

Una volta scritto il codice HTML è il momento di iniettare i javascript necessari a far funzionare la mappa. Quest'operazione è quanto di più banale ci sia poiché basta mettere il seguente tag script all'interno del tag head.

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1&mkt=it-it"></script>

Come è facile immaginare, il parametro in querystring v indica la versione di Virtual Earth che si vuole usare ed è l'unico obbligatorio. Il parametro mkt specifica la localizzazione del controllo. L'effetto prodotto da questo parametro è che tutti i messaggi che vengono riportati all'utente sono nella lingua specificata.

Il passo successivo è la creazione del controllo Map, nominato in precedenza, e la sua associazione al contenitore per visualizzare la mappa.

<script type="text/javascript">
  var map;
  function pageLoad(){
    map = new VEMap('map');
    map.LoadMap();
  }
</script>
...
<body onload="pageLoad();">

Nella funzione pageLoad viene creato il controllo Map, che è una classe Javascript dal nome VEMap, passando in input l'id del controllo contenitore.

Successivamente, si utilizza il metodo loadMap per renderizzare la mappa. Quando viene utilizzato senza alcun parametro, questo metodo visualizza la mappa degli Stati Uniti e questo non è ideale quando si ha a che fare con un mercato localizzato con esigenze specifiche (un sito di prenotazione alberghiera che deve mostrare gli alberghi in una zona, una società di tracking furgoni che deve visualizzarne la posizione in italia, o altro ancora). Per essere il più aperto possibile, loadMap ha un overload al quale si possono passare molti parametri per impostare dove e come la mappa deve posizionarsi.

I parametri che loadMap accetta sono:

• Una classe VELatLong che rappresenta latitudine e longitudine del centro della mappa. Attenzione, questo significa solo che la mappa viene centrata sul punto indicato quindi nessun punto viene disegnato.
• Livello di zoom. Questo valore è un numero che va da 1 a 19 con un valore di default pari a 4. Più è alto il valore maggiore è lo zoom sul punto indicato.
• Lo stile della mappa. Lo stile è un enum di tipo VEMapStyle che può avere diversi valori:
  • Road: mappa stradale (valore di default)
  • Aerial: mappa dall'alto formata dalle foto satellitari
  • Hybrid: mappa dall'alto formata dalle foto satellitari contenente anche le indicazioni delle strade in overlay
  • Oblique, Birdseye: mappa formata da foto non dall'alto ma oblique. Virtual Earth è l'unico sistema di mappe al mondo ad offrire questa vista
  • BirdseyeHybrid: mappa in birdseye contenente anche le indicazioni delle strade in overlay
• Un booleano che indica se la mappa può essere navigata dall'utente o è fissa.
• La modalità di visualizzazione. Si tratta di un enum di tipo VEMapMode
  • 2D
  • 3D
• Un booleano che indica se visualizzare i controlli di navigazione nel controllo Map
• Il numero di "tessere" che devono essere precaricate ai quattro lati della mappa. Più è alto il numero, più è veloce la navigazione in quanto i dati sono già nella cache del browser
• Opzioni che abilitano o meno la navigazione e la Bird's Eye View

Si supponga di voler mostrare la mappa con le seguenti caratteristiche:

• Città di Roma con al centro Piazza di Spagna
• Zoom che mostri anche il resto del centro della città
• Navigazione abilitata ed il più veloce possibile per le aree intorno alla mappa iniziale

Per fare ciò, questo è lo script che si deve utilizzare.

map = new VEMap('map');
map.LoadMap(
  new VELatLong(41.90651636958651, 12.48158587325062), //latitudine e longitudine
  16, //zoom
  VEMapStyle.Road, //tipologia della mappa
  false, //mappa fissa
  VEMapMode.Mode2D, //modalità della mappa
  true, //visualizza il controllo di navigazione
  1, //numero di tessete da precaricare
  null //opzioni di abilitazione
);

A questo punto il primo step è terminato e la pagina è in grado di visualizzare una mappa.