Are there any hooks into the Cesium Viewer toolbar so that I can add buttons or should I just getElementById and edit the html that way?
Generally, I would recommend creating your own buttons via normal JS/HTML/CSS (or using whatever toolkit you want). The safest approach would be build your UI outside of the cesium container, and then use CSS to position your UI elements over top of the stock UI in whatever desired location. Alternatively, you can dig around and find the toolbar div and appendChild directly to that element. I’d suggest examining the source code to see what the different DOM elements are used for, and to make sure your elements won’t get clobbered, since it’s generally not documented.
Wes,
Good advice from Scott; here’s an example of how I appended my buttons to the Cesium toolbar div; so far, they seem to fit in portrait or landscape, even on small-screen mobile device;
its important to .setAttribute(“class”, “btn-mwac btn3dView-mwac”); to reference in the CSS formatting of the buttons;
I’m interested in your resolution, if you’ll post back later;
thanks,
Jon
here’s the JS function (SCROLL WAY DOWN to see the CSS snippet):
addMwacButtonsToCesiumViewerToolbar : function (divContainer){
//20150131; Add MWAC’s buttons into Cesium’s toolbar…
// the divContainer passed to this function is the actual node, no need to getElementById from the document
try{
if (divContainer !== null) {
mwacCesiumToolbar = divContainer;
//ADD 3-D BUTTON to reset 3-D “home” view
var t = document.createTextNode(‘3-D View’); // Create a text node
var btn3dView = document.createElement(‘INPUT’); // Create pushbutton node
btn3dView.appendChild(t); // Append text node to button
btn3dView.setAttribute(“type”, “button”);
btn3dView.setAttribute(“class”, “btn-mwac btn3dView-mwac”);
btn3dView.setAttribute(“name”, “btn3dView”);
btn3dView.setAttribute(“value”, “3D”);
btn3dView.setAttribute(“style”,“padding-left:1px;”);
btn3dView.setAttribute(“title”, “Reset 3D View of Mt Washington’s Eastern Slope…”);
//ADD EVENT LISTENERS
btn3dView.addEventListener(“click”, function() {
//cap.flyToMWACin3D(CesiumMapViewer, 44.24931, -71.224917, 1500, 44.265434, -71.281140, 1500) //20150403, new parameters
//flyToMWACin3D: function(CesiumMapViewer, targetLat, targetLng, targetHeightMeters, cameraHeading, cameraPitch, cameraRange);
cap.flyToMWACin3D(CesiumMapViewer, 44.265434, -71.281140, 5000, 225, 0.0, 3000);
//-71.3035000, 44.2708500,6288 is the summit of Mount Washington
//what are these coords? 44.265434, -71.281140
//20150324; reset 3 sliders to middle 0 position, and reset the var storing their value to clear any previous value
rngLeftRight.value = 0;
rotateCameraAroundTarget = 0;
rngUpDown.value = 0;
tiltCameraLookUpDownAtTarget = 0;
rngInOut.value = 0;
zoomCameraInOut = 0;
});
//CesiumMapViewer.scene.mode = 3;
divContainer.appendChild(btn3dView); // append button to div
//ADD STEEP SLOPES BUTTON to toggle overlay on/off
var t = document.createTextNode(‘Steep Slopes’); // Create a text node
var btnSteepSlopes = document.createElement(‘INPUT’); // Create pushbutton node
btnSteepSlopes.appendChild(t); // Append text node to button
btnSteepSlopes.setAttribute(“type”, “button”);
btnSteepSlopes.setAttribute(“class”, “btn-mwac btnSteepSlopes-mwac”);
btnSteepSlopes.setAttribute(“name”, “btnSteepSlopes”);
btnSteepSlopes.setAttribute(“value”, “Steep”);
btnSteepSlopes.setAttribute(“style”,“padding-left:0px;”);
btnSteepSlopes.setAttribute(“title”, “Toggle visibility of Steep Slopes overlay…”);
//ADD EVENT LISTENERS
btnSteepSlopes.addEventListener(“click”, function() {
cap.toggleCesium_SteepSlopesOverlay(CesiumMapViewer)
rngSteepSlopes.value = 0.5
});
divContainer.appendChild(btnSteepSlopes); // append button to div
//ADD NWS Doppler RADAR mosaic BUTTON to toggle overlay on/off
var t = document.createTextNode(‘Radar’); // Create a text node
var btnRadar = document.createElement(‘INPUT’); // Create pushbutton node
btnRadar.appendChild(t); // Append text node to button
btnRadar.setAttribute(“type”, “button”);
btnRadar.setAttribute(“class”, “btn-mwac btnRadar-mwac”);
btnRadar.setAttribute(“name”, “btnRadar”);
btnRadar.setAttribute(“value”, “Radar”);
btnRadar.setAttribute(“style”,“padding-left:0px;”);
btnRadar.setAttribute(“title”, “Toggle visibility of NWS Dopler Radar overlay…”);
//ADD EVENT LISTENER
btnRadar.addEventListener(“click”, function() {
cap.toggleCesium_RadarOverlay(CesiumMapViewer)});
divContainer.appendChild(btnRadar); // append button to div
//ADD MWObs BUTTON to toggle Mesonet overlay on/off
var t = document.createTextNode(‘MWObs’); // Create a text node
var btnMWObs = document.createElement(‘INPUT’); // Create pushbutton node
btnMWObs.appendChild(t); // Append text node to button
btnMWObs.setAttribute(“type”, “button”);
btnMWObs.setAttribute(“class”, “btn-mwac btnMWObs-mwac”);
btnMWObs.setAttribute(“name”, “btnMWObs”);
btnMWObs.setAttribute(“value”, “MWObs”);
btnMWObs.setAttribute(“style”,“padding-left:0px;”);
btnMWObs.setAttribute(“title”, “Toggle visibility of MWObs Mesonet overlay…”);
//ADD EVENT LISTENER
btnMWObs.addEventListener(“click”, function() {
toggleCesium_MWObsOverlay(CesiumMapViewer)});
divContainer.appendChild(btnMWObs); // append button to div
//ADD MWAC BUTTON to toggle Avalanche Polygons overlay on/off
var t = document.createTextNode(‘MWAC’); // Create a text node
var btnMWAC = document.createElement(‘INPUT’); // Create pushbutton node
btnMWAC.appendChild(t); // Append text node to button
btnMWAC.setAttribute(“type”, “button”);
btnMWAC.setAttribute(“class”, “btn-mwac btnMWAC-mwac”);
btnMWAC.setAttribute(“name”, “btnMWAC”);
btnMWAC.setAttribute(“value”, “MWAC”);
btnMWAC.setAttribute(“style”,“padding-left:0px;”);
btnMWAC.setAttribute(“title”, “Toggle visibility of MWAC Avalanche Advisory overlay…”);
//ADD EVENT LISTENER
btnMWAC.addEventListener(“click”, function() {
toggleCesium_MWACOverlay()});
divContainer.appendChild(btnMWAC); // append button to div
}
return mwacCesiumToolbar;
} catch(error){
strMessage = '…an error occurred in addMwacButtonsToCesiumViewerToolbar: ’ + error.message;
console.log(strMessage);
return;
}
}, //end addMwacButtonsToCesiumViewerToolbar
/** output toolbar HTML looks like this
<input style=“font-size:12px; height:25px; width:100px; display:inline-block; margin: 5px; padding: 2px 5px;” name=“btn3dView” type=“button” value=“3D View” onclick=“mwac-map.cap.threeD_toggleOnOff()”
<input style=“font-size:12px; height:25px; width:100px; display:inline-block; margin: 5px; padding: 2px 5px;” name=“btnSteepSlopes” type=“button” value=“Steep Slopes” onclick=“mwac-map.cap.steep_slopes_toggleOnOff()”
<input style=“font-size:12px; height:25px; width:100px; display:inline-block; margin: 5px; padding: 2px 5px;” name=“btnIRradar” type=“button” value=“IR Radar”
<input style=“font-size:12px; height:25px; width:100px; display:inline-block; margin: 5px; padding: 2px 5px;” name=“btnNEXRAD_radar” type=“button” value=“NEXRAD Radar”
<input style=“font-size:12px; height:25px; width:100px; display:inline-block; margin: 5px; padding: 2px 5px;” name=“btnWeatherAlerts” type=“button” value=“Weather Alerts”
*/
``
here’s a snippet of the CSS:
.btn-mwac {
-moz-box-sizing: border-box;
-moz-user-select: none;
-webkit-user-select: none;
background: #303336;
border: 2px outset buttonface;
border-radius: 14%;
box-sizing: border-box;
color: #edffff;
cursor: pointer;
display: inline-block;
fill: #edffff;
height: 32px;
margin: 2px 3px;
overflow: hidden;
padding: 2px 0px 2px;
position: relative;
user-select: none;
vertical-align: middle;
width: 32px;
z-index: 0;
}
.btn-mwac:focus {
color: #fff;
fill: #fff;
border-color: #ea4;
outline: none;
}
.btn-mwac:hover {
color: #fff;
fill: #fff;
background: #48b;
border-color: #aef;
box-shadow: 0 0 8px #fff;
}
.btn-mwac:active {
color: #000;
fill: #000;
background: #adf;
border-color: #fff;
box-shadow: 0 0 8px #fff;
}
.btn3dView-mwac {
font-size: 12px;
}
.btnSteepSlopes-mwac {
font-size: 9px;
padding: 2px 0px 2px;
}
.btnRadar-mwac {
font-size: 9px;
padding: 2px 0px 2px;
}
.btnMWObs-mwac {
font-size: 9px;
padding: 2px 0px 2px;
}
.btnMWAC-mwac {
font-size: 9px;
padding: 2px 0px 2px;
}
``
Thanks Left…
thanks, here is another implementation with jquery.
function CreateBtn(text) {
var self = this;
this.el = ('<div class="cesium-button cesium-toolbar-button " onmouseout="selectzone()" onmouseover="noselectzone()"/>');
this.$el.append(text);
new Button(this.el, \{
click: function\(\) \{
alert\('hi'\);
\}
\}\);
return this;
\}
var divContainer = ('.cesium-viewer-toolbar');
this.animationToggle = CreateBtn('TEST');
$(this.animationToggle).on('click', function(e, data) {
//call action
});
divContainer.append(this.animationToggle.$el);