diploD » API http://www.diplod.it by Davide Del Monte Fri, 13 Feb 2015 14:26:10 +0000 it-IT hourly 1 https://wordpress.org/?v=3.9.40 Mappe “fighe”: con snazzy maps si possono personalizzare le mappe di Google. http://www.diplod.it/2014/01/17/mappe-fighe-con-snazzy-maps-si-possono-personalizzare-le-mappe-di-google/ http://www.diplod.it/2014/01/17/mappe-fighe-con-snazzy-maps-si-possono-personalizzare-le-mappe-di-google/#comments Fri, 17 Jan 2014 08:45:34 +0000 http://www.diplod.it/?p=1434 snazzy

Le mappe di Google sono un must per qualsiasi pagina contatti, ma possono diventare anche un accattivante elemento di design di una pagina web, se non addirittura l’elemento fondamentale di un sito. Ogni tanto è bello poterle personalizzare, coi propri colori e il proprio design. Con la versione 3 delle API di Google Maps, è possibile cambiare lo stile alle mappe e personalizzarle.. ma bisogna perderci tempo, per i pigri coloro che credono nella condivisione ecco Snazzy Maps, una raccolta di mappe pronte all’uso modificate nei colori e negli elementi visualizzati, ad esempio togliendo il nome delle città o delle strade, cambiando il colore all’acqua e quant’altro..

Questo è il mio personale elenco di stili da tenere in considerazione:

  • Subtle Grayscale: va bene sempre, una mappa sulla scala dei grigi, non c’è luogo in cui non si possa mettere.
  • Blue Water: sempre scala di grigi, ma il blu dell’acqua accende tutto.
  • Lunar landscape: dark style, una mappa nera nera per chi non può rinunciare alla notte.
  • Paper: da architetto, punto.
  • Unimposed topography: senza nulla, nemmeno le strade.

Buone mappe a tutti.

]]> http://www.diplod.it/2014/01/17/mappe-fighe-con-snazzy-maps-si-possono-personalizzare-le-mappe-di-google/feed/ 1 Google Earth Plugin: visualizzare KML su una pagina web HTML http://www.diplod.it/2009/08/16/google-earth-plugin-visualizzare-kml-su-una-pagina-web-html/ http://www.diplod.it/2009/08/16/google-earth-plugin-visualizzare-kml-su-una-pagina-web-html/#comments Sun, 16 Aug 2009 18:55:18 +0000 http://www.diplod.it/?p=791 earth-plugin

Google Earth è diventato ormai uno strumento dalle mille potenzialità: esplorazione degli oceani, fotografie, edifici e terreni in 3D, visione dei luoghi nel tempo, registrazione dello schermo, sono solo alcune delle meraviglie del prodotto.

La possibilità di utilizzare file KML generati da altri è un’altra delle cose che rendono Google Earth uno strumento eccezionale per far visualizzare percorsi, itinerari, foto dei luoghi e quant’altro. Le informazioni geolocalizzate permettono di dare al fruitore un contributo unico: vedere i posti vale molto di più che descriverli.

Ebbene, da qualche tempo è disponibile un plugin che permette di portare Google Earth direttamente sulle pagine web, grazie alle Google Earth API. E’ infatti possibile inserire in una pagina web una finestra che visualizza il famoso mondo 3D, caricando un file KML.
Nel futuro non saremo più legati al 2D delle famosissime mappe di Google, ma potremo creare mashup direttamente in 3D. Gli esempi di codice sono davvero vasti e ben documentati.

Ecco il codice dell’esempio sotto, commentato nel javascript che carica il plugin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT">
<head>
<title>Esempio Plugin Google Earth con file KML</title>
<script src="http://www.google.com/jsapi?key=LaTuaAPIKey"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
//inizializza la mappa prendendo come riferimento l'ID del div che la contiene: map3d
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// aggiunge i controlli di navigazione
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// aggiunge alcuni livelli: confini e strade
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
// codice per caricare e far visualizzare il file KML
function finished(object) {
if (!object) {
// Gestione degli errori per prevenire i deadlock di alcuni browsers
setTimeout(function() {
alert('Bad or null KML.');
}, 0);
return;
}
ge.getFeatures().appendChild(object);
// imposta latitudine, longitudine e zoom
var la = ge.createLookAt('');
la.set(44.258300, 10.411550, 25, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 70, 400);
ge.getView().setAbstractView(la);
}
// carica il file KML
var url = 'http://www.diplod.it/wp-content/uploads/2009/08/AlbaCusna.kml';
google.earth.fetchKml(ge, url, finished);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="width: 500px; height: 380px;"></div>
</body>
</html>
Ovviamente per far andare il tutto è necessario ottenere una API Key, fornita gratuitamente da Google per il proprio dominio.
Il giochino è davvero meraviglioso, ecco come appare il tutto:

