Element: <oj-thematic-map>

Oracle® JavaScript Extension Toolkit (JET)
18.0.0
G12199-01

Since:
  • 0.7.0
Module:
  • ojthematicmap

QuickNav

Slots

Attributes


Context Objects

Methods

Type Definitions

Other Topics


JET Thematic Map

Thematic maps are used to display data corresponding to geographic locations or regions, such as election data for a state or sales by territory for a product. Applications are required to supply a mapProvider for a valid thematic map.

The SVG DOM that this component generates should be treated as a black box, as it is subject to change.


<oj-thematic-map mapProvider='[[mapProviderObj]]'
  area-data="[[dataProvider]]">
</oj-thematic-map>

Accessibility

The application is responsible for populating the shortDesc value in the component properties object with meaningful descriptors when the component does not provide a default descriptor. Since component terminology for keyboard and touch shortcuts can conflict with those of the application, it is the application's responsibility to provide these shortcuts, possibly via a help popup.

The application is also responsible for including contextual information for screen readers using one or more the following methods as appropriate: aria-label, aria-labelledby, aria-describedby.

Touch End User Information

Target Gesture Action
Data Item Tap Select when selectionMode is enabled.
Press & Hold Display tooltip.
Display context menu on release.
Element Drag Pan when panning is auto.
Pinch-close Zoom out when zooming is auto.
Spread-open Zoom in when zooming is auto.

Keyboard End User Information

