Add Toolbar Button
In this tutorial we’ll be adding a custom toolbar with two buttons to The Viewer canvas. Each button will have its own tooltip and will react to click events. Click events will trigger camera rotation of 90 degrees around the target.
You will also listen and react to events dispatched by the Viewer instance.
Before You Begin
Instantiate a ViewingApplication before moving ahead; it provides a solid starting point.
We recommend the code in this tutorial to be encapsulated in a developer-created extension. This tutorial will assume you already have a custom extension created which is being loaded by your Viewer application. Don’t forget to assign a unique extension id to this new extension!
Step 1: Detect the Toolbar
Depending on when the extension gets loaded, the toolbar object might not be available. When no toolbar is present, you’ll have to wait for TOOLBAR_CREATED_EVENT to get fired. See the Events tutorial for more details.
We will use the extension’s load() method to encapsulate this logic.
ToolbarExtension.prototype.load = function() {
if (this.viewer.toolbar) {
// Toolbar is already available, create the UI
this.createUI();
} else {
// Toolbar hasn't been created yet, wait until we get notification of its creation
this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
this.viewer.addEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
}
return true;
};
ToolbarExtension.prototype.onToolbarCreated = function() {
this.viewer.removeEventListener(av.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
this.onToolbarCreatedBinded = null;
this.createUI();
};
ToolbarExtension.prototype.createUI = function() {
alert('TODO: Create Toolbar!');
};
The code above makes use of JavaScript’s native bind() method to make sure accessing this is locked to the ToolbarExtension object.
Step 3: Cleanup
Extensions should remove any DOM elements and events they add.
In this case, we need only to remove this.subToolbar.
ToolbarExtension.prototype.unload = function() {
this.viewer.toolbar.removeControl(this.subToolbar);
return true;
};
As with the extensions tutorial, you can verify that the extension works as expected by manually
calling load() and unload() methods.
