OpenLayers in Joomla (Einstieg)

Um die Karten von Open Street Map in Joomla zu benutzen — ich meine dynamisch nicht als statisches PNG/JPEG, o. ä. — gibt es sicher eine Menge Wege. Allerdings hat weder das Einfügen des Java Script im Template Header von Joomla, noch die Nutzung eines Plugins (injooosm) zum gewünschten Ergebnis geführt. Injooosm kann einfach zu viel für meine Zwecke, und ich habe es, wegen der schlechten Doku, garnicht zum Laufen bekommen. :(

Was ich wollte

In einem Artikel sollte eine OSM-Karte erscheinen, so wie sie bei OpenStreetMap zu sehen ist. Mit Steuerelementen und Layersteuerung. Zusätzlich sollte ein GPX-Track angezeigt werden und einige Marker mit besonderen Stellen innerhalb des Tracks (POIs). Die Grundlagen und ein ad-hoc funktionierendes Beispiel fand ich auf der Seite von OpenLayers. Die Karte, wollte ich jetzt aber in mein Joomla-CMS bringen und in einem Artikel benutzen. In weiteren Artikeln sollten anderen Karten benutzt werden, die andere GPX-Dateien darstellen.

Ein anderes Plugin für Joomla kann immer nur die gleiche Karte darstellen. Wenn ich auf meiner kompletten Site nur eine Karte benötige (Anfahrtskizze) ist das okay, in meinem Fall aber nicht.

Also habe ich mich nach einer einfacheren Variante umgesehen. Da man in Joomla hier und da mal einen Platzhalter im Editor eingeben muss (z. B. {gallery}), konnte ich gut damit leben, ein wenig Code für einen IFRAME einzugeben. Das ist ein Einzeiler, der niemanden überfordert. Zuvor sollte man sich aber mit dem Beispiel für die OpenLayers-Nutzung vertraut machen. Man benötigt für die Darstellung einer Karte nur das einfache Beispiel mit einem Marker in der Mitte (das könnte dann z. B. der Standort der Firma sein). Hier benötigt man lediglich die Koordinaten des Standortes. Wenn man einen Track darstellen möchte, sollte man das einfache Beispiel, so wie im Track example erweitern.

Mir war es nun zu alle dem aber auch noch wichtig, Waypoints in irgendeiner Form darstellen zu können — natürlich möglichst flexibel. Hierzu erweitert man dann das komplette Grundgerüst so, wie im Beispiel POI Layer Example.

Was ich getan habe

Ich habe also einen Artikel angelegt und wie üblich gestaltet (mit Bild, Text und Gallery). Im Anschluß daran sollte jetzt die Karte erscheinen. Also habe ich zunächst eine funktionierende HTML-Datei aus den OpenLayers-Beispielen zusammengebaut und ein Textfile mit den Waypoints angelegt. Das ganze habe ich per FlashUploader in einem neuen Verzeichnis (z. B. osmdata) unterhalb von images (auf dem Webserver, dort wo Joomla installiert ist!) angelegt. Zudem benötigt man noch die GPX-Datei mit dem Track. Da alle Dateien im gleichen Verzeichis liegen, passt man die Pfade so an, dass alle Links und Referenzen in HTML auf “./<dateiname>“ umgestellt sind. Auch die Icons/Symbole, die in der Textdatei mit den Waypoints (POI) stehen, sind in das osmdata-Verzeichnis hochzuladen. Fügt man jetzt den IFRAME ein, wird die Karte wie gewünscht dargestellt. Ich habe den Rahmen des IFRAME ausgeschaltet und keine Scrollbars zugelassen.

Beipieldateien

Werde ich nachreichen, wenn ich meine “produktive“ Vorlage in ein anonymisiertes Beispiel geändert habe … :)

Fazit

Ich nutze in Joomla viele Komponenten, Module und Plugins, die nichts mit Karten, GPS oder GIS zu tun haben. Leider konnte mich keins der getesteten Pakete bzgl. der OSM-Karten wirklich überzeugen. Ich habe allerdings auch nicht die Zeit, das Rad neu zu erfinden. Meine beschriebene Vorgehensweise umschließt jedoch alle Punkte, die mir wichtig waren:

• Darstellung einer dynamischen OSM-Karte in einem Joomla-Artikel
• Darstellung eines GPX-Tracks innerhalb der Karte
• Darstellung von Waypoints mit Infofenster (description) innerhalb der Karte mit anpassbarem Symbol
• beliebig viele Karten mit unterschiedlichem Inhalt (Ausschnitt, GPX-File usw.) in einem oder unterschiedlichen Artikeln

Die OpenLayers-Struktur umfasst noch eine Reihe mehr Möglichkeiten, die ich momentan noch garnicht nutzen (z. B. POIs aus einer Datenbank). Da ich aber hierin eine echte Alternative zur GoogleAPI sehe und mich weiter mit den Möglichkeiten auseinandersetzen werde, folgen diesem Einstieg sicher noch weitere Artikel.

PS: Ich bin mir sicher, dass diese Vorgehensweise das eine oder andere Problem in Joomla lösen kann, mit dem man sich ansonsten Wochenlang herumschlägt — soll heißen, der IFRAME kann auch andere Inhalte einfach einbinden, die nicht über die Multimedia-Erweiterungen abgedeckt sind und auf mehr oder weniger einfachem HTML basieren. :)

Werbung