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}