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.