Documentation JavaScript-Client

About

The 52°North JavaScript SOS Client provides the selection of timeseries and displays the timeseries data in diagramms or tables. The client consumes instances of the timeseries-api. By requesting the REST interface it gets stations and regarding timeseries.

This documentation gives an overview of the configuration of the client.

Settings injection

How to import own settings? Here are two examples to overwrite the default settings of the client:

Settings through a settings file

Create a settings.json looking like this example:

{
    "tileLayerUrl": "http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg",
    "tileLayerOptions": {
        "attribution": "&copy; <a href=\"http://www.mapquest.com/\" target=\"_blank\">MapQuest</a> <img src=\"http://developer.mapquest.com/content/osm/mq_logo.png\"/>"
    },
    "selectedLineWidth" : 4,
    "commonLineWidth" : 1
}

and than import it where the JS-Client StartController is initialized:

$.getJSON("settings.json", function(json) {
    StartController.init(settings);
});

Settings with javascript funcitonality or conditional settings defined by javascript

Define a settings object and insert it in the StartController initialization:

var settings = {};
settings.chartOptions = {
    series: {
        points: {
            radius: 4,
            symbol: function cross(ctx, x, y, radius, shadow) {
                var size = radius * Math.sqrt(Math.PI) / 2;
                ctx.moveTo(x - size, y - size);
                ctx.lineTo(x + size, y + size);
                ctx.moveTo(x - size, y + size);
                ctx.lineTo(x + size, y - size);
            },
            show: true
        }
    }
};
StartController.init(settings);

Combination of both settings options:

A combination of both methods is also possible. So first define a settings file, import it and extend the settings with additional configurations.

var settings = {};
settings.chartOptions = {
    series: {
        points: {
            radius: 4,
            symbol: function cross(ctx, x, y, radius, shadow) {
                var size = radius * Math.sqrt(Math.PI) / 2;
                ctx.moveTo(x - size, y - size);
                ctx.lineTo(x + size, y + size);
                ctx.moveTo(x - size, y + size);
                ctx.lineTo(x + size, y - size);
            },
            show: true
        }
    }
};
$.getJSON("settings.json", function(json) {
    $.extend(settings, json);
    StartController.init(settings);
});

Settings options

Parameter	Example	Description
`providerBlackList`	providerBlackList: [ { serviceID: 'srv_123', apiUrl: 'http://providerA/timeseries/api/v1/' }, { serviceID: 'srv_456', apiUrl: 'http://providerB/timeseries/api/v1/' } ]	The entries in this list will be removed from the provider list offered to the user.
`restApiUrls`	restApiUrls: { 'http://providerA/timeseries/api/v1/': 'providerA', 'http://providerB/timeseries/api/v1/': 'providerB' }	A list of timeseries-API urls and an appropriate identifier to create internal timeseries ids.
`defaultProvider`	defaultProvider: { serviceID: 'srv_123', apiUrl: 'http://providerA/timeseries/api/v1/' }	The default selected provider to show stations in the map.
`clusterStations`	clusterStations: true	The default setting for clustering stations on the map.
`generalizeData`	generalizeData: false	The default setting for generalization of timeseries data.
`saveStatus`	saveStatus: false	The default setting for saving the status, while the user works with the client.
`saveStatusPossible`	saveStatusPossible: true	Should the client be able to save the status.
`concentrationMarker`	concentrationMarker: false	The default setting for concentration marker.
`zoom`	zoom: 13	The zoom level in the map, used for user location and station position.
`mapOptions`	mapOptions: { minZoom: 3, maxZoom: 15 }	Configuration for additional options for the map (see Leaflet documentation).
`dateformat`	dateformat: 'DD.MM.YY HH:mmZ'	The long date/time format which is used on several places.
`shortDateformat`	shortDateformat: "DD.MM.YY"	The short date/time format which is used on several places.
`timeseriesDataBuffer`	timeseriesDataBuffer: moment.duration(2, 'h')	Initial duration buffer for time series request. After the first achieved timeseries data this buffer will be abjusted to the gained data.
`ignoreAfterDuration`	ignoreAfterDuration: moment.duration(1, 'y')	The duration after which latest values shall be ignored when rendering marker in the map.
`defaultMarkerColor`	defaultMarkerColor: '#123456'	The default color for circled marker, when last value is older than `ignoreAfterDuration` or the timeseries has no last value.
`defaultZeroScale`	defaultZeroScale: false	The default scaling of a new loaded timeseries.
`defaultGroupedAxis`	defaultGroupedAxis: true	Default grouping timeseries by unit of measurement.
`additionalParameters`	additionalParameters: { locale: 'de' }	Additional parameters which are append to the requests.
`defaultLanguage`	defaultLanguage: 'en'	Default language for internationalization. Will be used if no language parameter ist set in the url and no language is set in th browser.
`saveStatusPossible`	saveStatusPossible: true	En-/disable status saving.
`pagesize`	pagesize: 20	Entries on a page of values in the table view.
`selectedLineWidth`	selectedLineWidth: 5	The line width for selected timeseries in the diagram.
`commonLineWidth`	commonLineWidth: 2	The common line width for an unselected timeseries in the diagram.
`chartOptions`	chartOptions: {}	Chart styling options for more details check the documentation of flot. (some options will be modified while rendering the diagrams)
`colorList`	colorList: ['#1abc9c', '#27ae60', '#2980b9', '#8e44ad', '#2c3e50', '#f1c40f', '#d35400', '#c0392b', '#7f8c8d']	A list of colors for the selection of a different timeseries color.
`intervalList`	intervalList: [ {label: _('styleChange.barChartInterval.hour'), value: 1}, {label: _('styleChange.barChartInterval.day'), value: 24}, {label: _('styleChange.barChartInterval.week'), value: 7 * 24}, {label: _('styleChange.barChartInterval.month'), value: 30 * 24} ]	The interval to display the timeseries in a bar diagram with label and value in hours.
`timeRangeData`	timeRangeData: { presets: [ { name: 'lastHour', label: _('timeSelection.presets.lastHour'), interval: { from: moment().subtract('hours', 1), till: moment(), mode: 'minutes' } }, { name: 'today', label: _('timeSelection.presets.today'), interval: { from: moment().startOf('day'), till: moment().endOf('day'), mode: 'day' } } ] }	Preconfigure fixed time intervals which will be rendered as selectable buttons.
`tileLayerUrl`	tileLayerUrl: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'	Configuration for the tile layer in the leaflet map (see for more information the leaflet documentation)
`wmsLayer`	wmsLayer: [ { url: "http://www.wms.nrw.de/umwelt/forst/waldNRW", options: { layers: 'WaldNRW', format: 'image/png', transparent: true, attribution: "Wald in NRW" }, name: "Wald in NRW" } ]	An array of Web Map Services with the parameters: `url` - to the service `options` - (see for more information the leaflet documentation) `name` - How the layer is named in the layer selector.
`tileLayerUrl`	tileLayerUrl: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'	Configuration for the tile layer in the leaflet map (see Leaflet documentation).
`tileLayerOptions`	tileLayerOptions: { attribution: '© OpenStreetMap contributors' }	Leaflet options for the chosen tile layer (do not forget to encode special characters).
`enableGeoSearch`	enableGeoSearch: true	Enables the geo search in the map view.