{"id":1496,"date":"2015-11-17T02:52:48","date_gmt":"2015-11-17T02:52:48","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1496"},"modified":"2015-11-17T02:53:09","modified_gmt":"2015-11-17T02:53:09","slug":"cesiumjs-how-to-create-html-element-on-top-of-the-cesium","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2015\/11\/cesiumjs-how-to-create-html-element-on-top-of-the-cesium\/","title":{"rendered":"Cesiumjs &#8211; How to create HTML element on top of the Cesium ?"},"content":{"rendered":"<p><a href=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/11\/Cesiumjs-html-form.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/11\/Cesiumjs-html-form.png\" alt=\"Cesiumjs-html-form\" width=\"473\" height=\"396\" class=\"aligncenter size-full wp-image-1498\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/11\/Cesiumjs-html-form.png 473w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/11\/Cesiumjs-html-form-300x251.png 300w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/p>\n<pre>\r\n\r\nvar viewer = new Cesium.Viewer('cesiumContainer');\r\nfunction addUpperLeftDiv() {\r\n    var divUL = document.getElementById('divUpperLeft');\r\n    if (!divUL) {\r\n        divUL = document.createElement('div');\r\n        divUL.id = 'divUpperLeft';\r\n        divUL.style.position = \"absolute\";\r\n        divUL.style.background = \"rgba(0,0,0,0)\";\r\n        divUL.style.left = \"10px\";\r\n        divUL.style.top = \"10px\";\r\n        divUL.innerHTML = \"\";\r\n        divUL.style.zIndex = 2000;\r\n        document.getElementById(\"cesiumContainer\").appendChild(divUL);\r\n    }\r\n}\r\nfunction includeSearchWidget() {\r\n    var divContainer = document.createElement(\"div\");\r\n    divContainer.id = \"divSearchContainer\";\r\n    divContainer.style.top = \"20px\";\r\n     \r\n    var txtField = document.createElement(\"input\");\r\n    txtField.id = \"txtSearchField\";\r\n    txtField.type = \"text\";\r\n    txtField.style.border = \"0px solid\";\r\n    txtField.style.width = \"150px\";\r\n    txtField.onkeydown = function(e) {\r\n        \/\/ Enter Key\r\n        var keycode = e.which ? e.which : e.keyCode;\r\n        if (keycode === 13) {\r\n            window.alert(\"You hit the enter key while focus was on the search text field!\");\r\n        }\r\n    };\r\n    divContainer.appendChild(txtField);\r\n    \r\n    var btnSearch = document.createElement(\"input\");\r\n    btnSearch.id = \"btnSearch\";\r\n    btnSearch.type = \"button\";\r\n    btnSearch.value = \"Go\";\r\n    btnSearch.style.width = \"50px\";\r\n    btnSearch.style.marginLeft = \"10px\";\r\n    btnSearch.onclick = function() {\r\n        window.alert(\"You clicked the search button!\");\r\n    };\r\n    \r\n    divContainer.appendChild(btnSearch);\r\n    \r\n    document.getElementById(\"divUpperLeft\").appendChild(divContainer);\r\n}\r\naddUpperLeftDiv();\r\nincludeSearchWidget();\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>var viewer = new Cesium.Viewer(&#8216;cesiumContainer&#8217;); function addUpperLeftDiv() { var divUL = document.getElementById(&#8216;divUpperLeft&#8217;); if (!divUL) { divUL = document.createElement(&#8216;div&#8217;); divUL.id = &#8216;divUpperLeft&#8217;; divUL.style.position = &#8220;absolute&#8221;; divUL.style.background = &#8220;rgba(0,0,0,0)&#8221;; divUL.style.left = &#8220;10px&#8221;; divUL.style.top = &#8220;10px&#8221;; divUL.innerHTML = &#8220;&#8221;; divUL.style.zIndex = 2000; document.getElementById(&#8220;cesiumContainer&#8221;).appendChild(divUL); } } function includeSearchWidget() { var divContainer = document.createElement(&#8220;div&#8221;); divContainer.id = &#8220;divSearchContainer&#8221;; divContainer.style.top = &#8220;20px&#8221;; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[53,27],"tags":[],"class_list":["post-1496","post","type-post","status-publish","format-standard","hentry","category-cesiumjs","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1496"}],"version-history":[{"count":2,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1496\/revisions"}],"predecessor-version":[{"id":1499,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1496\/revisions\/1499"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}