Cesium Viewer inside Bootstrap Accordion

CesiumJS
1

I am trying to put a Cesium Viewer inside a Bootstrap 5 accordion. The issue I encounter is that when I expand the accordion after collapsing it, the viewer doesn’t display correctly. It one small squished line.

At startup, accordion expanded:

Screenshot from 2024-10-31 15-00-33
Screenshot from 2024-10-31 15-00-331920×859 105 KB

After collapse and re-expanding:

Screenshot from 2024-10-31 15-00-54
Screenshot from 2024-10-31 15-00-543770×123 19.8 KB

I have tried called resize() and forceResize() on the open event for Bootstrap but it doesn’t resize the viewer.

JS code:
let accordion = document.getElementById(“panelsStayOpen-collapse_3”);
let cesiumViewerContainer = document.getElementById(“cesiumContainer”);
let viewer = new Cesium.Viewer(“cesiumContainer”, {shouldAnimate: true,});
accordion.addEventListener(‘hidden.bs.collapse’, function () {
console.log(“accordion hidden”)
});
accordion.addEventListener(‘shown.bs.collapse’, function () {
console.log(“accordion shown”)

viewer.resize();
viewer.forceResize();

});

Any ideas what I need to do to get the viewer to resize when the accordion opens?

2

Hi @newton67401 ,
Thanks for your post and welcome to the Cesium community.

Two items come to mind. First, you may want to use the css display property to show or hide the div with id cesiumContainer. Second, when you toggle to show you may need to recreate the viewer.

Here is some psuedocode with those 2 items, you should be able to serve this from your localhost for a working demo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium Viewer in Bootstrap Accordion</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Set the height of the Cesium viewer container */
        #cesiumContainer {
            width: 100%;
            height: 60vh;
            display: none; /* Initially hidden */
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <!-- Bootstrap Accordion -->
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Show Cesium Viewer
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div id="cesiumContainer"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap and Cesium JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // Initialize the Cesium viewer (but hide it initially)
        let viewer;
        document.getElementById("collapseOne").addEventListener("shown.bs.collapse", function () {
            const cesiumContainer = document.getElementById("cesiumContainer");
            cesiumContainer.style.display = "block"; // Make sure it's visible before initializing

            // Check if viewer is already initialized
            if (!viewer) {
                viewer = new Cesium.Viewer("cesiumContainer");
            } else {
                // Resize viewer in case it was hidden previously
                viewer.resize();
            }
        });

        // Hide the viewer when the accordion is collapsed
        document.getElementById("collapseOne").addEventListener("hidden.bs.collapse", function () {
            const cesiumContainer = document.getElementById("cesiumContainer");
            cesiumContainer.style.display = "none"; // Hide container when accordion is collapsed
        });
    </script>
</body>
</html>

Please let us know if that helps or if we can be of more assistance.
Thanks,
Luke

3

Luke,

Thank you very for your help. I implemented the changes you recommended, but I am still having the same behavior (where the viewer doesn’t resize after accordion expansion).

I did poke around with turning on and off the default render loop. I can get the viewer to collapse and expand now, but when it expands after collapse the viewer is static, it is not animated. I have tried setting viewer.shouldAnimate = true when the accordion expands; but that didn’t correct the issue.

Any other ideas of what I should try?

This isn’t critical for me, just more of a curiosity. I can work without having the viewer in an accordion.

Thanks again!