Jscompass NPM | npm.io

jscompass

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

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
}