React 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:

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
DxComponent.vue
<template> 
    <dx-vector-map ... >
        <dx-control-bar
            horizontal-alignment="right"
        />
    </dx-vector-map>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxVectorMap, DxControlBar } from 'devextreme-vue/vector-map';

export default {
    components: {
        DxVectorMap,
        DxControlBar
    },
    // ...
}
</script>
React
DxComponent.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { VectorMap, ControlBar } from 'devextreme-react/vector-map';

class DxComponent extends React.Component {
    render() {
        return (
            <VectorMap>
                // ...
                <ControlBar
                    horizontalAlignment="right"
                />
            </VectorMap>
        );
    }
}

export default DxComponent;
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 option supports the following colors:

color

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

Type:

String

Default Value: '#ffffff'

This option 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 option, use the verticalAlignment option to adjust the position of the control bar.

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

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 option, use the horizontalAlignment option to adjust the position of the control bar.

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.