arcgis-link-chart | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/map-components/components/arcgis-link-chart";

Inheritance:: ArcgisLinkChart→PublicLitElement

Since: ArcGIS Maps SDK for JavaScript 4.32

Loads a WebLinkChart from an ArcGIS Enterprise portal into a LinkChartView.

Note: Sign in to access the data in this demo, U/P: viewer01/I68VGU^nMurF

Demo

Properties

Property	Attribute	Type
`allLayerViews` readonly		`ReadonlyCollection<LayerView>`
`analyses`		`Collection<Analysis>`
`animationsDisabled`	`animations-disabled`	`boolean`
`aria`		`LinkChartView["aria"]`
`attributionItems` readonly		`LinkChartView["attributionItems"]`
`attributionMode`	`attribution-mode`	`"dark" \| "light" \| null \| undefined`
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`background`		`ColorBackground \| null \| undefined`
`baseCypherQuery` reflected	`base-cypher-query`	`null \| undefined \| string`
`basemap`	`basemap`	`Basemap \| string \| undefined`
`basemapView`		`BasemapView<LayerView>`
`canZoomIn` readonly		`boolean`
`canZoomOut` readonly		`boolean`
`center`	`center`	`LinkChartView["center"]`
`constraints`		`MapViewConstraints`
`displayFilterDisabled`	`display-filter-disabled`	`boolean`
`extent`		`LinkChartView["extent"]`
`fatalError`		`Error<any> \| null \| undefined`
`graphics`		`Collection<Graphic>`
`hideAttribution`	`hide-attribution`	`boolean`
`highlights`		`Collection<HighlightOptions>`
`interacting` readonly		`boolean`
`itemId` reflected	`item-id`	`null \| undefined \| string`
`layerViews` readonly		`Collection<LayerView>`
`loadErrorSources`		`LoadErrorSource[] \| undefined`
`magnifier` readonly		`Magnifier`
`map`		`WebLinkChart`
`navigating` readonly		`boolean`
`navigation`		`Navigation`
`padding`		`ViewPadding`
`popup`		`Popup \| null \| undefined`
`popupComponentEnabled`	`popup-component-enabled`	`boolean`
`popupDisabled`	`popup-disabled`	`boolean`
`popupElement` readonly		`ArcgisPopup \| null`
`ready` readonly		`boolean`
`resizeAlign`	`resize-align`	`ResizeAlign`
`resolution` readonly		`number`
`rotation`	`rotation`	`number`
`scale`	`scale`	`number`
`selectionManager` readonly		`SelectionManager`
`serviceUrl` reflected	`service-url`	`null \| undefined \| string`
`spatialReference`		`SpatialReference`
`stationary` readonly		`boolean`
`suspended` readonly reflected	`suspended`	`boolean`
`theme`		`Theme \| null \| undefined`
`timeExtent`		`TimeExtent \| null \| undefined`
`timeZone`	`time-zone`	`string`
`updating` readonly		`boolean`
`view` readonly		`LinkChartView`
`viewpoint`		`Viewpoint`
`zoom`	`zoom`	`number`

allLayerViews

readonly Property

Type: ReadonlyCollection<LayerView>

Collection containing a flat list of all the created LayerViews related to the basemap, operational layers, and group layers in this view.

See also

LayerView

analyses

Property

Type: Collection<Analysis>

Since: ArcGIS Maps SDK for JavaScript 4.34

A collection of analyses associated with the view.

Examples

// Adds an analysis to the View
view.analyses.add(elevationProfileAnalysis);

// Removes an analysis from the View
view.analyses.remove(elevationProfileAnalysis);

animationsDisabled

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

Indicates whether animations are disabled in the view. This includes animated symbols (animated CIMSymbol, PictureMarkerSymbol from a GIF/animated PNG), animated renderers (FlowRenderer), animated layers (MediaLayer, VideoLayer), and animations triggered by view navigation (for example, goTo()). Setting this property to true disables all animations in the view.

Attribute: animations-disabled
Default value: false

aria

Property

Type: LinkChartView["aria"]

Since: ArcGIS Maps SDK for JavaScript 4.34

The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: label, description, describedByElements, and labelledByElements.

attributionItems

readonly Property

Type: LinkChartView["attributionItems"]

Since: ArcGIS Maps SDK for JavaScript 5.0

The attribution items displayed in the view's attribution.

attributionMode

Property

