Free Trial Buy

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.




            


            
    

        
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.




            


            
    

        
Show Example:
 

        

                
jQuery

        


        

                

                    

                    


                        

                                

                                    
                                

                        


                            


In this example, the control bar is colored in 'mistyrose' using the color option. In order to see the color clearly, the control bar is made opaque.

                            

                            

                                    

                                        

                                    

                            

                            

                                    

                                        

                                    

                            

                    

                

        

    



        

        

                
                            

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.



When configuring the widget using ASP.NET MVC Wrappers, specify this option using the HorizontalAlignment enum. 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
                            

                

            

                


            


            
    

        
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.



When configuring the widget using ASP.NET MVC Wrappers, specify this option using the VerticalEdge enum. This enum accepts the following values: Top and Bottom.