Archive for the 'api' Category

Query spaziali su Google Fusion Tables

E’ stata da poco rilasciata una nuova funzionalità per l’utilizzo delle Google Fusion Tables. L’ottimo servizio di gestione dei dati by Google da questo momento supporta anche le query spaziali!
Diverse sono le possibilità, tra cui determinare i punti di interesse che si trovano all’interno di una determinata area (rettangolare o circolare) oppure determinare il numero di elementi desiderati che si trovano nelle vicinanze di una particolare coppia di coordinate.

Stavolta la mia scelta è quella di non apportare particolari modifiche al codice riportato da Google e di farvi vedere solo uno degli esempi.
Mi sono limitato dunque a prendere dei dati già presenti in Internet (più precisamente l’indirizzo degli uffici postali presenti nella Provincia di Rimini) e li ho caricati in una Google Fusion Table, registrata all’indirizzo http://tables.googlelabs.com/DataSource?dsrcid=305567 . Il caso che vi propongo è quello di selezionare gli “n” uffici postali più vicini a un determinato punto della mappa.

Quello che è davvero interessante è che, per implementare la selezione all’interno del codice javascript, viene utilizzata una notazione “SQL-like” e quindi di facile comprensione

query: “SELECT indirizzo FROM ” + tableid + ” ORDER BY ST_DISTANCE(indirizzo, LATLNG(44.03, 12.56)) LIMIT 5″

tableid è la variabile che contiene il nome della Fusion Table, per il resto si tratta di una semplice query SQL dove i parametri sono il punto da cui calcolare le distanze (44.03, 12.56) e LIMIT, cioè il numero di punti da considerare (nel nostro caso 5)

Il codice finale è questo:

<!DOCTYPE html>

<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>

<style>
#map_canvas { height: 300px; width:600px; }
</style>

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”&gt;
<script type=”text/javascript”>

// definisce la tabella di Google Fusion da caricare

var tableid = 305567;

function initialize() {

map = new google.maps.Map(document.getElementById(‘map_canvas’), {
center: new google.maps.LatLng(44.03, 12.56),
zoom: 10,
disableDefaultUI: true,
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.MEDIUM},
mapTypeId: google.maps.MapTypeId.ROADMAP  });

//definisce il layer da visualizzare: la query e’ di tipo ‘Simil SQL’ e seleziona i 5 indirizzi (parametro LIMIT) più vicini al punto con coordinate 44.03 12.56
layer = new google.maps.FusionTablesLayer(tableid, {
query: “SELECT indirizzo FROM ” + tableid + ” ORDER BY ST_DISTANCE(indirizzo, LATLNG(44.03, 12.56)) LIMIT 5”  }
);
layer.setMap(map);

}
</script>
</head>
<  body onload=”initialize()”>
<div id=”map_canvas”>

</body>
</html>

mentre il risultato lo potete trovare qui.

Inutile dire che le potenzialità sono infinite. Potremmo infatti gestire come variabili sia il punto da cui calcolare le distanze (magari prendendola da un dispositivo mobile una volta impostato il parametro sensor a yes), sia il numero di markers da considerare (attraverso un FORM dal quale ricavare in input detto parametro).

Nella documentazione ufficiale Google Fusion Tables potete trovare gli altri esempi, fate qualche esperimento e… buon divertimento.

Linkografia

@ Search your geo data using spatial queries from Fusion Tables!
@ Google Fusion Table API

Annunci

Inserimento markers su Google Maps V3

Dopo l’articolo nel quale abbiamo imparato a visualizzare una semplice Google Map V3, tentiamo di costruire qualcosa di più utile. L’esigenza potrebbe essere quella di visualizzare su di una mappa centrata una serie di punti particolari.
Con lo scopo di facilitare la comprensione dei termini utilizzati, ricordo che secondo le specifiche di Google Maps tutto ciò che può essere identificato da coordinate geografiche é definito overlay. Un particolare tipo di overlay è il marker, cioè il singolo punto sistemato su una mappa.
Nell’esempio che vi propongo, su una Google Map vengono visualizzati i markers relativi ai luoghi dove ho abitato io e alcuni elementi della mia famiglia. Al passaggio del mouse su ogni marker viene visualizzato il tipo di scuola.
Prima  di cominciare abbiamo bisogno delle coordinate dei punti che desideriamo visualizzare. A tale scopo o annotiamo i dati forniti dal nostro gps oppure utilizziamo applicazioni di geocoding, in grado di estrarre le coordinate da un indirizzo. Possiamo far riferimento a servizi come http://mygeoposition.com/ .

