'photosphere viewer - display marker lat-long from GPS lat-long

am unable to display GPS locations (WGS84 lat-long in decimal degrees) on photosphere viewer as a marker. These locations are signboards on the road collected with accurate GPS surveys.

The panoramic images are also acquired with accurate surveys and geotagged with GPS locations (WGS84 lat-long).

Am using version 3.5.1 of https://photo-sphere-viewer.js.org/. The markers are off by a lot ...

I tried to convert to radian values using var degreeLat = (decimal degree) * (Math.PI / 180); var degreeLon = (decimal degree) * (Math.PI / 180);

Am expecting the asset points from GPS to fall in the image at least by 1-2m accuracy.

Any help or ideas much appreaciated. Thanks.

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Photo Sphere Viewer</title>
        <meta name="viewport" content="initial-scale=1.0" />
        <link rel="stylesheet" href="node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.css">

        <script type="text/javascript" src="node_modules/photo-sphere-viewer/node_modules/uevent/uevent.js"></script>
        <script type="text/javascript" src="node_modules/three/build/three.js"></script>
        <script type="text/javascript" src="node_modules/dot/doT.js"></script>
        <script type="text/javascript" src="node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.js"></script>
    </head>

    <body>
        <div id="viewer"></div>

        <style>
            #viewer {
              width: 100vw;
              height: 50vh;
            }
          </style>

        <script>

        //var radianLat = 3.19267140400974 * Math.PI / 180; 
        //var radianLon = -101.606916778012 * Math.PI / 180; 
        //radianLon += -0.5

        //var degreeLat = 3.191343 * Math.PI / 180;
        //var degreeLon = 101.606001 * Math.PI / 180;
        var degreeLat = '3.191343deg';
        var degreeLon = '-101.606001deg';

        // var degreeLat = 3.19069555218933 * (180 / Math.PI);
        // var degreeLon = -101.605626082019 * (180 / Math.PI);

        /*
            var phi = (degreeLat)*Math.PI/180;
            var theta = (degreeLon-180)*Math.PI/180;
            var x = -(6371) * Math.cos(phi) * Math.cos(theta);
            var y = (6371) * Math.sin(phi);
            lat = 3.19069555218933
            lon = 101.605626082019
            var cosLat = Math.cos(lat * Math.PI / 180.0);
            var sinLat = Math.sin(lat * Math.PI / 180.0);
            var cosLon = Math.cos(lon * Math.PI / 180.0);
            var sinLon = Math.sin(lon * Math.PI / 180.0);
            var rad = 6378137.0;
            var f = 1.0 / 298.257224;
            var C = 1.0 / Math.sqrt(cosLat * cosLat + (1 - f) * (1 - f) * sinLat * sinLat);
            var S = (1.0 - f) * (1.0 - f) * C;
            var h = 0.0;
            //degreeLat = (rad * C + h) * cosLat * cosLon;
            //degreeLon = (rad * C + h) * cosLat * sinLon;
            // marker_mesh.position.z = (rad * S + h) * sinLat;
            //var xLoc = 11310830.24;
            //var yLoc = 355590.62;
            */

            console.log(degreeLon + " " + degreeLat);
            //console.log(radianLon + " " + radianLat);
            //console.log(x + " " + y);

            let PSV = new PhotoSphereViewer({
                    panorama: 'Panoramic2/20181214-145610-000002827.jpg',
                    container: document.querySelector('#viewer'),
                    time_anim: 3000,
                    //navbar: true,
                    //navbar_style: {backgroundColor: 'rgba(58, 67, 77, 0.7)'},

                markers: [
                    {
                    // image marker that opens the panel when clicked
                    id: 'image',
                    longitude: degreeLon,
                    latitude: degreeLat,
                    //longitude: x,
                    //latitude: y,
                    //x: xLoc,
                    //y: yLoc,  
                    image: 'assets/pin.png',
                    width: 32,
                    height: 32,
                    anchor: 'bottom center',
                    tooltip: 'Asset marker. <b>Click me!</b>',
                    //content: document.getElementById('lorem-content').innerHTML
                    },
                    {
                    // circle marker
                    id: 'circle',
                    circle: 20,
                    x: 1,
                    y: 1,
                    tooltip: 'A circle marker'
                    }
                ]

                }
                );

                /**
                * Create a new marker when the user clicks somewhere
                */

                PSV.on('click', function(e) {
                PSV.addMarker({
                    id: '#' + Math.random(),
                    longitude: e.longitude,
                    latitude: e.latitude,
                    image: 'assets/pin.png',
                    width: 32,
                    height: 32,
                    anchor: 'bottom center',
                    tooltip: 'Generated pin',
                    data: {
                    generated: true
                    }
                });
                //alert((e.longitude * 180 / Math.PI) + ' ' + (e.latitude * 180 / Math.PI))
                alert((e.longitude) + ' ' + (e.latitude));
                var objLatLong = e.getPositionInDegrees();
                alert((objLatLong.longitude) + ' ' + (objLatLong.latitude));
                });
        </script>
    </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'photosphere viewer - display marker lat-long from GPS lat-long

Sources

Related Questions