falstaff – yet another tech blog

Momentan bin ich am Erstellen einer Webseite für die Jugendhilfe Lateinamerika (www.juhila.ch), eine Hilfsorganisation der Salesianer Don Boscos. Diese Webseite habe ich mit Typo3 realisiert. Die JUHILA unterstüzt Hilfsprojekte für Jugendliche in Lateinamerika. Um diese Projekte auf der Webseite zu präsentieren, wollte ich eine Flash Karte verwendet, die von John Emerson programmierte DIY Map. Die Karte benötigt eine XML-Datei, woraus Informationen für die Länder sowie die Orte der Projekte gewonnen werden. Die Karte kann mit einem normalen HTML-Bereich in Typo3 eingebunden werden. Als Parameter kann der Ort der XML-Datei übergeben werden, dabei sollen die Informationen für die XML-Datei aus dem Seitenbaum von Typo3 geholt werden. Die XML-Datei muss also dynamisch erstellt werden.

Um dies zu realisieren muss mit Typo3 eine XML-Datei erstellt werden, was mit TypoScript möglich ist. Bei mir ist der Seitenbaum ist wie folgt aufgebaut:
XML DIY Map
Karte
- | Lateinamerika
- | - | Argentinen
- | - | - | Projekte 1
- | - | - | Projekte 2
- | - | Bolivien
- | - | - | Projekte 1
- | - | ...

Die Seite “XML DIY Map” ist für den Webseitennutzer nicht sichtbar. Jedoch kann diese über die Seiten-ID geholt werden (index.php?id=123). Genau diese Seite habe ich als Datenquelle für die DIY Map angegeben. Für die “XML DIY Map”-Seite erstellte ich ein spezielles Template, welches folgendes TypoSkript verwendet:
# Erzeugt ein well-formated XML-File für die DIY Map (Flash Karte)
config.disableAllHeaderCode = 1
config.admPanel = 0
page.config.metaCharset = utf-8
page.config.additionalHeaders = Content-Type:text/xml;charset=utf-8
page = PAGE
page.1 = TEXT
page.1.value (
<?xml version="1.0" encoding="utf-8"?>
)
# Beginn der XML-Daten
page.10 = COA
page.10 {
# Root-Tag
wrap = <countrydata>|</countrydata>
# Standardkonfigurationen für DIY Flashmap
10 = TEXT
10.value (
<state id="first_zoom">
<data>southamerica</data>
</state>
<state id="zoom_out_scale">
<data>300</data>
</state>
<state id="zoom_out_center">
<loc>-15.745,-73.985</loc>
</state>
<!--
<state id="zoom_mode">
<data>no zoom</data>
</state>
-->
<state id="zoom_out_button">
<name>Übersicht</name>
<data>NE</data>
<font_size>16</font_size>
<font_color>ffffff</font_color>
<background_color>000000</background_color>
</state>
<state id="range">
<data>0 - 3000</data>
<color>A63A47</color>
</state>
<state id="default_color">
<color>555555</color>
</state>
<state id="background_color">
<color>ffffff</color>
</state>
<state id="outline_color">
<color>333333</color>
</state>
<state id="state_info_icon">
<src>fileadmin/Images/JUHILA/Projekte/donbosco.swf</src>
</state>
<state id="scale_points">
<data>70</data>
</state>
<state id="default_point">
<color>ffff00</color>
<size>2</size>
<opacity>70</opacity>
</state>
)
# Definierte Regionen mit HMENU/TMENU kreieren
20 = HMENU
20 {
special = directory
special.value = 2214
1 = TMENU
1.expAll = 1
1.NO = 1
1.NO.doNotLinkIt=1
# Nur um dieses Menuelement wrappen
1.NO.allWrap = <name>|</name>
# Um alles wrappen...
1.NO.wrapItemAndSub = <state id="region">|</state>
2 = TMENU
2.NO = 1
2.NO.doNotLinkIt=1
2.NO.stdWrap.cObject = COA
2.NO.stdWrap.cObject.wrap = |, |*||, |*||
2.NO.stdWrap.cObject.10 = TEXT
2.NO.stdWrap.cObject.10.field = subtitle
2.wrap = <data>|</data>
}
# Länder sowie Projekte (Punkte) in XML umwandeln mit HMENU/TMENU
30 = HMENU
30 {
special = directory
special.value = SeitenID Karte!
1 = TMENU
1.expAll = 1
1.NO = 1
1.NO.doNotShowLink=1
2 = TMENU
2.expAll = 1
2.NO = 1
2.NO.doNotLinkIt=1
2.NO.stdWrap.cObject = COA
2.NO.stdWrap.cObject {
wrap (
|
)
10 = TEXT
10.field = subtitle
10.wrap = <state id="|">
20 = TEXT
20.field = title
20.wrap = <name>|</name>
30 = TEXT
30.field = uid
30.wrap = <url>javascript:loadState('|');</url>
40 = TEXT
40.field = uid
40.wrap = <data>|</data>
50 = TEXT
50.value = </state>
}
3 = TMENU
3.NO = 1
3.NO.doNotLinkIt=1
3.NO.stdWrap.cObject = COA
3.NO.stdWrap.cObject {
wrap (
<state id="point">
|
</state>
)
10 = TEXT
10.field = title
10.wrap = <name>|</name>
20 = TEXT
20.field = description
20.wrap = <loc>|</loc>
30 = TEXT
30.field = uid
30.wrap = <url>javascript:loadProject('|');</url>
40 = TEXT
40.wrap = <hover></hover>
50 = TEXT
50.wrap = <data>1</data>
}
}
}

Hier die etwas besser formatierte Variante zum downloaden. Als erstes muss die Seiten-ID wo der Länderbaum beginnt gesetzt werden (Bei mir auf die Seite “Karte”). Bei URL können auch die jeweiligen Seiten direkt verlinkt werden (<url>index.php?id=|</url>). Ich habe dies mit einem Javaskript gelöst, welches die Daten mit der AJAX Technik nachlädt. Die Länder in der zweiten Ebene müssen als Untertitel den Kürzel tragen, welcher durch die DIY-Map vorgegeben ist. In der dritten Ebene befinden Sich dann die Projekte, welche in der Beschreibung die Koordinaten (Längen und Breitengrad) des Projektes enthalten.

Ich empfehle falls jemand die DIY Map auch in Typo3 integrieren möchte, die Datendatei in einem ersten Schritt statisch anzulegen. Dannach den Seitenbaum mit den Ländern und Projekten (Punkte in der DIY Map) aufzubauen, und zum Schluss die Seite mit dem obigen TypoSkript anlegen, welche die Daten dann dynamisch ausliesst.