3.2 Visualizzatori territoriali della famiglia Google
3.2.5 Pubblicazione su Web di mappe dai contenuti geografici
3.2.5.2 Google Maps Mashup e Timeline
Come si è detto Google Maps è un’ottima piattaforma capace di accogliere ulteriori dati e accedere così velocemente a più risorse contemporaneamente. Nell’ambito del dottorato di ricerca in Storia e Informatica, in previsione di pubblicare dati su Web, è nata l’esigenza di rappresentare, oltre ad una mappa e quindi alle coordinate x, y, z dei sui elementi, un’ulteriore dimensione: il tempo. Per far questo, si è deciso di sperimentare la creazione di una pagina Web che contenga Google Maps e lo strumento Timeline del progetto SIMILE25 (Semantic Interoperability of Metadata and Information in unLike Environments).
Timeline è una DHTML in base AJAX che aiuta a comprendere gli eventi che si sono susseguiti nella storia grazie alla navigazione della linea del tempo.
Il tempo può essere misurato in secondi, minuti, ore, giorni fino ad arrivare alle ere.
Nella pagina html il tag head deve contenere i seguenti script:
<html> <head> <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script> <script type="text/javascript"> function onLoad() {
var eventSource = new Timeline.DefaultEventSource(); var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, date: "Jun 28 1218 00:00:00 GMT", width: "70%", intervalUnit: Timeline.DateTime.DECADE, intervalPixels: 200 }), Timeline.createBandInfo({ showEventText: false, trackHeight: 0.5, trackGap: 0.2, eventSource: eventSource, date: "Jun 28 1218 00:00:00 GMT", width: "30%", intervalUnit: Timeline.DateTime.CENTURY, intervalPixels: 100 }) ]; bandInfos [1].syncWith = 0; bandInfos [1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); Timeline.loadXML("San_Domenico.xml", function(xml, url) { eventSource.loadXML(xml, url); }); } </script> </head> … </html>
dove sono definite due timeline, la prima a cadenza decennale
(Timeline.DateTime.DECADE), la seconda a cadenza centennale
(Timeline.DateTime.CENTURY). L’attributo “width” all’interno delle timeline indica la larghezza della banda. All’interno dell’html è incluso un file in formato xml che contiene i parametri che definiscono quando inizia e quando finisce un evento26, oltre che i link ad ad altre pagine Web.
26
Il file xml è così fatto:
<data>
<event start="Aug 02 1200 00:00:00 GMT" title="Nome" link="http://"></event> </data>
All’interno del tag <body> si deve, invece, includere il tag div e l’evento onLoad:
<body onload="onLoad();" onresize="onResize();">
<div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div> </body>
</html>
Ciò che il browser restituisce è la seguente pagina Web.
Figura 18 - Esempio del funzionamento di Timeline. A corredo della linea temporale, facendo un click sulla linea, si presenta un balloon con informazioni tratte da Atlante storico di Bologna
Si pensi ai molteplici sviluppi che può avere questo strumento. Per esempio, si possono costruire timeline che permettano di cogliere subito a colpo d’occhio la biografia di un personaggio famoso, una battaglia importante, la storia di una città, etc. accedendo direttamente a più risorse digitali come immagini, documenti, video, etc. semplicemente agendo con un click del mouse.
Inoltre, mettendo insieme il progetto Timeline con la mappa di Google Maps, con un semplice click del mouse, si possono avere ulteriori benefici. Infatti, l’uso dei due strumenti consente l’esplorazione geografica e temporale degli oggetti messi a sistema.
Per far questo, è necessario creare una pagina html che contiene nell’head lo script di Google Maps e lo script di TimeMap27:
<!DOCTYPE html PUBLIC "-//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>
27
TimeMap è una libreria JavaScript che facilita l’uso integrato di Google Maps e del progetto Timeline. La libreria permette di caricare un dataset kml sia nella mappa che nella timeline simultaneamente. Vorrei qui ringraziare Nick Rabinowitz, uno degli sviluppatori di TimeMap, che mi ha fornito supporto per l’elaborazione di una pagina Web con Google Maps e Timeline.
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Bologna in the History</title>
<script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript"></script>
<script type="text/javascript" src="http://simile.mit.edu/timeline/api/timeline- api.js"></script>
<script src="../timemap.js" type="text/javascript"></script>
oltre al seguente blocco di codice:
<script type="text/javascript"> var tm;
function onLoad() { tm = timemapInit({
mapId: "map", // Id of map div element (required) timelineId: "timeline", // Id of timeline div element (required) datasets: [
{
title: "Bologna in the History",
theme: TimeMapDataset.brownTheme({eventIconPath: '../images/'}), data: {
type: "kml", // Data to be loaded in KML - must be a local URL url: "mura_bologna.kml" // KML file to load
} } ], bandInfo: [ { date: "Jun 28 500 00:00:00 GMT", width: "75%", intervalUnit: Timeline.DateTime.DECADE, intervalPixels: 50 }, { date: "Jun 28 500 00:00:00 GMT", width: "25%", intervalUnit: Timeline.DateTime.CENTURY, intervalPixels: 100, showEventText: false, trackHeight: 0.2, trackGap: 0.2 } ] }); } </script>
<link href="examples.css" type="text/css" rel="stylesheet"/> <style>
div#timelinecontainer, #timeline { height: 110px; } div#mapcontainer, #map { height: 400px; }
</style> </head>
dove è indicata la posizione del file kml da caricare nella mappa e dove inizia la linea del tempo, oltre alle indicazioni delle due timeline.
Nel body, invece, devono essere contenuti i due tag <div> che dicono al browser dove inserire gli elementi:
<body onload="onLoad();" onunload="GUnload();"> <div id="timemap"> <div id="timelinecontainer"> <div id="timeline"></div> </div> <div id="mapcontainer"> <div id="map"></div> </div> </div> </body> </html>
Ciò che il file html restituisce è una pagina Web navigabile lungo la linea del tempo e geograficamente.