Se vi interessa sapere come ho fatto a generare questo file KML, provate a sbirciare qui: con un cellulare Nokia potrebbe aprirsi un altro mondo.. ;)

]]> http://www.diplod.it/2009/08/16/google-earth-plugin-visualizzare-kml-su-una-pagina-web-html/feed/ 4 Qualche prova con Google Books API http://www.diplod.it/2008/09/23/qualche-prova-con-google-books-api/ http://www.diplod.it/2008/09/23/qualche-prova-con-google-books-api/#comments Tue, 23 Sep 2008 08:59:53 +0000 http://www.diplod.it/?p=683 Ogni tanto mi diverto giocherellando con le API di Google. Ultimamente sul blog ufficiale è stata annunciata l’uscita delle API per Google Books. Per gli sviluppatori significa l’opportunità di includere un visualizzatore di libri direttamente nel proprio sito web, penso subito ai siti di librerie on-line, biblioteche, ma anche piattaforme di e-learning. E’ ciò che è successo su famosi siti di vendita libri, come Books-A-Million, dove dalla pagina di acquisto è possibile vedere l’anteprima tramite il lettore di google. Stessa cosa hanno fatto alcuni siti di biblioteche universitarie, come quella della california o del texas, e alcuni siti di autori o social network. Un bell’elenco con riferimenti dai quali prendere spunto si può trovare sul blog ufficiale di Google Books.

Per chi sviluppa siti web, l’inclusione di un visualizzatore è semplicissima. E’ disponibile un wizard tramite il quale si può generare in automatico il codice da inserire nell’HTML, basta fare un copia&incolla ed il gioco è fatto. Il risultato lo potete vedere qui sotto:

Ma le possibilità di personalizzazione vanno al di là del semplice javascript esterno, gli sviluppatori possono infatti intervenire direttamente sul codice seguento le istruzioni fornite nella pagina di documentazione delle API, che illustra in maniera chiara come utilizzare le API. L’esempio base si capisce al volo:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Book Search Embedded Viewer API Example</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("books", "0");
function initialize() {
var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
viewer.load('ISBN:0738531367');
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="viewerCanvas" style="width: 600px; height: 500px"></div>
</body>
</html>

Uno script richiamato nell’head e un div nel quale caricare il visualizzatore, impostandone le dimensioni. In questo modo si può integrare il lettore direttamente nel proprio layout, i libri da caricare sono identificabili tramite diversi parametri:

  • codice ISBN (come nell’esempio sopra): è il codice internazionale che identifica una pubblicazione
  • OCLC: è il numero assegnato da OCLC quando il libro viene pubblicato su WorldCat
  • LCCN: codice assegnato dal Library of Congress
  • codice di Google Books Search: sia tramite l’id univoco che tramite l’url di visualizzazione del libro su Books Search.

Chi vuole sbizzarrirsi è libero di farlo..

La digitalizzazione dei libri da parte di Google partì in sordina tra mille polemiche, oggi invece si rivela in tutta la sua utilità. Se penso alla biblioteca cittadina, o ancora meglio alla biblioteca universitaria; se solo avesse un sito che permetta la consultazione a distanza di un libro a catalogo, sarebbe sicuramente un valore aggiunto.

]]> http://www.diplod.it/2008/09/23/qualche-prova-con-google-books-api/feed/ 1 Google Chart API: grafici dinamici in un attimo http://www.diplod.it/2008/04/20/google-chart-api-grafici-dinamici-in-un-attimo/ http://www.diplod.it/2008/04/20/google-chart-api-grafici-dinamici-in-un-attimo/#comments Sun, 20 Apr 2008 17:49:15 +0000 http://www.diplod.it/2008/04/20/google-chart-api-grafici-dinamici-in-un-attimo/ Le Google API Charts sono un insieme di procedure disponibili ai programmatori web per ottenere dei grafici a partire da un semplice url. Si tratta forse delle “Application Programming Interface” più semplici mai messe a disposizione da Google. Il servizio è gratuito, è possibile utilizzarlo senza dover registrare nessuna API key (come invece avviene per Google Maps API) e non ci sono limiti di interrogazioni.

All’interno di un indirizzo web vengono passati i dati per la costruzione del grafico, sottoforma di parametri, e Google ci restituisce una immagine realizzata a partire da quei dati. Quale migliore occasione dei dati elettorali per fare qualche prova?

La documentazione (in inglese) è impeccabile, sono presenti un sacco di esempi che aiutano lo sviluppatore. Ho costruito la torta dei risultati elettorali del mio paese, sulla base di questo url.

