Oriented Imagery Viewer

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-oriented-imagery-viewer";

CDN:

No specific import is needed for this component.

Since:ArcGIS Maps SDK for JavaScript 4.31

The Oriented Imagery Viewer component allows the user to explore and use their oriented images.

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`currentCoverageVisible`	`current-coverage-visible`	`boolean`
`dataCaptureEnabled`	`data-capture-enabled`	`boolean`
`disabled`	`disabled`	`boolean`
`galleryOpened`	`gallery-opened`	`boolean`
`icon`	`icon`	`string`
`imageEnhancementToolActive`	`image-enhancement-tool-active`	`boolean`
`imageGalleryEnabled` readonly		`boolean`
`imageOverlaysOpened`	`image-overlays-opened`	`boolean`
`isAdditionalCoverageVisible`	`is-additional-coverage-visible`	`boolean`
`isAdditionalPointSourcesVisible`	`is-additional-point-sources-visible`	`boolean`
`label`	`label`	`string`
`layer`		`OrientedImageryLayer`
`mapImageConversionToolState`	`map-image-conversion-tool-state`	`boolean`
`navigationToolActive`	`navigation-tool-active`	`boolean`
`orientedImageryLayerItemId`	`oriented-imagery-layer-item-id`	`string`
`position` deprecated	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`HTMLArcgisLinkChartElement \| HTMLArcgisMapElement \| HTMLArcgisSceneElement \| string`
`referencePoint` readonly		`Point`
`view`		`MapView \| SceneView`

autoDestroyDisabled

Property

autoDestroyDisabled: 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

currentCoverageVisible

Property

currentCoverageVisible: boolean

Toggles the visibility of the current footprint polygon associated with the selected image loaded in the viewer.

Attribute: current-coverage-visible
Default value: true

dataCaptureEnabled

Property

dataCaptureEnabled: boolean

Indicates whether the data capture tools are enabled in the oriented imagery viewer for digitization.

Attribute: data-capture-enabled
Default value: false

disabled

Property

disabled: boolean

When false, the view click interaction is enabled for the oriented imagery viewer widget.

Attribute: disabled
Default value: false

galleryOpened

Property

galleryOpened: boolean

Indicates if the image gallery functionality is available in the widget.

Attribute: gallery-opened
Default value: false

icon

Property

icon: string

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

Calcite Icons

Attribute: icon
Default value: "oriented-imagery-widget"

imageEnhancementToolActive

Property

imageEnhancementToolActive: boolean

Indicates if the image enhancement tool is active.

Attribute: image-enhancement-tool-active
Default value: false

imageGalleryEnabled

readonlyProperty

imageGalleryEnabled: boolean

When true, the image gallery functionality is available in the widget.

Default value: false

imageOverlaysOpened

Property

imageOverlaysOpened: boolean

Indicates whether the image overlays tab in the oriented imagery viewer is open.

Attribute: image-overlays-opened
Default value: false

isAdditionalCoverageVisible

Property

isAdditionalCoverageVisible: boolean

Indicates if the additional footprint polygons are visible for the selected image loaded in the viewer.

Attribute: is-additional-coverage-visible
Default value: false

isAdditionalPointSourcesVisible

Property

isAdditionalPointSourcesVisible: boolean

Indicates if the additional camera locations are visible for the selected image loaded in the viewer.

Attribute: is-additional-point-sources-visible
Default value: false

label

Property

label: string

The widget's label.

Attribute: label

layer

Property

layer: OrientedImageryLayer

Specifies the current OrientedImageryLayer to use.

mapImageConversionToolState

Property

mapImageConversionToolState: boolean

Indicates if the map-image location tool is available in the widget.

Attribute: map-image-conversion-tool-state
Default value: false

navigationToolActive

Property

navigationToolActive: boolean

When true, the navigation tool is available in the widget.

Attribute: navigation-tool-active
Default value: false

orientedImageryLayerItemId

Property

orientedImageryLayerItemId: string

Attribute: oriented-imagery-layer-item-id

position

deprecatedProperty

position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

Deprecatedsince 4.34, use slot instead.

Attribute: position

referenceElement

Property

referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also

Associate components with a Map or Scene component

Attribute: reference-element

referencePoint

readonlyProperty

referencePoint: Point

This property provides the location of an image pixel in Map coordinates when using map-image conversion tool.

view

Property

view: MapView | SceneView

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Oriented Imagery Viewer component will be associated with a map or scene component rather than using the view property.

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example

Use dark colors for code blocksCopy
const arcgisOrientedImageryViewer = document.querySelector("arcgis-oriented-imagery-viewer");
document.body.append(arcgisOrientedImageryViewer);
await arcgisOrientedImageryViewer.componentOnReady();
console.log("arcgis-oriented-imagery-viewer is ready to go!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

Events

Event	Type
`arcgisPropertyChange`	`CustomEvent<{ name: "layer" \| "imageGalleryEnabled"; }>`
`arcgisReady`	`CustomEvent<void>`

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "layer" | "imageGalleryEnabled"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

arcgisReady

Event

arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is ready to be interacted with.