Una volta ottenuti i dati, si tratta di “passarli” al nostro codice. La scelta che ho fatto è stata quella di caricare i dati in tre vettori (array), uno per le latitudini, uno per le longitudini e uno per le descrizioni dei markers.
In fase di visualizzazione, i dati dei vettori verranno letti attraverso un ciclo iterativo for.

var i = 0;
for (i=0; i<lat[1].length; i++)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat[i], long[i]),
map: map, title: descr[i] });
}

Il risultato lo trovate qui mentre qui sotto potete esaminare un estratto del codice usato.

<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?
                 sensor=false”></script>
<script type=”text/javascript”>

function carica_variabili() {

//definizione coordinate su cui centrare la mappa
var lat_centro = “44.114773”;
var long_centro = “9.8517”;

//inizializzazione vettori
var lat = new Array();
var long = new Array();
var descr = new Array();

//popolamento vettori. Per aggiungere punti è sufficiente inserire una nuova terna di
// valori:  lat[4], long[4], descr[4] e cosi’ via

lat[0] = “44.111206”;
long[0] = “9.834749”;
descr[0] = “Qui ho abitato fino al 1990”;

lat[1] = “44.117701”;
long[1] = “9.871722”;
descr[1] = “Qui ho abitato fino al 2000”;

lat[2] = “44.113025”;
long[2] = “9.843195”;
descr[2] = “Qui abita mia zia Maria”;

lat[3] = “44.118320”;
long[3] = “9.846319”;
descr[3] = “Qui abita mia sorella”;

//Opzioni della mappa: zoom livello 14, centrata su un punto particolare,
//modalità IBRIDA

var Opzioni = {
        zoom: 14, center: new google.maps.LatLng(lat_centro, long_centro),
        mapTypeId: google.maps.MapTypeId.HYBRID,
       scaleControl: false    }

var map = new google.maps.Map(document.getElementById(“map_canvas”), Opzioni);

//ciclo FOR per la lettura dei valori dei vettori e relativa visualizzazione su
//mappa

var i = 0;
for (i=0; i<lat[1].length; i++)
    {  var marker = new google.maps.Marker({
       position: new google.maps.LatLng(lat[i], long[i]),
      map: map, title: descr[i] });
    }

}
</script>
</head>

<body style=”margin:5px; padding:2px;” onload=”carica_variabili()”>

<div id=”map_canvas” style=”width: 60%; height: 60%;”></div>

</body>
</html>

Linkografia
@ Maps API V3 Overlays  (Google Code – inglese)
@ Esempio visualizzazione markers singolo (Google Code – inglese)

Applicazioni per Android: predisporre e configurare l’ambiente di sviluppo

 Android è il sistema operativo per dispositivi mobili più citato del momento. Per chi desidera cimentarsi con lo sviluppo di applicazioni, ecco il primo di alcuni tutorials.

Le istruzioni che seguono riguardano l’installazione di ambiente e tools Android SDK (Android Software Development Kit) su S.O. Windows.
La prima cosa da fare è naturalmente quella di scaricare il pacchetto SDK, che potete trovare qui. Una volta scompattato il file, troverete i files nella cartella 

android-sdk-windows

Per comodità, può essere rinominata in ‘android‘ e collocata nella root

c:\android

Per cominciare, cliccare su Setup. L’applicazione tenterà di collegarsi ad Internet per scaricare il resto dei files.

Può capitare che subito venga visualizzato l’errore

Failed to fetch URL https://dl-ssl.google.com/android/repository/repository.xml

