React VectorMap - markerSettings Deprecated

Use the layers property instead.

An object specifying options for the map markers.

Type:

Object

A marker is a point on a map accompanied by text that helps you flag places on the map. For example, you can use markers to designate cities on the map. The appearance of the markers is specified by the options of the markerSettings configuration object. If these options are defined on the first level of the markerSettings object, they are applied to all the markers at once. However, you can specify several of these options for certain markers exclusively. See the customize option description to learn how.

borderColor Deprecated

Use the borderColor property instead.

Specifies a color for the marker border.

Type:

String

Default Value: '#ffffff'

This option supports the following colors:

borderWidth Deprecated

Use the borderWidth property instead.

Specifies the width of the marker border in pixels.

Type:

Number

Default Value: 2

color Deprecated

Use the color property instead.

Specifies a color for a marker of the dot or bubble type.

Type:

String

Default Value: '#ba4d51'

This option supports the following colors:

colorGroupingField Deprecated

Use the colorGroupingField property instead.

Specifies the field that provides data to be used for coloring markers.

Type:

String

Default Value: undefined

If you need for the color of a specific map marker 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 Deprecated

Use the colorGroups property instead.

Allows you to paint markers with similar attributes in the same color.

Type:

Array<Number>

Default Value: undefined

If you have specified the field that provides marker-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, consider 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 markers. Markers of those data values that do not match either group will be drawn in a default color.

customize Deprecated

Use the customize property instead.

Specifies the function that customizes each marker individually.

Type:

Function

Function parameters:
marker:

Marker

The marker to be customized.

Return Value:

Marker Configuration

A configuration object for the marker.

Cannot be used in themes.

The customize function should return the object that contains options to be changed for a certain area. These options are listed below.

NOTE
As an alternative to the function’s parameter you can use the this keyword.

hoveredBorderColor Deprecated

Use the hoveredBorderColor property instead.

Specifies a color for the marker border when the marker is hovered over.

Type:

String

Default Value: '#ffffff'

This option supports the following colors:

NOTE
Make sure that the hoverEnabled option is set to true, so that the hoveredBorderColor option takes effect.

hoveredBorderWidth Deprecated

Use the hoveredBorderWidth property instead.

Specifies the pixel-measured width of the marker border when the marker is hovered over.

Type:

Number

Default Value: 2

hoveredColor Deprecated

Use the hoveredColor property instead.

Specifies a color for a marker of the dot or bubble type when this marker is hovered over.

Type:

String

Default Value: '#ba4d51'

This option supports the following colors:

NOTE
Make sure that the hoverEnabled option is set to true, so that the hoveredColor option takes effect.

hoverEnabled Deprecated

Use the hoverEnabled property instead.

Specifies whether or not to change the appearance of a marker when it is hovered over.

Type:

Boolean

Default Value: true

If this option is set to true, you can specify colors for the hovered marker and its border using the hoveredColor and hoveredBorderColor options, respectively.

label Deprecated

Use the label property instead.

Specifies marker label options.

Type:

Object

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 for a marker label, assign it to the text field of an object from the markers array when you provide data for markers.

maxSize Deprecated

Use the maxSize property instead.

Specifies the pixel-measured diameter of the marker that represents the biggest value. Setting this option makes sense only if you use markers of the bubble type.

Type:

Number

Default Value: 50

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 markerSettings object.

View Demo

minSize Deprecated

Use the minSize property instead.

Specifies the pixel-measured diameter of the marker that represents the smallest value. Setting this option makes sense only if you use markers of the bubble type.

Type:

Number

Default Value: 20

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 markerSettings object.

View Demo

opacity Deprecated

Use the opacity property instead.

Specifies the opacity of markers. Setting this option makes sense only if you use markers of the bubble type.

Type:

Number

Default Value: 1

palette Deprecated

Use the palette property instead.

Specifies the name of a palette or a custom set of colors to be used for coloring markers of the pie type.

Type:

Array<String>

|

String

Default Value: 'Default'
Accepted Values: 'Default' | 'Soft Pastel' | 'Harmony Light' | 'Pastel' | 'Bright' | 'Soft' | 'Ocean' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Soft Blue' | 'Dark Violet' | 'Green Mist'

If you define markers of the pie type on your map, use the palette option to colorize them. Assign a set of colors or the name of one of the predefined palettes to this option. The colors listed in the palette will be used to paint pie slices. If the number of slices is greater than the number of colors in a palette, the colors are repeated, but slightly modified.

selectedBorderColor Deprecated

Use the selectedBorderColor property instead.

Specifies a color for the marker border when the marker is selected.

Type:

String

Default Value: '#ffffff'

This option supports the following colors:

selectedBorderWidth Deprecated

Use the selectedBorderWidth property instead.

Specifies the pixel-measured width of the marker border when the marker is selected.

Type:

Number

Default Value: 2

selectedColor Deprecated

Use the selectedColor property instead.

Specifies a color for a marker of the dot or bubble type when this marker is selected.

Type:

String

Default Value: '#ba4d51'

This option supports the following colors:

selectionMode Deprecated

Use the selectionMode property instead.

Specifies whether a single or multiple markers can be selected on a vector map.

Type:

String

Default Value: 'single'
Accepted Values: 'multiple' | 'none' | 'single'

Several options and methods are connected with the selection operation. To specify whether a single or multiple markers can be selected at a time, use the selectionMode option. To determine whether a certain marker 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 marker using its selected() method.

  • Change the current selection state of a marker using its selected(state) method. Pass true or false to this method.

  • Deselect all the selected markers using the clearMarkerSelection() method of the map instance.

The change of the selection state invokes the callback function assigned to the onMarkerSelectionChanged option. Within this function you can handle the selection event in the manner you require.

size Deprecated

Use the size property instead.

Specifies the size of markers. Setting this option makes sense for any type of marker except bubble.

Type:

Number

Default Value: 8

sizeGroupingField Deprecated

Use the sizeGroupingField property instead.

Specifies the field that provides data to be used for sizing bubble markers.

Type:

String

Default Value: undefined

If you need for the size of a 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. For this purpose, assign an array to the sizeGroups option.

NOTE
If you need to classify a bubble by its value, leave the sizeGroupingField option unassigned.

sizeGroups Deprecated

Use the sizeGroups property instead.

Allows you to display bubbles with similar attributes in the same size.

Type:

Array<Number>

Default Value: undefined

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 does not match neither group will have a default size.

View Demo

type Deprecated

Use the elementType property instead.

Specifies the type of markers to be used on the map.

Type:

String

Default Value: 'dot'
Accepted Values: 'bubble' | 'dot' | 'image' | 'pie'

VectorMap supports markers of the following types.

  • dot
    Markers are represented by dots bordered with a white line.
  • bubble
    Markers are represented by bubbles of different sizes. The size of a bubble depends on the value of the value field specified in the object of the markers array.
  • pie
    Markers are represented by pie charts. To specify values for pie slices, assign an array to the values field specified in the object of the markers array.
  • image
    Markers are represented by custom images. To specify an image for a marker, assign a URL of this image to the url field specified in the object of the markers array.

View Demo