API / geotoolkit / map / toolbar / ZoomLevel / ZoomLevel
This class provides a way to show the map’s current zoom level on a canvas element at a chosen location. It helps identify the updated zoom level after the user performs zoom‑in or zoom‑out actions.
Example
const plot = new Plot({
'canvaselement': canvas,
'root': map
});
// create new toolbar:
new Toolbar({
'color': '#adb6c2',
'offset': {
x: 4,
y: 4
},
'buttons': [
new ZoomLevel(), // By default, it shows only the current zoom level without decimals
'-',
// to display custom text along with the current zoom level, formatted to four decimal places.
new ZoomLevel({
'formatter': (value: number) => 'Zoom level: ' + value.toFixed(4),
'map: map
}),
],
'orientation': Orientation.Horizontal,
'alignment': AnchorType.RightBottom,
'tools': plot.getTool()
});↳
ZoomLevel
Constructors
- [new ZoomLevel(options)](/solutions/geotoolkit/GeoToolkit_JS/apis/classes/geotoolkit.map.toolbar.zoomlevel.zoomlevel.md#new zoomlevel(options))
Methods
Constructors
• new ZoomLevel(options?)
| Name | Type | Description |
|---|---|---|
Optional options | Options | ZoomLevel options |
Label.constructor
Methods
▸ clear(tools, registry): void
Clears this button, removes all listeners and button DOM element from the document.<br> Calls user callback with the ToolsContainer provided and 'false' flag to clear the data. Removes itself from the registry list.
| Name | Type | Description |
|---|---|---|
tools | ToolsContainer | tools container for the user callback |
registry | Button[] | button registry to remove itself from |
void
▸ clone(): Button
All subclasses should override copyConstructor or provide custom implementation for this method
clone
▸ Protected copyConstructor(src): ZoomLevel
Copy constructor function.<br> Function used as part of the cloning mechanism.<br> Implementations should copy the given instance state to this instance.<br>
| Name | Type | Description |
|---|---|---|
src | ZoomLevel | Source to copy from |
this
▸ getAction(): ActionCallback
Returns current action callback (if exists)
▸ getBorder(): string
Returns button element border
string
▸ getChecked(): boolean
Returns true if button is checked (for checkbox case), false otherwise
boolean
▸ getClassName(): string
string
▸ getColor(): string
Returns button element background color
string
▸ getElement(): HTMLElement
Returns current html DOM element used for the button
HTMLElement
▸ getFormatter(): (zoomLevel: number) => string
return formatter function.
fn
function
▸ (zoomLevel): string
return formatter function.
| Name | Type |
|---|---|
zoomLevel | number |
string
function
▸ getHeight(): number
Returns fixed button height in px (if was set), null otherwise
number
▸ getIcon(): string
Returns button icon
string
▸ getInit(): InitCallback
Returns current initialization callback to be called on toolbar init/dispose
initialization callback
▸ getName(): string[]
Returns current name(s) that describe group(s) that the radio button belongs to (checkbox case only). If the button should not switch automatically or is not checkbox, returns empty array
string[]
▸ getPaddingStyle(): string
Returns button element padding style
string
▸ getTextColor(): string
Returns button element text color
string
▸ getTitle(): string
Returns button DOM element title text
string
▸ getWidth(): number
Returns fixed button width in px (if was set), null otherwise
number
▸ init(tools, registry, parent, gap, insertId, listener): ZoomLevel
Initializes button, creates event listeners and adds button element to the document
| Name | Type | Description |
|---|---|---|
tools | ToolsContainer | tools container for the user callback |
registry | Button[] | list of buttons on the Plot, is needed for correct on/off radio buttons |
parent | HTMLElement | parent element to add button to |
gap | HTMLElement | gap element or null if no gap is needed |
insertId | number | insert position index |
listener | (b: Button) => void | listener callback |
this
▸ setAction(action): ZoomLevel
Sets current action callback
| Name | Type | Description |
|---|---|---|
action | ActionCallback | action callback to be called when pressing the button |
this
▸ setBorder(border): ZoomLevel
Sets button element border
| Name | Type | Description |
|---|---|---|
border | string | css-styled border value |
this
▸ setChecked(checked): ZoomLevel
Adds or removes css checked class to the DOM element
| Name | Type | Description |
|---|---|---|
checked | boolean | true to add checked class, false otherwise |
this
▸ setColor(color): ZoomLevel
Sets button element background color
| Name | Type | Description |
|---|---|---|
color | string | background color |
this
▸ setFormatter(formatter): ZoomLevel
set formatter to get custom zoom level.
| Name | Type |
|---|---|
formatter | (zoomLevel: number) => string |
this
▸ setIcon(icon): ZoomLevel
Set button icon
| Name | Type |
|---|---|
icon | string |
▸ setInit(init): ZoomLevel
Sets initialization callback that is called on toolbar init/dispose
| Name | Type | Description |
|---|---|---|
init | InitCallback | initialization callback |
this
▸ setPaddingStyle(padding): ZoomLevel
Sets button element padding style
| Name | Type | Description |
|---|---|---|
padding | string | number | padding (in px) or style string |
▸ setSize(width, height?): ZoomLevel
Sets button DOM element fixed size (in px)
| Name | Type | Description |
|---|---|---|
width | number | button element size or width |
Optional height | number | button element height. Equals to width, if nothing is provided. |
this
▸ setText(text): ZoomLevel
Set label text
| Name | Type | Description |
|---|---|---|
text | string | label text |
▸ setTextColor(color): ZoomLevel
Sets button element text color
| Name | Type | Description |
|---|---|---|
color | string | text color |
this
▸ setTitle(title): ZoomLevel
Sets button DOM element title
| Name | Type | Description |
|---|---|---|
title | string | title text |
▸ Static getClassName(): string
string