Small Search form overlaying Cesium div container


I hope this isn’t considered off topic here. It does have to
do with using Cesium. I’m kind of a novice when it comes to modern html
(HTML5/JQuery/CSS, etc).

All of the implementations I am finding on the Cesium web site involve
running cesium as a widget in a div container.

I have a need for a small text search form that exists outside
of this div container.

It consists of one form input and a couple of buttons. This
form allows a user to enter search terms that I run against a database, and
pull out associated coordinates that I am creating pins to place on the Cesium

I would like this form
to sit on top (overlay) the div container that contains the cesium widget.

I would like it to only take up a small section in the upper
left corner, overlaying the cesium widget. It would be great if the background,
underneath the form input field and buttons were transparent.

I just figured other people in this group may have had to do
something similar. Any helpful hints on slick ways for doing this (including likes to widgets) would be


Hi Andy,

As you allude to in your post the sort of thing you’re trying to do really has nothing to do with Cesium but just involved JavaScript and HTML. The Cesium “Viewer” and the Cesium “Widget” (which are actually two different things need to be provided with an HTML DIV element when instantiated. This canvas that is used by Cesium is created in this DIV.

But the DIV is still just an HTML element, and you can add other HTML elements to it and position and style them however you like. Below is some code you can paste into the “JavaScript code” section of Sandcastle. This code creates a DIV called “divUpperLeft” and adds it to the upper left corner of the “cesiumContainer” DIV. It then adds a DIV called “divSearchContainer” to the “divUpperLeft” element. There are all sorts of approaches that could be used for adding these DIVs and other elements. This is just one quick method to give you an idea and something to start experimenting with.

var viewer = new Cesium.Viewer(‘cesiumContainer’);
function addUpperLeftDiv() {
var divUL = document.getElementById(‘divUpperLeft’);
if (!divUL) {
divUL = document.createElement(‘div’); = ‘divUpperLeft’; = “absolute”; = “rgba(0,0,0,0)”; = “10px”; = “10px”;
divUL.innerHTML = “”; = 2000;
function includeSearchWidget() {
var divContainer = document.createElement(“div”); = “divSearchContainer”; = “20px”;

var txtField = document.createElement("input"); = "txtSearchField";
txtField.type = "text"; = "0px solid"; = "150px";
txtField.onkeydown = function(e) {
    // Enter Key
    var keycode = e.which ? e.which : e.keyCode;
    if (keycode === 13) {
        window.alert("You hit the enter key while focus was on the search text field!");

var btnSearch = document.createElement("input"); = "btnSearch";
btnSearch.type = "button";
btnSearch.value = "Go"; = "50px"; = "10px";
btnSearch.onclick = function() {
    window.alert("You clicked the search button!");





Hope this helps! Have fun with Cesium!

Easier way to create form, use HTML and control elements by id using js -

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Hello World!</title>
    <script src="../Build/Cesium/Cesium.js"></script>
        @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;
<div id="cesiumContainer"></div>
<div class="toolbar-left">
    <button onclick="alert('You clicked!');">Click me!</button>
    var viewer = new Cesium.Viewer('cesiumContainer');