Custom Geocoder UI

Hey Cesium Team!

I am hoping to create a custom UI for my website that utilises the geocoder in cesium as well as completing other search functions. I'm struggling to find a way to tie the geocoder to my search input however.

Could anyone give me a hand? Here's the basic search bar:

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 includeSearchearth() {
    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 pressed enter");

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



Thanks in advance!


If you want to change the look of the geocoder, you should be able to do so entirely with CSS. You can override the styling found here:

Otherwise, you will have to modify the code that creates the geocoder elements

See the build guide in our Contributors documentation for how to check out and build the code base: