MediaContent | References | ArcGIS Maps SDK for JavaScript

import MediaContent from "@arcgis/core/popup/content/MediaContent.js";

Inheritance:: MediaContent→Content→Accessor

Since: ArcGIS Maps SDK for JavaScript 4.11

A MediaContent popup element contains an individual or array of chart and/or image media elements to display within a popup's content.

Chart colors automatically respect renderer colors when visualizing data with the predominance, dot density, and pie chart renderers. Binning and clustering popup charts are also based on the renderer colors. However, popup charts only respect the colors from the pie chart renderer when clustering is configured.

popuptemplate-media-element

See also

Example

layer.popupTemplate.content = [{
  // The following creates a piechart in addition to an image. The chart is
  // also set  up to work with related tables.
  // Autocasts as new MediaContent()
  type: "media",
  activeMediaInfoIndex: 1,
  // Autocasts as array of MediaInfo objects
  mediaInfos: [{
    title: "<b>Count by type</b>",
    type: "pie-chart", // autocasts as new PieChartMediaInfo
    // Autocasts as new ChartMediaInfoValue object
    value: {
      fields: ["relationships/0/Point_Count_COMMON"],
      normalizeField: null,
      tooltipField: "relationships/0/COMMON"
    }
  }, {
    title: "<b>Mexican Fan Palm</b>",
    type: "image", // Autocasts as new ImageMediaInfo object
    caption: "tree species",
    // Autocasts as new ImageMediaInfoValue object
    value: {
      sourceURL: "https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg"
    }
  }]
}];

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	`MediaContentProperties`

See the properties table for a list of all the properties that may be passed into the constructor.

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
`activeMediaInfoIndex`	`number \| null \| undefined`
`declaredClass` readonly inherited	`string`	Accessor
`description`	`string \| null \| undefined`
`mediaInfos`	`PopupContentMediaInfoUnion[] \| null \| undefined`
`title`	`string \| null \| undefined`
`type` readonly	`"media"`

activeMediaInfoIndex

Property

Type: number | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.19

Index of the current active media within the popup's media content. This will be the media that is currently viewed when displayed.

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

The name of the class. The declared class name is formatted as esri.folder.className.

description

Property

Type: string | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.19

Describes the media's content in detail. Starting at version 4.30, the description supports rendering HTML.

mediaInfos

autocast Property

Type: PopupContentMediaInfoUnion[] | null | undefined

Contains the media elements representing images or charts to display within the PopupTemplate. This can be an individual chart or image element, or an array containing a combination of any of these types.

title

Property

Type: string | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.19

Heading indicating what the media's content represents. Starting at version 4.30, the title supports rendering HTML.

type

readonly Property

Type: "media"

The type of popup element displayed.

See also

Default value: "media"

Methods

Method	Signature	Class
`fromJSON` inherited static	`fromJSON(json: any): any`	JSONSupportMixin
`clone`	`clone(): MediaContent`
`toJSON` inherited	`toJSON(): any`	JSONSupportMixin

fromJSON

inheritedstatic Method

Signature: fromJSON (json: any): any

Inherited from: JSONSupportMixin

Creates a new instance of this class and initializes it with values from a JSON object generated from an ArcGIS product. The object passed into the input json parameter often comes from a response to a query operation in the REST API or a toJSON() method from another ArcGIS product. See the Using fromJSON() topic in the Guide for details and examples of when and how to use this function.

Parameters

Parameter	Type	Description	Required
json	`any`	A JSON representation of the instance in the ArcGIS format. See the ArcGIS REST API documentation for examples of the structure of various input JSON objects.

Returns: any
Returns a new instance of this class.

clone

Method

Signature: clone (): MediaContent

Creates a deep clone of the MediaContent class.

Returns: MediaContent
A deep clone of the MediaContent instance.

toJSON

inherited Method

Signature: toJSON (): any

Inherited from: JSONSupportMixin

Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() guide topic for more information.

Returns: any
The ArcGIS portal JSON representation of an instance of this class.

Type definitions

PopupContentMediaInfoUnion

Type definition

Since: ArcGIS Maps SDK for JavaScript 5.0

Type: BarChartMediaInfo | ColumnChartMediaInfo | ImageMediaInfo | LineChartMediaInfo | PieChartMediaInfo