Con questo CODE-IT approfondiremo un esempio visto durante la carrellata di effetti speciali su Google Maps. Abbiamo personalizzato la pagina che potete trovare linkata nella trascrizione, e creato un modo originale di esporre il classico link 'dove siamo' di un sito. L'utente digitera' la localita' in cui si trova e vedra' una macchinina correre lungo la mappa verso la destinazione che abbiamo nascosto all'interno della nostra pagina. Vediamo nel dettaglio come funziona.
Il codice che scriveremo sfrutta un file di nome epoly.js che contiene le direttive principali utili a recuperare la distanza tra due punti in una mappa e altre funzioni che utilizzeremo nel corso del nostro esempio. Lo scopo è quello di disegnare piu' volte consecutivamente un marker simboleggiato dalla nostra macchinina e di fornire cosi' un effetto simile al movimento della macchina lungo una traiettoria.
<script src="epoly.js" type="text/javascript"></script>
Le basi principali della nostra pagina saranno quindi, lo script epoly e chiave di google che ci viene fornita dal sito di Google Maps.
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAJDLv3q8BFBryRorw-851MRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTyuslsNlFqyphYqv1PCUD8WrZA2A" type="text/javascript"></script>
Successivamente disegneremo un semplice CSS per poter esporre il titolo della nostra pagina, e una zona in cui diamo le indicazioni all'utente su come utilizzare il servizio che stiamo costruendo. Per realizzare il modulo inseriremo un tag input di tipo text che ci servirà per memorizzare lo startpoint dell'utente, successivamente inseriamo l'endpoint in un input type di tipo hidden ovvero nascosto. Questi campi sono molto utili quando si vogliono inserire delle informazioni che i nostri servizi devono poter utilizzare o inviare, ma non le si vuole mostrare all'utente. In questo campo inseriamo l'indirizzo di destinazione del percorso che vogliamo tracciare sulla mappa. Infine inseriamo un pulsante di tipo submit che inviera' il modulo.
<form onsubmit="start();return false" action="#">
<br>IcTV si trova a Roma in Viale Franco Angeli, e voi?<br>Scrivete dove vi trovate e vedrete il percorso utile a raggiungerci.<br /><br />
<input type="text" size="80" maxlength="200" id="startpoint" value="" /><br />
<input type="hidden" size="80" maxlength="200" id="endpoint" value="Roma, Viale Franco Angeli, 5 - 00155" /><br />
<input type="submit" value="Raggiungici" />
</form>
Possiamo notare che il modulo ha un attributo action uguale a cancelletto. Cosi' facendo indirizziamo la pagina a se' stessa, dentro ad action infatti si deve inserire il nome della pagina che riceverà i dati del modulo. Notiamo inoltre che il modulo ha un attributo di tipo onsubmit che, quando sarà il momento di inviare i dati, istruira' il browser a lanciare la funzione start contenuta nel nostro codice javascript.
Andando alla funzione start vediamo la chiamata al servizio loadFromWaypoints. Per una documentazione completa riguardante i metodi associati all'oggetto GDirection rimandiamo lo spettatore al link relativo nelle API di Google. Se ci si vuole attenere a un livello piu' superficiale, basti sapere che con questa chiamata Google Map carica un array di punti che gli serviranno successivamente per disegnare il percorso all'interno della zona identificata dall'oggetto map.
dirn.loadFromWaypoints([startpoint,endpoint],{getPolyline:true,getSteps:true});
L'effetto animazione avviene grazie alla chiamata temporizzata della funzione animate. Vengono utilizzati infatti gli eventi da associare a una mappa grazie all'oggetto GEvent. Con questo istruiamo il browser al comportamento adatto a seconda che siamo in una condizione di load o di error della mappa.
Se siamo in load gli forniamo le istruzioni che occorrono per caricare le informazioni relative ad ogni step del nostro percorso, dopodiché spostiamo il nostro Marker nella posizione successiva. Il codice di questa funzione e' leggermente piu' complesso rispetto a quelli che abbiamo visto normalmente nei nostri CODE-IT, lo spettatore piu' curioso puo' arrivare comunque a comprendere facilmente cio' che succede, confrontandosi con il codice di epoly.js e con le API di Google Map per le chiamate piu' complesse.
Al di la' della difficolta' apparente e' comunque intuitivo comprendere cio' che si intende fare nella funzione javascript che abbiamo visto. Il div con il modulo viene posto con l'attributo display uguale a none in modo che scompaia quando la pagina riceve i dati da caricare nella mappa. Successivamente i layer con id uguale a step, path e distance vengono riscritti ad ogni passaggio della funzione animate in modo da dare l'illusione di un testo che scorre contemporaneamente alla percorrenza della macchinina sul tragitto.
if (d>eol) {
document.getElementById("step").innerHTML = "<b>Viaggio completato<\/b>";
document.getElementById("distance").innerHTML = "Miglia: "+(d/1609.344).toFixed(2);
return;
}
var p = poly.GetPointAtDistance(d);
if (k++>=180/step) {
map.panTo(p);
k=0;
}
marker.setPoint(p);
document.getElementById("distance").innerHTML = "Miglia: "+ (d/1609.344).toFixed(2)+speed;
Ogni step viene utilizzato per poter disegnare lo step successivo. La posizione corrente infatti è uguale all'argomento di animate, ma questo non e' altro che il risultato della posizione corrente piu' step, come vediamo bene nel codice.
setTimeout("animate("+(d+step)+")", tick);
Personalizzare questo esempio e' molto semplice. Il codice che scaricate da questa pagina potra' essere rivisto a piacere per qualsiasi scopo vi venga in mente, a patto che manteniate e citiate gli autori della librerie epolys e dell'esempio originale a cui ci siamo ispirati. Come abbiamo visto, le API di Google Maps ci permettono di poter realizzare una pagina complessa con poche righe di codice; per questo motivo, molta della logica di questa pagina e' nascosta all'utente medio ma comunque comprensibile.
