Class WebMapComponent

Renders an Esri ArcGIS JavaScript API WebMap to the DOM.

This component can be thought of as the top of a VMC map tree. Add the vmc-web-map selector to your Angular template, and add any dependent widgets inside the element as child elements.

Example usage:

<vmc-web-map>
  <vmc-legend></vmc-legend>
</vmc-web-map>

Hierarchy

  • WebMapComponent

Implements

  • ViewBase
  • OnInit
  • OnDestroy

Constructors

constructor

Properties

_portalItemId$ _view _webMap destroy$ el esriEventer initProps rxLayerViewService view view$ webMap webMap$ webMapService

Events

centerChange focusedChange interactingChange isUpdatingLayers mapViewReady orientationChange resolutionChange scaleChange stationaryChange updatingChange viewBlur viewClick viewDblClick viewDrag viewFocus viewHold viewImmediateClick viewImmediateDblClick viewKeyDown viewKeyUp viewLayerViewCreate viewLayerViewCreateError viewLayerViewDestroy viewMouseWheel viewPointerDown viewPointerEnter viewPointerLeave viewPointerMove viewPointerUp viewResize viewpointChange webMapReady zoomChange

Accessors

portalItemId

Methods

initWebMap ngOnDestroy ngOnInit

Constructors

constructor

  • Parameters

    • destroy$: Observable<null>
    • esriEventer: EsriEventer
    • rxLayerViewService: RxLayerViewService
    • webMapService: WebMapService

    Returns WebMapComponent

Properties

Readonly Private _portalItemId$

_portalItemId$: BehaviorSubject<string> = ...

Private _view

_view: BehaviorSubject<null | MapView> = ...

Private _webMap

_webMap: BehaviorSubject<null | WebMap> = ...

Private destroy$

destroy$: Observable<null>

el

el: ElementRef<HTMLDivElement>

An Angular ElementRef of the

element that hosts the map view.

Private esriEventer

esriEventer: EsriEventer

initProps

initProps: null | MapViewProperties = null

A static set of Esri MapViewProperties that will be passed to the Esri MapView when it is constructed by the WebMapComponent. Useful to set properties on the view for the first render. For example, to disable parts of the default MapView UI.

Private rxLayerViewService

rxLayerViewService: RxLayerViewService

view

view: null | MapView = null

A reference to the Esri MapView that is associated with this component's view.

Readonly view$

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

webMap

webMap: null | WebMap = null

A reference to the Esri MapMap that is associated with this component's view.

Readonly webMap$

webMap$: Observable<null | MapView> = ...

Private webMapService

webMapService: WebMapService

Events

centerChange

centerChange: Observable<Point> = ...

The Esri MapView.center property as an Angular event. Internally, the VMC library uses the Esri watch pattern.

Remark

supports 2-way data binding, but it can disrupt animations.

focusedChange

focusedChange: Observable<boolean> = ...

The Esri MapView.focused property as an Angular event. Internally, the VMC library uses the Esri watch pattern.

Remark

Does not supports 2-way data binding.

interactingChange

interactingChange: Observable<boolean> = ...

The Esri MapView.interacting property as an Angular event. Internally, the VMC library uses the Esri watch pattern.

Remark

Does not supports 2-way data binding.

isUpdatingLayers

isUpdatingLayers: Observable<boolean> = ...

An rxjs Observable Stream exposed as an Angular Event. This property events the value true when one or more supported layers in the MapView are updating. It emits false when the updates are stable.

mapViewReady

mapViewReady: EventEmitter<MapView> = ...

Emits a reference to the Esri MapView when it is fully loaded, as indicated by the View's View.when method.

orientationChange

orientationChange: Observable<string> = ...

The Esri MapView.orientation property as an Angular event. Internally, the VMC library uses the Esri watch pattern.

Remark

Does not supports 2-way data binding.

resolutionChange

resolutionChange: Observable<number> = ...

The Esri MapView.resolution property as an Angular event. Internally, the VMC library uses the Esri watch pattern.

Remark

Does not supports 2-way data binding.

scaleChange

scaleChange: Observable<number> = ...

The Esri MapView.scale property as an Angular event. Internally, the VMC library uses the Esri watch pattern.

Remark

Does not supports 2-way data binding.

stationaryChange

stationaryChange: Observable<boolean> = ...

The Esri MapView.stationary property as an Angular event. Internally, the VMC library uses the Esri watch pattern.

Remark

Does not supports 2-way data binding.

updatingChange

updatingChange: Observable<boolean> = ...

The Esri MapView.updating property as an Angular event. Internally, the VMC library uses the Esri watch pattern.

Remark

Does not supports 2-way data binding.

viewBlur

viewBlur: Observable<ViewBlurEvent> = ...

The Esri MapView.blur event, exposed as an Angular event.

viewClick

viewClick: Observable<ViewClickEvent> = ...

The Esri MapView.click event, exposed as an Angular event.

viewDblClick

viewDblClick: Observable<ViewDoubleClickEvent> = ...

The Esri MapView.double-click event, exposed as an Angular event.

viewDrag

viewDrag: Observable<ViewDragEvent> = ...

The Esri MapView.drag event, exposed as an Angular event.

viewFocus

viewFocus: Observable<ViewFocusEvent> = ...

The Esri MapView.focus event, exposed as an Angular event.

viewHold

viewHold: Observable<ViewHoldEvent> = ...

The Esri MapView.hold event, exposed as an Angular event.

viewImmediateClick

viewImmediateClick: Observable<ViewImmediateClickEvent> = ...

The Esri MapView.immediate-click event, exposed as an Angular event.

viewImmediateDblClick

viewImmediateDblClick: Observable<ViewImmediateDoubleClickEvent> = ...

The Esri MapView.immediate-double-click event, exposed as an Angular event.

viewKeyDown

viewKeyDown: Observable<ViewKeyDownEvent> = ...

The Esri MapView.key-down event, exposed as an Angular event.

viewKeyUp

viewKeyUp: Observable<ViewKeyUpEvent> = ...

The Esri MapView.key-up event, exposed as an Angular event.

viewLayerViewCreate

viewLayerViewCreate: Observable<ViewLayerviewCreateEvent> = ...

The Esri MapView.layerview-create event, exposed as an Angular event.

viewLayerViewCreateError

viewLayerViewCreateError: Observable<ViewLayerviewCreateErrorEvent> = ...

The Esri MapView.layerview-create-error event, exposed as an Angular event.

viewLayerViewDestroy

viewLayerViewDestroy: Observable<ViewLayerviewDestroyEvent> = ...

The Esri MapView.layerview-destroy event, exposed as an Angular event.

viewMouseWheel

viewMouseWheel: Observable<ViewMouseWheelEvent> = ...

The Esri MapView.mouse-wheel event, exposed as an Angular event.

viewPointerDown

viewPointerDown: Observable<ViewPointerDownEvent> = ...

The Esri MapView.pointer-down event, exposed as an Angular event.

viewPointerEnter

viewPointerEnter: Observable<ViewPointerEnterEvent> = ...

The Esri MapView.pointer-enter event, exposed as an Angular event.

viewPointerLeave

viewPointerLeave: Observable<ViewPointerLeaveEvent> = ...

The Esri MapView.pointer-leave event, exposed as an Angular event.

viewPointerMove

viewPointerMove: Observable<ViewPointerMoveEvent> = ...

The Esri MapView.pointer-move event, exposed as an Angular event.

viewPointerUp

viewPointerUp: Observable<ViewPointerUpEvent> = ...

The Esri MapView.pointer-up event, exposed as an Angular event.

viewResize

viewResize: Observable<ViewResizeEvent> = ...

The Esri MapView.resize event, exposed as an Angular event.

viewpointChange

viewpointChange: Observable<Viewpoint> = ...

The Esri MapView.viewpoint property as an Angular event. Internally, the VMC library uses the Esri watch pattern.

Remark

Does not supports 2-way data binding.

webMapReady

webMapReady: EventEmitter<WebMap> = ...

Emits a reference to the Esri WebMap when it is fully loaded, as indicated by the object's WebMap.when method.

zoomChange

zoomChange: Observable<number> = ...

The Esri MapView.zoom property as an Angular event. Internally, the VMC library uses the Esri watch pattern.

Remark

supports 2-way data binding, but it can disrupt animations.

Accessors

portalItemId

  • set portalItemId(val: string): void

  • An Angular Component input.

    The PortalItem.id of a WebMap item in an ArcGIS Portal or AGOL.

    Parameters

    • val: string

    Returns void

Methods

Private initWebMap

  • Private

    Parameters

    • id: string

    Returns void

Private ngOnDestroy

  • Private

    Returns void

Private ngOnInit

  • Private

    Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc