Google Maps API – Individuelle Windrose

Ich habe heute in das Demo Mashup eine Windrose eingebaut, und auch dafür gesorgt, dass man die Karte mit der Tastatur scrollen kann. Wenn man den richtigen Befehl kennt, ist das Ganze recht einfach, deswegen erspare ich euch heute das gesamte CSS. Ihr könnt wenn ihr wollt hier nachschauen, wie ihr die Windrose über die Karte gelegt bekommt.

Der Befehl panDirection, den man zum Bewegen der Karte benötigt, ist weder intuitiv, noch sonst irgendwie logisch. Trotzdem kann man mit ihm in alle Himmelsrichtungen scrollen. Da es sich bei der Windrose des Demo Mashups um eine einzelne Grafik handelt, habe ich dafür eine Clickmap erstellt:

<map name="windrose" id="windrose">
   <area shape="poly" coords="51,5,72,64,83,64,105,6,76,1" href="map.panDirection(0,1);" alt="Norden" />
   <area shape="poly" coords="144,45,87,70,83,65,106,6,129,21" href="map.panDirection(-1,1);" alt="Nord-Osten" />
   <area shape="poly" coords="146,103,87,81,88,71,146,47,151,75" href="map.panDirection(-1,0);" alt="Osten" />
   <area shape="poly" coords="107,142,81,83,85,80,144,104,132,127" href="map.panDirection(-1,-1);" alt="Süd-Osten" />
   <area shape="poly" coords="47,143,74,81,80,83,106,142,78,149" href="map.panDirection(0,-1);" alt="Süden" />
   <area shape="poly" coords="10,104,70,76,74,81,46,142,23,127" href="map.panDirection(1,-1);" alt="Süd-Westen" />
   <area shape="poly" coords="9,46,70,69,69,75,10,103,3,75" href="map.panDirection(1,0);" alt="Westen" />
   <area shape="poly" coords="71,67,9,46,25,21,50,6" href="map.panDirection(1,1);" alt="Nord-Westen" />
</map>

Ich habe in den Alt-Tag eines Links die Himmelsrichtung eingetragen, ihr solltet somit problemlos die einzelnen Parameter nachvollziehen können. Das Abfragen der Tastatur ist ähnlich einfach:

$(document).keyup(function(e) {
// console.log(e.which);						  
switch(e.which) {
	case 37:
		// Pfeil nach Rechts
		archeol_moveWest();
		break;
	case 38:
		// Pfeil nach Oben
		archeol_moveNorth();
		break;
	case 39:
		// Pfeil nach Links
		archeol_moveEast();
		break;
	case 40:
		// Pfeil nach Unten
		archeol_moveSouth();
		break;
	case 97:
		// Tastaturblock '1'
		archeol_moveSouthWest();
		break;
	case 98:
		// Tastaturblock '2'
		archeol_moveSouth();
		break;
	case 99:
		// Tastaturblock '3'
		archeol_moveSouthEast();
		break;
	case 100:
		// Tastaturblock '4'
		archeol_moveWest();
		break;
	case 102:
		// Tastaturblock '6'
		archeol_moveEast();
		break;
	case 103:
		// Tastaturblock '7'
		archeol_moveNorthWest();
		break;
	case 104:
		// Tastaturblock '8'
		archeol_moveNorth();
		break;
	case 105:
		// Tastaturblock '9'
		archeol_moveNorthEast();
		break;
}
});

Auch hier gilt: genau Ausführungen darüber, was da eigentlich passiert, gibt es hier. Da ich das Scrollen wiederverwenden möchte, habe ich diese in Funktionen gepackt. Prinzipiell kann man aber durchaus die Funktionen durch den Befehl in der Klick-Map ersetzen, und erhält das Gleiche Resultat. Da es sich bei dem Ganzen nur um einen einzelnen Befehl handelt, braucht man wohl nicht mehr dazu sagen (hoffe ich:)).

Ähnliche Beiträge

Google Maps API mit jQuery Wie gestern bereits angekündigt, geht es imGoogle Mashup Demo nun erst mal wieder mit der Landkarte an sich weiter. Ich habe heute die Anwendung auf j...
Google Maps API: Bedienelemente auf der Karte plat... In unserem Mashup ist zurzeit die Control immens im Weg, da ich eigentlich oben links einen individuellen Slider für einen individuellen Zoom einbauen...
Google Maps API – Individueller Zoom Nett ausgedrückt würde ich den "richtigen Weg" für die Erstellung eines individuellen Zoom's für die Google Maps API als anstrengend bezeichnen. Aber ...
Design-Update zum Zweiten Frei nach dem Motto: Nicht schön, aber einzigartig, habe ich heute noch was am Design geschraubt. Mir ging es vor allem darum, das die Navigationselem...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.