http://chart.apis.google.com/chart?chs=800x300&chd=t:0.88,4.1,0.27,0.43,2.96,23.69,6.69,2.19,0.46,4.55,52.33,0.51,0.58,0.37&cht=p3&chco=990000,ebebeb,d1dceb,000000,ff0000,0090ff,1db000,373737,fff94a,db4aff,31a142,ab4800,6e00a7,bc424b&chl=PARTITO%20COMUNISTA%20LAVORATORI|UDC|PARTITO%20LIBERALE%20ITALIANO|FORZA%20NUOVA|LA%20SINISTRA%20L'ARCOBALENO|IL%20POPOLO%20DELLA%20LIBERTA'|LEGA%20NORD|LA%20DESTRA|UNIONE%20PER%20I%20CONSUMATORI|ITALIA%20DEI%20VALORI|PARTITO%20DEMOCRATICO|SINISTRA%20CRITICA|PER%20IL%20BENE%20COMUNE|PARTITO%20SOCIALISTA

Vediamolo commentato:

http://chart.apis.google.com/chart?

chs=800x300 <!--dimensioni del grafico in pixel-->
&chd=t:4.1,2.96,23.69,6.69,2.19,4.55,52.33,0.37,3.12 <!--serie di dati: percentuali-->
&cht=p3 <!--tipo di grafico: a torta-->
&chco=ebebeb,ff0000,0090ff,1db000,373737,db4aff,31a142,bc424b,ffcc00 <!--colori delle fette--> &chl=UDC|SINISTRA%20L'ARCOBALENO|POPOLO%20DELLA%20LIBERTA'|LEGA%20NORD|LA%20DESTRA|ITALIA%20DEI%20VALORI|PARTITO%20DEMOCRATICO|PARTITO%20SOCIALISTA|ALTRI <!--etichette dei dati-->

Per ottenere l’immagine direttamente sulla pagina web, basta inserire l’url appena costruito nel tag <img> avendo cura di convertire i caratteri ‘&’ in ‘&’, in questo modo:

<img src="http://chart.apis.google.com/chart?
chs=800x300
&chd=t:4.1,2.96,23.69,6.69,2.19,4.55,52.33,0.37,3.12
&cht=p3
&chco=ebebeb,ff0000,0090ff,1db000,373737,db4aff,31a142,bc424b,ffcc00
&chl=UDC|SINISTRA%20L'ARCOBALENO|POPOLO%20DELLA%20LIBERTA'|LEGA%20NORD|LA%20DESTRA|ITALIA%20DEI%20VALORI|PARTITO%20DEMOCRATICO|PARTITO%20SOCIALISTA|ALTRI" alt="risultati senato" />

Ed ecco il risultato finale, per i voti al Senato della Repubblica.

risultati senato

Se vi interessa anche la Camera dei Deputati.. Tanto ormai avrete capito che vivo in Emilia. :)

risultati camera

Decisamente comodo il servizio, soprattutto se dobbiamo trattare dati variabili, magari estratti da un database: come dati finanziari o altro. Non a caso infatti il servizio è utilizzato su Google Finance.
L’unica cosa che mi lascia perplesso è l’impossibilità di scrivere i valori sul grafico, cosa che potrebbe essere utile soprattutto per i grafici a torta. Nei grafici a barre invece è possibile assegnare valori sugli assi.

Google fornisce anche un esempio di javascript per la realizzazione automatica di un grafico a partire da un array di dati. Se invece volete qualcosa di più visuale, c’è già chi ha pensato al Google Chart Generator oppure al Google Graph Builder, dove è possibile ottenere il codice dell’url grazie a un comodo editor on-line.

Ma non è finita qui, le APIs Chart permettono anche di creare grafici sulla base di cartine geografiche. Il concetto è sempre quello: un url con diversi parametri. Ed ecco che cosa si può ottenere:

cartina europa

Questo il codice:

<img src="http://chart.apis.google.com/chart?cht=t&chs=440x220&chd=s:Af9&chtm=europe&chco=ffffff,edf0d4,13390a&chld=FRITNL&chf=bg,s,EAF7FE" alt="cartina europa" />

Si potrebbe sfruttare per segnalare la presenza di dispositivi mobili su un’area geografica, colorando con un gradiente le aree più dense.. Insomma: in tutte quelle situazioni in cui c’è esigenza di mappare in maniere automatica dati in evoluzione.

Se penso al diffondersi dei palmari e alle crescenti esigenze di geolocalizzazone gli scenari sono molteplici. Ma anche senza vagare troppo con l’immaginazione, basta pensare alla monitorizzazione degli accessi a una pagina web, a sondaggi, alla pubblicazione di dati finanziari.. Quello di Google Charts è un servizio veloce (i tempi di risposta sono immediati) e soprattutto gratuito.

L’unico limite sono 250000 chiamate al giorno, se pensate di superarle meglio avvisare via mail.

]]> http://www.diplod.it/2008/04/20/google-chart-api-grafici-dinamici-in-un-attimo/feed/ 4