API / geotoolkit / controls / toolbar / Toolbar / Toolbar
Toolbar with the provided styles and buttons. Style can be completely changed via css. Creates css structure as follows: Toolbar Container (.cg-toolbar-container class) <ul> <li> Canvas </li> <li> Toolbar #1 </li> <li> Toolbar #2 </li> <li> ... </li> </ul>
Each toolbar has one of the following css class: .cg-toolbar-left,.cg-toolbar-top,.cg-toolbar-right,.cg-toolbar-bottom depending on its orientation and alignment. The toolbar content consists of button group(s) with .cg-toolbar-group style. Groups, in turn, contain buttons (.cg-toolbar-button). To separate the buttons into groups, use special symbol '-' (see examples).
Example
import {Toolbar} from '@int/geotoolkit/controls/toolbar/Toolbar';
import {AnchorType} from '@int/geotoolkit/util/AnchorType';
import {Orientation} from '@int/geotoolkit/util/Orientation';
new Toolbar({
// vertical toolbar in the upper right canvas corner:
'alignment': AnchorType.RightTop,
'orientation': Orientation.Vertical,
// some styles can be set in the constructor, e.g. the buttons size (in px):
'size': 40,
// set the list of buttons, see @int/geotoolkit/controls/toolbar/ButtonRegistry for a complete list:
'buttons': [
'zoom-in',
'zoom-out',
'-', // special symbol to separate buttons group for a gap
['point-selection', 'polygon-selection'] // use an array to create automatic dropdown
],
'tools': plot.getTool() // link to plot
});Example
// custom buttons can be created and used in the toolbar directly:
import {Button} from '@int/geotoolkit/controls/toolbar/Button';
new Toolbar({
...,
'buttons': [
'zoom-in',
'zoom-out',
new Button({
'icon': 'fas fa-cat', // set icon for a button
'title': 'Hello World', // title (hover text) info
'action': (tools, enabled) => { // button pressing callback
alert('Hello, World!');
}
})
],
'tools': plot.getTool()
});Constructors
- [new Toolbar(options)](/solutions/geotoolkit/GeoToolkit_JS/apis/classes/geotoolkit.controls.toolbar.toolbar.toolbar.md#new toolbar(options))
Methods
Methods
▸ dispose(): void
Disposes this toolbar, once disposed it should not be used anymore. Clear all listeners, and removes buttons from the document.
void
▸ getButtonList(): Button[][]
Returns button two-dimensional array of grouped toolbar button
Button[][]
▸ getClassName(): string
string
▸ getElement(): HTMLElement
Return tool bar element
HTMLElement
element
▸ getOffset(): Point
Return toolbar offset
offset
▸ getSize(): number
Return toolbar button size
number
▸ getVisible(): boolean
Get toolbar visibility
boolean
▸ insertButton(groupId, buttonId, button): Toolbar
Insert button at a specific position
| Name | Type | Description |
|---|---|---|
groupId | number | button group id (groups were separated with '-' symbol) |
buttonId | number | button index position inside the group |
button | string | Button | toolbar button to insert or its string identifier (see geotoolkit.controls.toolbar.ButtonRegistry.getInstance().getIds() for all the buttons available) |
this
▸ removeButton(button): Toolbar
Removes button from toolbar
| Name | Type | Description |
|---|---|---|
button | Button | toolbar button to remove |
this
▸ setOffset(offset): Toolbar
Set toolbar offset
▸ setVisible(visible): Toolbar
Set toolbar visibility
| Name | Type | Description |
|---|---|---|
visible | boolean | visibility flag |
▸ Static getClassName(): string
string