Type: "dark" | "light" | null | undefined

Since: ArcGIS Maps SDK for JavaScript 5.0

The light or dark mode used to display the attribution. By default, the mode is inherited from the Calcite's mode. You can override the value to style the attribution alongside the map or scene content.

Attribute: attribution-mode

autoDestroyDisabled

Property

Type: boolean

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy() method when you are done to prevent memory leaks.

Attribute: auto-destroy-disabled
Default value: false

background

Property

Type: ColorBackground | null | undefined

The background color of the LinkChartView. If the view's link chart changes, the view's background is reset to the link chart's background, even if the user set it previously.

Default value: new ColorBackground({ color: [255, 255, 255, 1] })

Examples

let view = new LinkChartView({
  container: "viewDiv",
  map: map,
  background: { // autocasts new ColorBackground()
    color: "magenta" // autocasts as new Color()
  }
});

let view = new MapView({
  container: "viewDiv",
  map: map,
  background: { // autocasts new ColorBackground()
    color: "magenta" // autocasts as new Color()
  }
});

baseCypherQuery

reflected Property

Type: null | undefined | string

A Knowledge Open Cypher Query that will be used to generate the link chart. The serviceUrl property must also be set

Please note that this query only runs once and is used to initialize the link chart. Once link charts are generated, their membership is "locked" unless modified by the WebLinkChart API. Refresh events on the link chart canvas do not re-run the query for new data

Attribute: base-cypher-query

basemap

Property

Type: Basemap | string | undefined

Specifies a basemap for the link chart. The basemap is only visible when the link chart is set to a geographic layout. See documentation on layouts for more detail. The basemap is a set of layers that give geographic context to the LinkChartView and the other operational layers in the link chart.

Attribute: basemap

basemapView

Property

Type: BasemapView<LayerView>

Represents the view for a single basemap after it has been added to the link chart.

canZoomIn

readonly Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates if the view component can zoom in.

Default value: false

canZoomOut

readonly Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates if the view component can zoom out.

Default value: false

center

autocast Property

Type: LinkChartView["center"]

Represents the view's center point; when setting the center, you may pass a esri/geometry/Point instance or a string representing a longitude/latitude pair ("-100.4593, 36.9014"). Setting the center immediately changes the current view. For animating the view, see this component's goTo() method.

Attribute: center

constraints

Property

Type: MapViewConstraints

Specifies constraints to scale, zoom, and rotation that may be applied to the LinkChartView.

See also

Examples

view.constraints = {
  geometry: { // Constrain lateral movement to Lower Manhattan
    type: "extent",
    xmin: -74.020,
    ymin:  40.700,
    xmax: -73.971,
    ymax:  40.73
  },
  minScale: 500000, // User cannot zoom out beyond a scale of 1:500,000
  maxScale: 0, // User can overzoom tiles
  rotationEnabled: false // Disables map rotation
};

// This snippet shows how to set the MapView scale 1:1 while generating additional LODs for the MapView.constraints.
const spatialReference = new SpatialReference({
  wkid: 2154
});
const center = new Point({
  x: 0,
  y: 0,
  spatialReference
});

// Create LODs from level 0 to 31
const tileInfo = TileInfo.create({
  spatialReference,
  numLODs: 32
});
const lods = tileInfo.lods;

let view = new MapView({
  container: "viewDiv",
  map,
  scale: 1,
  center,
  spatialReference,
  constraints: {
    lods: lods,
    snapToZoom: false
  }
});

displayFilterDisabled

Property

Type: boolean

Indicates whether layer's displayFilter are honored when rendering layers in the view. If false, display filters are ignored and all features are rendered.

Attribute: display-filter-disabled
Default value: false

extent

Property

Type: LinkChartView["extent"]

The extent represents the visible portion of a link chart within the view as an instance of Extent. Setting the extent immediately changes the view without animation. To animate the view, see this component's goTo() method. When the view is rotated, the extent does not update to include the newly visible portions of the link chart.

fatalError

Property

Type: Error<any> | null | undefined

A rejected view indicates a fatal error making it unable to display.

See also

tryFatalErrorRecovery()

Example

reactiveUtils.when(
  () => view.fatalError,
  () => {
    console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
    view.tryFatalErrorRecovery();
  }
);

graphics

Property

Type: Collection<Graphic>

Allows for adding graphics directly to the default graphics in the View.

See also

Examples

