Vue VectorMap - controlBar

Configures the control bar.

Selector: DxControlBar
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.

Selector: border-color
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.

Selector: horizontal-alignment
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.

Selector: pan-visible
Type:

Boolean

Default Value: 'true'

verticalAlignment

Specifies the position of the control bar.

Selector: vertical-alignment
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.

Selector: zoom-visible
Type:

Boolean

Default Value: 'true'