Color configuration
Color configuration
All data layers support multiple ways of color configuration. In general, there
are two ways of configuring colors: granular color configuration per layer using
a color prop, and color configuration using a legend.
Granular color configuration per layer
For a granular color customization of a single layer, layer's color prop
should be used. It supports a string or a callback that returns a string. The
string value should be any valid CSS color, including rgba, hex, transparent, or
a color name.
If string is provided, it will be used as a color for all data points in the layer, while providing a callback that receives a data point as an argument allows to customize the color per data point.
Color configuration using a legend
Using predefined legend subcomponents it's possible to easily set an advanced colors configuration for multiple data layers at once.
There are three legend subcomponents that can be used to configure colors of the
data layers: SequentialLegend, ThresholdLegend, and CategoricalLegend.
To connect a data layer to the legend, a color property of the layer should be
set to legend string. All data layers with legend color will be colored
according to the legend configuration. Only one legend subcomponent can be used
at a time.
As most of the data layer subcomponents have minimal required data properties of
latitude and longitude, the value associated with the data point must be
provided using the valueAccessor prop. The string provided as a value accessor
will be used to access the property of the data point object. Be aware, that
while some legends expect the value to be a numeric (SequentialLegend and
ThresholdLegend), other expect a string value (CategoricalLegend).
Sequential legend
The SequentialLegend subcomponent allows to automatically split the value
range of the data points into multiple even-sized buckets and assign a color to
each bucket. The sequential legend will automatically consider the minimum and
maximum values of data provided in all layers which have set the coloring prop
to legend and have valid value accessors referring to numerical values. The
value boundaries can be manually customised using the min and max numeric
props. To define a color palette to be used, a colorPalette prop should be
set. The colorPalette prop supports custom color palettes as an array of
string values, as well as variety of predefined color palettes ( see
coloring for more details).
The data layer's valueAccessor prop must reference a numeric property of the
data point object.
Threshold legend
The ThresholdLegend subcomponent is similar to the SequentialLegend, but
allows to define custom value ranges for each bucket. To configure the threshold
legend, an array of ranges must be provided using the ranges prop. Each range
must contain min and max props that define the range boundaries, and a
color prop. If a range contains an Infinity value, the value will be be
displayed as the maximum value present in the data, or as 0 if the data only
contains negative values. A -Infinity value will show the minimum value
present in the data, or 0 if the data only contains positive values.
The data layer's valueAccessor prop must reference a numeric property of the
data point object.
Categorical legend
The CategoricalLegend subcomponent allows mapping of a string value to a
specific color, thus creating a categorical color mapping. To configure the
categorical legend, an key-value object where every key is category name, and
every value is assigned color string can be provided as colorPalette prop.
When passing a predefined color palette, a key of the color palette item will be mapped to the equal category name (if found), and a value of the color palette item will be used as a color. If a category name is not found in the color palette, a default color of the data layer will be used.
The categorical legend supports legend items interactions. When hovering on a legend item name, data points of this category will be highlighted on the map. When hovering on a legend item icon, the opposite will happen - all other categories will be highlighted. When clicking left mouse button (LButton) on a legend item name, all other categories will be hidden.
Legend shared properties
All legend subcomponents support the following shared properties:
position- defines the position of the legend on the map. Supported options areright,bottom, andauto. The default value isauto, which will place the legend on the right side of the map if the map width is greater than the height, and on the bottom of the map otherwise.hidden- defines whether the legend should be hidden. The legend is visible by default.