jscompass

Show your direction on mobile devices with js, supports iOS and most Android devices.

Table of Contents

• Features
• Install
• Example
• API
• License

Features

• Get the offset angle of the device relative to north
• Simple presentation in the Web
• Supports most mobile devices
• Automatic stop processing in the background
• Production environment validation

Install

Using npm:

$ npm install jscompass

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/jscompass/dist/js-compass.min.js"></script>

Example

<div class="wrap">
  <img
    id="icon"
    class="icon"
    alt=""
    src="https://s2.loli.net/2022/08/14/NzrX2TDaCO54eks.png"
    alt="navigation.png"
  />
</div>
<button id="start"> Start Listen </button>
<br>
<button id="stop"> Stop Listen </button>
<script src="https://cdn.jsdelivr.net/npm/jscompass/dist/js-compass.min.js"></script>

var icon = document.querySelector("#icon");
var compass = new JsCompass({
  onchange(angle, type) {
    window.requestAnimationFrame(() => {
      const deg = -angle;
      icon.style = `transform: rotate(${deg}deg);`;
    });
  },
  onfail(err) {
    console.error(err);
  },
  debug: true,
});
document.querySelector("#start").addEventListener("click", () => {
  compass.start();
});
document.querySelector("#stop").addEventListener("click", () => {
  compass.stop();
});

API

Creating an instance

You can create a new instance of JsCompass with a custom config.

const vm = new JsCompass(config)

Config

{
  debug: boolean, // output log when true, default false.
  throttleWait：number,  // Throttling millisecond time, default 200ms
  onchange: (alphaAngle: number, angleType: string) => any, // Callback function for device angle change
  onfail: (msg:{err: string, msg: error detail}) => any, // callback fail for get device angle
}

Instance methods

begin listening device angle: vm.start()

stop listening device angle: vm.stop()

License

Apache License.