Source: https://maps.vietmap.vn/docs/sdk-web-gl/map/example-map/control-map/

# ControlOptions
`ControlOptions` is the options for the controls of the map, such as zoom in and out, rotate, orientate, and other interactive controls.

| Control Type | Prop | Type | Default | Description | Example |
| ---- | :--:  | :--:  | :------: | :------: | :----------: |
| `NavigationControl` | showZoom | `boolean` | `true` | Show zoom button. |`showZoom: false`|
|| showCompass | `boolean` | `true` | Show compass button. | `showCompass: false` | 
| `GeolocateControl` | positionOptions | `object` | `{}` | The position options, such as high accuracy. | `enableHighAccuracy: true` |
|| trackUserLocation | `boolean` | `false` | Track and show user location. | `trackUserLocation: true` |
| `ScaleControl` | maxWidth | `number` | `100` | The maximum width of the scale. | `maxWidth: 80` |
|| unit | `string` | `metric` | The unit of the scale: `metric` or `imperial`. | `unit: 'imperial'` | 
| `FullscreenControl` | N/A	 | N/A | N/A | No special options, only show fullscreen button. |


## Button display position
In `VietMap GL`, you can adjust the display position of the controls (controls) on the map. The controls like `NavigationControl`, `GeolocateControl`, `ScaleControl`, and `FullscreenControl` can be set to different positions using the `position` property when adding to the map.

| Position | Value | Description |
| ---- | :--:  | :--:  | 
| top-left | `top-left` | Display at the top left corner of the map (default position for many controls). | 
| top-right | `top-right` | Display at the top right corner of the map. | 
| bottom-left | `bottom-left` | Display at the bottom left corner of the map. | 
| bottom-right | `bottom-right` | Display at the bottom right corner of the map. |

## Example
**NavigationControl**
```js
map.addControl(new vietmapGl.NavigationControl(),'top-right');
```

**GeolocateControl**
```js
map.addControl(new vietmapGl.GeolocateControl(),'top-right');
```

**ScaleControl**
```js
map.addControl(new vietmapGl.ScaleControl(),'top-right');
```

**FullscreenControl**
```js
map.addControl(new vietmapGl.FullscreenControl(),'top-right');
```