> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rebellapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# my.onCompassChange

> Listen for compass heading changes.

Use this API to register listeners that monitor compass data updates.

## Parameters

| Property | Type     | Required | Description                                                                                                               |
| -------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
| listener | Function | Yes      | A callback that monitors compass data updates. When executed, it receives a `res` object containing updated compass data. |

## Callback Parameters

| Property  | Type   | Description                                                                                              |
| --------- | ------ | -------------------------------------------------------------------------------------------------------- |
| direction | Number | The clockwise angle (in degrees) between the device's orientation and true north. Valid range: \[0, 360) |
| timestamp | Number | Timestamp when the compass data is recorded                                                              |

## Code Example

### Basic Usage

```javascript theme={null}
my.onCompassChange((res) => {
  console.log('Direction:', res.direction);
});
```

### Compass Display

```javascript theme={null}
Page({
  data: {
    direction: 0,
    cardinalDirection: 'N'
  },

  onLoad() {
    my.onCompassChange((res) => {
      this.setData({
        direction: Math.round(res.direction),
        cardinalDirection: this.getCardinalDirection(res.direction)
      });
    });
  },

  getCardinalDirection(degrees) {
    const directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
    const index = Math.round(degrees / 45) % 8;
    return directions[index];
  },

  onUnload() {
    my.offCompassChange();
  }
});
```

### Navigation Arrow

```javascript theme={null}
Page({
  data: {
    targetBearing: 45, // Target is NE
    arrowRotation: 0
  },

  onLoad() {
    my.onCompassChange((res) => {
      // Calculate rotation to point at target
      const rotation = this.data.targetBearing - res.direction;
      this.setData({ arrowRotation: rotation });
    });
  }
});
```

<Tip>
  Call `my.startCompass` before using this API to begin receiving compass data.
</Tip>

## Related APIs

<CardGroup cols={2}>
  <Card title="my.offCompassChange" icon="xmark" href="/jsapi/device/compass/my.offCompassChange">
    Stop listening for changes
  </Card>

  <Card title="my.startCompass" icon="play" href="/jsapi/device/compass/my.startCompass">
    Start compass
  </Card>
</CardGroup>