Selecting Cesium entities through HTML elements

Selecting Cesium entities through HTML elements

Problem Description:

Is it possible to select Cesium entities created on the Cesium viewer and select them through HTML elements, for example a button? Or is it possible to select them only through the viewer itself?

Solution – 1

It’s possible to select them from code. Assign viewer.selectedEntity to the desired entity. You may also assign viewer.trackedEntity to zoom to the entity and follow it with the camera.

Here’s a Sandcastle Demo.

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,

Cesium.CzmlDataSource.load("../SampleData/simple.czml").then(function(dataSource) {
  var iss = dataSource.entities.getById("Satellite/ISS");
  var agi = dataSource.entities.getById("Facility/AGI");
  Sandcastle.addDefaultToolbarButton("Select ISS", function () {
    viewer.selectedEntity = iss;

  Sandcastle.addDefaultToolbarButton("Select AGI", function () {
    viewer.selectedEntity = agi;

  Sandcastle.addDefaultToolbarButton("Deselect", function () {
    viewer.selectedEntity = undefined;

Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.