JavaScript/jQuery VectorMap - legends
A legend is a supplementary map element that helps end-users identify a map area or a map marker. The VectorMap widget can display several legends simultaneously. To configure legends, declare an array of objects and assign it to the legends option. Each object in this array specifies settings of one legend. These settings are described in this section.
Each legend requires the source option to be set. This option specifies whether it is areas or markers that must be accompanied with a legend. Learn more from the description of the source option.
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 option. To provide texts for legend items, you need to implement the customizeText function.
backgroundColor
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
border
This object configures the appearance of the legend border. By default, the legend border is hidden. To make it visible, set the visible option of the border object to true. Then, you can adjust settings of the legend border, such as color, width or opacity using the corresponding options of the border object.
columnCount
To arrange legend items, specify how many rows and columns they must occupy. To do this, use the rowCount and columnCount options.
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 |
---|---|---|
start |
The start value of the group indicated by the legend item. |
|
end |
The end value of the group indicated by the legend item. |
|
index |
The group's index. |
|
color |
The legend item's color. This field is undefined if the source is 'markerSizeGroups'. |
|
size |
The diameter of the legend item in pixels. This field is undefined if the source is 'areaColorGroups' or 'markerColorGroups'. |
This option 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 |
---|---|---|
start |
The start value of the group indicated by the legend item. |
|
end |
The end value of the group indicated by the legend item. |
|
index |
The group's index. |
|
color |
The legend item's color. This field is undefined if the source is 'markerSizeGroups'. |
|
size |
The diameter of the legend item in pixels. This field is undefined if the source is 'areaColorGroups' or 'markerColorGroups'. |
horizontalAlignment
To position a legend on the map, use this option in conjunction with the verticalAlignment option.
Use the HorizontalAlignment
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Left
, Center
, and Right
.
itemsAlignment
This option is useful when there is an odd count of items in the legend and they are placed in several columns.
Use the HorizontalAlignment
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Left
, Center
, and Right
.
margin
When this option is set to a number, the specified margin applies to all sides of the legend. Alternatively, the margin option can be set to an object. This object specifies margins for each side of the legend separately.
Whether or not the specified margin is applied to a particular side of the legend depends on the legend's location. The location is determined by the horizontalAlignment and verticalAlignment options. Refer to the top, bottom, left and right options' description to discover when the margin applies to the corresponding side of the legend.
markerColor
Specifies the color of item markers in the legend. The specified color applied only when the legend uses 'size' source.
markerShape
Use the VectorMapMarkerShape
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Circle
and Square
.
orientation
When this option is set to 'vertical', legend items are displayed vertically (i.e., in a column). When this option is set to 'horizontal', legend items are displayed horizontally (i.e, in a row). When this option is not defined, the legend orientation is chosen automatically.
Use the Orientation
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Horizontal
and Vertical
.
rowCount
To arrange legend items, specify how many rows and columns they must occupy. To do this, use the rowCount and columnCount options.
verticalAlignment
To position a legend on the map, use this option in conjunction with the horizontalAlignment option.
Use the VerticalEdge
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Top
and Bottom
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.