Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
# Comment ajouter un contrôle sur la carte
Amazon Location Service vous permet d'ajouter plusieurs contrôles à la carte, notamment les contrôles de navigation, de géolocalisation, de plein écran, d'échelle et d'attribution.
+ **Contrôle de navigation** : contient des boutons de zoom et une boussole.
+ **Contrôle de géolocalisation** : fournit un bouton qui utilise l'API de géolocalisation du navigateur pour localiser l'utilisateur sur la carte.
+ **Contrôle en plein écran** : contient un bouton permettant d'activer ou de désactiver la carte en mode plein écran.
+ **Contrôle de l'échelle** : affiche le rapport entre une distance sur la carte et la distance correspondante au sol.
+ **Contrôle d'attribution** : présente les informations d'attribution de la carte. Par défaut, le contrôle d'attribution est étendu (quelle que soit la largeur de la carte).
Vous pouvez ajouter les commandes à n'importe quel coin de la carte : en haut à gauche, en bas à gauche, en bas à droite ou en haut à droite.
## Ajouter des commandes cartographiques
Dans l'exemple suivant, vous allez ajouter les commandes cartographiques répertoriées ci-dessus.
### Exemple de code de contrôle cartographique
------
#### [ index.html ]
```
Map Controls
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Conseils aux développeurs
### Options de commande de navigation
```
new maplibregl.NavigationControl({
showCompass: true, // show or hide compass (default: true)
showZoom: true // show or hide zoom controls (default: true)
});
```
### Options de contrôle de géolocalisation
```
new maplibregl.GeolocateControl({
positionOptions: { enableHighAccuracy: true }, // default: false
trackUserLocation: true // default: false
});
```
### Options de contrôle d'attribution
```
new maplibregl.AttributionControl({
compact: true, // compact (collapsed) mode (default: false)
});
```
### Options de contrôle de l'échelle
```
new maplibregl.ScaleControl({
maxWidth: 100, // width of the scale (default: 50)
unit: 'imperial' // imperial or metric (default: metric)
});
```
### Options de contrôle en plein écran
```
map.addControl(new maplibregl.FullscreenControl({
container: document.querySelector('body') // container for fullscreen mode
}));
```