maplibre-gl-compass/dist/maplibre-gl-compass.umd.cjs

A heading-up compass for MapLibre GL JS

(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a["maplibre-gl-compass"]={}))})(this,function(a){"use strict";var k=Object.defineProperty;var w=(a,n,r)=>n in a?k(a,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[n]=r;var i=(a,n,r)=>w(a,typeof n!="symbol"?n+"":n,r);const n=["click"];class r{constructor(t,e=!0){i(this,"button");i(this,"clickCallback");this.button=this.createButton();const s=document.createElement("div");s.classList.add("maplibregl-ctrl","maplibregl-ctrl-group"),s.appendChild(this.button),e||(s.style.display="none"),t.appendChild(s)}on(t,e){if(!n.includes(t))throw new Error(`Event type ${t} is not supported.`);switch(t){case"click":this.clickCallback=e;break}}turnOn(){this.button.classList.add("maplibregl-ctrl-compass-heading-active"),this.button.setAttribute("aria-pressed","true"),this.startLoading()}turnOff(){this.button.classList.remove("maplibregl-ctrl-compass-heading-active"),this.button.setAttribute("aria-pressed","false"),this.stopLoading()}disable(){this.button.setAttribute("title","Compass not available"),this.button.setAttribute("aria-label","Compass not available"),this.button.setAttribute("disabled","disabled")}startLoading(){this.button.classList.add("maplibregl-ctrl-compass-heading-waiting")}stopLoading(){this.button.classList.remove("maplibregl-ctrl-compass-heading-waiting")}createButton(){const t=document.createElement("button");t.classList.add("maplibregl-ctrl-compass-heading"),t.setAttribute("title","Rotate map to heading-up"),t.setAttribute("aria-label","Rotate map to heading-up"),t.addEventListener("click",()=>{this.clickCallback&&this.clickCallback()});const e=document.createElement("span");return e.classList.add("maplibregl-ctrl-icon"),t.appendChild(e),t}}class p{constructor(t){i(this,"element");i(this,"eventTimestamps",[]);this.element=document.createElement("div"),this.element.classList.add("maplibregl-ctrl"),this.element.innerHTML=`
    <dl class="maplibregl-ctrl-compass-heading-debug">
      <dt>event</dt>
      <dd class="event-type"></dd>
      <dt>heading</dt>
      <dd class="heading"></dd>
      <dt>alpha</dt>
      <dd class="alpha"></dd>
      <dt>beta</dt>
      <dd class="beta"></dd>
      <dt>gamma</dt>
      <dd class="gamma"></dd>
      <dt>count</dt>
      <dd class="count"></dd>
    </dl>
    `,t.appendChild(this.element)}update(t){if(!t){this.clear();return}const e=Date.now();this.eventTimestamps.push(e),this.eventTimestamps=this.eventTimestamps.filter(C=>e-C<=1e3);const s=t.originalEvent.type,o=t.heading!=null?t.heading.toFixed(4):"",l=t.originalEvent.alpha!=null?t.originalEvent.alpha.toFixed(4):"",d=t.originalEvent.beta!=null?t.originalEvent.beta.toFixed(4):"",v=t.originalEvent.gamma!=null?t.originalEvent.gamma.toFixed(4):"",f=`${this.eventTimestamps.length} events/sec`;this.updateField(".event-type",s),this.updateField(".heading",o),this.updateField(".alpha",l),this.updateField(".beta",d),this.updateField(".gamma",v),this.updateField(".count",f)}clear(){[".event-type",".heading",".alpha",".beta",".gamma",".count"].forEach(e=>this.updateField(e,""))}updateField(t,e){const s=this.element.querySelector(t);s&&(s.textContent=e)}}const c=class c{constructor(){i(this,"deviceOrientationCallback");i(this,"errorCallback");i(this,"isListening",!1);i(this,"historySize",100);i(this,"headingHistory",[]);i(this,"onDeviceOrientation",t=>{t.type==="deviceorientationabsolute"&&t.alpha!=null?this.removeDeviceOrientationListener():t.type==="deviceorientation"&&t.webkitCompassHeading!=null&&this.removeDeviceOrientationAbsoluteListener();const e=this.calculateCompassHeading(t);e!=null&&(this.headingHistory.push(e),this.headingHistory.length>this.historySize&&this.headingHistory.shift());const s=this.calculateMovingAverage();this.deviceOrientationCallback&&this.deviceOrientationCallback({heading:s,originalEvent:t})})}on(t,e){if(!c.eventTypes.includes(t))throw new Error(`Event type ${t} is not supported.`);switch(t){case"deviceorientation":this.deviceOrientationCallback=e;break;case"error":this.errorCallback=e;break}}turnOn(){this.isListening||(this.addDeviceOrientationListener(),this.addDeviceOrientationAbsoluteListener(),this.isListening=!0)}turnOff(){this.removeDeviceOrientationListener(),this.removeDeviceOrientationAbsoluteListener(),this.isListening=!1}addDeviceOrientationListener(){if("requestPermission"in window.DeviceOrientationEvent){window.DeviceOrientationEvent.requestPermission().then(t=>{if(t!=="granted"){this.handleError("PERMISSION_DENIED","Permission denied");return}window.addEventListener("deviceorientation",this.onDeviceOrientation,!0)}).catch(()=>this.handleError("PERMISSION_DENIED","Permission denied"));return}window.addEventListener("deviceorientation",this.onDeviceOrientation,!0)}removeDeviceOrientationListener(){window.removeEventListener("deviceorientation",this.onDeviceOrientation,!0)}addDeviceOrientationAbsoluteListener(){window.addEventListener("deviceorientationabsolute",this.onDeviceOrientation,!0)}removeDeviceOrientationAbsoluteListener(){window.removeEventListener("deviceorientationabsolute",this.onDeviceOrientation,!0)}calculateCompassHeading(t){if(t.webkitCompassHeading!=null)return t.webkitCompassHeading;if(t.alpha==null)return;let e=360-t.alpha;return e<0&&(e+=360),e}calculateMovingAverage(){if(this.headingHistory.length===0)return;const t=this.headingHistory.reduce((l,d)=>l+Math.sin(d*Math.PI/180),0),e=this.headingHistory.reduce((l,d)=>l+Math.cos(d*Math.PI/180),0);let o=Math.atan2(t/this.headingHistory.length,e/this.headingHistory.length)*180/Math.PI;return o<0&&(o+=360),o}handleError(t,e){var s;(s=this.errorCallback)==null||s.call(this,{code:t,message:e})}};i(c,"eventTypes",["deviceorientation","error"]);let h=c;const m={debug:!1,visible:!0,timeout:3e3},b=["turnon","turnoff","error","compass"];class g{constructor(t){i(this,"map");i(this,"container",document.createElement("div"));i(this,"compass");i(this,"compassButton");i(this,"debugView");i(this,"options");i(this,"active",!1);i(this,"currentEvent");i(this,"turnonCallback");i(this,"turnoffCallback");i(this,"errorCallback");i(this,"compassCallback");this.options={...m,...t},this.compass=new h,this.compass.on("deviceorientation",e=>{if(!this.map||e.heading===void 0)return;this.currentEvent=e,this.compassButton.stopLoading();const s=e.heading,o=this.map.getBearing();!this.map.isZooming()&&Math.abs(s-o)>=1&&this.map.setBearing(s),this.options.debug&&this.updateDebugView(),this.compassCallback&&this.compassCallback(e)}),this.compass.on("error",e=>{this.disable(),this.errorCallback&&this.errorCallback(e)}),this.compassButton=new r(this.container),this.compassButton.on("click",()=>{this.active?this.turnOff():this.turnOn()}),this.options.debug&&(this.debugView=new p(this.container))}onAdd(t){return this.map=t,this.map.on("touchmove",()=>{this.active&&(this.turnOff(),this.active=!1)}),this.container}onRemove(){this.map=void 0,this.turnOff()}on(t,e){if(!b.includes(t))throw new Error(`Event type ${t} is not supported.`);switch(t){case"turnon":this.turnonCallback=e;break;case"turnoff":this.turnoffCallback=e;break;case"error":this.errorCallback=e;break;case"compass":this.compassCallback=e;break}}turnOn(){this.compass.turnOn(),this.compassButton.turnOn(),setTimeout(()=>{var t;this.active&&((t=this.currentEvent)==null?void 0:t.heading)===void 0&&(this.disable(),this.errorCallback&&this.errorCallback({code:"TIMEOUT",message:"Timeout"}))},this.options.timeout),this.turnonCallback&&this.turnonCallback(),this.active=!0}turnOff(){this.compass.turnOff(),this.compassButton.turnOff(),this.options.debug&&this.clearDebugView(),this.turnoffCallback&&this.turnoffCallback(),this.active=!1}updateDebugView(){var t;(t=this.debugView)==null||t.update(this.currentEvent)}clearDebugView(){var t;(t=this.debugView)==null||t.update()}disable(){this.compassButton.disable(),this.turnOff()}}a.CompassControl=g,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});