Ausschnitt einer OpenLayers-Anwendung mit den klassischen Icons
Die OpenSource-Software OpenLayers ermöglicht das unproblematische Veröffentlichen von Karten verschiedenster Anbieter im Web. Die Steuerelemente für die Karte, z.B. “Zoome um einen festen Betrag in die Karte” oder “Verschiebe die Karte um einen festen Betrag nach Osten”, verbergen sich hinter Knöpfen, die mit der Anwendung in einer Standardversion ausgeliefert werden. (vgl. obere Abbildung).
Im Internet kann man OpenLayers-Anwendungen oft an diesen sehr einprägsamen dunkelblauen Icons erkennen. Wenn man jedoch mit OpenLayers Anwendungen erstellt, die im Gesamten einem Corporate Design oder einfach speziellen Farbvorgaben folgen müssen, so passen die Standard-Bilder oftmals nicht. Da zusammen mit OpenLayers jedoch die zugrundeliegenden SVG-Dateien für die späteren Icons ausgeliefert werden, lassen sich – etwa mit der Software Inkscape – angepasste Icons erzeugen.
Die Firma terrestris hat eine Software geschrieben, die diesen Schritt vereinfacht und automatisiert: den OpenLayersButtonGenerator. Das Werkzeug wird über die Kommandozeile mit Parametern zur Vorder- und Hintergrundfarbe aufgerufen und erzeugt anschließend PNG-Dateien, die dem gewünschten Farbprofil entsprechen. Die Anpassung des OpenLayers-Client an spezielle Designansprüche kann somit unproblematisch umgesetzt werden.
Hier kann man das Werkzeug “OpenLayersButtonGenerator” für OpenLayers herunterladen (*.tar.gz, ca. 12,6 KB).
Angepasste / eingefärbte OpenLayers Buttons erzeugt mit dem ButtonGenerator
Kurzanleitung:
Der ButtonGenerator benötigt die Skriptsprache Python und das Vektorgrafikprogramm Inkscape. Entwickelt und getestet wurde das Skript unter Ubuntu Linux, sollte aber auf allen gängigen Linux-Distributionen laufen.
Nach dem Entpacken des Archivs existiert im Verzeichnis "OpenLayersButtonGenerator" eine Datei "generateButtons.py", die — nachdem Sie ggfs. mit chmod +x generateButtons.py ausführbar gesetzt wurde — wie folgt aufgerufen werden kann:
./generateButtons.py 'black' '#ededed'
Der erste Kommandozeilenparameter 'black' benennt die neue Hintergrundfarbe, '#ededed' ist die neue gräuliche Vordergrundfarbe. Der obige Befehl erzeugt im Verzeichnis “OpenLayersButtonGenerator/output-png” schwarz-graue Bilddateien für die OpenLayers-Controls, die Sie sofort einsetzen können. Ersetzen Sie dazu einfach die im Verzeichnis "img" ihrer OpenLayers-Installation befindlichen Bilder mit den soeben erzeugten (ein vorheriges Backup der originalen Icons ist sicherlich sinnvoll). Ein Beispiel für die veränderten Icons, die sich in das restliche Design einer Applikation nahtlos einfügen, ist in der unteren Abbildung erkennbar.
Das Skript kann mit Farbcodes in hexadezimaler RGB-Notation ('#rrggbb', zum Beispiel '#0080ff') oder den benannten Farben gemäß der W3C-SVG-Spezifikation aufgerufen werden. Kurzformen wie '#ff0' für '#ffff00' werden akzeptiert.
Das Skript ist OpenSource-Software unter der BSD-Lizenz.
