OpenStreetBugs layer

From OpenStreetMap Wiki
Jump to navigation Jump to search
OpenStreetBugs layer - Other languages

The OpenStreetBugs layer is a new version of the old JavaScript client that embeds OpenStreetBugs into an OpenLayers map. It has the following advantages over the old client:

  • It extends the OpenLayers.Layer.Markers class, so it is embeddable into an OpenLayers map using a simple addLayer() call. Other OpenLayers functionalities can thus be easily used and the class can be extended. The old client used a whole bunch of global functions that called each other, the adding of a layer to the map was done somewhere in the code, not using object-orientated programming.
  • It is addable to multiple maps on one page. Although the OpenStreetBugs API is not designed for this and calls one global JavaScript function for each bug, the new OpenStreetBugs layer distributes the data from this global function to all existing OpenStreetBugs layers.
  • It can be put into read-only mode. Then users cannot submit comments, open new bugs or close bugs. This might be useful for maps that only want to display map data and want to complete that data by giving information about what’s wrong with it (by displaying OpenStreetBugs).

The source code is available under AGPL 3 or higher ([1]).

The JavaScript API

The path of the required JavaScript file is http://api.facilmap.org/osblayer/osblayer.js. If you want to include OpenStreetBugs into your map, include this file using the following code in your HTML <head> part: 

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

The OpenStreetBugs layer provides two main classes that will be described in the following.

OpenLayers.Layer.OpenStreetBugs

The OpenLayers.Layer.OpenStreetBugs class is added as a Layer to an OpenLayers map, contacts the OpenStreetBugs API and displays the existing bugs on the map providing the funcionality to comment and to close them. For adding comments, see the Control class below.

To add the layer to your map, use the following code. 

var osbLayer = new OpenLayers.Layer.OpenStreetBugs("OpenStreetBugs");
map.addLayer(osbLayer); // map is your instance of OpenLayers.Map

The “OpenStreetBugs” in the quotation marks is the title of your layer that will be displayed in the LayerSwitcher. If you want, you can pass some options to the OpenStreetBugs layer in order to customise its behaviour: 

var osbLayer = new OpenLayers.Layer.OpenStreetBugs("OpenStreetBugs", {
  serverURL : "http://openstreetbugs.schokokeks.org/api/0.1/", // Specify the 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)), // Specify the icon to use for open 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)), // Specify the icon to use for closed bugs [1]
  readonly : true, // Set the layer to “readonly” mode (no adding, commenting, closing)
  setCookie : false, // Don’t save the OpenStreetBugs username in a cookie
  cookieLifetime : 1000, // Specify the lifetime of the username cookies in days
  cookiePath : "/my/map/", // Specify the path on your server where the cookie shall be available,
  permalinkURL : "http://www.openstreetmap.org/" // Link to a slippy map, Permalinks to bugs will be created with this URL
});

[1] To specify an icon you need to pass the icon size and the coordinates of the icon’s centre. See the documentation on [2].

OpenLayers.Control.OpenStreetBugs

The OpenLayers.Control.OpenStreetBugs class provides your map with the functionality to add a bug where you click on the map.

To add it to your map, use the following code: 

var osbControl = new OpenLayers.Control.OpenStreetBugs(osbLayer); // osbLayer is an instance of OpenLayers.Layer.OpenStreetBugs, see above
map.addControl(osbControl); // map is your instance of OpenLayers.Map
osbControl.activate();

These options are available to customise the behaviour of the Control: 

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)) // This icon [1] will be displayed temporarily on the map when you add a bug and will be connected to the “create bug” popup
});

[1] To specify an icon you need to pass the icon size and the coordinates of the icon’s centre. See the documentation on [3].

Please note that by activating the Control, the Layer will be shown automatically. The first reason for this is that else there wouldn’t be a marker on the map that the “Create bug” formular would be connected to. The second reason is that you would not add a bug somewhere before looking if a bug reporting the same thing is already present.

If you are using an OpenLayers.Control.Panel ([4]) providing your user with several map tools (like FacilMap does for example, see the toolbox on the top right), you can add the OpenStreetBugs control to it: 

var osbControl = new OpenLayers.Control.OpenStreetBugs(osbLayer);
map.addControl(osbControl);
toolbar.addControls(osbControl); // toolbar is your instance of OpenLayers.Control.Panel

Example map

An example map using the layer is available on http://api.facilmap.org/osblayer/example.html.

Development

The source code is hosted on GitHub. Bugs are managed on bugs.cdauth.eu.

Translation

Feel free to add your language to /Translation.

If you want proper internationalisation in OpenLayers, call the static JavaScript function OpenLayers.Lang.setCode(String) manually with a language code from the user’s Accept-Language header, as there is no way in JavaScript to detect the user’s preferred language (only their browser language). OpenLayers does not support a language priority list, OpenLayers.Lang.getCode() is set to the value of OpenLayers.Lang.defaultCode when no translation is available for the code passed to OpenLayers.Lang.setCode(String). If you want to build your own priority list based on Accept-Language, be aware of the fact that the existance of an OpenLayers translation does not indicate its completeness, a Romanian translation for example is only available for OpenStreetBugs, not for OpenLayers (nevertheless OpenLayers.Lang.ro exists), it might be the other way round for other languages.

Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=OpenStreetBugs_layer&oldid=1315459"