Key Action
Tab Move focus to map and then to next element.
Shift + Tab Move focus to map and then to previous element.
= or + Zoom in one level if zooming is enabled.
- or _ Zoom out one level if zooming is enabled.
0 Zoom to fit map if zooming is enabled.
Ctrl + Alt + 0 Zoom to fit region with focus.
Ctrl + 0 Zoom to fit selected regions.
Ctrl + Shift + 0 Reset map.
PageUp Pan up.
PageDown Pan down.
Shift + PageUp Pans left in left to right locales. Pans right in right to left locales.
Shift + PageDown Pans right in left to right locales. Pans left in right to left locales.
LeftArrow or RightArrow Move focus and selection to the left or right nearest data item in the collection (e.g. areas, markers, links) or the left link end marker if the focus is on a link and Alt + < or Alt + > was used to move there.
UpArrow or DownArrow Move focus and selection to the above or below nearest data item in the collection (e.g. areas, markers, links) or to the next link above that is associated with the previous data item, if the focus is on a link and Alt + < or Alt + > was used to move there.
Shift + LeftArrow or Shift + RightArrow Move focus and multi-select the left or right nearest data item in the collection (e.g. areas, markers, links).
Shift + UpArrow or Shift + DownArrow Move focus and multi-select the nearest data item above or below in the collection (e.g. areas, markers, links).
Ctrl + LeftArrow or Ctrl + RightArrow Move focus to the left or right nearest data item in the collection (e.g. areas, markers, links), without changing the current selection.
Ctrl + UpArrow or Ctrl + DownArrow Move focus to nearest data item above or below in the collection (e.g. areas, markers, links), without changing the current selection.
] or [ Move focus and selection to nearest data item in the next data layer above or below.
Shift + ] or Shift + [ Move focus to nearest data item in the next data layer above or below and multi-select.
Ctrl + ] or Ctrl + [ Move focus to nearest data item in the next data layer above or below, without changing the current selection.
Alt + < or Alt + > Move focus from a data item to an associated link. Note that the link must have been created referencing the data item's ID in its start/endLocation objects for an association to exist.
Ctrl + Spacebar Multi-select base map region or marker with focus.

Performance

Styling

Use the highest level property available. For example, consider setting styling properties on styleDefaults.dataAreaDefaults or styleDefaults.dataMarkerDefaults, instead of styling properties on the individual data items. The thematic map can take advantage of these higher level properties to apply the style properties on containers, saving expensive DOM calls.

Tracking Resize

By default, the element will track resizes and render at the new size. This functionality adds a small overhead to the initial render for simple elements like gauges or spark charts, which become noticable when using large numbers of these simple elements. To disable resize tracking, set trackResize to off. The application can manually request a re-render at any time by calling the refresh function.

Reading direction

As with any JET component, in the unusual case that the directionality (LTR or RTL) changes post-init, the component must be refresh()ed.

Map Rendering

Thematic map supports rendering of GeoJSON formatted geographic data. An application can specify the GeoJSON along with keys used for determining area IDs and labels by setting the the mapProvider attribute. Currently GeoJSON objects of "type" Feature, FeatureCollection and GeometryCollection are supported. Each Feature object contains the information to render a map area including the area id, coordinates, and optional short and long labels. Only Feature "geometry" objects of "type" Polygon and MutliPolygon will be used for defining area boundaries. All other "type" values will be skipped. The Feature "properties" object is where the thematic map will look up area info like id, short label, and long label using the key mappings provided in the propertiesKeys property. GeometryCollection is an array of geometry objects. Each geometry object has a type and coordinate of which only "types" Polygon and MultiPolygon are supported. See the thematic map Map Provider Demo for an example.

If longitude/latitude coordinate data need to be rendered, the application should use a projection library to project the coordinates to the map projection before passing as x and y properties to the marker object.


Usage

Signature:

interface ThematicMapElement<K1, K2, K3, D1 extends ojThematicMap.Area<K1>|any, D2 extends ojThematicMap.Link<K2, K1|K3>|any, D3 extends ojThematicMap.Marker<K3>|any>

Generic Parameters
ParameterDescription
K1Type of key of the areaData dataprovider
K2Type of key of the linkData dataprovider
K3Type of key of the markerData dataprovider
D1Type of data from the areaData dataprovider
D2Type of data from the linkData dataprovider
D3Type of data from the markerData dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { ThematicMapElement } from "ojs/ojthematicmap";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojthematicmap";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Styling

CSS Variables

See JET CSS Variables for additional details.
Name Type Description
--oj-thematic-map-bg-color <color> Thematic map background color
--oj-thematic-map-border-color <color> Thematic map border color

Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

areaTemplate

The areaTemplate slot is used to specify the template for creating areas of the thematic map. The slot content must be wrapped in a single <template> element. The content of the template should be a single <oj-thematic-map-area> element. See the oj-thematic-map-area doc for more details.

When the template is executed for each area, it will have access to the components's binding context containing the following properties:

  • $current - an object that contains information for the current area. (See oj.ojThematicMap.AreaTemplateContext or the table below for a list of properties available on $current)
  • alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-thematic-map> custom element
data Object The data object for the current area
index number The zero-based index of the current area
key any The key of the current area

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

linkTemplate

The linkTemplate slot is used to specify the template for creating links of the thematic map. The slot content must be wrapped in a single <template> element. The content of the template should be a single <oj-thematic-map-link> element. See the oj-thematic-map-link doc for more details.

When the template is executed for each link, it will have access to the components's binding context containing the following properties:

  • $current - an object that contains information for the current link. (See oj.ojThematicMap.LinkTemplateContext or the table below for a list of properties available on $current)
  • alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-thematic-map> custom element
data Object The data object for the current link
index number The zero-based index of the current link
key any The key of the current link

markerContentTemplate

The markerContentTemplate slot is used to specify custom marker content. The slot content must be a single <template> element.

This slot takes precedence over the renderer/focusRenderer/hoverRenderer/selectionRenderer properties if specified.

When the template is executed, the component's binding context is extended with the following properties:

  • $current - an object that contains information for the current marker. (See oj.ojThematicMap.RendererContext or the table below for a list of properties available on $current)

Additionally, add data-oj-default-focus, data-oj-default-hover and/or data-oj-default-selection attributes to the template to also render the default focus, hover and/or selection effect for the data item.

Note that SVG nodes for the marker content should be wrapped into an svg element in order to have the SVG namespace. The component will insert the entire SVG structure into DOM including the outer svg element.

Properties of $current:
Name Type Description
color string The color of the data item.
componentElement Element The thematic map element.
data oj.ojThematicMap.Area.<K1, D1> | ojThematicMap.Link<K2,K1 | K3,D2> | oj.ojThematicMap.Marker.<K3, D3> The data object for the rendered item.
id K1 | K2 | K3 The id of the data item.
itemData D1 | D2 | D3 | null The row data object for the rendered item. This will only be set if an DataProvider is being used.
label string The label of the data item.
location string | null The location of the data item which can be null if x/y are set instead.
parentElement Element An element that is part of a displayed subtree on the DOM. Modifications of the parentElement are not supported.
previousState Object An object that reflects the previous state of the data item.
Properties
Name Type Description
focused boolean True if the data item was previously selected.
hovered boolean True if the data item was previously hovered.
selected boolean True if the data item was previously selected.
renderDefaultFocus function():void Function for rendering default focus effect for the data item
renderDefaultHover function():void Function for rendering default hover effect for the data item
renderDefaultSelection function():void Function for rendering default selection effect for the data item
root Element | null Null on initial rendering or the current data item SVG element.
state Object An object that reflects the current state of the data item.
Properties
Name Type Description
focused boolean True if the data item is currently selected.
hovered boolean True if the data item is currently hovered.
selected boolean True if the data item is currently selected.
x number | null The x coordinate of the data item which can be null if location is set instead.
y number | null The y coordinate of the data item which can be null if location is set instead.
Since:
  • 7.1.0

markerTemplate

The markerTemplate slot is used to specify the template for creating markers of the thematic map. The slot content must be wrapped in a single <template> element. The content of the template should be a single <oj-thematic-map-marker> element. See the oj-thematic-map-marker doc for more details.

When the template is executed for each marker, it will have access to the components's binding context containing the following properties:

  • $current - an object that contains information for the current marker. (See oj.ojThematicMap.MarkerTemplateContext or the table below for a list of properties available on $current)
  • alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
componentElement Element The <oj-thematic-map> custom element
data Object The data object for the current marker
index number The zero-based index of the current marker
key any The key of the current marker

tooltipTemplate

The tooltipTemplate slot is used to specify custom tooltip content. The slot content must be a single <template> element. This slot takes precedence over the tooltip.renderer property if specified.

When the template is executed, the component's binding context is extended with the following properties:

  • $current - an object that contains information for the current item. (See oj.ojThematicMap.TooltipContext or the table below for a list of properties available on $current)
Properties of $current:
Name Type Description
color string | null The color of the hovered item or null if the hovered item if not associated with any data.
componentElement Element The thematic map element.
data oj.ojThematicMap.Area.<K1, D1> | ojThematicMap.Link<K2,K1 | K3,D2> | oj.ojThematicMap.Marker.<K3, D3> | null The data object of the hovered item or null if the hovered item is not associated with any data.
id K1 | K2 | K3 | null The id of the hovered item or null if the hovered item if not associated with any data.
itemData D1 | D2 | D3 | null The row data object for the hovered item. This will only be set if an DataProvider is being used.
label string | null The data label of the hovered item or null if the hovered item if not associated with any data.
location string | null The location id of the hovered item which can be null if x/y are set instead.
locationName string | null The location name of the hovered item if location id is set.
parentElement Element The tooltip element. The function can directly modify or append content to this element.
tooltip string The default tooltip string constructed by the element if any.
x number The x coordinate of the hovered item which can be null if location is set instead.
y number The y coordinate of the hovered item which can be null if location is set instead.

Attributes

animation-duration :number

We recommend using the component CSS classes to set component wide styling. This API should be used only for styling a specific instance of the component. The default values come from the CSS classes and varies based on theme. The duration of the animations in milliseconds.
Names
Item Name
Property animationDuration
Property change event animationDurationChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-animation-duration-changed

animation-on-display :"auto"|"none"

The type of animation to apply when the element is initially displayed.
Supported Values:
Value
auto
none
Default Value:
  • "none"
Names
Item Name
Property animationOnDisplay
Property change event animationOnDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-animation-on-display-changed

area-data :(DataProvider.<K1, D1>|null)

The DataProvider for the areas of the thematic map. It should provide data rows where each row will map data for a single thematic map data area. The row key will be used as the id for thematic map areas. Note that when using this attribute, a template for the areaTemplate slot should be provided. The DataProvider can either have an arbitrary data shape, in which case an element must be specified in the areaTemplate slot or it can have oj.ojThematicMap.Area as its data shape, in which case no template is required.
Default Value:
  • null
Names
Item Name
Property areaData
Property change event areaDataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-area-data-changed

areas :(Array.<oj.ojThematicMap.Area.<K1>>|Promise.<Array.<oj.ojThematicMap.Area.<K1>>>|null)

An array of objects that define a row of data for an area data layer. Also accepts a Promise where no data will be rendered if the Promise is rejected. Regardless of the set value type, we will wrap and return a Promise when accessing the areas property.
Type details
Setter Type(Array.<oj.ojThematicMap.Area.<K1>>|Promise.<Array.<oj.ojThematicMap.Area.<K1>>>|null)
Getter Type(Promise.<Array.<oj.ojThematicMap.Area.<K1>>>|null)
Default Value:
  • null
Names
Item Name
Property areas
Property change event areasChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-areas-changed

as :string

An alias for the $current context variable passed to slot content for the areaTemplate, markerTemplate, or linkTemplate slots.
Default Value:
  • ""
Names
Item Name
Property as
Property change event asChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-as-changed

focus-renderer :((context: ojThematicMap.RendererContext<K1, K2, K3, D1, D2, D3>) => {insert: SVGElement}|void)|null

An optional callback function to update the data item in response to changes in keyboard focus state.
Default Value:
  • null
Names
Item Name
Property focusRenderer
Property change event focusRendererChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-focus-renderer-changed

hidden-categories :Array.<string>

An array of category strings used for category filtering. Data items with a category in hiddenCategories will be filtered.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property hiddenCategories
Property change event hiddenCategoriesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hidden-categories-changed

highlight-match :"any"|"all"

The matching condition for the highlightedCategories option. By default, highlightMatch is 'all' and only items whose categories match all of the values specified in the highlightedCategories array will be highlighted. If highlightMatch is 'any', then items that match at least one of the highlightedCategories values will be highlighted.
Supported Values:
Value
all
any
Default Value:
  • "all"
Names
Item Name
Property highlightMatch
Property change event highlightMatchChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-highlight-match-changed

highlighted-categories :Array.<string>

An array of category strings used for category highlighting. Data items with a category in highlightedCategories will be highlighted.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property highlightedCategories
Property change event highlightedCategoriesChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-highlighted-categories-changed

hover-behavior :"dim"|"none"

Defines the behavior applied when hovering over data items.
Supported Values:
Value
dim
none
Default Value:
  • "none"
Names
Item Name
Property hoverBehavior
Property change event hoverBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hover-behavior-changed

hover-renderer :((context: ojThematicMap.RendererContext<K1, K2, K3, D1, D2, D3>) => {insert: SVGElement}|void)|null

An optional callback function to update the node in response to changes in hover state.
Default Value:
  • null
Names
Item Name
Property hoverRenderer
Property change event hoverRendererChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hover-renderer-changed

initial-zooming :"auto"|"none"

Specifies whether the map will zoom to fit the data objects on initial render.
Supported Values:
Value
auto
none
Default Value:
  • "none"
Names
Item Name
Property initialZooming
Property change event initialZoomingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-initial-zooming-changed

isolated-item :K1

The id for the isolated area of this area data layer. If set, only the isolated area will be displayed.
Default Value:
  • null
Names
Item Name
Property isolatedItem
Property change event isolatedItemChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-isolated-item-changed

label-display :"on"|"off"|"auto"

Specifies how labels for this layer should be displayed.
Supported Values:
Value Description
auto Renders the label if it fits within the area bounds.
off
on
Default Value:
  • "off"
Names
Item Name
Property labelDisplay
Property change event labelDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label-display-changed

label-type :"long"|"short"

Specifies which type of map labels to display.
Supported Values:
Value
long
short
Default Value:
  • "short"
Names
Item Name
Property labelType
Property change event labelTypeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label-type-changed

link-data :(DataProvider.<K2, D2>|null)

The DataProvider for the links of the thematic map. It should provide data rows where each row will map data for a single thematic map data link. The row key will be used as the id for thematic map links. Note that when using this attribute, a template for the linkTemplate slot should be provided. The DataProvider can either have an arbitrary data shape, in which case an element must be specified in the linkTemplate slot or it can have oj.ojThematicMap.Link as its data shape, in which case no template is required.
Default Value:
  • null
Names
Item Name
Property linkData
Property change event linkDataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-link-data-changed
An array of objects that define the data for links. Also accepts a Promise where no data will be rendered if the Promise is rejected. Regardless of the set value type, we will wrap and return a Promise when accessing the links property.
Type details
Setter Type(Array.<oj.ojThematicMap.Link.<K2, (K1|K3), D2>>|Promise.<Array.<oj.ojThematicMap.Link.<K2, (K1|K3), D2>>>|null)
Getter Type(Promise.<Array.<oj.ojThematicMap.Link.<K2, (K1|K3), D2>>>|null)
Default Value:
  • null
Names
Item Name
Property links
Property change event linksChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-links-changed

map-provider :Object

An object with the following properties, used to define a custom map.
Names
Item Name
Property mapProvider
Property change event mapProviderChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-map-provider-changed

map-provider.geo :GeoJSON.Feature<GeoJSON.Polygon|GeoJSON.MultiPolygon>|GeoJSON.FeatureCollection<GeoJSON.Polygon|GeoJSON.MultiPolygon>

The GeoJSON object containing custom area coordinates. Only GeoJSON objects of "type" Feature or FeatureCollection and Feature "geometry" objects of "type" Polygon or MultiPolygon are currently supported. Each Feature object will contain a thematic map area and each Feature's "properties" object will at a minimum need to contain a key, which can be defined in the propertiesKeys object, that will be used as the ID of the area.
Default Value:
  • {}
Names
Item Name
Property mapProvider.geo

map-provider.properties-keys :Object

The object specifying the GeoJSON Feature "properties" object keys to use for the custom area id, short label, and long label mappings.
Names
Item Name
Property mapProvider.propertiesKeys

map-provider.properties-keys.id :string

The required name of the "properties" key to use as the location id that will map a data item to a map area.
Note that the key used for map area ids must always be populated and correspond to a unique string value. Map areas without this key will not be rendered.
See the location attribute of oj-thematic-map-area for additional information.
Default Value:
  • ""
Names
Item Name
Property mapProvider.propertiesKeys.id

(nullable) map-provider.properties-keys.long-label :string

The optional name of the "properties" key to use for rendering area labels when labelType is set to "long".
Default Value:
  • ""
Names
Item Name
Property mapProvider.propertiesKeys.longLabel

(nullable) map-provider.properties-keys.short-label :string

The optional name of the "properties" key to use for rendering area labels when labelType is set to "short".
Default Value:
  • ""
Names
Item Name
Property mapProvider.propertiesKeys.shortLabel

marker-data :(DataProvider.<K3, D3>|null)

The DataProvider for the markers of the thematic map. It should provide data rows where each row will map data for a single thematic map data marker. The row key will be used as the id for thematic map markers. Note that when using this attribute, a template for the markerTemplate slot should be provided. The DataProvider can either have an arbitrary data shape, in which case an element must be specified in the markerTemplate slot or it can have oj.ojThematicMap.Marker as its data shape, in which case no template is required.
Default Value:
  • null
Names
Item Name
Property markerData
Property change event markerDataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-marker-data-changed

marker-zoom-behavior :"zoom"|"fixed"

Specifies marker behavior on zoom.
Supported Values:
Value
fixed
zoom
Default Value:
  • "fixed"
Names
Item Name
Property markerZoomBehavior
Property change event markerZoomBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-marker-zoom-behavior-changed

markers :(Array.<oj.ojThematicMap.Marker.<K3>>|Promise.<Array.<oj.ojThematicMap.Marker.<K3>>>|null)

An array of objects that define a row of data for a data layer. Also accepts a Promise where no data will be rendered if the Promise is rejected. Regardless of the set value type, we will wrap and return a Promise when accessing the markers property.
Type details
Setter Type(Array.<oj.ojThematicMap.Marker.<K3>>|Promise.<Array.<oj.ojThematicMap.Marker.<K3>>>|null)
Getter Type(Promise.<Array.<oj.ojThematicMap.Marker.<K3>>>|null)
Default Value:
  • null
Names
Item Name
Property markers
Property change event markersChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-markers-changed

max-zoom :number

Specifies the maximum zoom level for this element. This can be any number greater than or equal to 1.0 which indicates the maximum point to which the map can be scaled. A value of 2.0 implies that the map can be zoomed in until it reaches twice the viewport size. A maxZoom of 1.0 indicates that the user cannot zoom the map beyond the viewport size.
Default Value:
  • 6.0
Names
Item Name
Property maxZoom
Property change event maxZoomChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-max-zoom-changed

panning :"auto"|"none"

Specifies whether element panning is allowed.
Supported Values:
Value
auto
none
Default Value:
  • "none"
Names
Item Name
Property panning
Property change event panningChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-panning-changed

renderer :((context: ojThematicMap.RendererContext<K1, K2, K3, D1, D2, D3>) => {insert: SVGElement}|void)|null

A callback function used to stamp custom SVG elements for a data layer.
Default Value:
  • null
Names
Item Name
Property renderer
Property change event rendererChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-renderer-changed

selection :Array<K1|K2|K3>

An array of id strings, used to define the selected data items.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-changed

selection-mode :"none"|"single"|"multiple"

The type of selection behavior that is enabled on the thematic map. This attribute controls the number of selections that can be made via selection gestures at any given time.

If single or multiple is specified, selection gestures will be enabled, and the thematic map's selection styling will be applied to all items specified by the selection attribute. If none is specified, selection gestures will be disabled, and the thematic map's selection styling will not be applied to any items specified by the selection attribute.

Changing the value of this attribute will not affect the value of the selection attribute.

Supported Values:
Value Description
multiple Multiple items can be selected at the same time.
none Selection is disabled.
single Only a single item can be selected at a time.
Default Value:
  • "none"
Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-mode-changed

selection-renderer :((context: ojThematicMap.RendererContext<K1, K2, K3, D1, D2, D3>) => {insert: SVGElement}|void)|null

An optional callback function to update the data item in response to changes in selection state.
Default Value:
  • null
Names
Item Name
Property selectionRenderer
Property change event selectionRendererChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-renderer-changed

style-defaults :Object

We recommend using the component CSS classes to set component wide styling. This API should be used only for styling a specific instance of the component. Properties specified on this object may be overridden by specifications on the data item. The default values come from the CSS classes and varies based on theme.
Names
Item Name
Property styleDefaults
Property change event styleDefaultsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-style-defaults-changed

style-defaults.area-svg-style :Partial<CSSStyleDeclaration>

The CSS style object defining the style of the area layer areas. The default value comes from the CSS and varies based on theme. Only SVG CSS style properties are supported.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.areaSvgStyle

(nullable) style-defaults.data-area-defaults :Object

An object defining the default styles for data areas. Properties specified on this object may be overridden by specifications on the data object.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.dataAreaDefaults

(nullable) style-defaults.data-area-defaults.border-color :string

The area stroke color for the area data layer. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.dataAreaDefaults.borderColor

(nullable) style-defaults.data-area-defaults.hover-color :string

The hover data area border color. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.dataAreaDefaults.hoverColor

(nullable) style-defaults.data-area-defaults.selected-inner-color :string

The inner selected data area border color. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.dataAreaDefaults.selectedInnerColor

(nullable) style-defaults.data-area-defaults.selected-outer-color :string

The outer selected data area border color. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.dataAreaDefaults.selectedOuterColor

(nullable) style-defaults.data-marker-defaults :Object

An object defining the default styles for data markers. Properties specified on this object may be overridden by specifications on the data object.
Names
Item Name
Property styleDefaults.dataMarkerDefaults

(nullable) style-defaults.data-marker-defaults.border-color :string

The border color. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.dataMarkerDefaults.borderColor

(nullable) style-defaults.data-marker-defaults.border-style :string

The border style.
Supported Values:
Value
none
solid
Default Value:
  • "solid"
Names
Item Name
Property styleDefaults.dataMarkerDefaults.borderStyle

(nullable) style-defaults.data-marker-defaults.border-width :number

The border width in pixels.
Default Value:
  • 0.5
Names
Item Name
Property styleDefaults.dataMarkerDefaults.borderWidth

(nullable) style-defaults.data-marker-defaults.color :string

The fill color of a marker. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.dataMarkerDefaults.color

(nullable) style-defaults.data-marker-defaults.height :number

The default marker pixel height. Note that this option will be ignored if a value is provided to calculate marker sizes.
Default Value:
  • 8
Names
Item Name
Property styleDefaults.dataMarkerDefaults.height

style-defaults.data-marker-defaults.label-style :Partial<CSSStyleDeclaration>

The CSS style object for a marker label. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.dataMarkerDefaults.labelStyle

(nullable) style-defaults.data-marker-defaults.opacity :number

The default marker opacity.
Default Value:
  • 1
Names
Item Name
Property styleDefaults.dataMarkerDefaults.opacity

(nullable) style-defaults.data-marker-defaults.shape :"circle"|"diamond"|"ellipse"|"human"|"plus"|"rectangle"|"square"|"star"|"triangleDown"|"triangleUp"|string

The default marker shape. Can take the name of a built-in shape or the SVG path commands for a custom shape.
Default Value:
  • "circle"
Names
Item Name
Property styleDefaults.dataMarkerDefaults.shape

(nullable) style-defaults.data-marker-defaults.width :number

The default marker pixel width. Note that this option will be ignored if a value is provided to calculate marker sizes.
Default Value:
  • 8
Names
Item Name
Property styleDefaults.dataMarkerDefaults.width

(nullable) style-defaults.hover-behavior-delay :number

Specifies initial hover delay in milliseconds for highlighting data items.
Default Value:
  • 200
Names
Item Name
Property styleDefaults.hoverBehaviorDelay

style-defaults.label-style :Partial<CSSStyleDeclaration>

The CSS style object for the area layer labels. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
Default Value:
  • {}
Names
Item Name
Property styleDefaults.labelStyle

(nullable) style-defaults.link-defaults :Object

An object defining the default styles for data links. Properties specified on this object may be overridden by specifications on the data object.
Names
Item Name
Property styleDefaults.linkDefaults

(nullable) style-defaults.link-defaults.color :string

The stroke color for links. The default value comes from the CSS and varies based on theme.
Names
Item Name
Property styleDefaults.linkDefaults.color

(nullable) style-defaults.link-defaults.width :number

The stroke width for links in pixels.
Default Value:
  • 2
Names
Item Name
Property styleDefaults.linkDefaults.width

tooltip :Object

An object containing an optional callback function for tooltip customization.
Names
Item Name
Property tooltip
Property change event tooltipChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-tooltip-changed

tooltip.renderer :((context: ojThematicMap.TooltipContext<K1, K2, K3, D1, D2, D3>) => ({insert: Element|string}|{preventDefault: boolean}))

A function that returns a custom tooltip.
Default Value:
  • null
Names
Item Name
Property tooltip.renderer

tooltip-display :"auto"|"labelAndShortDesc"|"none"|"shortDesc"

Specifies the tooltip behavior of the thematic map.
Supported Values:
Value
auto
labelAndShortDesc
none
shortDesc
Default Value:
  • "auto"
Names
Item Name
Property tooltipDisplay
Property change event tooltipDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-tooltip-display-changed

touch-response :"touchStart"|"auto"

Data visualizations require a press and hold delay before triggering tooltips and rollover effects on mobile devices to avoid interfering with page panning, but these hold delays can make applications seem slower and less responsive. For a better user experience, the application can remove the touch and hold delay when data visualizations are used within a non scrolling container or if there is sufficient space outside of the visualization for panning. If touchResponse is touchStart the element will instantly trigger the touch gesture and consume the page pan events if the element does not require an internal feature that requires a touch start gesture like panning or zooming. If touchResponse is auto, the element will behave like touchStart if it determines that it is not rendered within scrolling content and if element panning is not available for those elements that support the feature.
Supported Values:
Value
auto
touchStart
Default Value:
  • "auto"
Names
Item Name
Property touchResponse
Property change event touchResponseChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-touch-response-changed

track-resize :"on"|"off"

Defines whether the element will automatically render in response to changes in size. If set to off, then the application is responsible for calling refresh to render the element at the new size.
Supported Values:
Value
off
on
Default Value:
  • "on"
Names
Item Name
Property trackResize
Property change event trackResizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-track-resize-changed

translations :object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-translations-changed

(nullable) translations.accessible-contains-controls :string

Used to describe a container that contains controls.

See the translations attribute for usage examples.

Since:
  • 13.0.0
Names
Item Name
Property translations.accessibleContainsControls

(nullable) translations.areas-region :string

Used to describe the areas map layer for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Thematic Map"
Names
Item Name
Property translations.areasRegion

(nullable) translations.component-name :string

Used to describe the data visualization type for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Thematic Map"
Names
Item Name
Property translations.componentName

(nullable) translations.label-and-value :string

Used to display a label and its value.

See the translations attribute for usage examples.

Default Value:
  • "{0}: {1}"
Names
Item Name
Property translations.labelAndValue

(nullable) translations.label-clear-selection :string

Text shown for clearing multiple selection on touch devices.

See the translations attribute for usage examples.

Default Value:
  • "Clear Selection"
Names
Item Name
Property translations.labelClearSelection

(nullable) translations.label-count-with-total :string

Used to display a count out of a total.

See the translations attribute for usage examples.

Default Value:
  • "{0} of {1}"
Names
Item Name
Property translations.labelCountWithTotal

(nullable) translations.label-data-visualization :string

Label for data visualizations used for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Data Visualization"
Names
Item Name
Property translations.labelDataVisualization

(nullable) translations.label-invalid-data :string

Text shown when the component receives invalid data.

See the translations attribute for usage examples.

Default Value:
  • "Invalid data"
Names
Item Name
Property translations.labelInvalidData

(nullable) translations.label-no-data :string

Text shown when the component receives no data.

See the translations attribute for usage examples.

Default Value:
  • "No data to display"
Names
Item Name
Property translations.labelNoData

(nullable) translations.links-region :string

Used to describe the links map layer for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Thematic Map"
Names
Item Name
Property translations.linksRegion

(nullable) translations.markers-region :string

Used to describe the markers map layer for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Thematic Map"
Names
Item Name
Property translations.markersRegion

(nullable) translations.state-collapsed :string

Used to describe the collapsed state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Collapsed"
Names
Item Name
Property translations.stateCollapsed

(nullable) translations.state-drillable :string

Used to describe a drillable object for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Drillable"
Names
Item Name
Property translations.stateDrillable

(nullable) translations.state-expanded :string

Used to describe the expanded state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Expanded"
Names
Item Name
Property translations.stateExpanded

(nullable) translations.state-hidden :string

Used to describe the hidden state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Hidden"
Names
Item Name
Property translations.stateHidden

(nullable) translations.state-isolated :string

Used to describe the isolated state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Isolated"
Names
Item Name
Property translations.stateIsolated

(nullable) translations.state-maximized :string

Used to describe the maximized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Maximized"
Names
Item Name
Property translations.stateMaximized

(nullable) translations.state-minimized :string

Used to describe the minimized state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Minimized"
Names
Item Name
Property translations.stateMinimized

(nullable) translations.state-selected :string

Used to describe the selected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Selected"
Names
Item Name
Property translations.stateSelected

(nullable) translations.state-unselected :string

Used to describe the unselected state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Unselected"
Names
Item Name
Property translations.stateUnselected

(nullable) translations.state-visible :string

Used to describe the visible state for accessibility.

See the translations attribute for usage examples.

Default Value:
  • "Visible"
Names
Item Name
Property translations.stateVisible

zooming :"auto"|"none"

Specifies whether element zooming is allowed.
Supported Values:
Value
auto
none
Default Value:
  • "none"
Names
Item Name
Property zooming
Property change event zoomingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-zooming-changed

Context Objects

Each context object contains, at minimum, a subId property, whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.

Properties:
Name Type Description
subId string Sub-id string to identify a particular dom node.

Following are the valid subIds:

oj-thematicmap-area

Context for an area in the specified data layer.

Properties:
Name Type Description
index number The index of the area within the specified data layer.

Context for a link in the specified data layer.

Properties:
Name Type Description
index number The index of the link within the specified data layer.

oj-thematicmap-marker

Context for a marker in the specified data layer.

Properties:
Name Type Description
index number The index of the marker within the specified data layer.

Methods

getArea(index) : {(oj.ojThematicMap.DataContext|null)}

Returns an object for automation testing verification of an area with the specified index in the areas property.
Parameters:
Name Type Description
index number The index of the area in the areas Array.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:

An object containing properties for the area, or null if none exists.

Type
(oj.ojThematicMap.DataContext|null)

getContextByNode(node) : {(oj.ojThematicMap.NodeContext|null)}

Returns an object with context for the given child DOM node. This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional component specific information may also be included. For more details on returned objects, see context objects.
Parameters:
Name Type Argument Description
node Element <not nullable>
 The child DOM node
Returns:

The context for the DOM node, or null when none is found.

Type
(oj.ojThematicMap.NodeContext|null)
Returns an object for automation testing verification of a link with the specified index in the links property.
Parameters:
Name Type Description
index number The index of the link in the links Array.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:

An object containing properties for the link, or null if none exists.

Type
(oj.ojThematicMap.DataContext|null)

getMarker(index) : {(oj.ojThematicMap.DataContext|null)}

Returns an object for automation testing verification of a marker with the specified index in the markers property.
Parameters:
Name Type Description
index number The index of the marker in the markers Array.
Deprecated:
Since Description
7.0.0 The use of this function is no longer recommended.
Returns:

An object containing properties for the marker, or null if none exists.

Type
(oj.ojThematicMap.DataContext|null)

getProperty(property) : {any}

Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Since:
  • 4.0.0
Returns:
Type
any
Example

Get a single subproperty of a complex property:

let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

refresh : {void}

Refreshes the component.
Returns:
Type
void

setProperties(properties) : {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) : {void}

Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");

Type Definitions

Area<K,D=any>

Properties:
Name Type Argument Default Description
categories Array.<string> <optional>
 An array of category strings corresponding to this area. This allows highlighting and filtering of areas.
color string <optional>
 The area color.
id K <optional>
 The identifier for this area. The id should be set by the application if the DataProvider is not being used. The row key will be used as id in the case.
label string <optional>
 Text used for the area's label.
labelStyle Partial<CSSStyleDeclaration> <optional>
 The CSS style defining the label style for this area. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
location string An identifier corresponding to a Feature provided in the mapProvider geo object that this area is associated with.
opacity number <optional>
 The area opacity.
selectable "auto" | "off" <optional>
 "auto" Specifies whether or not the area will be selectable.
shortDesc ?(string | ((context: ojThematicMap.AreaShortDescContext<K,D>) => string)) <optional>
 The description of this element. Will be lazily created if a function is used.  This is used for accessibility and also for customizing the tooltip text.
svgClassName string <optional>
 The CSS style class defining the style of the area.
svgStyle Partial<CSSStyleDeclaration> <optional>
 The CSS style object defining the style of the area. Only SVG CSS style properties are supported.

AreaShortDescContext<K1,D1>

Properties:
Name Type Description
data oj.ojThematicMap.Area.<K1, D1> The data object of the hovered item.
id K1 The id of the hovered item.
itemData D1 | null The row data object for the hovered item. This will only be set if an DataProvider is being used.
label string The data label of the hovered item.
location string | null The location id of the hovered item which can be null if x/y are set instead.
locationName string | null The location name of the hovered item if location id is set.
x number The x coordinate of the hovered item which can be null if location is set instead.
y number The y coordinate of the hovered item which can be null if location is set instead.

AreaTemplateContext

Properties:
Name Type Description
componentElement Element The <oj-thematic-map> custom element
data Object The data object for the current area
index number The zero-based index of the current area
key any The key of the current area

DataContext

Properties:
Name Type Description
color string The color of the item at the given index.
label string The label of the item at the given index.
selected boolean True if the item at the given index is currently selected and false otherwise.
tooltip string The tooltip of the item at the given index.
Properties:
Name Type Argument Default Description
categories Array.<string> <optional>
 An array of category strings corresponding to this link. This allows highlighting and filtering of links.
color string <optional>
 The link color.
endLocation Object An object used to determine the end point of the link.
Properties
Name Type Argument Description
id K2 <optional>
 The marker or area id to be used as the end point.
location string <optional>
 An identifier corresponding to a Feature provided in the mapProvider geo object to be used as the end point.
x number <optional>
 The x coordinate which can represent latitude of the end point.
y number <optional>
 The y coordinate which can represent longitude of the end point.
id K1 <optional>
 The identifier for this link. The id should be set by the application if the DataProvider is not being used. The row key will be used as id in the case.
selectable "auto" | "off" <optional>
 "auto" Specifies whether or not the link will be selectable.
shortDesc ?(string | ((context: ojThematicMap.LinkShortDescContext<K1,K2,D1>) => string)) <optional>
 The description of this element. Will be lazily created if a function is used.  This is used for accessibility and also for customizing the tooltip text.
startLocation Object An object used to determine the start point of the link.
Properties
Name Type Argument Description
id K2 <optional>
 The marker id to be used as the start point.
location string <optional>
 An identifier corresponding to a Feature provided in the mapProvider geo object to be used as the start point.
x number <optional>
 The x coordinate which can represent latitude of the start point.
y number <optional>
 The y coordinate which can represent longitude of the start point.
svgClassName string <optional>
 The CSS style class defining the style of the link.
svgStyle Partial<CSSStyleDeclaration> <optional>
 The CSS style object defining the style of the link. Only SVG CSS style properties are supported.
width number <optional>
 The link width in pixels.

LinkShortDescContext<K1,K2,D1>

Properties:
Name Type Description
data oj.ojThematicMap.Link.<K1, K2, D1> The data object of the hovered item.
id K1 The id of the hovered item.
itemData D1 | null The row data object for the hovered item. This will only be set if an DataProvider is being used.
label string The data label of the hovered item.

LinkTemplateContext

Properties:
Name Type Description
componentElement Element The <oj-thematic-map> custom element
data Object The data object for the current link
index number The zero-based index of the current link
key any The key of the current link

Marker<K3,D3=any>

Properties:
Name Type Argument Default Description
borderColor string <optional>
 The marker border color.
borderStyle "solid" | "none" <optional>
 "solid" The marker border style.
borderWidth number <optional>
 The marker border width in pixels.
categories Array.<string> <optional>
 An array of category strings corresponding to this marker. This allows highlighting and filtering of markers.
color string <optional>
 The marker color.
height number <optional>
 The pixel height for this marker. Note that this attribute will be ignored if a value is provided to calculate marker sizes.
id K3 <optional>
 The identifier for this marker. The id should be set by the application if the DataProvider is not being used. The row key will be used as id in the case.
label string <optional>
 Text used for the marker's label.
labelPosition "bottom" | "center" | "top" <optional>
 "center" Determines the label position relative to the marker.
labelStyle Partial<CSSStyleDeclaration> <optional>
 The CSS style object defining the style of the marker. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
location string <optional>
 An identifier corresponding to a Feature provided in the mapProvider geo object that this marker is associated with.
opacity number <optional>
 The marker opacity.
rotation number <optional>
 The angle to rotate the marker in clockwise degrees around the marker center.
selectable "auto" | "off" <optional>
 "auto" Specifies whether or not the marker will be selectable.
shape "circle" | "diamond" | "ellipse" | "human" | "plus" | "rectangle" | "square" | "star" | "triangleDown" | "triangleUp" | string <optional>
 "circle" Specifies the shape of a marker. Can take the name of a built-in shape or the SVG path commands for a custom shape.
shortDesc ?(string | ((context: ojThematicMap.MarkerShortDescContext<K3,D3>) => string)) <optional>
 The description of this element. Will be lazily created if a function is used.  This is used for accessibility and also for customizing the tooltip text.
source string <optional>
 Specifies an URI specifying the location of the image resource to use for the marker instead of a built-in shape. The shape attribute is ignored if the source image is defined.
sourceHover string <optional>
 An optional URI specifying the location of the hover image resource. If not defined, the source image will be used.
sourceHoverSelected string <optional>
 An optional URI specifying the location of the selected image resource on hover. If not defined, the sourceSelected image will be used. If sourceSelected is not defined, then the source image will be used.
sourceSelected string <optional>
 An optional URI specifying the location of the selected image. If not defined, the source image will be used.
svgClassName string <optional>
 The CSS style class defining the style of the marker.
svgStyle Partial<CSSStyleDeclaration> <optional>
 The CSS style object defining the style of the marker. Only SVG CSS style properties are supported.
value number <optional>
 A data value used to calculate the marker dimensions based on the range of all the data values and the element size. Markers with negative or zero data values will not be rendered. If specified, this value takes precedence over the width and height attributes.
width number <optional>
 The pixel width for this marker. Note that this attribute will be ignored if a value is provided to calculate marker.
x number <optional>
 The x coordinate of the marker transformed using the map projection, which can be null if location is set instead.
y number <optional>
 The y coordinate of the marker transformed using the map projection, which can be null if location is set instead.

MarkerShortDescContext<K3,D3>

Properties:
Name Type Description
data oj.ojThematicMap.Marker.<K3> The data object of the hovered item.
id K3 The id of the hovered item.
itemData D3 | null The row data object for the hovered item. This will only be set if an DataProvider is being used.
label string The data label of the hovered item.
location string | null The location id of the hovered item which can be null if x/y are set instead.
locationName string | null The location name of the hovered item if location id is set.
x number The x coordinate of the hovered item which can be null if location is set instead.
y number The y coordinate of the hovered item which can be null if location is set instead.

MarkerTemplateContext

Properties:
Name Type Description
componentElement Element The <oj-thematic-map> custom element
data Object The data object for the current marker
index number The zero-based index of the current marker
key any The key of the current marker

NodeContext

Properties:
Name Type Description
index number The zero based index of the thematic map item.
subId string The subId string identify the particular DOM node.

RendererContext<K1,K2,K3,D1,D2,D3>

Properties:
Name Type Description
color string The color of the data item.
componentElement Element The thematic map element.
data oj.ojThematicMap.Area.<K1, D1> | ojThematicMap.Link<K2,K1 | K3,D2> | oj.ojThematicMap.Marker.<K3, D3> The data object for the rendered item.
id K1 | K2 | K3 The id of the data item.
itemData D1 | D2 | D3 | null The row data object for the rendered item. This will only be set if an DataProvider is being used.
label string The label of the data item.
location string | null The location of the data item which can be null if x/y are set instead.
parentElement Element An element that is part of a displayed subtree on the DOM. Modifications of the parentElement are not supported.
previousState Object An object that reflects the previous state of the data item.
Properties
Name Type Description
focused boolean True if the data item was previously selected.
hovered boolean True if the data item was previously hovered.
selected boolean True if the data item was previously selected.
renderDefaultFocus function():void Function for rendering default focus effect for the data item
renderDefaultHover function():void Function for rendering default hover effect for the data item
renderDefaultSelection function():void Function for rendering default selection effect for the data item
root Element | null Null on initial rendering or the current data item SVG element.
state Object An object that reflects the current state of the data item.
Properties
Name Type Description
focused boolean True if the data item is currently selected.
hovered boolean True if the data item is currently hovered.
selected boolean True if the data item is currently selected.
x number | null The x coordinate of the data item which can be null if location is set instead.
y number | null The y coordinate of the data item which can be null if location is set instead.

TooltipContext<K1,K2,K3,D1,D2,D3>

Properties:
Name Type Description
color string | null The color of the hovered item or null if the hovered item if not associated with any data.
componentElement Element The thematic map element.
data oj.ojThematicMap.Area.<K1, D1> | ojThematicMap.Link<K2,K1 | K3,D2> | oj.ojThematicMap.Marker.<K3, D3> | null The data object of the hovered item or null if the hovered item is not associated with any data.
id K1 | K2 | K3 | null The id of the hovered item or null if the hovered item if not associated with any data.
itemData D1 | D2 | D3 | null The row data object for the hovered item. This will only be set if an DataProvider is being used.
label string | null The data label of the hovered item or null if the hovered item if not associated with any data.
location string | null The location id of the hovered item which can be null if x/y are set instead.
locationName string | null The location name of the hovered item if location id is set.
parentElement Element The tooltip element. The function can directly modify or append content to this element.
tooltip string The default tooltip string constructed by the element if any.
x number The x coordinate of the hovered item which can be null if location is set instead.
y number The y coordinate of the hovered item which can be null if location is set instead.