// Adds a graphic to the View
graphics.add(pointGraphic);

// Removes a graphic from the View
graphics.remove(pointGraphic);

hideAttribution

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the attribution is hidden in the view.

Esri requires that when you use an ArcGIS Online basemap in your app, the map must include Esri attribution and you must be licensed to use the content. For detailed guidelines on working with attribution, please visit the official attribution in your app documentation. For information on terms of use, see the Terms of Use FAQ.

Attribute: hide-attribution
Default value: false

highlights

Property

Type: Collection<HighlightOptions>

The highlights property is a collection of HighlightGroup objects that allow you to visually emphasize specific features on the link chart.

See also

Examples

// Use the default highlights collection to apply a highlight to features when you hover over them

// A handler can be used to remove any previous highlight when applying a new one
let hoverHighlight;

view.on("pointer-move", (event) => {
  // Search for the first feature in the featureLayer at the hovered location
  view.hitTest(event, { include: featureLayer }).then((response) => {
    if (response.results[0]) {
       const graphic = response.results[0].graphic;
       view.whenLayerView(graphic.layer).then((layerView) => {
         // Remove any previous highlight, if it exists
         hoverHighlight?.remove();
         // Highlight the hit features with the temporary highlight options, which are pre-configured for this use case
         hoverHighlight = layerView.highlight(graphic, { name: "temporary"});
       });
    }
  });
});

// Override the default highlights collection

const view = new MapView({
  map: map,
  container: "viewDiv",

  // Set the highlight options to be used in the view
  highlights: [
    { name: "default", color: "orange" },
    { name: "temporary", color: "magenta" },
    { name: "table", color: "cyan", fillOpacity: 0.5, haloOpacity: 0}
  ]
});

// Add highlight options to the collection after initialization

const selectionHighlightOptions = {
  name: "selection",
  color: "#ff00ff", // bright fuchsia
  haloOpacity: 0.8,
  fillOpacity: 0.2
};

// Add the options to the highlights collection at the first position
view.highlights.add(selectionGroup, 0);

interacting

readonly Property

Type: boolean

Indication whether the view is being interacted with (for example when panning or by an interactive tool).

Default value: false

itemId

reflected Property

Type: null | undefined | string

The ID of a WebLinkChart from an ArcGIS Enterprise portal.

To configure the portal url you must set the portalUrl property on config before the Link Chart component loads.

Attribute: item-id

layerViews

readonly Property

Type: Collection<LayerView>

A collection containing a hierarchical list of all the created LayerViews of the operational layers in the link chart.

See also

LayerView

loadErrorSources

Property

Type: LoadErrorSource[] | undefined

Since: ArcGIS Maps SDK for JavaScript 4.34

An array of objects that encountered an error while loading the component or any of its dependencies (e.g., basemap, ground, layers, tables). You may inspect the errors by accessing each object's loadError property.

magnifier

readonly Property

Type: Magnifier

The magnifier allows for showing a portion of the view as a magnifier image on top of the view.

map

Property

Type: WebLinkChart

An instance of a WebLinkChart object to display in the view.

navigating

readonly Property

Type: boolean

Indication whether the view is being navigated (for example when panning).

Default value: false

Property

Type: Navigation

Options to configure the navigation behavior of the View.

Example

// Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.
const view = new MapView({
  container: "viewDiv",
  map: new Map({
    basemap: "satellite"
  }),
  center: [176.185, -37.643],
  zoom: 13,
  navigation: {
    gamepad: {
      enabled: false
    },
    actionMap: {
      dragSecondary: "none", // Disable rotating the view with the right mouse button
      mouseWheel: "none" // Disable zooming with the mouse wheel
    },
    browserTouchPanEnabled: false,
    momentumEnabled: false,
  }
});

padding

Property

Type: ViewPadding

Use the padding property to make the center, and extent, etc. work off a subsection of the full view. This is particularly useful when layering UI elements or semi-transparent content on top of portions of the view.

Default value: {left: 0, top: 0, right: 0, bottom: 0}

Property

Type: Popup | null | undefined

A Popup widget object that displays general content or attributes from layers in the map. Consider using the popupElement (beta), which represents the Popup component, instead.

By default, the popup property is an empty object that allows you to set the popup options. A Popup instance is automatically created and assigned to the view's popup when the user clicks on the view and popupEnabled is true, when the openPopup() method is called, or when some widgets need the popup, such as Search. If popup is null, the popup instance will not be created.

