Schockwellenreiter Street View (Testversion)

Für die OpenStreetMap-Version der Schockwellenreiter Street View habe ich mich entschieden, einen Text-Layer zu verwenden. Der hat zwar nicht so schöne gerundete Ecken, aber den Vorteil, daß er seine Daten aus einer Tab-separierten Datei liest. Und die kann so ziemlich jede Tabellenkakulation und jede Datenbank herausschreiben. Denn wenn so eine Sammlung hinreichend groß wird, kann es doch sehr mühsam sein, jede Einzelheit per Hand in die JavaScript-Datei einzupflegen.

Der Code

Zuerst müssen — wie gewohnt, die JavaScript-Dateien von OpenStreetMap und OpenLayers in den <head> der HTML-Datei eingebunden werden. Das sieht so aus:

<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>

In RubyFrontier erledigt das die Direktive meta für uns: 

#meta "<script type=\"text/javascript\" src=\"http://openlayers.org/api/OpenLayers.js\"></script>\n
<script type=\"text/javascript\" src=\"http://openstreetmap.org/openlayers/OpenStreetMap.js\"></script>"

Die eigentliche Arbeit erledigt dann ein weiters kleines JavaScript, das ich streetview.js genannt und ebenfalls im Header eingebunden habe (natürlich darf man nicht vergessen, das Script mit onload="init()" im <body>-Tag auch zur Ausführung zu bringen): 

function init() {
	var proj4326 = new OpenLayers.Projection("EPSG:4326");
	var projmerc = new OpenLayers.Projection("EPSG:900913");
	var lonlat   = new OpenLayers.LonLat(13.44290, 52.45648);
	var zoom     = 15;

	var map = new OpenLayers.Map("map", {
		controls: [
			new OpenLayers.Control.KeyboardDefaults(),
			new OpenLayers.Control.MouseDefaults(),
			new OpenLayers.Control.LayerSwitcher(),
			new OpenLayers.Control.PanZoomBar(),
			new OpenLayers.Control.MousePosition(),
			new OpenLayers.Control.Attribution()],
		maxExtent:
			new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
		numZoomLevels: 18,
		maxResolution: 156543,
		units: 'm',
		projection: projmerc,
		displayProjection: proj4326
	});
	var mapnik_layer = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
	var tah_layer    = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
	var cycle_layer  = new OpenLayers.Layer.OSM.CycleMap("Fahrradkarte");
	map.addLayers([mapnik_layer, tah_layer, cycle_layer]);
	
	var stview_layer = new OpenLayers.Layer.Text("Street View", {
		location: "./data/britz.tsv", projection: map.displayProjection});
	map.addLayer(stview_layer);
	
	lonlat.transform(proj4326, projmerc);
	map.setCenter(lonlat, zoom);
	
}

Wichtig ist dabei, daß man bei OpenStreetMap-Anwendungen in OpenLayers dem Text-Layer (hier stview_layer) nicht nur die URL der Textdatei mitgeben muß, sondern auch die Projektion. Ich habe mich dumm und dämlich gesucht, weil mein »Bömmel« statt in Berlin-Britz immer vor der afrikanischen Westküste gezeichnet wurde, egal was ich mit meiner Textdatei auch anstellte.

Dafür ist die Textdatei (hier britz.tsv) ganz einfach aufgebaut: In der ersten Zeile stehen — Tab-separiert — die Bezeichner, in meinem Falle point, title, description, icon und iconSize. (Es gibt noch mehr mögliche Bezeichner, aber für meine Zwecke haben die genannten ausgereicht.) Mit point übergibt man die Koordinaten als Komma-separiertes Tupel. (Geographen, aufgepaßt: Es sind kartesische Koordinaten, also genau umgekehrt als die gewohnten lat-long-Koordinaten. Wen das stört, der kann auch unter den Überschriften lat und long die Koordinaten einzeln eingeben.)

title ist der Titel des Textes, er wird als <h2> herausgerendert, während die description jede Art von (Inline-) HTML-Text (zum Beispiel Links) aufnehmen kann. Ich habe das genutz, um die Bilder von Flickr dort anzeigen zu lassen, ich habe dabei die kleine Größe (240x180 Pixel) gewählt, sie aber, damit die Photos auch in das Textfenster passen, im Image-Tag noch einmal auf 180x135 Pixel verkleinert. icon erwartet die URL zu einer Bilddatei — jede erreichbare URL ist erlaubt. Und iconsize ist (Überraschung!) die Größe des Markers. Auch sie wird als Tupel in Pixeln angegeben, in meinem Falle ist das Icon 21, 25 Pixel groß.

Die eigentlichen Daten müssen ebenfalls Tab-separiert vorliegen. Wichtig ist, daß auch der letzte Datensatz mit einem carriage return abschließt, sonst wird er nicht aufgerufen. Eine Beispieldatei (mit sichtbar gemachten Sonderzeichen) kann so aussehen:

Screenshot

Mit CSS hat man noch ein wenig Einfluß auf die Gestaltung des Textfensters. Meine CSS-Datei dafür sieht folgendermaßen aus:

.olPopupContent {
	font-size: 10px;
}

.olPopupContent h2 {
	font-size: 12px;
	margin: 2px 0px;
}

.olPopupContent p {
	margin: 2px 0px;
}

Ja, ich weiß, die Schrift ist ein wenig klein, aber ich wollte alles ohne Scrollbalken in das Textfenster bekommen und habe auf der anderen Seite nicht herausgefunden ob und wenn ja wie man das Fenster vergrößern kann.

Das war eigentlich alles. Aber ich denke, daß man mit diesen kleinen Skripten schon eine Menge anstellen kann.