Skip to content
Types
import type { PopupView } from "@arcgis/core/views/PopupView.js";
Subclasses:
View2D, SceneView
Since
ArcGIS Maps SDK for JavaScript 4.27

Mixin for Views that provides popup functionality.

Properties

PropertyTypeClass
autocast Property
Type
Popup | null | undefined

A Popup object that displays general content or attributes from layers in the map.

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
Examples
// Set the view's popup to a new Popup instance.
// The popup will show anytime a popup is called such as when selecting features or displaying a Search result.
view.popup = new Popup();
// Set the popup to a PopupOptions object with popup properties set such as the dock options.
// The popup will show anytime a popup is called.
view.popup = {
dockEnabled: true,
dockOptions: {
position: "top-left",
breakpoint: false
}
};
// Set the popup to null. This disables the popup so it will never show up.
view.popup = null;

popupEnabled

Property
Type
boolean

Controls whether the popup opens when users click on the view.

When true, a Popup instance is created and assigned to popup the first time the user clicks on the view, unless popup is null. The popup then processes the click event.

When false, the click event is ignored and popup is not created for features but will open for other scenarios that use a popup, such as displaying Search results.

See also
Default value
true
Example
// Disable the popup from automatically appearing and
// open the popup manually using a click event.
view.popupEnabled = false;
view.on("click", (event)=> {
view.openPopup({
// Set properties for the manually opened popup
...
});
});

Methods

MethodSignatureClass
closePopup(): void
openPopup(options?: ViewPopupOpenOptions): Promise<void>

closePopup

Method
Signature
closePopup (): void

Closes the popup.

See also
Returns
void
Example
// Closes the popup if it's open
if(view.popup.visible){
view.closePopup();
}

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. This method sets the popup's visible property to true. Users can alternatively open the popup by directly setting the visible property to true.

A Popup instance is created and assigned to popup the first time openPopup() is called, unless popup is null. The popup then processes the click event.

When calling this method, to prevent the popup from opening when clicking on the view, set popupEnabled to false to stop event propagation on the view.

The popup will only display if the view's size constraints in dockOptions are met or the location property is set to a geometry.

See also
Parameters
ParameterTypeDescriptionRequired
options

Defines the location and content of the popup when opened.

Returns
Promise<void>

Resolves when the popup is opened. Calling openPopup() or closePopup() again rejects the Promise.

Examples
// Opens a popup manually depending on where the user clicks with specified title and content.
view.on("click", (event)=>{
view.openPopup({
location: event.mapPoint,
title: "You clicked here",
content: "This is a point of interest"
});
});
// Opens popup at the location of the click event and displays
// content for the selected features if a popupTemplate is defined.
view.on("click", (event)=>{
view.openPopup({
location: event.mapPoint,
fetchFeatures: true
});
});
// Opens popup with the properties specified at the location of the click event
// and updates the popup location based on the selected feature's geometry.
view.openPopup({
title: "You clicked here",
content: "This is a point of interest",
location: event.mapPoint,
updateLocationEnabled: true
});
// Opens popup with the specified array of graphics and displays the
// features in a list (feature menu) at the location of the first graphic in the array.
view.openPopup({
features: graphics,
featureMenuOpen: true,
location: graphics[0].geometry
});

Type definitions

ViewPopupOpenOptions

Type definition
Supertypes
Pick<PopupOpenOptions‚ "actions" | "content" | "features" | "fetchFeatures" | "location" | "promises" | "title" | "updateLocationEnabled">