See also

popupComponentEnabled

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

beta

Indicates whether the popup component (beta) is enabled as the default popup. When set to true, the popupElement property (representing the component) will be used for popups instead of the popup property (representing the widget).

Note: This is a beta feature and may change in future releases. At version 6.0, the Popup component will be used by default instead of the Popup widget and the popup-component-enabled attribute will no longer be necessary.

See also

popupElement

Attribute: popup-component-enabled
Default value: false

Example

<arcgis-map item-id="WEBMAP-ID" popup-component-enabled></arcgis-map>

popupDisabled

Property

Type: boolean

Controls whether the default popup opens automatically when users click on the view. This controls both the popupElement and popup properties. When set to true, the popup will not open on click or when triggered programmatically.

See also

openPopup()

Attribute: popup-disabled
Default value: false

popupElement

readonly Property

Type: ArcgisPopup | null

Since: ArcGIS Maps SDK for JavaScript 5.0

beta

A reference to the current arcgis-popup (beta). The popupComponentEnabled property must be set to true to use this property.

Note: This is a beta feature and may change in future releases.

See also

popupComponentEnabled

Example

<arcgis-map item-id="WEBMAP-ID" popup-component-enabled></arcgis-map>
<script type="module">
const viewElement = document.querySelector("arcgis-map");
await viewElement.viewOnReady();
viewElement.popupElement.dockEnabled = true;
viewElement.popupElement.dockOptions = {
    buttonEnabled: false,
    breakpoint: false,
    position: "top-right",
};
</script>

ready

readonly Property

Type: boolean

When true, this property indicates whether the view successfully satisfied all dependencies, signaling that the following conditions are met.

See also

when()

Default value: false

resizeAlign

Property

Type: ResizeAlign

Defines which anchor stays still while resizing the browser window. The default, center, ensures the view's center point remains constantly visible as the window size changes. The other options allow the respective portion of the view to remain visible when the window's size is changed.

Attribute: resize-align
Default value: "center"

resolution

readonly Property

Type: number

Represents the current value of one pixel in the unit of the view's spatialReference. The value of resolution is calculated by dividing the view's extent width by its width.

rotation

Property

Type: number

The clockwise rotation of due north in relation to the top of the view in degrees. The view may be rotated by directly setting the rotation or by using the following mouse event: Right-click + Drag. WebLinkChart rotation may be disabled by setting the rotationEnabled property in constraints to false.

Attribute: rotation
Default value: 0

Examples

// Due north is rotated 90 degrees, pointing to the right side of the view
view.rotation = 90;

// Due north is rotated 180 degrees, pointing to the bottom of the view
view.rotation = 180;

// Due north is rotated 270 degrees, pointing to the left side of the view
view.rotation = 270;

// Due north is rotated 0 degrees, pointing to the top of the view (the default)
view.rotation = 0; // 360 or multiple of 360 (e.g. 720) works here as well.

// Disables map rotation
view.constraints = {
  rotationEnabled: false
};

scale

Property

Type: number

Represents the link chart scale at the center of the view. Setting the scale immediately changes the view. For animating the view, see this component's goTo() method.

Attribute: scale

selectionManager

readonly Property

Type: SelectionManager

Since: ArcGIS Maps SDK for JavaScript 5.0

beta

The default SelectionManager for this view. Used to manage selections of features across layers.

serviceUrl

reflected Property

Type: null | undefined | string

The URL of the Knowledge Graph Service to load the link chart from.

If no Base Cypher Query is defined, then the entire dataset will be used to generate the link chart.

Attribute: service-url

spatialReference

Property

Type: SpatialReference

The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the link chart.

See also

spatialReferenceLocked

Examples

// check if the projectOperator is loaded
if (!projectOperator.isLoaded()) {
  projectOperator.load().then(() => {
   // change the spatial reference of the view to equal earth projection
    view.spatialReference = new SpatialReference({
      wkid: 54035 //equal earth projection
    });
  });
} else {
  // the projectOperator is already loaded.
  // change the spatial reference of the view to equal earth projection
  view.spatialReference = new SpatialReference({
    wkid: 54035 //equal earth projection
  });
}

const basemap = await changeBasemap();
const spatialReference = await findSpatialReference(basemap);

