In rete c’è più di una soluzione per combinare GoogleMap ed Asp.Net ma spesso sono a pagamento oppure portano in dote fastidiose pubblicità. Ho quindi deciso di cominciare a scrivere un controllo tutto mio, il quale permette di sfruttare solo pochi aspetti del servizio in questione ma che spero di far evolvere nel tempo libero.

L’utilizzo del controllo è molto semplice, dopo averlo registrato è possible inserirlo nella pagina con il seguente codice di esempio.

<gmnet:map ID="mymap" runat="server" zoom="7" centerlat="40.6133"
centerlon="14.2525" />


L’attributo zoom rappresenta l’ingradimento della mappa e può variare da 0(massimo dettaglio ) a 12(Visione di tutto il globo), mentre centerlat e centerlon sono le coordinate geografiche del punto sul quale sarà centrata la mappa. Altri attributi possibili sono mapControl, che definisce i controlli di cui dotare la mappa, ed height e width che rappresentano la grandezza.
Le modifiche agli attributi possono essere fatte anche da codice come segue.


mymap.setSize(400,400);
mymap.setMapControls(map.GSmallZoomControl);

Nello spezzone appena mostrato viene settata la grandezza della mappa a 400×400 pixel con il metodo setSize, successivamente vengono inseriti i controlli SmallZoom, ovvero le frecce di movimento sulla mappa ed i tasti di zoom-in e zoom-out, tutti i possibili valori da passare a setMapControls sono definiti come membri statici nella classe map con nomi del tipo GxxxxxxxControl.

Delle tante funzionalità di GoogleMap i Marker sono la prima funzionalità complessa di lavoro sulla mappa implementata da questo controllo. Per creare un marker è necessario passare al costruttore le coordinate geografice della posizione in cui piazzarlo e una stringa che sarà visualizzata al click su di esso come in figura.


new Marker(14.4032, 40.8011, "Un punto nel Golfo")


Mentre per inserire dei marker è necessario creare un’ArrayList ed e passarlo al metodo setMarker. E’ quindi facile immaginare come sia semplice piazzare marker in base a dati letti da un database.

ArrayList markers = new ArrayList();
markers.Add(new Marker(14.2032, 40.9021, "A place..."));
markers.Add(new Marker(14.4032, 40.8011, "Another Place!"));
mymap.setMarkers(markers);


Spero in futuro di aggiungere buona parte delle funzionalità di GoogleMap, il prossimo step sarà quello di dare la posibilità di usare icone diverse per ogni marker e disegnare qualche polilinea. Per chi volesse divertirsi con le primisissime righe di codice scritte puo effettuarne qui il download.

Da quanche giorno nella sezione arts sono esposte le immagini caricate nel mio spazio flickr, più di una persona mi ha chiesto come faccia ad avere quel badge e contemporaneamente a mantenere la pagina valida per gli standard W3C.
Basta creare un badge HTML dalla pagina http://www.flickr.com/badge.gne ed estrarre il codice javascript, il quale sarà simile al seguente:

<script type="text/javascript"src="http://www.flickr.com/badge_code_v2.gne?...
</script>

Esso dipende dalle scelte fatte durante la creazione ma è semplice distinguere alcuni parametri. Ad esempio count è il numero di immagini da visualizzare, display indica se si vogliono avere solo le ultime immagini inserite (valore “latest”) o scelte casualmente (valore “random”) e cosi’ via. Per generare la stringa adatta alle proprie esigenze è bene provare le varie opzioni del wizard offerto da flickr ed infine se prorio non si è contenti del risultato andare a modificare la stringa manualmente.
In questo modo abbiamo cancellato lo stile creato in automatico, il risultato sarà qualcosa di simile alle quattro immagini disposte senza spaziatura nella figura.

Possiamo creare uno stile personalizzato per la disposizione nel seguente modo

<div id="myflickr">
<script type="text/javascript"
src="http://www.flickr.com/badge_code_v2.gne?…"></script>
</div>

ed aggiungere al css della pagina le definizioni per il box myflick e le immagini in esso contenute.

#myflickr {
background: #CCCCCC;
padding:10px;
}


#myflickr img {
float:left;
border-color:#666666;
padding:4px;
}

Adesso avete un box con sfondo grigio ed immagini distanziate di 4 pixel con bordo. In questo modo si sfruttano direttamente le immagini esposte da flickr, un vero tocco d’interoperabilità ma che ci lega ed un sistema gestito da yahoo.