React VectorMap - controlBar

Configures the control bar.

Selector: ControlBar
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:

jQuery
JavaScript
 $(function() { $("#vectorMapContainer").dxVectorMap({ // ... controlBar: { horizontalAlignment: "right" } }); });
Angular
app.component.html
app.module.ts
 <dx-vector-map ... > <dxo-control-bar horizontalAlignment="right"> </dxo-control-bar> </dx-vector-map>
 // ... import { DxVectorMapModule } from 'devextreme-angular'; @NgModule({ imports: [ // ... DxVectorMapModule ], // ... }) export class AppModule { }
Vue
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>
React
App.js
 import React from 'react'; import { VectorMap, ControlBar } from 'devextreme-react/vector-map'; class App extends React.Component { render() { return ( <VectorMap> // ... <ControlBar horizontalAlignment="right" /> </VectorMap> ); } } export default App;
ASP.NET MVC Controls
Razor C#
 @(Html.DevExtreme().VectorMap() @* ... *@ .ControlBar(cb => cb .HorizontalAlignment(HorizontalAlignment.Right) ) )

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:

HorizontalAlignment

Default Value: 'left'

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

panVisible

Specifies whether the pan control is visible.

Type:

Boolean

Default Value: true

verticalAlignment

Specifies the position of the control bar.

Type:

VerticalEdge

Default Value: 'top'

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

zoomVisible

Specifies whether the zoom bar is visible.

Type:

Boolean

Default Value: true