// check if basemap has the same spatial reference as the view if they are not equal
// then check if the projectOperator is loaded, and load the projectOperator if it is not loaded.
// If loaded, then simply change view.spatialReference to match the basemap spatialReference
if (spatialReference && !view.spatialReference.equals(spatialReference)) {
  if (!projectOperator.isLoaded()) {
    await projectOperator.load();
  }
  view.spatialReference = spatialReference;
}

// change the basemap
map.basemap = basemap;

async function changeBasemap() {
  let basemap;
  if (map.basemap.title === "OpenStreetMap Vector Basemap (Blueprint - WGS84)"){
    basemap = new Basemap({
      portalItem: { // Spilhaus - one ocean basemap
        id: "5639ccf22d4c4830ab815c4f9c9319bb"
      }
    });
  } else {
    basemap = osm84;
  }
  return basemap;
}

async function findSpatialReference(basemap) {
  await basemap.load();

  if (basemap.spatialReference) {
    return basemap.spatialReference;
  }

  const layer = basemap.baseLayers.at(0);

  if (!layer) {
    return null;
  }

  await layer.load();

  return layer.spatialReference;
}

stationary

readonly Property

Type: boolean

Indication whether the view is animating, being navigated with or resizing.

Default value: false

suspended

readonlyreflected Property

Type: boolean

Indicates if the view is visible on the page.

Attribute: suspended
Default value: false

theme

Property

Type: Theme | null | undefined

This property specifies the base colors used by some components and components to render graphics and labels.

See also

Example

// Update the theme to use purple graphics
// and slightly transparent green text
view.theme = new Theme({
  accentColor: "purple",
  textColor: [125, 255, 13, 0.9]
});

timeExtent

Property

Type: TimeExtent | null | undefined

The view's time extent. Time-aware layers display their temporal data that falls within the view's time extent. Setting the view's time extent is similar to setting the spatial extent because once the time extent is set, the view updates automatically to conform to the change.

Example

// Create a csv layer from an online spreadsheet.
let csvLayer = new CSVLayer({
  url: "http://test.com/daily-magazines-sold-in-new-york.csv",
  timeInfo: {
    startField: "SaleDate" // The csv field contains date information.
  }
});

// Create a mapview showing sales for the last week of March 2019 only.
const view = new MapView({
  map: map,
  container: "viewDiv",
  timeExtent: {
    start: new Date("2019, 2, 24"),
    end:   new Date("2019, 2, 31")
  }
});

timeZone

Property

Type: string

Defines the time zone of the view. The time zone property determines how dates and times are represented to the user, but the underlying data is unchanged.

See also

wikipedia - List of tz database time zones

Attribute: time-zone
Default value: "system"

Example

// Date and time will be displayed in Pacific/Auckland (NZ) time zone
const view = new MapView({
  map: map,
  container: "viewDiv",
  timeZone: "Pacific/Auckland"
});

updating

readonly Property

Type: boolean

Indicates whether the view is being updated by additional data requests to the network, or by processing received data.

Default value: false

view

readonly Property

Type: LinkChartView

Internal view of the component.

viewpoint

Property

Type: Viewpoint

Represents the current view as a Viewpoint or point of observation on the view. Setting the viewpoint immediately changes the current view. For animating the view, see this component's goTo() method.

zoom

Property

Type: number

Represents the level of detail (LOD) at the center of the view. A zoom level (or scale) is a number that defines how large or small the contents of a link chart appear in a link chart view. Zoom level is a number usually between 0 (global view) and 23 (very detailed view) and is used as a shorthand for predetermined scale values. A value of -1 means the view has no LODs. When setting the zoom value, the LinkChartView converts it to the corresponding scale, or interpolates it if the zoom is a fractional number. LinkChartView can display link charts with different projections at a full range of scales, and so use the scale property on this component rather than zoom level.

Setting the zoom immediately changes the current view. For animating the view, see this component's goTo() method. Setting this property in conjunction with center is a convenient way to set the initial extent of the view.

Attribute: zoom

Methods

