---
title: "Compass rose control | JavaScript maps SDK"
description: "Add a compass rose to indicate map bearing rotation."
---
# Compass rose control
Add a compass rose as a visual indicator of the map’s bearing (rotation) using Custom Controls.
This example demonstrates how to effectively use declarative custom controls to implement a control that follows the state of the map without requiring any JavaScript to create it.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
// Initialize MapTiler SDK
config.apiKey = "YOUR_MAPTILER_API_KEY_HERE";
// Initialize the map
const map = new Map({
container: 'map', // The ID of the HTML element where the map will be rendered
style: MapStyle.DATAVIZ,
zoom: 7,
bearing: 42,
center: [-104.986605, 39.760618],
customControls: true,
});
```
#### index.html
```html
MapTiler Compass Control
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/* Custom control styling */
.compass {
width: 10rem;
margin: 1rem;
transform: rotateZ(calc(var(--maptiler-bearing) * -1deg));
}
```
### Basic JavaScript setup
```html
MapTiler Compass Control
```
## Related examples
### [Add custom zoom control](https://docs.maptiler.com/sdk-js/examples/custom-control/)
Examples
Add custom zoom level control to your map interface.
### [Custom control declarative](https://docs.maptiler.com/sdk-js/examples/custom-controls-declarative/)
Examples
Add interactive custom controls to maps using declarative HTML.
### [Custom control programmatically](https://docs.maptiler.com/sdk-js/examples/custom-controls-programmatic/)
Examples
Programmatically add custom controls for dynamic map logic integration.
### [Minimap control](https://docs.maptiler.com/sdk-js/examples/control-minimap/)
Tutorials
Display an overview minimap control to aid map navigation.
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/* Custom control styling */
.compass {
width: 10rem;
margin: 1rem;
transform: rotateZ(calc(var(--maptiler-bearing) * -1deg));
}
```
### Basic JavaScript setup
```html