Karte mit FMO und Custom InfoWindow

Weg 1: Erstellen eines eigenen InfoWindow

Initialisierung der Falk Map

Zusätzlich zum Initialsieren der Map und dem Hinzufügen von FMO (Falk Map Objekt), wird das eigene Overlay der Map hinzugefügt. Da pro Overlay ein InfoFenster existiert, müssen sich die Overlays der Map darüber informieren, wenn ein InfoFenster geöffnet wird, um das InfoFenster des anderen Overlays zu schließen. Das funktioniert durch eine Benachrichtigung über das Event FalkInfoWindow.MSG_BEFORE_WINDOW_OPEN, über welches man am Overlay einen entsprechenden Event-Handler registriert.

Eigenes Overlay

Ein eigenes Overlay wird benötigt, da das InfoFenster vom Overlay verwaltet wird. Dazu genügt es aber, das eigene InfoWindow zu initialisieren und sämtliche andere Funktionalitäten von FalkOverlay zu erben. Das erreicht man sehr leicht über die in YUI 2 implementierte Funktionalität
YAHOO.lang.extend(o, super);.

Eigenes InfoWindow

Das FalkInfoWindow kann relativ einfach angepasst werden, indem man ein eigenes Objekt definiert und dieses von FalkInfoWindow erben lässt. Meistens geht es bei Anpassungen nur darum, das Aussehen zu verändern, die Funktionalitäten möchte man jedoch beibehalten.

Das folgende Beispiel ändert das Aussehen komplett. Header und Footer werden nicht befüllt. Alle Befüllungen werden im Body vorgenommen. Dazu wird der Context des InfoFensters geändert und das Styling angepasst.

Weg 2: Das Standard FalkInfoWindow anpassen

Eine Anpassung des FalkInfoWindow kann auch durch Vergabe eines eigenen Styles erreicht werden. Angaben zu Style werden über CSS erreicht, wozu das Objekt FalkInfoWindowStyle geändert werden kann. Dieses Objekt ist zunächst ein Array von Objekten:

	  FalkInfoWindowStyle = [];
	

Jedes dieser Objekte besitzt zwei Eigenschaften: classname und styles. Der Wert für classname ist der Name der Klasse des FalkInfoWindow, auf das die styles angewendet werden sollen. Die Styleangaben sind key - value Paare für CSS-Regeln. Sie werden als Array von Objekten angegeben:

	  {
	  	classname : 'value for classname',
   	  	styles:[
   	  		{ key: 'css-Regel', value: 'CSS-Wert'}
   	  	]
   	  }
	

Folgende Klassennamen sind vorgegeben und können angepasst werden:

• Klassennamen, die durch das YUI Overlay vorgegeben sind
  • container - enthält alle anderen Elemente
  • hd - der Kopfbereich, enthält das Element mit class="header"
  • bd - der Inhaltsbereich, enthält das Element mit class="body"
  • ft - der Fußbereich, enthält das Element mit class="footer"
• Klassennamen, die durch das FalkInfoWindow vorgegeben sind
  • header
  • body
  • footer

Das folgende Codebeispiel zeigt, wie das FalkInfoFenster in seinem Aussehen angepasst werden kann.