Con questo CODE-IT vi faremo vedere alcuni effetti speciali e personalizzazioni che possiamo applicare alle mappe di Google . Ad ogni esempio sarà associata qualche linea di codice, in modo da mostrarvi che anche gli effetti più complessi sono alla portata di tutti.
Vediamo ora una rapida carrellata degli esempi di cui guarderemo il codice sorgente. Nel nostro viaggio tra gli effetti speciali troveremo una mappa con dei link a funzioni di zoom e ai marker dislocati nella pagina; un'altra coppia di mappe collegate in modo che sincronizzino tra loro i movimenti del mouse; oppure una in cui le icone sono state personalizzate utilizzando alcuni dei molti simboli messi a disposizione da Google Earth. Vi forniremo i link ad alcuni esempi in cui i messaggi associati ai marker utilizzano degli stili particolari e accattivanti; e vedrete funzionalità piu' avanzate che permettono di selezionare un'area da ingrandire sulla mappa. Infine vi mostreremo uno speciale modo di fornire un itinerario tra due punti utilizzando un'animazione con una macchinina che corre lungo le strade e le autostrade, mentre la pagina ci aggiorna sulle miglia percorse e la velocità di crociera. Vediamo ora ad uno ad uno gli esempi che abbiamo appena mostrato.
I link di zoom del primo esempio è facilmente riproducibile con la funzione myzoom che trovate nel sorgente. Nel codice possiamo notare anche come i link ai marker non siano scritti nel codice html, bensi' nel javascript.
// This function zooms in or out
// its not necessary to check for out of range zoom numbers, because the API checks
function myzoom(a) {
map.setZoom(map.getZoom() + a);
}
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a><br>';
Nel secondo esempio viene utilizzata la funzione GEvent (fabio pronunzia gi ivent) delle mappe e collegati tra loro i listeners della mappa grande e della mappa piu' piccola attraverso due funzioni Move e MMove (fabio pronuncia: emme muv)
function Move(){
minimap_moving = true;
if (map_moving == false) {
minimap.setCenter(map.getCenter());
xhair.setPoint(map.getCenter());
xhair.redraw(true);
}
minimap_moving = false;
}
// This function handles what happens when the mini map moves
// If we arent moving it (i.e. if the user is moving it) move the main map to match
// and reposition the crosshair back to the centre
function MMove(){
map_moving = true;
if (minimap_moving == false) {
map.setCenter(minimap.getCenter());
xhair.setPoint(minimap.getCenter());
xhair.redraw(true);
}
map_moving = false;
}
// Listen for when the user moves either map
GEvent.addListener(map, 'move', Move);
GEvent.addListener(minimap, 'moveend', MMove);
Nel terzo esempio vediamo semplicemente delle icone estratte dalle librerie di Google Earth. Possiamo aggiungere queste icone utilizzando la funzione GIcon (gi aicon) e l'indirizzo url dell'immagine.
var martini = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal2/icon27.png", null, "http://maps.google.com/mapfiles/kml/pal2/icon27s.png");
var plane = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal2/icon56.png", null, "http://maps.google.com/mapfiles/kml/pal2/icon56s.png");
var pushpin = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal5/icon14.png", null, "http://maps.google.com/mapfiles/kml/pal5/icon14s.png");
var marker = createMarker(point,'<div style="width:240px">Some stuff to display in the First Info Window. With a <a href="http://www.econym.demon.co.uk">Link</a> to my home page</div>', martini)
Nel quarto esempio abbiamo delle descrizioni personalizzate. Ottenerle non è complesso, cosi' come abbiamo visto nel precedente esempio, infatti, utilizziamo direttamente del codice html formattato dentro all'istruzione createmarker.
var marker = createMarker(point,'<div style="background-color:#FFFF88; font-family:cursive; border:solid 3px black;" >You can use a div with<br>style settings.<br>Avoid using width settings<br>when using nowrap</div>')
Il quinto esempio della nostra carrellata non differisce dagli altri se non per il fatto che vengono inclusi dei fogli di stile a dettare le regole per formattare il contenuto html delle descrizioni dei marker.
<link type="text/css" rel="Stylesheet" media="screen" href="css/redInfoWindow.css"/>
<link type="text/css" rel="Stylesheet" media="screen" href="css/funkyBox.css"/>
<link type="text/css" rel="Stylesheet" media="screen" href="css/bubbleInfoWindow.css"/>
<link type="text/css" rel="Stylesheet" media="screen" href="css/coolBlues.css"/>
<link type="text/css" rel="Stylesheet" media="screen" href="css/opacityWindow.css"/>
Anche nel sesto esempio vediamo un modo speciale di aggiungere un marker colorato e personalizzato alle nostre mappe. Il codice in questo caso è molto semplice e standard, come possiamo vedere dal sorgente della pagina.
var icon = new GIcon();
icon.image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png';
icon.iconSize = new GSize(32, 32);
icon.iconAnchor = new GPoint(16, 16);
icon.infoWindowAnchor = new GPoint(25, 7);
opts = {
"icon": icon,
"clickable": true,
"title": "letter A",
"labelText": "A",
"labelOffset": new GSize(-6, -10)
};
var marker = new LabeledMarker(latlng, opts);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("I'm a Labeled Marker!");
});
Per quanto possa sembrare strano anche il settimo effetto speciale è altrettanto semplice. Poche righe di codice per definire la nostra proprietà di zoom. L'importante è includere la libreria dragzoom.js che trovate curiosando nel codice sorgente.
<script src="../src/dragzoom.js" type="text/javascript"></script>
E arriviamo finalmente all'ultimo esempio dove vediamo la nostra macchinina nel suo viaggio tra Bologna e Firenze. Gran parte della complessità di questo script è racchiusa nella funzione 'animate'.
function animate(d) {
if (d>eol) {
document.getElementById("step").innerHTML = "<b>Trip completed</b>";
document.getElementById("distance").innerHTML = "Miles: "+(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 = "Miles: "+(d/1609.344).toFixed(2)+speed;
if (stepnum+1 < dirn.getRoute(0).getNumSteps()) {
if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d)) {
stepnum++;
var steptext = dirn.getRoute(0).getStep(stepnum).getDescriptionHtml();
document.getElementById("step").innerHTML = "<b>Next:</b> "+steptext;
var stepdist = dirn.getRoute(0).getStep(stepnum-1).getDistance().meters;
var steptime = dirn.getRoute(0).getStep(stepnum-1).getDuration().seconds;
var stepspeed = ((stepdist/steptime) * 2.24).toFixed(0);
step = stepspeed/2.5;
speed = "<br>Current speed: " + stepspeed +" mph";
}
} else {
if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d)) {
document.getElementById("step").innerHTML = "<b>Next: Arrive at your destination</b>";
}
}
setTimeout("animate("+(d+step)+")", tick);
}
Gli esempi che abbiamo visto sono tutti relativamente semplici. Scrivete nei commenti le possibili integrazioni e mashups degli effetti che vi abbiamo mostrato in questo video e proveremo insieme a decidere l'argomento del prossimo CODE-IT.
