Vue VectorMap - controlBar

Configures the control bar.

Type:

Object

Users can use the pan control and zoom bar in the control bar panel to navigate the map.

DevExtreme Vector Map - Control Bar

The following code shows how to use the controlBar object to move the control bar to the right side of the map:

App.vue
  • <template>
  • <DxVectorMap ... >
  • <DxControlBar
  • horizontal-alignment="right"
  • />
  • </DxVectorMap>
  • </template>
  •  
  • <script>
  • import { DxVectorMap, DxControlBar } from 'devextreme-vue/vector-map';
  •  
  • export default {
  • components: {
  • DxVectorMap,
  • DxControlBar
  • },
  • // ...
  • }
  • </script>

borderColor

Specifies a color for the outline of the control bar elements.

Type:

String

Default Value: '#5d5d5d'

This property supports the following colors:

color

Specifies a color for the inner area of the control bar elements.

Type:

String

Default Value: '#ffffff'

This property supports the following colors:

enabled

Specifies whether or not to display the control bar.

Type:

Boolean

Default Value: true

horizontalAlignment

Specifies the position of the control bar.

Type:

String

Default Value: 'left'
Accepted Values: 'center' | 'left' | 'right'

In addition to this property, use the verticalAlignment property to adjust the position of the control bar.

margin

Specifies the margin of the control bar in pixels.

Type:

Number

Default Value: 20

opacity

Specifies the opacity of the control bar.

Type:

Number

Default Value: 0.3

verticalAlignment

Specifies the position of the control bar.

Type:

String

Default Value: 'top'
Accepted Values: 'bottom' | 'top'

In addition to this property, use the horizontalAlignment property to adjust the position of the control bar.