# Custom Geocoder UI

**URL:** <https://community.cesium.com/t/custom-geocoder-ui/4772>\
**Category:** CesiumJS\
**Created:** [November 2, 2016, 4:40am UTC](https://community.cesium.com/t/custom-geocoder-ui/4772 "2016-11-02T04:40:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jake.michael.scott](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@jake.michael.scott](https://community.cesium.com/u/jake.michael.scott)\
**Post date:** [November 2, 2016, 4:40am UTC](https://community.cesium.com/t/custom-geocoder-ui/4772/1 "2016-11-02T04:40:11Z")

</div>

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() {  
&nbsp;&nbsp;&nbsp;&nbsp;var divUL = document.getElementById('divUpperLeft');  
&nbsp;&nbsp;&nbsp;&nbsp;if (!divUL) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divUL = document.createElement('div');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divUL.id = 'divUpperLeft';  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divUL.style.position = "absolute";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divUL.style.background = "rgba(0,0,0,0)";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divUL.style.left = "10px";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divUL.style.top = "10px";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divUL.innerHTML = "";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divUL.style.zIndex = 2000;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("cesiumContainer").appendChild(divUL);  
&nbsp;&nbsp;&nbsp;&nbsp;}  
}  
function includeSearchearth() {  
&nbsp;&nbsp;&nbsp;&nbsp;var divContainer = document.createElement("div");  
&nbsp;&nbsp;&nbsp;&nbsp;divContainer.id = "divSearchContainer";  
&nbsp;&nbsp;&nbsp;&nbsp;divContainer.style.top = "20px";

&nbsp;&nbsp;&nbsp;&nbsp;var txtField = document.createElement("input");  
&nbsp;&nbsp;&nbsp;&nbsp;txtField.id = "txtSearchField";  
&nbsp;&nbsp;&nbsp;&nbsp;txtField.type = "text";  
&nbsp;&nbsp;&nbsp;&nbsp;txtField.style.border = "0px solid";  
&nbsp;&nbsp;&nbsp;&nbsp;txtField.style.width = "150px";  
&nbsp;&nbsp;&nbsp;&nbsp;txtField.onkeydown = function(e) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Enter Key  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var keycode = e.which ? e.which : e.keyCode;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (keycode === 13) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.alert("You pressed enter");  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;};  
&nbsp;&nbsp;&nbsp;&nbsp;divContainer.appendChild(txtField);

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

&nbsp;&nbsp;&nbsp;&nbsp;divContainer.appendChild(btnSearch);

&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("divUpperLeft").appendChild(divContainer);  
}  
addUpperLeftDiv();  
includeSearchearth();

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [November 2, 2016, 1:21pm UTC](https://community.cesium.com/t/custom-geocoder-ui/4772/2 "2016-11-02T13:21:59Z")

</div>

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](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](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](https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Documentation/Contributors/BuildGuide)

Best,

Hannah