QiblaCompass Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Compass dial with a Kaaba marker for the Qibla bearing. heading turns the dial against the device direction; size takes xs to xl or a number of px.

Jump to API reference

Import

Vue
import { UiQiblaCompass } from '@ziyarago/ui-pro/vue'

Tashkent

Vue
<UiQiblaCompass :bearing="248" distance="3 960 km to the Kaaba" />

Device heading 90

Vue
<UiQiblaCompass :bearing="248" :heading="90" />

Small

Vue
<UiQiblaCompass :bearing="118" size="sm" />

API reference

Compass dial with a Kaaba marker pointing to the Qibla and the bearing in degrees below it.

Props

PropType and valuesDefaultDescription
bearingrequirednumber0Qibla bearing in degrees clockwise from true north, 0 to 360; other values wrap.
headingnumber0Direction the device points to, in degrees. The dial turns against it so the marker follows the real Qibla; 0 keeps north up.
distancestring—Optional small caption under the bearing, such as "4 210 km to the Kaaba".
sizexssmmdlgxl'md'Diameter: xs 120, sm 160, md 200, lg 250, xl 300 px; a number is used as px.

Notes

  • Exposed as role="img" with a label that states the bearing. Compute the bearing and heading yourself (geolocation and DeviceOrientation); the component only draws them.