In questo caso cliccate su “Settings” (menu a sinistra) e mettete il segno di spunta su:

Force https://… sources to be fetched using http://…

Fatto ciò, tornate su “Available Packages” e premete nuovamente il tasto  “Refresh”.

Tutti gli strumenti di sviluppo (debugger, emulatore Android, ecc.) sono contenuti all’interno della cartella

c:\android\tools

E’ opportuno, sotto windows, impostare il percorso tra le variabil di ambiente, in modo da poter lanciare i vari tools da riga di comando senza ogni volta scrivere l’intero percorso.

Per far ciò, basta cliccare col tasto destro su Risorse del Computer (su Windows XP) o Computer (su Vista), Proprietà, Avanzate, Variabili di Ambiente, cliccare due volte su Path e aggiungere c:\android\tools dopo averlo fatto precedere da “;“.

Il passo successivo è installare Eclipse, l’ambiente di sviluppo con l’Android Development Tools (ADT) Plugin. Il pacchetto da scaricare lo potete trovare qui

Il pacchetto da scaricare è  Eclipse IDE for Java Developers (92 MB).
Una volta installato il software, è necessario fare il download dell’ADT plugin ed installarlo nell’ambiente Eclipse.

Questi i passi da seguire:

  1. Lanciate Eclipse.  Vi sarà chiesto il nome del workspace dove salvare le nostre applicazioni: c:\android\eclipseworkspace e selezionare Help, poi Install New Software
  2. Cliccare su Add
  3. Inserire un nome nel campo “Name“. Nel campo “Location” inserire  https://dl-ssl.google.com/android/eclipse/
  4. Cliccare su OK
  5. Tornando nella sezione “Available Software View“, dovreste ora vedere “Developer Tools“. Spuntare la checkbox (vedrete le voci Android DDMS e Android Development Tools). Cliccate su Next.
    Le due voci appariranno anche nella sezione “Install Details“. Cliccate su Next per accettare i termini della licenza, poi cliccate su Finish. Al messaggio di Warning (“You are installing software that contains unsigned content. The authenticity or validity of this software cannot be established. Do you want to continue with the installation?“) non vi preoccupate e date l’OK.

Adesso è necessario installare l’ADT plugin:

  1. Riavviate Eclipse, Verificate che il workspace sia quello inserito al passo 2 del paragrafo precedente.
  2. Selezionate Window, Preferences
  3. Selezionate Android dal pannello a sinistra
  4. Cliccate su Browse e andate nella directory dove si trova SDK (C:\android)
  5. Cliccate Apply, poi OK

L’ambiente di sviluppo a questo punto è pronto e configurato, vedremo in seguito come creare la nostra prima semplice applicazione. Buon lavoro!

Introduzione alle Google Maps API V3

Con questo articolo vorrei cominciare a introdurre la nuova versione (V3) delle API di Google Maps. Nexus One è alle porte, i dispositivi basati su sistema Android si moltiplicano. La versione V3 di queste API è stata appositamente progettata per funzionare perfettamente anche sui dispositivi mobili, iPhone compreso. A differenza delle “vecchie” API, non è necessario richiedere una API Key per ogni applicazione. Tutte le funzionalità sono contenute in un file javascript che viene caricato all’avvio dell’applicazione assicurando la velocità dell’esecuzione.
Il primo codice che vi propongo è davvero molto semplice e ci permetterà di visualizzare una mappa centrata in un punto ben preciso:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=false"></script>
//Il parametro sensor (true/false) indica se l'applicazione usa
//un sensore per determinare la posizione dell'utente

<script type="text/javascript">
function initialize() {
    var latlng = new google.maps.LatLng(44.112909 , 9.835415); //centra la mappa in un punto preciso
    var myOptions = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID  //imposta la mappa come ibrida.
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  <div id="map_canvas" style="width:60%;height:87%;"></div>
</body>
</html>

Il risultato finale lo potrete trovare qui.

Links utili

@ Google Maps API V3 Basics

@ Map V3 Tutorial

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 550×450 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):

