Class ButtonComponent

A component that adds a button to a VMC map or web map UI as an Esri widget. This component is designed to be placed in a VMC view tree.

Example usage:

<vmc-map (mapViewReady)="onMapViewReady($event)">
  <vmc-button
    esriIconClass="esri-icon-zoom-to-object"
    tooltip="Zoom to layer extent"
    [position]="{ position: 'top-left', index: 3 }"
    (widgetClick)="onZoomToExtentClick()"
  ></vmc-button>
</vmc-map>

Hierarchy

  • ButtonComponent

Constructors

constructor

Properties

_position$ _spinning$ ariaLabel disabled esriIconClass inlineStyles tooltip view$ viewBase widgetClick

Accessors

position spinning

Methods

onClick onKeyup

Constructors

constructor

  • Parameters

    • viewBase: ViewBase

    Returns ButtonComponent

Properties

Private _position$

_position$: BehaviorSubject<VmcWidgetPosition | UIAddPosition> = ...

Private _spinning$

_spinning$: BehaviorSubject<boolean> = ...

ariaLabel

ariaLabel: null | string = null

The ARIA label to be set on the component. If not passed to the component, defaults to the tooltip value.

disabled

disabled: boolean = false

If true, the button does not emit clicks and has some styling applied to make it appear as if it's disabled.

esriIconClass

esriIconClass: string = 'esri-icon-question'

A component input property that sets the Esri Icon Font CSS class that will be displayed on the button widget. Defaults to esri-icon-question.

inlineStyles

inlineStyles: null | string = null

Accepts a string of styles, to apply as inline styles to the button.

tooltip

tooltip: string = 'Click to activate'

Sets a tooltip for the widget by setting the HTML5 title attribute.

Readonly view$

view$: Observable<null | MapView | SceneView> = ...

The VMC view tree's View as an observable stream.

Private viewBase

viewBase: ViewBase

widgetClick

widgetClick: EventEmitter<MouseEvent | KeyboardEvent> = ...

An Angular event that fires when the user clicks on the button. In this instance, a click can be a MouseClick, or a keyup.enter | keyup.space event when the tabindex is set to the widget element.

Accessors

position

  • set position(val: VmcWidgetPosition | UIAddPosition): void

  • The Esri UIAddPosition describing where in the Map's UI the widget should be placed.

    Parameters

    • val: VmcWidgetPosition | UIAddPosition

    Returns void

spinning

  • set spinning(val: null | boolean): void

  • A component Input property that sets the button in a "loading" state, where it sets the icon to "esri-icon-loading-indicator" and adds the "esri-rotating" css class.

    Essentially, setting this input to true turns the button into a spinner until this property is set to false.

    Parameters

    • val: null | boolean

    Returns void

Methods

Private onClick

  • Private

    Parameters

    • click: MouseEvent

    Returns void

Private onKeyup

  • Private

    Parameters

    • keyEvent: Event

    Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc