JavaScript/jQuery VectorMap - legends
Configures map 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
Colors the legend's background.
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
columnCount
Arranges legend items into several columns.
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.
Information on 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. |
The text for the hint to display.
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.
customizeItems
Allows you to change the order and visibility of legend items.
Legend items before customizations.
Legend items after customizations.
customizeText
Specifies text for legend items.
Information on 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. |
The text for the legend item to display.
This property accepts a function that returns the text for a legend item. When implementing this function, you can access useful data on the legend item using the function's argument.
horizontalAlignment
Along with verticalAlignment, specifies the legend's position.
See Also
- legends[].orientation
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.
itemTextPosition
Specifies the text's position relative to the marker in a legend item.
margin
Generates an empty space, measured in pixels, around the legend.
When set to a number, this property applies to all the legend's sides. The object allows you to control each side individually.
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
markerTemplate
Specifies an SVG element that serves as a custom legend item marker.
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".
See Also
- legends[].verticalAlignment
- legends[].horizontalAlignment
paddingLeftRight
Generates an empty space, measured in pixels, between the legend's left/right border and its items.
paddingTopBottom
Generates an empty space, measured in pixels, between the legend's top/bottom border and its items.
rowCount
Arranges legend items in several rows.
Use this property when the legend is oriented horizontally. Otherwise, use columnCount.
See Also
- legend.rowItemSpacing
title
Configures the legend 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.
See Also
- legends[].orientation
If you have technical questions, please create a support ticket in the DevExpress Support Center.