Class MapComponent

Renders an Esri ArcGIS JavaScript API Map to the DOM.

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

Example usage:

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

Hierarchy

  • MapComponent

Implements

  • ViewBase
  • OnInit
  • OnDestroy

Constructors

constructor

Properties

_basemap$ _center$ _initProps$ _view _zoom$ destroy$ el esriEventer mapService rxLayerViewService view view$

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 zoomChange

Accessors

basemap center initProps zoom

Methods

initMap ngOnDestroy ngOnInit

Constructors

constructor

  • Parameters

    • destroy$: Observable<null>
    • esriEventer: EsriEventer
    • mapService: MapService
    • rxLayerViewService: RxLayerViewService

    Returns MapComponent

Properties

Readonly Private _basemap$

_basemap$: BehaviorSubject<undefined | string | BasemapProperties> = ...

Readonly Private _center$

_center$: BehaviorSubject<number[] | Point> = ...

Readonly Private _initProps$

_initProps$: BehaviorSubject<null | MapViewProperties> = ...

Private _view

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

Readonly Private _zoom$

_zoom$: BehaviorSubject<number> = ...

Private destroy$

destroy$: Observable<null>

el

el: ElementRef<HTMLDivElement>

An Angular ElementRef of the

element that hosts the map view.

Private esriEventer

esriEventer: EsriEventer

Private mapService

mapService: MapService

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> = ...

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.

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

basemap

  • set basemap(val: undefined | string | BasemapProperties): void

  • An Angular component input property that sets the default basemap.

    If set during the components runtime (after ngOnInit), changing this property will update the map.

    Parameters

    • val: undefined | string | BasemapProperties

    Returns void

center

  • set center(val: number[]): void

  • An Angular component input property that sets the default center of the map. Expects a coordinate array of [x, y] or an Esri Point.

    If set during the components runtime (after ngOnInit), changing this property will update the map.

    Parameters

    • val: number[]

    Returns void

initProps

  • get initProps(): null | MapViewProperties

  • Returns null | MapViewProperties

  • set initProps(val: null | MapViewProperties): void

  • A static set of Esri MapViewProperties that will be passed to the Esri MapView when it is constructed by the @vhb-map/core Component. Useful to set properties on the view for the first render. For example, to disable parts of the default MapView UI.

    Parameters

    • val: null | MapViewProperties

    Returns void

zoom

  • set zoom(val: number): void

  • An Angular component input property that sets the default zoom of the map.

    If set during the components runtime (after ngOnInit), changing this property will update the map.

    Parameters

    • val: number

    Returns void

Methods

initMap

  • Parameters

    • basemap: string | Basemap
    • center: number[] | Point
    • zoom: number
    • initProps: null | MapViewProperties

    Returns void

Private ngOnDestroy

  • Private

    Returns void

Private ngOnInit

  • Private

    Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc