Custom Geocoder UI

CesiumJS
1

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

Thanks in advance!

2

Hello,

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: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/Geocoder/Geocoder.css

Otherwise, you will have to modify the code that creates the geocoder elements https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/Geocoder/Geocoder.js#L62-L93

See the build guide in our Contributors documentation for how to check out and build the code base: https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Documentation/Contributors/BuildGuide

Best,

Hannah