Method	Signature
`closePopup`	`closePopup(): Promise<void>`
`componentOnReady` inherited	`componentOnReady(): Promise<this>`
`destroy`	`destroy(): Promise<void>`
`goTo`	`goTo(target: GoToTarget2D, options?: GoToOptions2D): Promise<unknown>`
`openPopup`	`openPopup(options?: ViewPopupOpenOptions): Promise<void>`
`toMap`	`toMap(screenPoint: MouseEvent \| ScreenPoint): Point`
`toScreen`	`toScreen(point: Point, options?: ToScreenOptions2D): ScreenPoint \| null \| undefined`
`tryFatalErrorRecovery`	`tryFatalErrorRecovery(): Promise<void>`
`viewOnReady`	`viewOnReady(callback?: () => void, errback?: (error: Error) => void): Promise<void>`
`whenAnalysisView`	`whenAnalysisView(analysis: Analysis): Promise<AnalysisView2DUnion>`
`whenLayerView`	`whenLayerView(layer: Layer): Promise<LayerView>`
`zoomIn`	`zoomIn(): Promise<void>`
`zoomOut`	`zoomOut(): Promise<void>`

closePopup

Method

Signature: closePopup (): Promise<void>

Closes the popup.

Returns: Promise<void>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: PublicLitElement

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisLinkChart = document.querySelector("arcgis-link-chart");
document.body.append(arcgisLinkChart);
await arcgisLinkChart.componentOnReady();
console.log("arcgis-link-chart is ready to go!");

destroy

Method

Signature: destroy (): Promise<void>

Destroys the view, and any associated resources, including its map, popup, and UI elements.

Returns: Promise<void>

goTo

Method

Signature: goTo (target: GoToTarget2D, options?: GoToOptions2D): Promise<unknown>

Sets the view to a given target.

Parameters

Parameter	Type	Description	Required
target	`GoToTarget2D`
options	`GoToOptions2D`

Returns: Promise<unknown>

openPopup

Method

Signature: openPopup (options?: ViewPopupOpenOptions): Promise<void>

Opens the popup at the given location with content defined either explicitly with content or driven from the PopupTemplate of input features.

Parameters

Parameter	Type	Description	Required
options	`ViewPopupOpenOptions`

Returns: Promise<void>

toMap

Method

Signature: toMap (screenPoint: MouseEvent | ScreenPoint): Point

Parameters

Parameter	Type	Description	Required
screenPoint	`MouseEvent \| ScreenPoint`

Returns: Point

toScreen

Method

Signature: toScreen (point: Point, options?: ToScreenOptions2D): ScreenPoint | null | undefined

Parameters

Parameter	Type	Description	Required
point	`Point`
options	`ToScreenOptions2D`

Returns: ScreenPoint | null | undefined

tryFatalErrorRecovery

Method

Signature: tryFatalErrorRecovery (): Promise<void>

Call this method to clear any fatal errors resulting from a lost WebGL context.

Returns: Promise<void>

viewOnReady

Method

Signature: viewOnReady (callback?: () => void, errback?: (error: Error) => void): Promise<void>

Since: ArcGIS Maps SDK for JavaScript 4.33

viewOnReady() may be leveraged once an instance of the component and its underlying view is created and ready. This method takes two input parameters, a callback function and an errback function, and returns a promise. The callback executes when the promise resolves, and the errback executes if the promise is rejected.

See also

Watch for changes - waiting for components or views to be ready

Parameters

Parameter	Type	Description	Required
callback	`() => void`
errback	`(error: Error) => void`

Returns: Promise<void>

Example

const viewElement = document.querySelector("arcgis-link-chart");
await viewElement.viewOnReady();
// The view is now ready to be used.

whenAnalysisView

Method

Signature: whenAnalysisView (analysis: Analysis): Promise<AnalysisView2DUnion>

Since: ArcGIS Maps SDK for JavaScript 4.34

Gets the analysis view created for the given analysis object.

Parameter	Type	Description	Required
analysis	`Analysis`

Returns: Promise<AnalysisView2DUnion>

whenLayerView

Method

Signature: whenLayerView (layer: Layer): Promise<LayerView>

Gets the LayerView created on the view for the given layer.

Parameters

Parameter	Type	Description	Required
layer	`Layer`

Returns: Promise<LayerView>

zoomIn

Method

Signature: zoomIn (): Promise<void>

Since: ArcGIS Maps SDK for JavaScript 5.0

Zooms in the view component by a factor of 2.

Returns: Promise<void>

zoomOut

Method

Signature: zoomOut (): Promise<void>

Since: ArcGIS Maps SDK for JavaScript 5.0

Zooms out the view component by a factor of 2.

Returns: Promise<void>

Events

Name	Type
`arcgisLoadError`	CustomEvent<void>
`arcgisViewAnalysisViewCreate`	CustomEvent<AnalysisViewCreateEvent>
`arcgisViewAnalysisViewCreateError`	CustomEvent<AnalysisViewCreateErrorEvent>
`arcgisViewAnalysisViewDestroy`	CustomEvent<AnalysisViewDestroyEvent>
`arcgisViewChange`	CustomEvent<void>
`arcgisViewClick`	CustomEvent<ClickEvent>
`arcgisViewDoubleClick`	CustomEvent<DoubleClickEvent>
`arcgisViewDoubleTapDrag`	CustomEvent<DoubleTapDragEvent>
`arcgisViewDrag`	CustomEvent<DragEvent>
`arcgisViewHold`	CustomEvent<HoldEvent>
`arcgisViewImmediateClick`	CustomEvent<ImmediateClickEvent>
`arcgisViewImmediateDoubleClick`	CustomEvent<ImmediateDoubleClickEvent>
`arcgisViewKeyDown`	CustomEvent<KeyDownEvent>
`arcgisViewKeyUp`	CustomEvent<KeyUpEvent>
`arcgisViewLayerviewCreate`	CustomEvent<LayerViewCreateEvent>
`arcgisViewLayerviewCreateError`	CustomEvent<LayerViewCreateErrorEvent>
`arcgisViewLayerviewDestroy`	CustomEvent<LayerViewDestroyEvent>
`arcgisViewMouseWheel`	CustomEvent<ViewMouseWheelEvent>
`arcgisViewPointerDown`	CustomEvent<PointerDownEvent>
`arcgisViewPointerEnter`	CustomEvent<PointerEnterEvent>
`arcgisViewPointerLeave`	CustomEvent<PointerLeaveEvent>
`arcgisViewPointerMove`	CustomEvent<PointerMoveEvent>
`arcgisViewPointerUp`	CustomEvent<PointerUpEvent>
`arcgisViewReadyChange`	CustomEvent<void>
`arcgisViewReadyError`	CustomEvent<void>
`arcgisViewVerticalTwoFingerDrag`	CustomEvent<VerticalTwoFingerDragEvent>

arcgisLoadError

Event

arcgisLoadError: CustomEvent<void>

Since: ArcGIS Maps SDK for JavaScript 4.34

Fires when an arcgis-link-chart fails to load or if one of its dependencies fails to load (e.g., basemap, ground, layers).

See also

loadErrorSources

Example

viewElement.addEventListener("arcgisLoadError", () => {
  console.log(viewElement.loadErrorSources);
});

arcgisViewAnalysisViewCreate

Event

arcgisViewAnalysisViewCreate: CustomEvent<AnalysisViewCreateEvent>

Since: ArcGIS Maps SDK for JavaScript 4.34

Fires when the view for an analysis is created.

arcgisViewAnalysisViewCreateError

Event

arcgisViewAnalysisViewCreateError: CustomEvent<AnalysisViewCreateErrorEvent>

Since: ArcGIS Maps SDK for JavaScript 4.34

Fires when an error occurs during the creation of an analysis view after an analysis is added to the view.

arcgisViewAnalysisViewDestroy

Event

arcgisViewAnalysisViewDestroy: CustomEvent<AnalysisViewDestroyEvent>

Since: ArcGIS Maps SDK for JavaScript 4.34

Fires after an analysis view is destroyed.

arcgisViewChange

Event

arcgisViewChange: CustomEvent<void>

This event is for view related property changes: zoom, scale, center, rotation, extent, camera, viewpoint. This event will also emit if stationary toggles from true to false.

arcgisViewClick

Event

arcgisViewClick: CustomEvent<ClickEvent>

Fires after a user clicks on the view.

arcgisViewDoubleClick

Event

arcgisViewDoubleClick: CustomEvent<DoubleClickEvent>

Fires after double-clicking on the view.

arcgisViewDoubleTapDrag

Event

arcgisViewDoubleTapDrag: CustomEvent<DoubleTapDragEvent>

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires while the pointer is dragged following a double-tap gesture on the view.

arcgisViewDrag

Event

arcgisViewDrag: CustomEvent<DragEvent>

Fires during a pointer drag on the view.

arcgisViewHold

Event

arcgisViewHold: CustomEvent<HoldEvent>

Fires during a pointer drag on the view.

arcgisViewImmediateClick

Event

arcgisViewImmediateClick: CustomEvent<ImmediateClickEvent>

Fires right after a user clicks on the view.

arcgisViewImmediateDoubleClick

Event

arcgisViewImmediateDoubleClick: CustomEvent<ImmediateDoubleClickEvent>

Is emitted after two consecutive immediate-click events.

arcgisViewKeyDown

Event

arcgisViewKeyDown: CustomEvent<KeyDownEvent>

Fires after a keyboard key is pressed.

arcgisViewKeyUp

Event

arcgisViewKeyUp: CustomEvent<KeyUpEvent>

Fires after a keyboard key is pressed.

arcgisViewLayerviewCreate

Event

arcgisViewLayerviewCreate: CustomEvent<LayerViewCreateEvent>

Fires after each layer in the link chart has a corresponding LayerView created and rendered in the view.

arcgisViewLayerviewCreateError

Event

arcgisViewLayerviewCreateError: CustomEvent<LayerViewCreateErrorEvent>

Fires when an error emits during the creation of a LayerView after a layer has been added to the link chart.

arcgisViewLayerviewDestroy

Event

arcgisViewLayerviewDestroy: CustomEvent<LayerViewDestroyEvent>

Fires after a LayerView is destroyed and is no longer rendered in the view.

arcgisViewMouseWheel

Event

arcgisViewMouseWheel: CustomEvent<ViewMouseWheelEvent>

Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view.

arcgisViewPointerDown

Event

arcgisViewPointerDown: CustomEvent<PointerDownEvent>

Fires after a mouse button is pressed, or a finger touches the display.

arcgisViewPointerEnter

Event

arcgisViewPointerEnter: CustomEvent<PointerEnterEvent>

Fires after a mouse cursor enters the view, or a display touch begins.

arcgisViewPointerLeave

Event

arcgisViewPointerLeave: CustomEvent<PointerLeaveEvent>

Fires after a mouse cursor leaves the view, or a display touch ends.

arcgisViewPointerMove

Event

arcgisViewPointerMove: CustomEvent<PointerMoveEvent>

Fires after the mouse or a finger on the display moves.

arcgisViewPointerUp

Event

arcgisViewPointerUp: CustomEvent<PointerUpEvent>

Fires after a mouse button is released, or a display touch ends.

arcgisViewReadyChange

Event

arcgisViewReadyChange: CustomEvent<void>

This event is for the ready property and will be emitted when the view is ready. This event will also emit if the map property is changed.

arcgisViewReadyError

Event

arcgisViewReadyError: CustomEvent<void>

Since: ArcGIS Maps SDK for JavaScript 4.34

Fires if the view encounters a content or rendering error.

Example

viewElement.addEventListener("arcgisViewReadyError", () => {
  // handle error
});

arcgisViewVerticalTwoFingerDrag

Event

arcgisViewVerticalTwoFingerDrag: CustomEvent<VerticalTwoFingerDragEvent>

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires while the two pointers are dragged vertically on the view.

Slots

Name	Description
`default (unnamed)`	Default slot for adding components to the link chart. User is responsible for positioning the content via CSS.
`top-left`	Slot for components positioned in the top-left corner.
`top-right`	Slot for components positioned in the top-right corner.
`bottom-left`	Slot for components positioned in the bottom-left corner.
`bottom-right`	Slot for components positioned in the bottom-right corner.
`top-start`	Slot for components positioned at the top-start (top-left in LTR, top-right in RTL).
`top-end`	Slot for components positioned at the top-end (top-right in LTR, top-left in RTL).
`bottom-start`	Slot for components positioned at the bottom-start (bottom-left in LTR, bottom-right in RTL).
`bottom-end`	Slot for components positioned at the bottom-end (bottom-right in LTR, bottom-left in RTL).
`popup`	Slot for the arcgis-popup component to open automatically on click. Only the Popup component can be placed in this slot.

Styles

Name	Default	Description
`--arcgis-layout-overlay-space-top`		Since 4.34 Specifies the top padding for the layout.
`--arcgis-layout-overlay-space-bottom`		Since 4.34 Specifies the bottom padding for the layout.
`--arcgis-layout-overlay-space-left`		Since 4.34 Specifies the left padding for the layout.
`--arcgis-layout-overlay-space-right`		Since 4.34 Specifies the right padding for the layout.
`--arcgis-view-color-focus`		Since 5.0 Specifies the focus outline color for the view.