controlBar

Specifies the options of the control bar.

Type: Object

The control bar is a panel on a map that helps you navigate this map. This panel contains the pan control and the zoom bar for panning and zooming the map correspondingly. You can change the visibility of the control bar and adjust its colors using the options of the controlBar configuration object.

Show Example:
jQuery

In this example, the appearance of the control bar is changed using the controlBar configuration object.


                                    

                                    

borderColor

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

Type: String
Default Value: '#5d5d5d'

This option supports the following colors.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the control bar border is colored in 'darkseagreen' using the borderColor option.


                                    

                                    

color

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

Type: String
Default Value: '#ffffff'

This option supports the following colors.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the control bar is colored in 'mistyrose' using the color option.


                                    

                                    

enabled

Specifies whether or not to display the control bar.

Type: Boolean
Default Value: true

Show Example:
jQuery

Toggle the check box below to enable/disable the control bar.


                                    

                                    

horizontalAlignment

Specifies the position of the control bar.

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

In addition to this option, use the verticalAlignment option 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

Show Example:
jQuery

Use the slider below the map to change the opacity of the control bar.


                                    

                                    

verticalAlignment

Specifies the position of the control bar.

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

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