React VectorMap - legends
A legend is a supplementary map element that helps end-users identify a map area or a map marker. The VectorMap UI component can display several legends simultaneously. To configure legends, declare an array of objects and assign it to the legends property. Each object in this array specifies settings of one legend. These settings are described in this section.
Each legend requires the source property to be set. This property specifies whether it is areas or markers that must be accompanied with a legend. Learn more from the description of the source property.
A map legend contains several legend items. A legend item consists of a marker and a text. You can change the size of markers using the markerSize property. To provide texts for legend items, you need to implement the customizeText function.
backgroundColor
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
columnCount
Use this property when the legend is oriented vertically. Otherwise, use rowCount.
See Also
- legends[].columnItemSpacing
customizeHint
Specifies text for a hint that appears when a user hovers the mouse pointer over the text of a legend item.
| Name | Type | Description |
|---|---|---|
| color |
The legend item's color. This field is undefined if the source is 'markerSizeGroups'. |
|
| end |
The end value of the group indicated by the legend item. |
|
| index |
The group's index. |
|
| size |
The diameter of the legend item in pixels. This field is undefined if the source is 'areaColorGroups' or 'markerColorGroups'. |
|
| start |
The start value of the group indicated by the legend item. |
This property accepts a function that must return the required text. When implementing this function, use its parameter to access information on the legend item.
customizeText
| Name | Type | Description |
|---|---|---|
| color |
The legend item's color. This field is undefined if the source is 'markerSizeGroups'. |
|
| end |
The end value of the group indicated by the legend item. |
|
| index |
The group's index. |
|
| size |
The diameter of the legend item in pixels. This field is undefined if the source is 'areaColorGroups' or 'markerColorGroups'. |
|
| start |
The start value of the group indicated by the legend item. |
horizontalAlignment
Along with verticalAlignment, specifies the legend's position.
itemsAlignment
Aligns items in the last column or row (depending on the legend's orientation). Applies when legend items are not divided into columns or rows equally.
markerColor
Specifies the color of item markers in the legend. The specified color applied only when the legend uses 'size' source.
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
markerComponent
An alias for the markerTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
markerRender
An alias for the markerTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
markerTemplate
orientation
Arranges legend items vertically (in a column) or horizontally (in a row). The default value is "horizontal" if the legends[].horizontalAlignment is "center". Otherwise, it is "vertical".
rowCount
Use this property when the legend is oriented horizontally. Otherwise, use columnCount.
See Also
- legend.rowItemSpacing
title
To specify only the title's text, assign it directly to this property. Otherwise, set this property to an object with the text and other fields specified.
The title can be accompanied by a subtitle. Assign it to the title.subtitle property.
verticalAlignment
Along with horizontalAlignment, specifies the legend's position.
If you have technical questions, please create a support ticket in the DevExpress Support Center.