Maps pointing to waypoint

🧑‍💻 Technical Support
1

Hi,

I’m using the 8th wall maps to add some points of interest based on lat long coordinates.

Each point of interest is loaded in a certain order. So there is only 1 point of interst at a certain time available.
But when the user is far away from the point of interst (like 200m away) it is hard to spot it on the map.

The map is not oriented based on a compass so the user must rotate the map by hand to find the point. And then reorient himself to know wich direction to go.
It seems like you can not zoom that far out. Only like 100 m in distance is shown.

So what I would like to do is having an arrow at the users position pointing towards the next waypoint.
I tried to use three js lookat. So I added the arrow and added the waypoint to the map.

 <lightship-map 
    scale="100 100 100" 
    lightship-map-theme="theme: natural">
    <lightship-map-point lat-lng="51.097658 4.251167" meters="5" min="0" id="pointTarget">
      <a-cylinder color="yellow" height="0.5" radius="1"></a-cylinder>
    </lightship-map-point>
    <a-entity point-at-target>
      <a-gltf-model src="#arrow-model" scale="0.001 0.001 0.001"></a-gltf-model>
    </a-entity>
  </lightship-map>

This is as easy as it can be.
I also created a point-at-target component to make it work and use thee js lookat.

AFRAME.registerComponent('point-at-target', {
  schema: {
  },
  tick() {
    const targetPosition = document.getElementById('pointTarget').object3D.position
    const cone = this.el.object3D
    // Point the cone towards the target
    cone.lookAt(targetPosition)
  },
})

But it is. not working becouse pointTarget position is 0 0 0. While it is on the right spot on the map.
I do not understand why it is 0 0 0. It is placed in the scene on the map at the right spot. How to find out the vector3 position relative to the entity containing the glft model?

2

Is the <a-cylinder> supposed to have id="pointTarget", or is that a different element?