DE:OpenStreetBugs layer

From OpenStreetMap Wiki
Jump to navigation Jump to search

Die OpenStreetBugs-Layer löst den alten JavaScript-Client, der verwendet wird, um OpenStreetBugs in eine OpenLayers-Karte einzubinden, ab. Er hat die folgenden Vorteile gegenüber seinem Vorgänger:

  • Er erweitert die Klasse OpenLayers.Layer.Markers und ist deshalb mit einem einfachen addLayer() in eine Karte einzubinden. Auch andere OpenLayers-Funktionen können jetzt einfach auf die Layer angewandt werden und man kann die Klasse selbst erweitern. Im alten Client gab es einen Haufen globaler Funktionen, die sich untereinander aufrufen, und die Layer wurde irgenwo inmitten dieser Funktionen zur Karte hinzugefügt, ohne dass irgendeine Form von Objektorientierung verwendet worden wäre.
  • Man kann die Layer in mehreren Karten auf einer Seite gleichzeitig verwenden. Obwohl die OpenStreetBugs-API nicht hierfür ausgelegt ist und stattdessen auf globale JavaScript-Funktionen setzt, die für jeden Bug einzeln aufgerufen werden, verteilt die neue Layer die Daten, die von der API kommen, an alle auf der Seite verwendeten OpenStreetBugs-Layers.
  • Die Layer kann in einen „Nur lesen“-Modus geschaltet werden. Dann ist es nicht möglich, Bugs zu öffnen, zu kommentieren oder zu schließen. Das kann zum Beispiel bei Karten benutzt werden, die ihre Vollständigkeit dadurch ergänzen wollen, dass sie eben anzeigen, was in ihrer Darstellung alles falsch ist.

Der Quellcode ist frei unter der AGPL 3 oder höher verfügbar ([1]).

Die JavaScript-API

Der Pfad zur benötigten JavaScript-Datei ist http://api.facilmap.org/osblayer/osblayer.js. Um OpenStreetBugs in eine Karte einzubinden, muss diese mit folgendem Code im HTML-<head> eingebunden werden:

<script type="text/javascript" src="http://api.facilmap.org/osblayer/osblayer.js"></script>

Die OpenStreetBugs-Layer stellt hauptsächlich zwei Klassen zur Verfügung, diese werden im Folgenden genauer beschrieben.

OpenLayers.Layer.OpenStreetBugs

Die Klasse OpenLayers.Layer.OpenStreetBugs wird als Layer zu einer OpenLayers-Karte hinzugefügt. Sie sorgt dafür, dass die Daten von der OpenStreetBugs-API abgefragt werden und stellt die existierenden Bugs auf der Karte da. Sie ergänzt die Fehlerbeschreibungen mit Formularen zum Kommentieren oder Schließen. Für die Funktionalität, Bugs zu erstellen, wird die Control-Klasse verwendet, welche weiter unten beschrieben wird.

Um die Layer zu einer Karte hinzuzufügen, kann der folgende JavaScript-Code verwendet werden.

var osbLayer = new OpenLayers.Layer.OpenStreetBugs("OpenStreetBugs");
map.addLayer(osbLayer); // map ist eine OpenLayers.Map-Instanz

Das „OpenStreetBugs“ in den Anführungszeichen ist der Name der Layer, der hinterher so im LayerSwitcher der Karte angezeigt wird. Außerdem kann man folgende Optionen übergeben, um das Verhalten ein bisschen anzupassen:

var osbLayer = new OpenLayers.Layer.OpenStreetBugs("OpenStreetBugs", {
  serverURL : "http://openstreetbugs.schokokeks.org/api/0.1/", // Die URL zum OpenStreetBugs-API-Server
  iconOpen : new OpenLayers.Icon("http://openstreetbugs.schokokeks.org/client/open_bug_marker.png", new OpenLayers.Size(22, 22), new OpenLayers.Pixel(-11, -11)), // Das Symbol für offene Bugs [1]
  iconClosed : new OpenLayers.Icon("http://openstreetbugs.schokokeks.org/client/closed_bug_marker.png", new OpenLayers.Size(22, 22), new OpenLayers.Pixel(-11, -11)), // Das Symbol für geschlossene Bugs [1]
  readonly : true, // „Nur lesen“-Modus (kein Erstellen, Kommentieren, Schließen)
  setCookie : false, // Kein Cookie für den OpenStreetBugs-Benutzernamen anlegen
  cookieLifetime : 1000, // Die Lebenszeit des Cookies in Tagen
  cookiePath : "/my/map/", // Der Pfad auf dem Webserver, wo das Cookie überall verfügbar sein soll
  permalinkURL : "http://www.openstreetmap.org/" // URL einer OpenStreetMap-Karte, um die Permalinks damit zu erzeugen
});

[1] Um ein Symbol festzulegen, muss man dessen Größe und die Koordinaten des Mittelpunktes übergeben. Dokumentiert ist das auf [2].

OpenLayers.Control.OpenStreetBugs

Die Klasse OpenLayers.Control.OpenStreetBugs sorgt dafür, dass beim Klick auf die Karte ein neuer OpenStreetBug erzeugt wird.

Um diese Funktionalität zur Karte hinzuzufügen, kann der folgende JavaScript-Code verwendet werden:

var osbControl = new OpenLayers.Control.OpenStreetBugs(osbLayer); // osbLayer ist die OpenLayers.Layer.OpenStreetBugs-Instanz, siehe oben
map.addControl(osbControl); // map ist eine OpenLayers.Map-Instanz
osbControl.activate(); // Aktiviert die Funktionalität, deactivate() deaktiviert sie wieder

Folgende Optionen passen das Verhalten der Klasse an:

var osbControl = new OpenLayers.Control.OpenStreetBugs(osbLayer, {
  icon : new OpenLayers.Icon("http://openstreetbugs.schokokeks.org/client/icon_error_add.png", new OpenLayers.Size(22, 22), new OpenLayers.Pixel(-11, -11)) // Das „Bug anlegen“-Popup wird mit diesem Symbol [1] auf der Karte versehen
});

[1] Um ein Symbol festzulegen, muss man dessen Größe und die Koordinaten des Mittelpunktes übergeben. Dokumentiert ist das auf [3].

Achtung: Durch Aktivieren der Klick-Funktionalität wird automatisch die Layer sichtbar gemacht. Der Grund hierfür ist einerseits, dass sonst kein Symbol/Marker sichtbar wäre, zu dem das „Bug anlegen“-Popup dazugehört, andererseits will niemand einen Bug irgendwo anlegen, ohne nachzuschauen, ob es so einen da nicht schon gibt.

Bei Benutzung einer Toolbar mithilfe von OpenLayers.Control.Panel ([4]) (wie das zum Beispiel FacilMap oben rechts macht), kann man die Klick-Funktion dort hinzufügen:

var osbControl = new OpenLayers.Control.OpenStreetBugs(osbLayer);
map.addControl(osbControl);
toolbar.addControls(osbControl); // toolbar ist eine OpenLayers.Control.Panel-Instanz

Beispiel-Karte

Eine Beispiel-OpenLayers-Karte mit der Layer gibt es auf http://api.facilmap.org/osblayer/example.html.

Entwicklung

Der Quellcode wird auf Gitorious verwaltet. Bugs kann man auf bugs.cdauth.eu melden.

Übersetzung

Übersetzungen in neue Sprachen sind auf Translation immer willkommen.