Visualizzare markers contenuti in un file XML

Come anticipato nel post precedente, cominciamo a “raffinare” il procedimento per la visualizzazione sulla nostra mappa di particolari markers.
Il nostro obiettivo è di rendere dinamica la visualizzazione dei markers importandone le coordinate ed altre informazioni da un file esterno alla nostra pagina di visualizzazione della Google Map.
In particolare, i dati che andremo a visualizzare sono stati precedentemente inclusi in un file XML. Non è il luogo adatto per disquisire sull’utilizzo di questo metalinguaggio, ci basti sapere che in un file xml le informazioni sono contenute in particolari elementi detti tags.
Nel nostro esempio il file xml è costituito da un solo tag (marker) con tre attributi, la latitudine (lat), la longitudine (long) e una breve descrizione (descr). Il file si chiama scuole.xml ed è il seguente

<markers>
<marker lat=”44.111508″ long=”9.835831″ descriz=”Qui ho frequentato le scuole superiori”>
<marker lat=”44.113902″ long=”9.834570″ descriz=”Qui ho frequentato le scuole elementari”>
<marker lat=”44.113715″ long=”9.833441″ descriz=”Qui ho frequentato le scuole medie”>
<marker lat=”44.111206″ long=”9.834749″ descriz=”Qui abitavo molti anni fa”>
</markers>

Il vantaggio di questa soluzione diventa evidente nel momento in cui avessimo l’esigenza di aggiungere altri markers. In quel caso, basterebbe inserire i nuovi dati a partire dalla penultima riga, rispettando la medesima sintassi, senza necessità di modificare la pagina web di visualizzazione della mappa.
Per gestire il file XML e “passare” i dati alla nostra pagina web sono però necessari alcuni step:

1. Caricare in memoria il contenuto del file
Per fare ciò, utilizzeremo il metodo

GDownloadUrl(“scuole.xml”, function(data, responseCode));

Il file scuole.xml viene caricato nella variabile data; in responseCode viene caricato con un codice di elaborazione il cui valore ci permette di capire se ci sono stati problemi nel caricamento (es. un file xml non valido o con errori nei dati) e quindi di gestire la cosa senza che l’elaborazione si interrompa (argomento che tralasciamo per ora per semplicità).

N.B. E’ necessario che il documento XML sia contenuto nel medesimo server che ospita il codice javascript e quindi la pagina che richiede la Google Map.

2. Capire il tipo di documento contenuto nel file (XML)
Affinchè il codice javascript “capisca” che il file caricato sia xml viene utilizzato il namespace GXml, che fornisce metodi statici per gestire documenti XML. Il metodo

GXml.parse(data);

infatti, non è altro che un parser XML.

3. Gestire i dati in maniera corretta
I dati vengono caricati sotto forma di stringa mentre le coordinate geografiche devono essere in formato numerico. La funzione

parseFloat()

ha appunto come argomento la stringa corrispondente agli attributi lat e long e produce in uscita un numero in floating point.

Dopo tanto scrivere, passiamo alla visualizzazione del codice, opportunamente commentato per facilitarne la comprensione.

<!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>Visualizzazione markers da file XML</title>

<script src=”http://maps.google.com/maps?file=api&v=2 &key=LAVOSTRAGOOGLEAPIKEY” type=”text/javascript”>
</script>

<script type=”text/javascript”>

function initialize() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById(“map_canvas”));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

//Aggiunge la scala
map.addControl(new GScaleControl());

//Centra la mappa in un punto particolare
map.setCenter(new GLatLng(44.112909 , 9.835415), 16);

GDownloadUrl(“scuole.xml”, function(data, responseCode) {

var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName(“marker”);

for (var i = 0; i < markers.length; i++) {

var punto = new GLatLng(parseFloat(markers[i].getAttribute(“lat”)), parseFloat(markers[i].getAttribute(“long”)));

var titolo = (markers[i].getAttribute(“descriz”));
map.addOverlay(new GMarker(punto, {title: titolo}));

}
});

}

}

</script>

</head>

<body onload=”initialize()” onunload=”GUnload()”>
<div id=”map_canvas” style=”width: 500px; height: 400px”></div>

</body>
</html>

Il risultato lo potete apprezzare qui.

Una volta capito questo meccanismo, nei prossimi post tenteremo di realizzare una applicazione ancora più raffinata. Invece di movimentare un file XML statico, potremmo infatti crearlo in maniera dinamica, prelevando ad esempio l’elenco delle coordinate e le descrizioni da un database.

Annunci

3 Responses to “Visualizzare markers contenuti in un file XML”


  1. 1 Nicola Greco 27 gennaio 2009 alle 5:12 pm

    Ottimo, proprio quello che mi serviva,continua così,Nicola

  2. 2 Cirdan il Timoniere 27 gennaio 2009 alle 6:16 pm

    Grazie Nicola per avere visitato il mio blog, ovviamente ho dato una occhiata al tuo sito ed è davvero fantastico! Complimenti. Ti segnalo un altro blog, http://mashing-up.blogspot.com/ , tenuto da un amico con il quale condividiamo lo stesso progetto, parlare (in italiano) delle API, io con un taglio più divulgativo, lui con un taglio più avanzato. Adesso si sta occupando di API Flickr, magari ti può interessare. Ciao e spero a presto

  3. 3 Anonymous 1 giugno 2009 alle 5:05 pm

    Ciao, bel lavoro.Ora vorrei fare un passo avanti e selezionare i dati del db da rappresentare sulla mappa con i markers a partire da una pagina con menu a tendina.In pratica vorrei passare al file creaxml.php un parametro dal menu a tendina e far rappresentare il risultato della query.Ma non ci riesco………


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...




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

Addthis

AddThis Social Bookmark Button

Flickr Photos

Moods of blue

High heels

Altre foto

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