Yahoo! Maps Photowalk

Der Code

Natürlich kann man auch mit Yahoo! Maps mehr anstellen. Und so habe ich als Beispiel einen Spaziergang durch Berlin-Zehlendorf mit ein paar Photos dokumentiert. Neben den Markern kommt ein weiterer Layer zum Einsatz, der den Polygonzug anlegt.

Der eigentliche HTML-Text innerhalb des <body>-Tags ist wieder von erfrischender Kürze:

#title "Yahoo! Maps Photowalk"
#embedjavascript "photowalk"

<h1><%= title %></h1>

<div id="map" style="width:480px; height:480px;"></div>

Wie schon beim ersten Beispiel sind die ersten beiden Zeilen Anweisungen an RubyFrontier, den Titel der Seite festzulegen und das JavaScript photowalk.js im Header der Seite einzubinden. Dieses JavaScript erledigt wieder die gesamte Arbeit: 

window.onload = function() {
	var map = new YMap(document.getElementById('map'));
	
	map.addTypeControl();
	map.addZoomLong();
	map.addPanControl();
	
	var point = new YGeoPoint(52.4343, 13.2591);
	map.drawZoomAndCenter(point, 2);
	
	var blockhaus = new YGeoPoint(52.4313, 13.2587);
	var post = new YGeoPoint(52.4313, 13.2572);
	...
	var bali = new YGeoPoint(52.4318, 13.2594);
	
	var polyline = new YPolyline([blockhaus, post, ... bali], "#ff0000", 2, 1.0);
	map.addOverlay(polyline);
	
	var marker1 = new YMarker(blockhaus);
	var marker2 = new YMarker(post);
	...
	var marker9 = new YMarker(bali);
	
	marker1.addAutoExpand("<img src='blockhaus.jpg' width='180' height='135'
	alt='Blockaus am S-Bahnhof Zehlendorf' /></a><p>Restaurant Blockhaus
	am S-Bahnhof Zehlendorf</p>");
	map.addOverlay(marker1);
	marker2.addAutoExpand("<img src='pos.jpg' width='180' height='135'
	alt='Postamt Zehlendorf' /></a><p>Altes Zehlendorfer Postamt</p>");
	map.addOverlay(marker2);
	...
	marker9.addAutoExpand("<img src='bali.jpg' width='180' height='135'
	alt='Bali Kino' /></a><p>Bali Kino</p%gt;");
	map.addOverlay(marker9);	
}

Zuerst wird ein neues Map-Objekt erzeugt und dann die Controls hinzugefügt. Danach wird ein Mittelpunkt der Karte festgelegt und die Karte um diesen Mittelpunkt herum gezeichnet.

Das Hinzufügen eines Polygonzuges geschieht sehr einfach: Erst einmal werden weitere Koordinatentupel (YGeoPoint) angelegt und diese dann dem Objekt YPolyLine als Array übergeben. Der zweite Parameter legt die Farbe (#ff0000), der dritte die Strichstärke (2 Pixel) und der vierte die Transparenz (0.0 = völlig transparent bis 1.0 = undurchsichtig) fest.

Zum Schluß habe ich die einzelnen Marker erzeugt und dann mit Inhalten gefüllt. Der Methode addOverlay() kann man leider kein Array übergeben, daher mußte ich sie insgesamt neun Mal aufrufen.

Um den Beispielcode nicht aufzublähen, habe ich ihn gekürzt und auch die Methode addAutoExpand() nur mit minimalem Parameterstring aufgerufen. Im Orignal ist er bedeutend länger, da ich die Photos direkt von Flickr eingebunden habe. Interessierte seien auf den Quelltext zur Seite verwiesen.

Wenn Ihr übrigens auf Flickr Eure Photos in die Karte dort einbindet (ebenfalls eine Yahoo! Maps-Anwendung), bekommt Ihr die Geo-Koordinaten unten rechts angezeigt. Das erspart eine Menge Arbeit.

Natürlich dürft Ihr nicht vergessen, wieder im Header Eures HTML-Dokumtentes Yahoos! AJAX-API mit Eurer AppID einzubinden:

<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.7&appid=AppID">
</script>

Und das war es auch schon wieder. In den unten angegebenen Quellen findet Ihr weitere Beispiele, welche Möglichkeiten schon in der simplen AJAX-API von Yahoo! Maps stecken.

Quellen