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 – Infofenster mit Tabs Eines der größten Probleme bei Google Maps ist es stets, eventuell vorhandene Informationen in den Infofenstern zu verpacken. Hierbei gibt es zwei gru...
Google Maps Tutorial – Steuerelemente Bisher haben wir uns nicht um die Steuerelemente gekümmert, sondern einfach den Default übernommen. Für den Anfang hat das gereicht, aber insbesondere...
Google Maps mit individuellem MapType Wie versprochen fange ich jetzt an, die Steuerelemente von Google Maps zu individualisieren. Den Anfang macht hier der MapType, weil am einfachsten :)...
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 ...

Schreibe einen Kommentar

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