lunedì 30 novembre 2009

Visualizzazione markers su una Yahoo! Map

Complichiamo solo leggermente il codice presente nel post precedente per consentire la visualizzazione di due markers sui quali viene associata la visualizzazione di un testo se vi ci si clicca sopra.
Il marker viene visualizzato attraverso il metodo map.addOverlay(); ad esso viene associato l' l'evento MouseClick al cui verificarsi verrà elaborata la funzione openSmartWindow.

Segue la parte di codice che gestisce il tutto e naturalmente, potrete vedere il risultato cliccando qui.

// Crea il primo marker
var marker1 = new YMarker("Viale Italia, 40, la spezia, italia");
// Stringa da visualizzare cliccando sul primo marker
var contenuto1 = "

Qui ho abitato dalla nascita al 1990

";
// Apre una finestra al verificarsi dell'evento 'click' sul marker
YEvent.Capture(marker1, EventsList.MouseClick,
function() {
marker1.openSmartWindow(contenuto1);
});
// Visualizza il marker
map.addOverlay(marker1);

// Crea il secondo marker
var marker2 = new YMarker("Via pontegrande 120, la spezia, italia");
// Stringa da visualizzare cliccando sul secondo marker
var contenuto2 = "

Qui ho vissuto dal 1990 al 2000

";
// Apre una finestra al verificarsi dell'evento 'click' sul marker
YEvent.Capture(marker2, EventsList.MouseClick,
function() {
marker2.openSmartWindow(contenuto2);
});
// Visualizza il marker
map.addOverlay(marker2);


Per semplicità mi sono limitato a ripetere per ogni marker i passi necessari alla loro visualizzazione. Volendo ricercare una soluzione più raffinata, avremmo potuto includere i dati da visualizzare in un array e visualizzare il tutto tramite un ciclo iterativo. Ma questo potrebbe essere oggetto di un ulteriore post.
Alla prossima.

giovedì 26 novembre 2009

Introduzione alle Yahoo! Maps

Sempre stimolato da digitaladoptive, unico antidoto contro la cronica mancanza di tempo necessaria per riempire di contenuti questo blog, stavolta voglio introdurre ai neofiti del mashup le API di Yahoo! Maps.
Per chi ha avuto la pazienza di leggere i miei post riguardanti le API di Google Maps, si accorgerà che i metodi e le sintassi sono molto molto simili.
Il semplice obiettivo di questo post è di inserire una Yahoo! Map, centrata in un particolare punto del globo terracqueo, in una pagina web.
Per iniziare a lavorare, abbiamo bisogno di un account Yahoo! su quale chiedere una chiave ("application id"). Almeno nelle prime fasi, non avremo bisogno di uno spazio web: a differenza delle API di Google Maps, le API di Yahoo! Maps lavorano anche in locale, cioè sul proprio PC (purchè collegato alla Rete, evidentemente)

Per chiedere la chiave, come si diceva, è necessario avere un account Yahoo! e andare alla seguente pagina

Si presenterà la seguente schermata dove inserire alcuni dati:



Alcune delucidazioni:

1. Il Vostro account Yahoo! apparirà di default
2. Selezionate "Generic"
3. Potete inserire qualunque cosa
4. Potete inserire qualunque cosa
5. Non è un campo obbligatorio ma, a vostra futura memoria, suggerisco di inserire l'indirizzo della pagina web dove inserirete la mappa
6. Inserite la vostra e-mail
7. Inserite una breve descrizione

Il resto non consideratelo.

Nella pagina che segue otterrete una stringa di caratteri che copierete nel codice qui in basso dove indicato.



Il codice è diffusamente commentato, non dovreste avere problemi di comprensione (ma sono qui a vostra disposizione!)


<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid= INSERITE_QUI_LA_YAHOO_ID_RICHIESTA_SUL_SITO"></script>

<!-- Definizione struttura pagina: messa la mappa di dimensioni 550x450 px //-->

<style type="text/css">
#spaziomappa {
width: 550px;
height: 450px;
align: center;}
</style>

</head>

<body>
<div id="spaziomappa" align="center"></div>
<script type="text/javascript">

// centra la mappa alle coordinate indicate (lat, long)
var lat = 44.063889;
var long = 9.883333;

// definizione coppia di coordinate che identificano il Golfo della Spezia
var punto = new YGeoPoint(lat, long);
var livellozoom = 7

// Definisce l'oggetto map che caricherà una mappa nell'elemento "spaziomappa" della pagina web
var map = new YMap(document.getElementById('spaziomappa'));

// Aggiunge la barra di controllo che consente tre tipi di visualizzazione:
// cartina (REG), satellite (SAT) e ibrida (HYB)
map.addTypeControl();

// Aggiunge il controllo per lo zoom
map.addZoomLong();

// Imposta il tipo di mappa, in questo caso ibrida; per altri tipi di visualizzazione
// Si può usare SAT (satellite) o REG (cartina)
map.setMapType(YAHOO_MAP_HYB);

// Mostra la mappa centrata alle coordinate definite dalla variabile 'punto'al
// livello 7 di zoom
map.drawZoomAndCenter(punto, livellozoom);

</script>
</body>

Il risultato lo potete trovare qui.
Nelle prossime puntate cercheremo di fare qualcosa di più, per adesso mi limito a suggerirvi i links alla documentazione ufficiale di Yahoo! Maps API (inglese):