How to put a button at the top of Cesium panel?


I have a Cesium panel and I want to put a button at the top of it (see below).

When the user presses that button, the selected entity must be deleted.

To achieve that goal, I wrote this code:

<h1>My app</h1>
<div ng-show="authenticated">
   <div id="cesiumContainer"></div>
    <div id="toolbar"></div>
      var viewer = new Cesium.Viewer('cesiumContainer',
          timeline: false,
          animation: false,
          sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
      var center = Cesium.Cartesian3.fromDegrees(132.159633, 43.350116);
      var heading = Cesium.Math.toRadians(0);
      var pitch = Cesium.Math.toRadians(-40.0);
      var range = 1000.0;

       * Adding the “Delete” button (start)
      var button = document.createElement(‘button’);
       button.type = ‘button’;
            button.className = ‘cesium-button’;
            button.onclick = function() {
            button.textContent = ‘Delete’;
       * Adding the “Delete” button (end)
    var promise = Cesium.GeoJsonDataSource.load(‘http://localhost:8080/geojson’);
      promise.then(function(dataSource) {
          var entities = dataSource.entities.values;
          var colorHash = {};
          for (var i = 0; i < entities.length; i++) {
              var entity = entities[i];
              var name =;
              var color = Cesium.Color.RED;

              if (typeof entity.polygon != "undefined") {
                entity.polygon.material = color;
                entity.polygon.outline = false;
                entity.polygon.extrudedHeight = 10.;
          console.log("alert " + error);
      });, new Cesium.HeadingPitchRange(heading, pitch, range));
<div ng-show="!authenticated">
    <p>Please login.</p>

The part for adding the button is located between

* Adding the "Delete" button (start)


* Adding the "Delete" button (end)

The above file home.html is part of AngularJS system. It's embedded into index.html page, which looks like this:

<!doctype html>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>My app</title>
    <script src="js/Cesium/Cesium.js"></script>
      @import url(js/Cesium/Widgets/widgets.css);
      html, body {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        #cesiumContainer {
            width: 70%; height: 70%;
    <style type="text/css">
        [ng\:cloak], [ng-cloak], .ng-cloak {
        display: none !important;

<body ng-app="hello" ng-cloak class="ng-cloak">
<div ng-controller="navigation" class="container">
    <ul class="nav nav-pills" role="tablist">
        <li class="active"><a href="#/">home</a></li>
        <li><a href="#/login">login</a></li>
        <li ng-show="authenticated"><a href="" ng-click="logout()">logout</a></li>
<div ng-view class="container"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/hello.js"></script>

But the code doesn't work - the "Delete" button does not appear at the top of the Cesium panel.

How can I modify that code in order for the button to appear inside the Cesium panel?

Thanks in advance

Dmitri Pisarenko

There’s nothing special about the Cesium when it comes to page layout, so you can create buttons and data bind them via angular. It’s no different than any other HTML element. Is there a reason you are trying to create the button programatically rather than via HTML?

Here’s a complete (non-angular) example that does what you want. It should be straight-forward to pick out the relevant pieces and adapt it to your code.

<meta name="viewport"

content=“width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”>

Hello World! @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .toolbar-left { display: block; position: absolute; top: 5px; left: 5px; }

Click me!


Is there a reason you are trying to create the button programatically rather than via HTML?

I saw that the Sandcastle demo, the buttons are created this way and tried to replicate it.

Now I’ve applied your recommendation and it works.

Many thanks!


That's really awesome!