async () => {

    globalThis.init_camera_dict = {
        "scene.camera": {
            "up": {"x": -0.13227683305740356,
                    "y": -0.9911391735076904,
                    "z": -0.013464212417602539},
            "center": {"x": -0.005292057991027832,
                        "y": 0.020704858005046844,
                        "z": 0.0873757004737854},
            "eye": {"x": 0.8585731983184814, 
                    "y": -0.08790968358516693, 
                    "z": -0.40458938479423523},
        },
        "scene.aspectratio": {"x": 1.974, "y": 1.974, "z": 1.974},
        "scene.aspectmode": "manual"
    };

    // globalThis.restrictCamera = (data) => {
    //     var plotlyDiv = document.getElementById("map").getElementsByClassName('js-plotly-plot')[0];
    //     // var curr_eye = plotlyDiv.layout.scene.camera.eye;
    //     // var curr_center = plotlyDiv.layout.scene.camera.center;
    //     // var curr_up = plotlyDiv.layout.scene.camera.up;

    //     var curr_eye = data["scene.camera"]["eye"];
    //     var curr_center = data["scene.camera"]["center"];
    //     var curr_up = data["scene.camera"]["up"];
        
    //     var D = Math.sqrt((curr_eye.x - curr_center.x)**2 + (curr_eye.y - curr_center.y)**2 + (curr_eye.z - curr_center.z)**2);
    //     console.log("D", D);

    //     const max_D = 1.47;
    //     const min_D = 0.8;

    //     // calculate elevation
    //     var elevation = Math.atan2(curr_eye.y - curr_center.y, Math.sqrt((curr_eye.x - curr_center.x)**2 + (curr_eye.z - curr_center.z)**2)) * 180 / Math.PI;
    //     console.log("elevation", elevation);
    //     const max_elev = 3.2;
    //     const min_elev = -30;

    //     const eps = 0.01;

    //     if (D > max_D) {
    //         // find new_eye such that D = max_D
    //         var new_dict = {
    //             "scene.camera": {
    //                 "eye": {
    //                     "x": curr_center.x + (curr_eye.x - curr_center.x) * max_D / D - eps,
    //                     "y": curr_center.y + (curr_eye.y - curr_center.y) * max_D / D - eps,
    //                     "z": curr_center.z + (curr_eye.z - curr_center.z) * max_D / D - eps,
    //                 },
    //                 "up": curr_up,
    //                 "center": curr_center,
    //             }
    //         };
            
    //         Plotly.relayout(plotlyDiv, new_dict);

    //     } else if (D < min_D) {
    //         // find new_eye such that D = min_D
    //         var new_dict = {
    //             "scene.camera": {
    //                 "eye": {
    //                     "x": curr_center.x + (curr_eye.x - curr_center.x) * min_D / D - eps,
    //                     "y": curr_center.y + (curr_eye.y - curr_center.y) * min_D / D - eps,
    //                     "z": curr_center.z + (curr_eye.z - curr_center.z) * min_D / D - eps,
    //                 },
    //                 "up": curr_up,
    //                 "center": curr_center,
    //             }
    //         };
        
    //         Plotly.relayout(plotlyDiv, new_dict);
    //     }

    //     const eta = 0.001;
        // if (elevation > max_elev) {
        //     // find new eye such that y elevation = max_elev
        //     var new_dict = {
        //         "scene.camera": {
        //             "eye": {
        //                 "x": curr_eye.x,
        //                 "y": curr_center.y + (curr_eye.y - curr_center.y) * Math.tan((max_elev - eta)  * Math.PI / 180),
        //                 "z": curr_eye.z,
        //             },
        //             "up": curr_up,
        //             "center": curr_center,
        //         }
        //     };
          

        //     Plotly.relayout(plotlyDiv, new_dict);

        // } else if (elevation < min_elev) {
        //     // find new eye such that y elevation = min_elev
        //     var new_dict = {
        //         "scene.camera": {
        //             "eye": {
        //                 "x": curr_eye.x,
        //                 "y": curr_center.y + (curr_eye.y - curr_center.y) * Math.tan((min_elev + eta)  * Math.PI / 180),
        //                 "z": curr_eye.z,
        //             },
        //             "up": curr_up,
        //             "center": curr_center,
        //         }
        //     };
            
        //     Plotly.relayout(plotlyDiv, new_dict);
        // }

    // }

     globalThis.latestCam = () => {
        var plotlyDiv = document.getElementById("map").getElementsByClassName('js-plotly-plot')[0];

        globalThis.prev_camera_dict = {};
        console.log("prev camera dict", globalThis.prev_camera_dict);

        // Listen for the event and log to the console
        plotlyDiv.on('plotly_relayout', function(data) {
            console.log('plotly_relayout event triggered:', data);
            
            if ("scene.camera.up" in data) {
                Object.assign(globalThis.prev_camera_dict, globalThis.camera_dict);
                Object.assign(globalThis.camera_dict, globalThis.init_camera_dict);
            }

            if ('scene.camera' in data) {
                Object.assign(globalThis.prev_camera_dict, globalThis.camera_dict);
                globalThis.camera_dict = data;
            }

            var camera_json = JSON.stringify(globalThis.camera_dict);
            var input_pose = document.getElementById("input_pose").getElementsByTagName("textarea")[0];
            let myEvent = new Event("input")
            input_pose.value = camera_json;
            input_pose.dispatchEvent(myEvent);

            var update_pose_btn = document.getElementById("update_pose_button");
            update_pose_btn.dispatchEvent(new Event("click"));
            // globalThis.restrictCamera(data);
        });
    }
    
    return latestCam(this);

}