> For the complete documentation index, see [llms.txt](https://cranford-tech.gitbook.io/beautiful-maps-mapbox/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cranford-tech.gitbook.io/beautiful-maps-mapbox/loading-a-map/adding-controls-to-a-map.md).

# Adding controls to a map

There are a number of controls you can add to a Mapbox Map that will enable additional functionality.&#x20;

<figure><img src="https://4212634705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPwUVbLJRMHVonmvO4xZ8%2Fuploads%2F4hWHKiF6hltwvU8anr3Q%2FScreenshot%202025-01-08%20at%2017.36.20.png?alt=media&amp;token=e86e700e-efb8-46dd-90ff-a3445e22991c" alt=""><figcaption></figcaption></figure>

Please note you can also add these controls via workflow actions if you prefer.

### Navigation control

Setting the '**Show Navigation**' field to 'yes' gives you the ability to zoom and pan the map

<figure><img src="https://4212634705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPwUVbLJRMHVonmvO4xZ8%2Fuploads%2F2cT1ZYjdpGLZAkpRutbH%2FScreenshot%202025-01-08%20at%2017.40.15.png?alt=media&amp;token=c4a16b13-3c01-4ba6-9f38-d4ea90b705fc" alt=""><figcaption></figcaption></figure>

### Directions control

Setting the '**Show Directions'** field to 'yes' allows the user to get directions from a start location to an end location:

<figure><img src="https://4212634705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPwUVbLJRMHVonmvO4xZ8%2Fuploads%2F1TbJVROuWwQEmN0RhuxO%2F2025-01-08%2017.45.19.gif?alt=media&amp;token=61d408d2-8dc7-401f-85d3-8c0e54096398" alt=""><figcaption></figcaption></figure>

### **Gelocation**

Setting the '**Geolocate Control**' to 'yes' adds a button that can be clicked to track the current user.

<figure><img src="https://4212634705-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPwUVbLJRMHVonmvO4xZ8%2Fuploads%2FSGg05deszxB38p8jaxhP%2F2025-01-08%2017.51.42.gif?alt=media&amp;token=b863db3a-193b-43af-a71b-5d4939d100c9" alt=""><figcaption></figcaption></figure>
