Small Search form overlaying Cesium div container

Andy Whelan

unread,

Nov 13, 2015, 9:58:34 AM11/13/15

to cesium-dev

Hello,

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 app.

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 appreciated.

Thanks!

Rob Milton

unread,

Nov 13, 2015, 4:22:26 PM11/13/15

to cesium-dev

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');
        divUL.id = 'divUpperLeft';
        divUL.style.position = "absolute";
        divUL.style.background = "rgba(0,0,0,0)";
        divUL.style.left = "10px";
        divUL.style.top = "10px";
        divUL.innerHTML = "";
        divUL.style.zIndex = 2000;
        document.getElementById("cesiumContainer").appendChild(divUL);
    }
}
function includeSearchWidget() {
    var divContainer = document.createElement("div");
    divContainer.id = "divSearchContainer";
    divContainer.style.top = "20px";
     
    var txtField = document.createElement("input");
    txtField.id = "txtSearchField";
    txtField.type = "text";
    txtField.style.border = "0px solid";
    txtField.style.width = "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!");
        }
    };
    divContainer.appendChild(txtField);
    
    var btnSearch = document.createElement("input");
    btnSearch.id = "btnSearch";
    btnSearch.type = "button";
    btnSearch.value = "Go";
    btnSearch.style.width = "50px";
    btnSearch.style.marginLeft = "10px";
    btnSearch.onclick = function() {
        window.alert("You clicked the search button!");
    };
    
    divContainer.appendChild(btnSearch);
    
    document.getElementById("divUpperLeft").appendChild(divContainer);
}
addUpperLeftDiv();
includeSearchWidget();

Hope this helps! Have fun with Cesium!

lgsof...@gmail.com

unread,

Nov 16, 2015, 9:55:50 PM11/16/15

to cesium-dev

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

<!DOCTYPE html>
<html lang="en">
<head>
<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>
<style>
@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;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="toolbar-left">
<button onclick="alert('You clicked!');">Click me!</button>
</div>
<script>