Tracking gps position #474

micfio · 2022-11-15T18:27:13Z

micfio
Nov 15, 2022

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>ZooARGeo</title>
        <script type='text/javascript' src="assets/js/aframe-v1.0.4.min.js"></script>
        <script type='text/javascript' src='assets/js/aframe-ar.js'></script>
        <script type='text/javascript' src='assets/js/index.js'></script>
        <script type='text/javascript' src='assets/js/osm.js'></script>
        <script type='text/javascript' src='assets/js/osmway.js'></script>
        <script type='text/javascript' src='assets/js/gps-vector-ways.js'></script>

        <script>

    if(!navigator.geolocation) {
        console.log("Your browser doesn't support geolocation feature!")
    } else {
        setInterval(() => {
            navigator.geolocation.getCurrentPosition(getPosition)
        }, 5000);
    }

    function getPosition(position){
        // console.log(position)
        var scene=document.querySelector('a-scene');
        //var marker = document.querySelector('a-sphere')
        var marker = document.querySelector('#marker');
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        var accuracy = position.coords.accuracy;
        marker.parentNode.removeChild(marker);
        var sphere=document.createElement('a-sphere');
        sphere.setAttribute('id','marker');
        sphere.setAttribute('radius','1');
        sphere.setAttribute('visible','true');
        sphere.setAttribute('color','red');
        sphere.setAttribute('position','0 1 0');
        sphere.setAttribute('z-offset','1');
        sphere.setAttribute(
            'gps-projected-entity-place',
            `latitude: ${lat}; longitude: ${long};`
          );

        scene.appendChild(sphere);

        console.log("Your coordinate is: Lat: "+ lat +" Long: "+ long+ " Accuracy: "+ accuracy);


    }

</script>
        <style type='text/css'>
        #status {
            font-family: Roboto, sans-serif;
            color: white;
            position: absolute;
            top:50%;
            left:calc(50% - 100px);
            font-size: 150%;
            font-weight: bold;
        }
        </style>

    </head>
    <body style='margin: 0; overflow: hidden'>
        <a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false'>
            <div id='status'></div>
            <a-camera gps-projected-camera='simulateLatitude: 40.82389; simulateLongitude: 14.18244' rotation-reader position='0 20 0' wasd-controls='acceleration: 1300'></a-camera>
            <a-entity id='osmElement' osm gps-vector-ways />
            <a-image src="assets/images/map-elefante.png" gps-projected-entity-place="latitude: 40.82368; longitude: 14.18147" scale="20 20 20" position='0 20 0' animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" Alpha-test="0.5"></a-image>
            <a-image src="assets/images/map-lemure.png" gps-projected-entity-place="latitude: 40.82415; longitude: 14.18199" scale="20 20 20" position='0 20 0' animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" Alpha-test="0.5"></a-image>
            <a-image src="assets/images/map-siamango.png" gps-projected-entity-place="latitude: 40.82465; longitude: 14.18199" scale="20 20 20" position='0 20 0' animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" Alpha-test="0.5"></a-image>
            <a-image src="assets/images/map-foca.png" gps-projected-entity-place="latitude: 40.82508; longitude: 14.18148" scale="20 20 20" position='0 20 0' animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" Alpha-test="0.5"></a-image>
            <a-image src="assets/images/map-macaco.png" gps-projected-entity-place="latitude: 40.82525; longitude: 14.18135" scale="20 20 20" position='0 20 0' animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" Alpha-test="0.5"></a-image>
            <a-image src="assets/images/map-orso.png" gps-projected-entity-place="latitude: 40.82534; longitude: 14.18149" scale="20 20 20" position='0 20 0' animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" Alpha-test="0.5"></a-image>
            <a-image src="assets/images/map-coccodrillo.png" gps-projected-entity-place="latitude: 40.82489; longitude: 14.18139" scale="20 20 20" position='0 20 0' animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" Alpha-test="0.5"></a-image>
            <a-sphere id="marker" color="red"  gps-projected-entity-place="latitude: 40.82389; longitude: 14.18244" visible="true" radius="1"></a-sphere>
        </a-scene>
    </body>
</html>

Hello i have this code, can some one tell me why the a-sphere in the scene (that i removed and add at setinterval function on update gps position in js script ) are removed only one way (the first time) seems that the document.querySelector('#marker') work only fist time. Thanks in advances

nickw1 · 2022-12-04T13:31:27Z

nickw1
Dec 4, 2022
Maintainer

Hi, it looks like it should work, does the console.log give you the correct values?

I would recommend you update the entity when you get a new GPS position, rather than deleting it and re-creating it.

However I would also recommend using the AR.js 3.4 new-location-based components, and handling the gps-camera-update-position event of AR.js. This has the advantage that it will work with fake (simulated) GPS positions as well as real ones.

See this example here: https://github.com/AR-js-org/AR.js/tree/master/aframe/examples/new-location-based, this is doing something similar to what you're trying to do.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tracking gps position #474

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Tracking gps position #474

micfio Nov 15, 2022

Replies: 1 comment

nickw1 Dec 4, 2022 Maintainer

micfio
Nov 15, 2022

nickw1
Dec 4, 2022
Maintainer