API / geotoolkit / map / toolbar / MapOverview / MapOverview
toolbar.MapOverview.MapOverview
This class defines a map overview toggle button that controls the display of a canvas DOM element at a specified location. It uses a new plot and map widget configured with user-defined settings. The overview widget mirrors the visible bounds of the main map widget via a rectangular viewport, and supports two-way interaction: viewport rectangle updates in real-time with the main map and allows users to drag it to navigate the main map directly.
Example
const plot = new Plot({
'canvaselement': canvas,
'root': map
});
// create new toolbar with a single button:
new Toolbar({
'buttons': [
new MapOverview({
'layers': [...], // map layers to use
'tools': plot.getTool(),
// overview canvas size and position:
'overview': {
'alignment': AnchorType.RightBottom,
'offset': 10,
'width': 200,
'height': 150
}
})
],
'orientation': Orientation.Horizontal,
'alignment': AnchorType.RightBottom,
'tools': plot.getTool()
});↳
MapOverview
Constructors
- [new MapOverview(options)](/solutions/geotoolkit/GeoToolkit_JS/apis/classes/geotoolkit.map.toolbar.mapoverview.mapoverview.md#new mapoverview(options))
Methods
Constructors
• new MapOverview(options?)
| Name | Type | Description |
|---|---|---|
Optional options | Options | button options |
Button.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): MapOverview
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 | Button | 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
▸ 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
▸ getPlot(): Plot
Returns minimap overview plot
▸ getTextColor(): string
Returns button element text color
string
▸ getTitle(): string
Returns button DOM element title text
string
▸ getViewPort(): Rectangle
Returns minimap view port rectangle shape
▸ getVisible(): boolean
Returns true if map overview canvas is visible
boolean
▸ getWidget(): Map
Returns minimap overview map widget
▸ getWidth(): number
Returns fixed button width in px (if was set), null otherwise
number
▸ init(tools, registry, parent, gap, insertId, listener): MapOverview
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): MapOverview
Sets current action callback
| Name | Type | Description |
|---|---|---|
action | ActionCallback | action callback to be called when pressing the button |
this
▸ setBorder(border): MapOverview
Sets button element border
| Name | Type | Description |
|---|---|---|
border | string | css-styled border value |
this
▸ setChecked(checked): MapOverview
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): MapOverview
Sets button element background color
| Name | Type | Description |
|---|---|---|
color | string | background color |
this
▸ setIcon(icon): MapOverview
Set button icon
| Name | Type |
|---|---|
icon | string |
▸ setInit(init): MapOverview
Sets initialization callback that is called on toolbar init/dispose
| Name | Type | Description |
|---|---|---|
init | InitCallback | initialization callback |
this
▸ setOverviewSize(width, height?): MapOverview
Sets overview DOM element fixed size (in px)
| Name | Type | Description |
|---|---|---|
width | number | overview element size or width |
Optional height | number | overview element height. Equals to width, if nothing is provided. |
this
▸ setPaddingStyle(padding): MapOverview
Sets button element padding style
| Name | Type | Description |
|---|---|---|
padding | string | number | padding (in px) or style string |
▸ setSize(width, height?): MapOverview
Sets button DOM element fixed size (in px)
| Name | Type | Description |
|---|---|---|
width | string | number | button element size or width |
Optional height | string | number | button element height. Equals to width, if nothing is provided. |
this
▸ setTextColor(color): MapOverview
Sets button element text color
| Name | Type | Description |
|---|---|---|
color | string | text color |
this
▸ setTitle(title): MapOverview
Sets button DOM element title
| Name | Type | Description |
|---|---|---|
title | string | title text |
▸ setVisible(visible): MapOverview
Shows or hides map overview canvas
| Name | Type | Description |
|---|---|---|
visible | boolean | true to show canvas, false otherwise |
▸ Static getClassName(): string
string