# How to add control on the map
Amazon Location Service allows you to add multiple controls to the map, including navigation, geolocation, fullscreen, scale, and attribution controls.
+ **Navigation control**: Contains zoom buttons and a compass.
+ **Geolocate control**: Provides a button that uses the browser's geolocation API to locate the user on the map.
+ **Fullscreen control**: Contains a button for toggling the map in and out of fullscreen mode.
+ **Scale control**: Displays the ratio of a distance on the map to the corresponding distance on the ground.
+ **Attribution control**: Presents the map's attribution information. By default, the attribution control is expanded (regardless of map width).
You can add the controls to any corner of the map: top-left, bottom-left, bottom-right, or top-right.
## Adding map controls
In the following example, you'll add the map controls listed above.
### Map control code example
------
#### [ index.html ]
```
Map Controls
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Developer tips
### Navigation control options
```
new maplibregl.NavigationControl({
showCompass: true, // show or hide compass (default: true)
showZoom: true // show or hide zoom controls (default: true)
});
```
### Geolocate control options
```
new maplibregl.GeolocateControl({
positionOptions: { enableHighAccuracy: true }, // default: false
trackUserLocation: true // default: false
});
```
### Attribution control options
```
new maplibregl.AttributionControl({
compact: true, // compact (collapsed) mode (default: false)
});
```
### Scale control options
```
new maplibregl.ScaleControl({
maxWidth: 100, // width of the scale (default: 50)
unit: 'imperial' // imperial or metric (default: metric)
});
```
### Fullscreen control options
```
map.addControl(new maplibregl.FullscreenControl({
container: document.querySelector('body') // container for fullscreen mode
}));
```