Components: Custom chart palettes and map backgrounds
Plugins can embed custom elements that personalize charts: color palettes and map backgrounds. In order to add a custom element, you must add the element description in a Javascript file in the plugin content.
Color palettes
See Color palettes for general information about color palettes in charts.
Color palettes can provide same graph color patterns across different charts. From the global Javascript object
dkuColorPalettes
, there are three different functions depending on the palette type:
-
Discrete:
dkuColorPalettes.addDiscrete(palette) -
Continuous:
dkuColorPalettes.addContinuous(palette) -
Diverging (continuous but colors expand to both side from the middle value):
dkuColorPalettes.addDiverging(palette)
The
palette
object has several properties:
-
id: unique ID across all color palettes in DSS -
name: displayed name -
category: category in the list -
colors: array of the ordered colors (can be#012345orrgb(r, g, b)styles) -
values: array of the ordered values (a value can benullfor auto matching)
dkuColorPalettes.addDiscrete({
id: 'palette-id',
name: 'palette-name',
category: 'palette-category',
colors: ['#012345', 'rbg(r, g, b)'],
values: [1, 2]
});
Map backgrounds
Map backgrounds can be customized in order to improve map style or to enable maps on offline DSS instances. From the global Javascript object
dkuMapBackgrounds
, there are three different function to add a map background:
-
dkuMapBackgrounds.addMapbox(mapId, displayLabel, accessToken): add a Mapbox background, see Mapbox documentation Note that a “Mapbox” plugin for DSS already allows you to add Mapbox backgrounds.-
mapIdMapbox identifier of the background -
displayLabelHow it will appear in DSS -
accessTokenMapbox API token
-
dkuMapBackgrounds.addMapbox('mapbox.satellite', 'Satellites', 'ABCDE1234');
-
dkuMapBackgrounds.addWMS(id, name, category, wmsURL, layerId): add a generic WMS layer, see Leaflet documentation-
idunique ID across all map backgrounds in DSS -
namedisplayed name -
categorycategory in the list -
wmsURLWMS service URL -
layerIdlayer ID of the WMS service
-
dkuMapBackgrounds.addWMS('mws-map-bg', 'Map background', 'My backgrounds', 'http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi', 'nexrad-n0r-900913');
-
dkuMapBackgrounds.addCustom(background): a custom map background-
idunique ID across all map backgrounds in DSS -
namedisplayed name -
categorycategory in the list -
fadeColorcolor of faded map object -
getTileLayerfunction that returns a Leaflet TileLayer object, see Leaflet documentation
-
dkuMapBackgrounds.addCustom({
id: 'map-bg',
name: 'Map background 2',
category: 'Custom map backgrounds',
fadeColor: '#333',
getTileLayer: function() {
return new L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
});
}
});