La febbre suina vista da Google Maps, API e mashups

Riprendo a scrivere su questo blog, fermo da un po’, non per scopi didattici ma per documentare i preziosi contributi che Google Maps e API possono avere nella nostra vita quotidiana.
La triste vicenda è quella della febbre suina. Diversi ricercatori hanno scelto di creare mappe dove geolocalizzare i casi di febbre suina dando un quadro della diffusione del virus. Ecco i principale esempi:

Google Map di Niman (Biomedical Research Pittsburgh, USA)

Mibazaar
Interessante mashup tra Google Maps e Twitter: sulla mappa vengono visualizzati in tempo reale i tweets le cui keywords riguardano la febbre suina

Mapa de Influenza

2009 Swine Flu (H1N1) Outbreak Map

Human swine flu map
Mashup tra Google Maps e The Guardian

Segnalo infine il Google Doc Swine flu case by case.

I primi controlli e metodi nell’utilizzo delle Google Maps

Cominciamo a fare qualche modifica sul file dell’articolo precedente per rendere ancora piu’ utile il nostro lavoro.
La mappa del post precedente non ci consentiva nè di muoverci nella mappa nè di zoomare attravero i classici comandi di Google Maps. Supponiamo di avere la necessità di inserire tali controlli. Supponiamo inoltre di avere l’esigenza di inserire nel nostro sito una mappa centrata su un particolare punto, inserendo in quello stesso punto una descrizione.
Per quanto riguarda la centratura della mappa, si ricorre al metodo

map.setCenter(new GLatLng(lat, long), livellozoom);

Per fare ciò abbiamo bisogno di conoscere sia la latitudine che la longitudine (N.B. in formato decimale, non in gradi) del punto ove andremo a centrare la mappa. A tale scopo o annotiamo i dati del nostro gps oppure utilizziamo applicazioni come http://mygeoposition.com/ .
Per quanto riguarda i controlli, sarà sufficiente utilizzare i metodi

map.addControl(new GMapTypeControl());

map.addControl(new GSmallMapControl());

map.addControl(new GLargeMapControl());

map.addControl(new GScaleControl());

il primo controllo permette di selezionare il tipo di mappa (Mappa, Satellite, Ibrida); il secondo e il terzo consentono di attivare la barra di navigazione (le frecce per spostarsi) e i pulsanti per lo zoom, nelle due versioni piccola e grande; il quarto permette di visualizzare la scala della nostra mappa.
Infine, per quanto riguarda la finestra di dialogo, si utilizza il metodo

map.openInfoWindow(map.getCenter(), document.createTextNode(“testodavisualizzare”));

Il lavoro svolto finora lo potete trovare qui; segue il documento html completo.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Esempio 2</title>
<script src=”http://maps.google.com/maps?file=api&v=2
&key=ABQIAAAAynaMdsZYAs5aITp8oGFoixTaBdm2rMFwTfjoALLN-mPT1dOPXBTTmmyWoK3
otqrSo4SXBqg8UMWHOA” type=”text/javascript”></script>

<script type=”text/javascript”>

//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map”));

// ***** Centro la mappa su Spezia livello di zoom 16
map.setCenter(new GLatLng(44.111206, 9.834749), 16);

// ***** Visualizza controllo – Zoom Piccolo
map.addControl(new GSmallMapControl());

// ***** Visualizza controllo Tipo Mappa
map.addControl(new GMapTypeControl());

// ***** Visualizza la scala della mappa
map.addControl(new GScaleControl());

// ***** Apre finestra informativa
map.openInfoWindow(map.getCenter(),document.createTextNode(“La casa dove sono
nato: Viale Italia 40, La Spezia”));
}
}

//]]>
</script>
</head>
<body onload=”load()” onunload=”GUnload()”>
<div id=”map” style=”width:600px;height:400px”></div>
</body>
</html>


Annunci
Creative Commons License
Questo/a opera è pubblicato sotto una Licenza Creative Commons.

Addthis

AddThis Social Bookmark Button

Flickr Photos


%d blogger hanno fatto clic su Mi Piace per questo: