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
Parameter Description K1 Type of key of the areaData dataprovider K2 Type of key of the linkData dataprovider K3 Type of key of the markerData dataprovider D1 Type of data from the areaData dataprovider D2 Type of data from the linkData dataprovider D3 Type 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
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.
-
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.
-
markerContentTemplate
-
The
This slot takes precedence over the renderer/focusRenderer/hoverRenderer/selectionRenderer properties if specified.markerContentTemplate
slot is used to specify custom marker content. The slot content must be a single <template> element.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.
- Since:
- 7.1.0
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. -
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.
-
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.
- Default Value:
"none"
Supported Values:
Value auto
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.
- Deprecated:
-
Since Description 6.2.0
Set the alias directly on the template element using the data-oj-as attribute instead.
- 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.
- Default Value:
"all"
Supported Values:
Value all
any
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.
- Default Value:
"none"
Supported Values:
Value dim
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.
- Default Value:
"none"
Supported Values:
Value auto
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.
- Default Value:
"off"
Supported Values:
Value Description auto
Renders the label if it fits within the area bounds. off
on
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.
- Default Value:
"short"
Supported Values:
Value long
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
-
links :(Array.<oj.ojThematicMap.Link.<K2, (K1|K3), D2>>|Promise.<Array.<oj.ojThematicMap.Link.<K2, (K1|K3), D2>>>|null)
-
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.
- Default Value:
"fixed"
Supported Values:
Value fixed
zoom
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.
- Default Value:
"none"
Supported Values:
Value auto
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
ormultiple
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. Ifnone
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.
- Default Value:
"none"
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. 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.
- Default Value:
"solid"
Supported Values:
Value none
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.
- Default Value:
"auto"
Supported Values:
Value auto
labelAndShortDesc
none
shortDesc
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.
- Default Value:
"auto"
Supported Values:
Value auto
touchStart
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 callingrefresh
to render the element at the new size.- Default Value:
"on"
Supported Values:
Value off
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.
- Default Value:
"none"
Supported Values:
Value auto
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. -
oj-thematicmap-link
-
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)
-
getLink(index) : {(oj.ojThematicMap.DataContext|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
-
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. -
Link<K1,K2,D1=any>
-
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
-
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
-
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.