[SOLVED] Location-based AR.js example doesn't move the object

Location-based AR.js example doesn't move the object

I'm using AR.js to create an AR scene. Everything works fine with Markers, but when I use Location-based AR, the object appears in one place and doesn't move when the device is rotated.

<html>
<head>
  <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.0.6/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin: 0px; overflow: hidden;">
  <a-scene gps-camera-debug embedded arjs="sourceType: webcam; debugUIEnabled: false;" vr-mode-ui="enabled: false">
    <a-camera gps-camera rotation-reader>
      <a-box color="yellow" gps-entity-place="latitude: <lat>; longitude: <long>" scale="2 2 2" />
    </a-camera>
  </a-scene>
</body>
</html>

After I accept access to the camera and to location services, a yellow square appears over the camera display. However, moving the camera up, down, left, or right, doesn't move or rotate the object. The yellow square appears to be stuck on screen in one position.

The GPS location I'm using is exactly the same as the one reported by the gps-camera-debug. If I put in a different Lat & Long, then the yellow square doesn't appear at all.

Same results in Firefox v70 and an iPhone 6 with IOS 12.3.1. The messages in Firefox console are...

A-Frame Version: 0.9.2 (Date 2019-05-06, Commit #f57a1fa) index.js:92:8
three Version (https://github.com/supermedium/three.js): ^0.102.2 index.js:93:8
WebVR Polyfill Version: ^0.10.10 index.js:95:8
Successfully compiled asm.js code (total compilation time 81ms) aframe-ar.js
THREE.WebGLRenderer 103dev three.js:22620:10
gps-camera-entity-added aframe-ar.js:9031:17
Use of the orientation sensor is deprecated. aframe-ar.js:8785:15
AR.js 2.0.6 - trackingBackend: artoolkit aframe-ar.js:7121:10
The Components object is deprecated. It will soon be removed. 02
gps-camera-ready aframe-ar.js:8749:25
Allocated videoFrameSize 1228800 aframe-ar.js:2:23009
Pattern detection mode set to 1. aframe-ar.js:2:23009
Pattern ratio size set to 0.500000.

Any ideas what I'm missing?

Solution

The box shouldn't be a child item of the camera

<a-camera gps-camera rotation-reader>
</a-camera>
<a-box color="yellow" gps-entity-place="latitude: <lat>; longitude: <long>" scale="2 2 2" />

There could be a race while the gps is trying to position the box, and at the same time it's applying the camera transform. A wild guess, but still - tried it, and it works with the above code on android chrome.