Angular VectorMap - layers
borderColor
This option does not apply if the layer type is "line".
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
borderWidth
Specifies the line width (for layers of a line type) or width of the layer elements border in pixels.
color
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
colorGroupingField
If you need for the color of a specific map area to depend on the value of one of its attributes, assign the name of this attribute to the colorGroupingField option. The attribute must contain numeric values. After that, specify groups into which attribute values must be classified. For this purpose, assign an array to the colorGroups option. Each group in this array will be assigned a color from the palette.
colorGroups
If you have specified the field that provides area-coloring data, you need to specify groups into which this data must be classified. For this purpose, assign an array of numbers to the colorGroups option. Each pair of numbers in this array defines a range of data values.
For example, imagine that the colorGroups array contains four items: [0, 1, 2, 3]. This array specifies three ranges, or groups: 0-1, 1-2 and 2-3. Thus, data values will be split up into three groups. Each group will be assigned a color from the palette in order to paint the corresponding areas. Areas of those data values that do not match neither group will be drawn in a default color.
customize
Only the following options can be changed in the customize function.
- borderColor
- borderWidth
- color
- hoveredBorderColor
- hoveredBorderWidth
- hoveredColor
- label (but not enabled)
- opacity
- selectedBorderColor
- selectedBorderWidth
- selectedColor
- size
this
keyword.dataField
Specifies the name of the attribute containing marker data. Setting this option makes sense only if the layer type is "marker" and the elementType is "bubble", "pie" or "image".
elementType
Specifies the type of a marker element. Setting this option makes sense only if the layer type is "marker".
Use the VectorMapMarkerType
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Dot
, Bubble
, Pie
, and Image
.
View Image Markers Demo View Bubble Markers Demo View Pie Markers Demo
hoveredBorderColor
This option does not apply if the layer type is "line".
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
hoveredBorderWidth
Specifies the pixel-measured line width (for layers of a line type) or width for the border of the layer element when it is hovered over.
hoveredColor
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
hoverEnabled
If this option is set to true, you can specify colors for the hovered layer element and its border using the hoveredColor and hoveredBorderColor options, respectively.
label
A marker label is a text that accompanies a map marker. Usually, a marker label displays the name of a certain geographical point.
To specify a text to be used in a marker label, place it in a field of the marker object. After that, assign the name of this field to the label.dataField option. Finally, enable marker labels by assigning true to the label.enabled option.
maxSize
Specifies the pixel-measured diameter of the marker that represents the biggest value. Setting this option makes sense only if the layer type is "marker".
When you use bubble markers on your map, their sizes depend on their values. The biggest value will be represented by the largest bubble. Similarly, the smallest value will be represented by the smallest bubble. Bubbles that represent values in between will have sizes proportional to the represented values. To specify the sizes of the largest and smallest bubbles, use the maxSize and minSize properties of the layers object.
minSize
Specifies the pixel-measured diameter of the marker that represents the smallest value. Setting this option makes sense only if the layer type is "marker".
When you use bubble markers on your map, their sizes depend on their values. The biggest value will be represented by the largest bubble. Similarly, the smallest value will be represented by the smallest bubble. Bubbles that represent values in between will have sizes proportional to the represented values. To specify the sizes of the largest and smallest bubbles, use the maxSize and minSize properties of the layers object.
palette
A palette defines a range of colors that are used to paint layer elements. This range is divided into segments using the value assigned to the paletteSize option. Each segment contributes a color into a resulting array of colors. The more of these segments, the greater the variety of colors in this array. All available palettes are listed in the accepted values.
In order to apply a palette to a map, follow the next steps.
- Assign the name of the required palette (or an array of two colors) to the palette option.
- Use the paletteSize option to define how many colors should be produced from the palette or array specified in the previous step.
- Specify the index of the color from the colors array, which should be used for coloring an area, using the paletteIndex field of the object returned by the customize callback function.
Use the VizPalette
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Default
, SoftPastel
, HarmonyLight
, Pastel
, Bright
, Soft
, Ocean
, Vintage
, Violet
, Carmine
, DarkMoon
, SoftBlue
, DarkViolet
, and GreenMist
.
paletteSize
Assign a number that is greater than 0 to this option in order to use palettes.
selectedBorderColor
Specifies a color for the border of the layer element when it is selected.
This option does not apply if the layer type is "line".
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
selectedBorderWidth
Specifies a pixel-measured line width (for layers of a line type) or width for the border of the layer element when it is selected.
selectedColor
Specifies a color for the layer element when it is selected.
selectionMode
Several options and methods are connected with the selection operation. To specify whether single or multiple areas can be selected at a time, use the selectionMode option. To determine whether a certain area is selected when the widget is created, use the isSelected field of the object returned by the customize callback function.
At runtime, you can do the following operations.
Obtain the current selection state of a layer element using its selected() method.
Change the current selection state of a layer element using its selected(state) method. Pass true or false to this method.
Deselect all the selected layer elements using the clearSelection() method of the map layer.
The change of the selection state invokes the callback function assigned to the onSelectionChanged option. Within this function, you can handle the selection event in the manner you require.
Use the SelectionMode
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: None
, Single
and Multiple
.
size
Specifies the size of markers. Setting this option makes sense only if the layer type is "marker" and the elementType is "dot", "pie" or "image".
sizeGroupingField
Specifies the field that provides data to be used for sizing bubble markers. Setting this option makes sense only if the layer type is "marker" and the elementType is "bubble".
If you need the size of the bubble marker to depend on the value of one of its attributes, assign the name of this attribute to the sizeGroupingField option. The attribute must contain numeric values. After that, specify groups into which attribute values must be classified by assigning an array to the sizeGroups option.
sizeGroups
Allows you to display bubbles with similar attributes in the same size. Setting this option makes sense only if the layer type is "marker" and the elementType is "bubble".
If you have specified the field that provides marker-sizing data, you need to specify groups into which this data must be classified. For this purpose, assign an array of numbers to the sizeGroups option. Each pair of numbers in this array defines a range of data values.
For example, consider that the sizeGroups array contains four items: [0, 1, 2, 3]. This array specifies three ranges, or groups: 0-1, 1-2 and 2-3. Thus, data values will be split up into three groups. Each group will be assigned a size correlating with the group values. This size will be calculated automatically taking into account the minSize and maxSize values. Markers of those data values that do not match neither group will have a default size.
type
Use the VectorMapLayerType
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Area
, Marker
and Line
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.