Interactive button inside InfoBox

CesiumJS
1

Can someone please help me make the button “showDetails” clickable?
I’ve tried implementing what is in this post but since i am new to Cesium and JavaScript and dont think i know how to use this properly in my case https://groups.google.com/g/cesium-dev/c/PKwsDiRDVOo/m/5Q_VeyFeTP8J.

My code:

function createInfoTable(res, citydbLayer) {
var thematicDataSourceDropdown = document.getElementById(“thematicDataSourceDropdown”);
var selectedThematicDataSource = thematicDataSourceDropdown.options[thematicDataSourceDropdown.selectedIndex].value;
var gmlid = selectedThematicDataSource === “KML” ? res[1]._id : res[0];
var cesiumEntity = res[1];
var thematicDataUrl = citydbLayer.thematicDataUrl;
cesiumEntity.description = “Loading feature information…”;

citydbLayer.dataSourceController.fetchData(gmlid, function (kvp) {
    if (!kvp) {
        cesiumEntity.description = 'No feature information found';
    } else {
        console.log(kvp);
        var html = '<table class="cesium-infoBox-defaultTable" style="font-size:10.5pt"><tbody>';
        for (var key in kvp) {
            var iValue = kvp[key];

            // check if this value is a valid URL
            if (key === "num_of_building_units") {
                iValue += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
                    + `<button id="showDetails" type="button">Show Details</button>`;
            } else if (isValidUrl(iValue)) {
                // Convert valid URLs to clickable links
                iValue = '<a href="' + iValue + '" target="_blank">' + iValue + '</a>';
            }

            html += '<tr><td>' + key + '</td><td>' + iValue + '</td></tr>';
        }
        html += '</tbody></table>';

        // Set the initial description to the first table
        cesiumEntity.description = html;

    }
}, 1000, cesiumEntity);

createAdditionalButton(gmlid)

}

2

Hi there,

Are you looking to make the button link to an external page, or call a function?

The HTML inside of the entity description should work just like “regular” HTML. The one thing to be careful of is that the button element will only be created once you click on the entity.

3

Hey :slight_smile:

i am trying to call a function like this:

function createInfoTable(res, citydbLayer) {
var thematicDataSourceDropdown = document.getElementById(“thematicDataSourceDropdown”);
var selectedThematicDataSource = thematicDataSourceDropdown.options[thematicDataSourceDropdown.selectedIndex].value;
var gmlid = selectedThematicDataSource === “KML” ? res[1]._id : res[0];
var cesiumEntity = res[1];

var thematicDataUrl = citydbLayer.thematicDataUrl;
cesiumEntity.description = "Loading feature information...";

citydbLayer.dataSourceController.fetchData(gmlid, function (kvp) {
    if (!kvp) {
        cesiumEntity.description = 'No feature information found';
    } else {
        console.log(kvp);
        var html = '<table class="cesium-infoBox-defaultTable" style="font-size:10.5pt"><tbody>';
        for (var key in kvp) {
            var iValue = kvp[key];

            // check if this value is a valid URL
            if (key === "num_of_building_units") {
                iValue += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' // 10 non-breaking spaces
                    + <button onclick="console.log('Button clicked'); displayAdditionalTable('${gmlid}', cesiumEntity)" style="margin-left: 10px;">Show Details</button>;
            } else if (isValidUrl(iValue)) {
                // Convert valid URLs to clickable links
                iValue = '<a href="' + iValue + '" target="_blank">' + iValue + '</a>';
            }

            html += '<tr><td>' + key + '</td><td>' + iValue + '</td></tr>';
        }
        html += '</tbody></table>';

        // Set the initial description to the first table
        cesiumEntity.description = html;
    }
}, 1000, cesiumEntity);

}

But this creates a Button that does not react to any click. For now i solved the issue by just creating a button on top of the table by calling the function createAdditionalButton inside of the function createInfoTable. This works but i wish that when i closed the Info Table the button would also disapper, but i have tried connecting the button to the closing button of the infoTable and it also does not work.

Any recommendations for me ?

Thanks in advance