Ionic Angular AR gps marker a-scene on top of @capacitor/geolocation

Hello guys,
I am trying to add gps location markers on top of the capacitor/camera, I was wondering if this is possible.
I am starting from this link

It is looking ok when I add an iframe to a static html page

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Location-based AR.js demo</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <!-- <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script> -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
    <script src="./places.js"></script>
  </head>
    <!-- Dynamically add places from Javascript -->
     <!-- <script src="./places.js"></script>  -->
    
  <body style="margin: 0; overflow: hidden;">
    <a-scene
      vr-mode-ui="enabled: true"
      embedded raycaster="objects: [gps-entity-place];"
      arjs="sourceType: webcam; debugUIEnabled: false;">
 
      <a-camera gps-camera rotation-reader >
	  
    </a-camera>
    
      
    </a-scene>
  </body>
</html>

And adding the a-image

const latitude = place.location.lat;
        const longitude = place.location.lng;

        // add place icon
        const icon = document.createElement('a-image');
        icon.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude}`);
        icon.setAttribute('name', place.name);
        icon.setAttribute('src', 'https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-512.png');
        // for debug purposes, just show in a bigger scale, otherwise I have to personally go on places...
        icon.setAttribute('scale', '1, 1');
        scene.appendChild(icon);

But when I am moving the a-scene in my component html, all hell breaks loose.

Any idea what is the minimum to add the a-image to the @capacitor/geolocation default example?
Thank you.