Nachbarschaftskarte
Angeregt durch Schwerdtfegers Kommentar zu GeoURL und durch den Eintrag zum RSS-Feed von Geo-Url, habe ich mich heute daran gesetzt, eine Karte meiner “Umgebung” – zumindest der registrierten – zu zeichnen. Das Resultat von drei Stunden harte Arbeit, 2 Liter Saft und sämtlichen zerrissenen Haaren lässt sich auf der Nachbarschaftsseite begutachten.
Zur Vorgehensweise:
Auf der Seite direkt ist ein iframe, der die eigentliche svg-Datei enthält. In der svg-Datei sind sowohl statische Elemente (das Bullauge), wie auch dynamische. Zu den statischen kann später auch eine Hannoverkarte im Hintergrund gehören..
Die Daten der Nachbarschaftsseiten sollten idealerweise direkt von GeoUrl geladen werden. Diese bieten einen anpassbaren RSS-Feed für die eigene Seite:
http://geourl.org/near/?p=http://www.toomuchcookies.net/;format=rss10
Da aber firefox sicherheitshalber keine Verbindung mit einem anderen als den aufgerufenen Server aufnimmt und mein Webhoster offensichtlich die Durchschleife von Daten durch meine Domain ausgeschaltet hat (fopen(url)), muss ich zur Zeit mit einer statischen Version des Feeds vorliebnehmen, die ich heruntergeladen hatte. Das ist vor allem für diejenigen Hannoveraner wichtig, die sich bei GeoUrl anmelden, sich aber auf meiner Karte nicht wiederfinden..
AJAX zum Abrufen der Daten:
AJAX steht für Asynchronous JavaScript and XML. Die Grundidee besteht darin, nicht bei jeder Aktion des Nutzers die komplette Internetseite neuzuladen, sondern nur die Daten nachzuladen, die man zur Aktualisierung der Ansicht braucht.
Im Vorliegenden Fall will ich die Ansicht zwar nur einmal ändern, aber dadurch, dass ich die Daten erst lade, nachdem die restliche Seite vollständig geladen ist, muss der Nutzer nicht so lange warten, bis er irgendwas sehen kann.
Um die Daten nachzuladen benötigt man das Objekt XMLHTTPRequest. In Firefox ist das Objekt eingebaut und kann über new XMLHttpRequest(); aufgerufen werden. Im Internet Explorer ist das Objekt nur über das ActiveX-Objekt aufrufbar: new ActiveXObject("Microsoft.XMLHTTP");. Erstaunlicherweise ist das der einzige Unterschied. Die Methoden und Eigenschaften der beiden Objekte sind identisch! Um Asynchron arbeiten zu können, benötigt XMLHTTPRequest eine callback-Funktion, die aufgerufen wird, wenn sich der Status der Übertragung ändert. Über die Eigenschaft onreadystatechange kann diese Funktion übergeben werden.
requestobj.open('GET', url, true);
requestobj.onreadystatechange=XMLHTTPResult;
requestobj.send(null);
Das Event onreadystatechange wird bei jeder Änderung aufgerufen, nicht nur, wenn die Daten vollständig geladen sind. Deshalb wird der aktuelle Status am Anfang der Callback-Funktion XMLHTTPResul abgefragt. Eine “4″ bedeutet, dass alle Daten verfügbar sind.
function XMLHTTPResult() {
if (requestobj.readyState==4) {
extractitems(requestobj.responseXML);
}
}
Nun wird der Funktion extractitems die geparsten und somit leicht durchsuchbaren XML-Daten übergeben. extractitems geht alle “item”-Tags durch und extrahiert die wichtigen Daten (“title”,”link”,”longitude”,”latitude”). Hierbei muss man sich auf DOM-low-level-Methoden beschränken, damit das Script sowohl unter IE als auch unter Firefox läuft.
Z.B. kann man unter Firefox ein DOM-Objekt folgendermassen ansprechen:
var items = node.getElementsByTagName("item")[0];
Damit wird das erste Objekt unter node mit dem TagName “item” referenziert. Dies ist aber leider unter IE nicht machbar. Deshalb muss man die etwas umständlichere Schreibweise
var items = node.getElementsByTagName("item").item(0);
verwenden. Eine weitere Besonderheit stellen Namespace-Tags dar. Im GeoUrl-Feed werden folgende Elemente verwendet:
<geourl:longitude>9.75700000000002</geourl:longitude>
<geourl:latitude>52.395</geourl:latitude>
In einem Browser werden diese Elemente über node.getElementsByTagName("geourl:longitude")... im anderen über node.getElementsByTagName("longitude")... angesprochen.
AJAX mit SVG:
Ich bin mir bisher nicht im Klaren darüber, “wer” beim Zusammenspiel zwischen IE und ASV die Scripte ausführt. Ich habe es nämlich nicht hinbekommen aus einem SVG-Objekt heraus das ActiveX-Objekt anzusprechen! Kein ActiveX-Objekt, kein XMLHTTPRequest!
Es gibt – wie so meist – auch hier ein workaround: ASV unterstützt die Funktion getURL, die zwar SVG-Standard sein soll, aber nicht von Firefox unterstützt wird… D.h. das Script muss erkennen, ob das XMLHTTPRequest-Objekt vorhanden und ansprechbar ist, wenn nicht, dann müssen die Daten über einen Callback der Funktion getURL in geparste XML-Daten umgewandelt werden:
if (requestobj) {
requestobj.open('GET', url, true);
requestobj.onreadystatechange=XMLHTTPResult;
requestobj.send(null);
} else if (window.getURL){
getURL(url,getURLCallback);
}
Glücklicherweise gibt es die Funktion parseXML, die diese Aufgabe ohne zu murren erlädigen kann:
function getURLCallback(data) {
if (data.success) {
var node = parseXML(data.content, document);
extractitems(node.firstChild);
}
}
Auch hieraus werden die Daten an die Funktion extractitems weitergegeben.
Ausblick:
Das Entwickelt sich ja fast zu einer Doktorarbeit…
- Einige SVG-Funktionen sind noch nicht implementiert. Vor allem Firefox hinkt noch stark hinterher. Zu diesen Funktionen gehört etwa
getSubStringLength, womit sich die tatsächliche Länge des Textes feststellen lässt. Zur Zeit muss man damit leben, dass die Hintergrund-Box, die mit dem Titel der Seite erscheint immer gleichlang ist. - Zur Positionierung der Punkte benutze ich den Abstand zu meinem Standort mit einer Konstante multipliziert. Diese Konstante müsste irgendwann einen klaren Bezug zur Vergrösserung haben.
- Der GeoUrl-RSS-Feed sollte zwar gecacht werden (um die Seite nicht unnötig zu belasten und gleichzeitig um den Seitenaufbau zügig zu halten), allerdings sollte eine direkte Live-Anbindung möglich sein, damit die Daten nicht ständig manuell auf dem Laufenden gehalten werden müssen.
- Ausserdem liesse sich über ein Parameter die maximale Entfernung einstellen. Dieser Parameter fliesst in die URL zum GeoUrl-Feed, wie auch in die Vergrösserungskonstante.
- Eine tatsächliche Karte im Hintergrund ist wünschenswert…
An dieser Stelle noch einmal einen herzlichen Dank an Bernd Ott von der php-Usergroup Hannover, der erst kürzlich einen informativen Vortrag über AJAX gehalten hat und mein Interesse geweckt hat.
Andere Beiträge:
Tags: Hannover, javascript, Programmierung
Hannover, javascript, Programmierung | 
Omar | 5. Dezember 2005
Comments
Other Links to this Post
-
who ever this concerns … » Blog Archiv » Geographische Nähe — 1. Februar 2007 @ 17:37
RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URI
