Lightship Map Module orientation

Technical Support
,
1

I am trying to utilise the Niantic Lightship Maps module to create an experience that shows users different places based on latitude and longitude data passed to the user via an API. Currently, the orientation of the map changes pointing to different directions.

For example, if I point towards the East the map spawns correctly with different Points of interest(POIs) in the correct positions, but if I restart the experience while pointing towards the North the map spawns oriented to the North and the POIs are thus in incorrect positions.

Is there a way to orient the map correctly based on the user’s orientation/ the direction the user is pointing at?

2

You can try to use compass data: A-Frame: Compass | 8th Wall Playground | 8th Wall

1 Like
3

Thank @Evan I was refering to the same thread that the compass project is based upon, is it possible to orient the map based on tbe direction then?

4

@Evan While referring to the compass project, I found that there is unused code from [#L51] (A-Frame: Compass | 8th Wall Playground | 8th Wall) to #L79
Edited code version:

const compassComponent = {
  init() {
    const doty = this.el
    const compassEl = document.querySelector('.compass')
    // const myPoint = document.querySelector('.my-point')

    const isIOS =
      navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
      navigator.userAgent.match(/AppleWebKit/)

    let pointDegree
    let compass
    let rotation

    function handler(e) {
      compass = e.webkitCompassHeading || Math.abs(e.alpha - 360)
      compassEl.style.transform = `rotate(${-compass}deg)`
      // rotate doty 180 degrees to face heading
      rotation = -compass + 180
      doty.setAttribute('rotation', `0  ${rotation} 0`)
    }

    function startCompass() {
      if (isIOS) {
        DeviceOrientationEvent.requestPermission()
          .then((response) => {
            if (response === 'granted') {
              window.addEventListener('deviceorientation', handler, true)
            } else {
              alert('has to be allowed!')
            }
          })
          .catch(() => alert('not supported'))
      }
    }

    function start() {
    // navigator.geolocation.getCurrentPosition(locationHandler)

      if (isIOS) {
        compassEl.addEventListener('click', startCompass)
      } else if (window.DeviceOrientationEvent && 'ontouchstart' in window) {
        window.addEventListener('deviceorientationabsolute', handler, true)
      } else {
        document.querySelector('.compass').style.display = 'none'
        console.log('This device does not support compass')
      }
    }

    start()
  },
}
export {compassComponent}
5

I ran into the same issue - getting the Map Module to stay oriented with the actual compass heading can be tricky depending on the device’s sensor calibration. I’ve found that sometimes the drift happens if the initial ‘North’ isn’t locked in correctly at start. Also, if you’re testing on-site and want to verify if the drift is coming from the module or the phone’s hardware, I usually keep a web compass open in another tab (like Online Compass | TheToolApp ) just to cross-reference the heading.