Element: <oj-thematic-map>

Oracle® JavaScript Extension Toolkit (JET)
4.2.0

E91398-01

QuickNav

Attributes


Context Objects

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 4.2.0
Since:
  • 0.7

JET Custom Elements

JET components are implemented as custom HTML elements. A detailed description of working with these elements can be found in: JET Custom Element Usage.

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]]'
  areas='[{"color":"#003366", "location":"FL"},
           {"color":"#CC3300", "location":"TX"},
           {"color":"#99CC33", "location":"CA"}]'>
</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.

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 only GeoJSON objects of "type" Feature or FeatureCollection 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 MutliPolgyon 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. 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.

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.

Slots

JET elements can have up to two types of child content:

  • Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>. All supported named slots are documented below. Child elements with unsupported named slots will be removed from the DOM.
  • Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child.

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 and demos 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.

Example

Initialize the component with a context menu:

<oj-some-element>
    <-- use the contextMenu slot to designate this as the context menu for this component -->
    <oj-menu slot="contextMenu" style="display:none" aria-label="Some element's context menu">
...
    </oj-menu>
</oj-some-element>

Attributes

animation-duration :number

The duration of the animations in milliseconds.
Default Value:
  • null
Names
Item Name
Property animationDuration
Property change event animationDurationChanged
Property change listener attribute (must be of type function) on-animation-duration-changed
Examples

Initialize the thematic map with the animation-duration attribute specified:

<oj-thematic-map animation-duration='200'></oj-thematic-map>

Get or set the animationDuration property after initialization:

// getter
var value = myThematicMap.animationDuration;

// setter
myThematicMap.animationDuration=200;

animation-on-display :string

The type of animation to apply when the element is initially displayed
Supported Values:
Name Type
"auto" string
"none" string
Default Value:
  • "none"
Names
Item Name
Property animationOnDisplay
Property change event animationOnDisplayChanged
Property change listener attribute (must be of type function) on-animation-on-display-changed
Examples

Initialize the thematic map with the animation-on-display attribute specified:

<oj-thematic-map animation-on-display='auto'></oj-thematic-map>

Get or set the animationOnDisplay property after initialization:

// getter
var value = myThematicMap.animationOnDisplay;

// setter
myThematicMap.animationOnDisplay="auto";

areas :Array.<object>|Promise

An array of objects with the following properties 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.
Default Value:
  • null
Names
Item Name
Property areas
Property change event areasChanged
Property change listener attribute (must be of type function) on-areas-changed
Examples

Initialize the thematic map with the areas attribute specified:

<oj-thematic-map areas='[{"id": "a1", "color": "red", "location": "FRA"}, 
                            ...
                            {"id": "a27", "color": "green", "location": "USA"}]'>
</oj-thematic-map>

<oj-thematic-map areas='[[areasPromise]]'></oj-thematic-map>

Get or set the areas property after initialization:

// Get all (The areas getter always returns a Promise so there is no "get one" syntax)
var values = myThematicMap.areas;

// Set all (There is no permissible "set one" syntax.)
myThematicMap.areas=[{"id": "a1", "color": "red", "location": "FRA"}, 
             ...
             {"id": "a27", "color": "green", "location": "USA"}];

areas[].categories :Array.<string>

An array of category strings corresponding to this area. This allows highlighting and filtering of areas.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

areas[].color :string

The data object color.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

areas[].id :string

The identifier for this data object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

areas[].label :string

Text used for the area's label.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

areas[].labelStyle :object

The CSS style defining the label style for this area.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

areas[].location :string

The id of the state or country this area is associated with.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

areas[].opacity :number

The data object opacity.
Default Value:
  • 1.0
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

areas[].selectable :string

Specifies whether or not the area will be selectable.
Supported Values:
Name Type
"auto" string
"off" string
Default Value:
  • "auto"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

areas[].shortDesc :string

The text that displays in the area's tooltip.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

areas[].svgClassName :string

The CSS style class to apply to the data item. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the item color attribute.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

areas[].svgStyle :object

The CSS style object defining the style of the data item. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the item color attribute.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the areas attribute for usage examples.

focus-renderer :function(object)

An optional callback function to update the data item in response to changes in keyboard focus state. The function takes a single argument, provided by the element, with the following properties:
  • componentElement: The thematic map element.
  • data: The data object for a stamped data visualization.
  • parentElement: An element that is part of a displayed subtree on the DOM. Modifications of the parentElement are not supported.
  • rootElement: Null on initial rendering or the current data item SVG element.
  • state: An object that reflects the current state of the data item with the following parameters:
    • hovered: hovered state, boolean.
    • selected: selected state, boolean.
    • focused: focused state, boolean.
  • previousState: An object that reflects the previous state of the data item with the following parameters:
    • hovered: hovered state, boolean.
    • selected: selected state, boolean.
    • focused: focused state, boolean.
  • id: The id of the hovered item.
  • label: The data label of the hovered item.
  • color: The color of the hovered item.
  • location: The location id of the hovered item which can be null if x/y are set instead.
  • x: The x coordinate of the hovered item which can be null if location is set instead.
  • y: The y coordinate of the hovered item which can be null if location is set instead.
  • renderDefaultFocus: Function for rendering default focus effect for the data item.
  • renderDefaultHover: Function for rendering default hover effect for the data item.
  • renderDefaultSelection: Function for rendering default selection effect for the data item.
The function should return one of the following:
  • An Object with the following property:
    • insert: SVGElement - An SVG element, which will be used as the data item.
  • undefined: Indicates that the existing DOM has been directly modified and no further action is required.
Default Value:
  • null
Names
Item Name
Property focusRenderer
Property change event focusRendererChanged
Property change listener attribute (must be of type function) 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:
  • null
Names
Item Name
Property hiddenCategories
Property change event hiddenCategoriesChanged
Property change listener attribute (must be of type function) on-hidden-categories-changed
Examples

Initialize the thematic map with the hidden-categories attribute specified:

<oj-thematic-map hidden-categories='["soda", "water"]'></oj-thematic-map>

Get or set the hiddenCategories property after initialization:

// Get one
var value = myThematicMap.hiddenCategories[0];

// Get all
var values = myThematicMap.hiddenCategories;

// Set all (There is no permissible "set one" syntax.)
myThematicMap.hiddenCategories=["soda", "water"];

highlight-match :string

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:
Name Type
"all" string
"any" string
Default Value:
  • "all"
Names
Item Name
Property highlightMatch
Property change event highlightMatchChanged
Property change listener attribute (must be of type function) on-highlight-match-changed
Examples

Initialize the thematic map with the highlight-match attribute specified:

<oj-thematic-map highlight-match='any'></oj-thematic-map>

Get or set the highlightMatch property after initialization:

// getter
var value = myThematicMap.highlightMatch;

// setter
myThematicMap.highlightMatch="any";

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:
  • null
Names
Item Name
Property highlightedCategories
Property change event highlightedCategoriesChanged
Property change listener attribute (must be of type function) on-highlighted-categories-changed
Examples

Initialize the thematic map with the highlighted-categories attribute specified:

<oj-thematic-map highlighted-categories='["soda", "water"]'></oj-thematic-map>

Get or set the highlightedCategories property after initialization:

// Get one
var value = myThematicMap.highlightedCategories[0];

// Get all
var values = myThematicMap.highlightedCategories;

// Set all (There is no permissible "set one" syntax.)
myThematicMap.highlightedCategories=["soda", "water"];

hover-behavior :string

Defines the behavior applied when hovering over data items.
Supported Values:
Name Type
"dim" string
"none" string
Default Value:
  • "none"
Names
Item Name
Property hoverBehavior
Property change event hoverBehaviorChanged
Property change listener attribute (must be of type function) on-hover-behavior-changed
Examples

Initialize the thematic map with the hover-behavior attribute specified:

<oj-thematic-map hover-behavior='dim'></oj-thematic-map>

Get or set the hoverBehavior property after initialization:

// getter
var value = myThematicMap.hoverBehavior;

// setter
myThematicMap.hoverBehavior="dim";

hover-renderer :function(object)

An optional callback function to update the node in response to changes in hover state. The function takes a single argument, provided by the element, with the following properties:
  • componentElement: The thematic map element.
  • data: The data object for a stamped data visualization.
  • parentElement: An element that is part of a displayed subtree on the DOM. Modifications of the parentElement are not supported.
  • rootElement: Null on initial rendering or the current data item SVG element.
  • state: An object that reflects the current state of the data item with the following parameters:
    • hovered: hovered state, boolean.
    • selected: selected state, boolean.
    • focused: focused state, boolean.
  • previousState: An object that reflects the previous state of the data item with the following parameters:
    • hovered: hovered state, boolean.
    • selected: selected state, boolean.
    • focused: focused state, boolean.
  • id: The id of the hovered item.
  • label: The data label of the hovered item.
  • color: The color of the hovered item.
  • location: The location id of the hovered item which can be null if x/y are set instead.
  • x: The x coordinate of the hovered item which can be null if location is set instead.
  • y: The y coordinate of the hovered item which can be null if location is set instead.
  • renderDefaultFocus: Function for rendering default focus effect for the data item.
  • renderDefaultHover: Function for rendering default hover effect for the data item.
  • renderDefaultSelection: Function for rendering default selection effect for the data item.
The function should return one of the following:
  • An Object with the following property:
    • insert: SVGElement - An SVG element, which will be used as the data item.
  • undefined: Indicates that the existing DOM has been directly modified and no further action is required.
Default Value:
  • null
Names
Item Name
Property hoverRenderer
Property change event hoverRendererChanged
Property change listener attribute (must be of type function) on-hover-renderer-changed

initial-zooming :string

Specifies whether the map will zoom to fit the data objects on initial render.
Supported Values:
Name Type
"auto" string
"none" string
Default Value:
  • "none"
Names
Item Name
Property initialZooming
Property change event initialZoomingChanged
Property change listener attribute (must be of type function) on-initial-zooming-changed
Examples

Initialize the thematic map with the initial-zooming attribute specified:

<oj-thematic-map initial-zooming='auto'></oj-thematic-map>

Get or set the initialZooming property after initialization:

// getter
var value = myThematicMap.initialZooming;

// setter
myThematicMap.initialZooming="auto";

isolated-item :string

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) on-isolated-item-changed
Examples

Initialize the thematic map with the isolated-item attribute specified:

<oj-thematic-map isolated-item='a2'></oj-thematic-map>

Get or set the isolatedItem property after initialization:

// getter
var value = myThematicMap.isolatedItem;

// setter
myThematicMap.isolatedItem="a2";

label-display :string

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

Initialize the thematic map with the label-display attribute specified:

<oj-thematic-map label-display='auto'></oj-thematic-map>

Get or set the labelDisplay property after initialization:

// getter
var value = myThematicMap.labelDisplay;

// setter
myThematicMap.labelDisplay="auto";

label-type :string

Determines which of the basemap labels to display
Supported Values:
Name Type
"long" string
"short" string
Default Value:
  • "short"
Names
Item Name
Property labelType
Property change event labelTypeChanged
Property change listener attribute (must be of type function) on-label-type-changed
Examples

Initialize the thematic map with the label-display attribute specified:

<oj-thematic-map label-type='long'></oj-thematic-map>

Get or set the labelType property after initialization:

// getter
var value = myThematicMap.labelType;

// setter
myThematicMap.labelType="long";
An array of objects with the following properties 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.
Default Value:
  • null
Names
Item Name
Property links
Property change event linksChanged
Property change listener attribute (must be of type function) on-links-changed
Examples

Initialize the thematic map with the links attribute specified:

<oj-thematic-map links='[{"id": "l1", "startLocation": {"id": "m2"}, "endLocation": {"id": "m29"}}, 
                            ...
                            {"id": "l7", "startLocation": {"id": "m17"}, "endLocation": {"id": "m9"}}]'>
</oj-thematic-map>

<oj-thematic-map links='[[markersPromise]]'></oj-thematic-map>

Get or set the links property after initialization:

// Get all (The links getter always returns a Promise so there is no "get one" syntax)
var values = myThematicMap.links;

// Set all (There is no permissible "set one" syntax.)
myThematicMap.links=[{"id": "l1", "startLocation": {"id": "m2"}, "endLocation": {"id": "m29"}}, 
             ...
             {"id": "l7", "startLocation": {"id": "m17"}, "endLocation": {"id": "m9"}}];

links[].categories :Array.<string>

An array of category strings corresponding to this link. This allows highlighting and filtering of links.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the links attribute for usage examples.

links[].color :string

The link color.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the links attribute for usage examples.

links[].endLocation :object

An object with the following key/value pairs used to determine the end point of the link:
  • id: The marker or area id to be used as the end point.
  • location: The string location name of a built-in city or area.
  • x: The x coordinate which can represent latitude.
  • y: The y coordinate which can represent longitude.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the links attribute for usage examples.

links[].id :string

The identifier for this data object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the links attribute for usage examples.

links[].selectable :string

Specifies whether or not the area will be selectable.
Supported Values:
Name Type
"auto" string
"off" string
Default Value:
  • "auto"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the links attribute for usage examples.

links[].shortDesc :string

The text that displays in the area's tooltip.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the links attribute for usage examples.

links[].startLocation :object

An object with the following key/value pairs used to determine the start point of the link:
  • id: The marker or area id to be used as the start point.
  • location: The string location name of a built-in city or area.
  • x: The x coordinate which can represent latitude.
  • y: The y coordinate which can represent longitude.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the links attribute for usage examples.

links[].svgClassName :string

The CSS style class to apply to the data item. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the item color attribute.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the links attribute for usage examples.

links[].svgStyle :object

The CSS style object defining the style of the data item. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the item color attribute.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the links attribute for usage examples.

links[].width :number

The link width in pixels.
Default Value:
  • 2
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the links attribute for usage examples.

map-provider :object

An object with the following properties, used to define a custom basemap.
Default Value:
  • null
Names
Item Name
Property mapProvider
Property change event mapProviderChanged
Property change listener attribute (must be of type function) on-map-provider-changed
Examples

Initialize the thematic map with the map-provider attribute specified:


<oj-thematic-map map-provider.geo='[[geoJsonObj]]'
  map-provider.properties-keys='{"id": "country", "shortLabel": "iso_a3", "longLabel": "country"}'>
</oj-thematic-map>

<oj-thematic-map mapProvider='[[{"geo": geoJsonObj, 
                                    "propertiesKeys": {"id": "country", 
                                                       "shortLabel": "iso_a3", 
                                                       "longLabel": "country"}]]'>
</oj-thematic-map>

Get or set the mapProvider property after initialization:

// Get one
var value = myThematicMap.mapProvider.geo;

// Get all
var values = myThematicMap.mapProvider;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myThematicMap.setProperty('mapProvider.geo', geoJsonObj);

// Set all. Must list every resource key, as those not listed are lost.
myThematicMap.mapProvider={'geo': geoJsonObj};

map-provider.geo :object

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:
  • null
Names
Item Name
Property mapProvider.geo
Example
 See the mapProvider attribute for usage examples.

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.
  • id: The required name of the "properties" key to use as the location id that will map a data item to a map area.
  • shortLabel: The optional name of the "properties" key to use for rendering area labels when labelType is set to "short".
  • longLabel: The optional name of the "properties" key to use for rendering area labels when labelType is set to "long".
Default Value:
  • null
Names
Item Name
Property mapProvider.propertiesKeys
Example
 See the mapProvider attribute for usage examples.

marker-zoom-behavior :string

Specifies marker behavior on zoom.
Supported Values:
Name Type
"fixed" string
"zoom" string
Default Value:
  • "fixed"
Names
Item Name
Property markerZoomBehavior
Property change event markerZoomBehaviorChanged
Property change listener attribute (must be of type function) on-marker-zoom-behavior-changed
Examples

Initialize the thematic map with the marker-zoom-behavior attribute specified:

<oj-thematic-map marker-zoom-behavior='zoom'></oj-thematic-map>

Get or set the markerZoomBehavior property after initialization:

// getter
var value = myThematicMap.markerZoomBehavior;

// setter
myThematicMap.markerZoomBehavior="zoom";

markers :Array.<object>|Promise

An array of objects with the following properties 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.
Default Value:
  • null
Names
Item Name
Property markers
Property change event markersChanged
Property change listener attribute (must be of type function) on-markers-changed
Examples

Initialize the thematic map with the markers attribute specified:

<oj-thematic-map markers='[{"id": "m1", "color": "red", "shape": "circle", x": 2102, "y": 910}, 
                            ...
                            {"id": "m27", "color": "green", "shape": "circle", "x": 4820, "y": 277}]'>
</oj-thematic-map>

<oj-thematic-map markers='[[markersPromise]]'></oj-thematic-map>

Get or set the markers property after initialization:

// Get all (The markers getter always returns a Promise so there is no "get one" syntax)
var values = myThematicMap.markers;

// Set all (There is no permissible "set one" syntax.)
myThematicMap.markers=[{"id": "m1", "color": "red", "shape": "circle", x": 2102, "y": 910}, 
               ...
               {"id": "m27", "color": "green", "shape": "circle", "x": 4820, "y": 277}];

markers[].borderColor :string

The border color.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].borderStyle :string

The border style.
Supported Values:
Name Type
"none" string
"solid" string
Default Value:
  • "solid"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].borderWidth :number

The border width in pixels.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

markers[].categories :Array.<string>

An array of category strings corresponding to this marker. This allows highlighting and filtering of markers.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].color :string

The marker color.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

markers[].height :number

The pixel height for this marker. Note that this option will be ignored if a value is provided to calculate marker sizes.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].id :string

The identifier for this data object.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].label :string

Text used for the marker's label.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].labelPosition :string

Determines the position relative to the marker that the label should be displayed.
Supported Values:
Name Type
"bottom" string
"center" string
"top" string
Default Value:
  • "center"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].labelStyle :object

The CSS style defining the label style for this marker.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].location :string

The id of the area this marker is associated with.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].opacity :number

The marker opacity.
Default Value:
  • 1.0
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].rotation :number

The angle to rotate the marker in clockwise degrees around the center of the image.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].selectable :string

Specifies whether or not the marker will be selectable.
Supported Values:
Name Type
"auto" string
"off" string
Default Value:
  • "auto"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].shape :string

Specifies the shape of a marker. Can take the name of a built-in shape or the svg path commands for a custom shape.
Supported Values:
Name Type
"circle" string
"diamond" string
"ellipse" string
"human" string
"plus" string
"rectangle" string
"square" string
"star" string
"triangleDown" string
"triangleUp" string
Default Value:
  • "circle"
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].shortDesc :string

The text that displays in the marker's tooltip.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].source :string

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.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].sourceHover :string

An optional URI specifying the location of the hover image resource. If not defined, the source image will be used.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].sourceHoverSelected :string

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.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].sourceSelected :string

An optional URI specifying the location of the selected image. If not defined, the source image will be used.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].svgClassName :string

The CSS style class to apply to the data item. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the item color attribute.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].svgStyle :object

The CSS style object defining the style of the data item. The style class and inline style will override any other styling specified through the options. For tooltips and hover interactivity, it's recommended to also pass a representative color to the item color attribute.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].value :number

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 options.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

markers[].width :number

The pixel width for this marker. Note that this option will be ignored if a value is provided to calculate marker sizes.
Default Value:
  • null
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
Example
 See the markers attribute for usage examples.

max-zoom :number

Specifies the maximum zoom level for this element. This can be any number greater than 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) on-max-zoom-changed
Examples

Initialize the thematic map with the max-zoom attribute specified:

<oj-thematic-map max-zoom='10'></oj-thematic-map>

Get or set the maxZoom property after initialization:

// getter
var value = myThematicMap.maxZoom;

// setter
myThematicMap.maxZoom=10;

panning :string

Determines whether element panning is allowed.
Supported Values:
Name Type
"auto" string
"none" string
Default Value:
  • "none"
Names
Item Name
Property panning
Property change event panningChanged
Property change listener attribute (must be of type function) on-panning-changed
Examples

Initialize the thematic map with the panning attribute specified:

<oj-thematic-map panning='auto'></oj-thematic-map>

Get or set the panning property after initialization:

// getter
var value = myThematicMap.panning;

// setter
myThematicMap.panning="auto";

renderer :function(object)

A callback function used to stamp custom SVG elements for a data layer. The function takes a single argument, provided by the element, with the following properties:
  • componentElement: The thematic map element.
  • data: The data object for a stamped data visualization.
  • parentElement: An element that is part of a displayed subtree on the DOM. Modifications of the parentElement are not supported.
  • rootElement: Null on initial rendering or the current data item SVG element.
  • state: An object that reflects the current state of the data item with the following parameters:
    • hovered: hovered state, boolean.
    • selected: selected state, boolean.
    • focused: focused state, boolean.
  • previousState: An object that reflects the previous state of the data item with the following parameters:
    • hovered: hovered state, boolean.
    • selected: selected state, boolean.
    • focused: focused state, boolean.
  • id: The id of the hovered item.
  • label: The data label of the hovered item.
  • color: The color of the hovered item.
  • location: The location id of the hovered item which can be null if x/y are set instead.
  • x: The x coordinate of the hovered item which can be null if location is set instead.
  • y: The y coordinate of the hovered item which can be null if location is set instead.
  • renderDefaultFocus: Function for rendering default focus effect for the data item.
  • renderDefaultHover: Function for rendering default hover effect for the data item.
  • renderDefaultSelection: Function for rendering default selection effect for the data item.
The function should an Object with the following property:
  • insert: SVGElement - An SVG element, which will be used as the data item.
Default Value:
  • null
Names
Item Name
Property renderer
Property change event rendererChanged
Property change listener attribute (must be of type function) on-renderer-changed

selection :Array.<string>

An array of id strings, used to define the selected data items.
Default Value:
  • null
Supports writeback:
  • true
Names
Item Name
Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function) on-selection-changed
Examples

Initialize the thematic map with the selection attribute specified:

<oj-thematic-map selection='["area1", "area2", "marker2"]'></oj-thematic-map>

Get or set the selection property after initialization:

// Get one
var value = myThematicMap.selection[0];

// Get all
var values = myThematicMap.selection;

// Set all (There is no permissible "set one" syntax.)
myThematicMap.selection=["area1", "area2", "marker2"];

selection-mode :string

The type of selection behavior that is enabled on the thematic map.
Supported Values:
Name Type
"multiple" string
"none" string
"single" string
Default Value:
  • "none"
Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function) on-selection-mode-changed
Examples

Initialize the thematic map with the selection-mode attribute specified:

<oj-thematic-map selection-mode='multiple'></oj-thematic-map>

Get or set the selectionMode property after initialization:

// getter
var value = myThematicMap.selectionMode;

// setter
myThematicMap.selectionMode="multiple";

selection-renderer :function(object)

An optional callback function to update the data item in response to changes in selection state. The function takes a single argument, provided by the element, with the following properties:
  • componentElement: The thematic map element.
  • data: The data object for a stamped data visualization.
  • parentElement: An element that is part of a displayed subtree on the DOM. Modifications of the parentElement are not supported.
  • rootElement: Null on initial rendering or the current data item SVG element.
  • state: An object that reflects the current state of the data item with the following parameters:
    • hovered: hovered state, boolean.
    • selected: selected state, boolean.
    • focused: focused state, boolean.
  • previousState: An object that reflects the previous state of the data item with the following parameters:
    • hovered: hovered state, boolean.
    • selected: selected state, boolean.
    • focused: focused state, boolean.
  • id: The id of the hovered item.
  • label: The data label of the hovered item.
  • color: The color of the hovered item.
  • location: The location id of the hovered item which can be null if x/y are set instead.
  • x: The x coordinate of the hovered item which can be null if location is set instead.
  • y: The y coordinate of the hovered item which can be null if location is set instead.
  • renderDefaultFocus: Function for rendering default focus effect for the data item.
  • renderDefaultHover: Function for rendering default hover effect for the data item.
  • renderDefaultSelection: Function for rendering default selection effect for the data item.
The function should return one of the following:
  • An Object with the following property:
    • insert: SVGElement - An SVG element, which will be used as the data item.
  • undefined: Indicates that the existing DOM has been directly modified and no further action is required.
Default Value:
  • null
Names
Item Name
Property selectionRenderer
Property change event selectionRendererChanged
Property change listener attribute (must be of type function) on-selection-renderer-changed

style-defaults :object

An object defining the style defaults for this thematic map.
Default Value:
  • null
Names
Item Name
Property styleDefaults
Property change event styleDefaultsChanged
Property change listener attribute (must be of type function) on-style-defaults-changed
Examples

Initialize the thematic map with the style-defaults attribute specified:


<oj-thematic-map style-defaults.animation-duration='200'></oj-thematic-map>


<oj-thematic-map style-defaults='{"animationDuration": 200, "svgStyle": {"fill": "url(someURL@filterId)"}'></oj-thematic-map>

Get or set the styleDefaults property after initialization:

// Get one
var value = myThematicMap.styleDefaults.animationDuration;

// Get all
var values = myThematicMap.styleDefaults;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myThematicMap.setProperty('styleDefaults.svgStyle', {'fill': 'url(someURL#filterId)'});

// Set all. Must list every resource key, as those not listed are lost.
myThematicMap.styleDefaults={'fill': 'url("someURL#filterId")'};

style-defaults.area-svg-style :object

The CSS style object defining the style of the area layer areas.
Default Value:
  • null
Names
Item Name
Property styleDefaults.areaSvgStyle
Example
 See the styleDefaults attribute for usage examples.

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:
  • null
Names
Item Name
Property styleDefaults.dataAreaDefaults
Example
 See the styleDefaults attribute for usage examples.

style-defaults.data-area-defaults.border-color :string

The area stroke color for the area data layer.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataAreaDefaults.borderColor
Example
 See the styleDefaults attribute for usage examples.

style-defaults.data-area-defaults.hover-color :string

The hover data area border color.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataAreaDefaults.hoverColor
Example
 See the styleDefaults attribute for usage examples.

style-defaults.data-area-defaults.selected-inner-color :string

The outer selected data area border color.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataAreaDefaults.selectedInnerColor
Example
 See the styleDefaults attribute for usage examples.

style-defaults.data-area-defaults.selected-outer-color :string

The outer selected data area border color.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataAreaDefaults.selectedOuterColor
Example
 See the styleDefaults attribute for usage examples.

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.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataMarkerDefaults
Example
 See the styleDefaults attribute for usage examples.

style-defaults.data-marker-defaults.border-color :string

The border color.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataMarkerDefaults.borderColor
Example
 See the styleDefaults attribute for usage examples.

style-defaults.data-marker-defaults.border-style :string

The border style.
Supported Values:
Name Type
"none" string
"solid" string
Default Value:
  • "solid"
Names
Item Name
Property styleDefaults.dataMarkerDefaults.borderStyle
Example
 See the styleDefaults attribute for usage examples.

style-defaults.data-marker-defaults.border-width :number

The border width in pixels.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataMarkerDefaults.borderWidth
Example
 See the styleDefaults attribute for usage examples.

style-defaults.data-marker-defaults.color :string

The fill color of a marker.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataMarkerDefaults.color
Example
 See the styleDefaults attribute for usage examples.

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:
  • null
Names
Item Name
Property styleDefaults.dataMarkerDefaults.height
Example
 See the styleDefaults attribute for usage examples.

style-defaults.data-marker-defaults.label-style :object

The CSS style for a marker label.
Default Value:
  • null
Names
Item Name
Property styleDefaults.dataMarkerDefaults.labelStyle
Examples
 See the styleDefaults attribute for usage examples.
 See the styleDefaults attribute for usage examples.

style-defaults.data-marker-defaults.opacity :number

The default marker opacity.
Default Value:
  • 1.0
Names
Item Name
Property styleDefaults.dataMarkerDefaults.opacity
Example
 See the styleDefaults attribute for usage examples.

style-defaults.data-marker-defaults.shape :string

The default marker shape. Can take the name of a built-in shape or the svg path commands for a custom shape.
Supported Values:
Name Type
"circle" string
"diamond" string
"ellipse" string
"human" string
"plus" string
"rectangle" string
"square" string
"star" string
"triangleDown" string
"triangleUp" string
Default Value:
  • "circle"
Names
Item Name
Property styleDefaults.dataMarkerDefaults.shape
Example
 See the styleDefaults attribute for usage examples.

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:
  • null
Names
Item Name
Property styleDefaults.dataMarkerDefaults.width
Example
 See the styleDefaults attribute for usage examples.

style-defaults.hover-behavior-delay :number

Specifies initial hover delay in ms for highlighting data items.
Default Value:
  • null
Names
Item Name
Property styleDefaults.hoverBehaviorDelay
Example
 See the styleDefaults attribute for usage examples.

style-defaults.label-style :object

The CSS style for the area layer labels.
Default Value:
  • null
Names
Item Name
Property styleDefaults.labelStyle
Example
 See the styleDefaults attribute for usage examples.

style-defaults.link-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:
  • null
Names
Item Name
Property styleDefaults.linkDefaults
Example
 See the styleDefaults attribute for usage examples.

style-defaults.link-defaults.color :string

The stroke color for links.
Default Value:
  • null
Names
Item Name
Property styleDefaults.linkDefaults.color
Example
 See the styleDefaults attribute for usage examples.

style-defaults.link-defaults.width :number

The stroke width for links in pixels.
Default Value:
  • 2
Names
Item Name
Property styleDefaults.linkDefaults.width
Example
 See the styleDefaults attribute for usage examples.

tooltip :object

An object containing an optional callback function for tooltip customization.
Default Value:
  • null
Names
Item Name
Property tooltip
Property change event tooltipChanged
Property change listener attribute (must be of type function) on-tooltip-changed
Examples

Initialize the thematic map with the tooltip attribute specified:


<oj-thematic-map tooltip.renderer='[[tooltipFun]]'></oj-thematic-map>

<oj-thematic-map tooltip='[[{"renderer": tooltipFun}]]'></oj-thematic-map>

Get or set the hiddenCategories property after initialization:

// Get one
var value = myThematicMap.tooltip.renderer;

// Get all
var values = myThematicMap.tooltip;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myThematicMap.setProperty('tooltip.renderer', tooltipFun);

// Set all. Must list every resource key, as those not listed are lost.
myThematicMap.tooltip={'renderer': tooltipFun};

tooltip.renderer :function(object)

A function that returns a custom tooltip. The function takes a dataContext argument, provided by the thematic map, with the following properties:
  • color: The color of the hovered item or null if the hovered item if not associated with any data.
  • componentElement: The thematic map element.
  • data: The data object of the hovered item or null if the hovered item if not associated with any data.
  • id: The id of the hovered item or null if the hovered item if not associated with any data.
  • label: The data label of the hovered item or null if the hovered item if not associated with any data.
  • location: The location id of the hovered item which can be null if x/y are set instead.
  • locationName: The location name of the hovered item if location id is set.
  • parentElement: The tooltip element. This can be used to change the tooltip border or background color.
  • tooltip: The default tooltip string constructed by the element if any.
  • x: The x coordinate of the hovered item which can be null if location is set instead.
  • y: The y coordinate of the hovered item which can be null if location is set instead.
The function should return an Object that contains only one of the two properties:
  • insert: HTMLElement | string - An HTML element, which will be appended to the tooltip, or a tooltip string.
  • preventDefault: true - Indicates that the tooltip should not be displayed. It is not necessary to return {preventDefault:false} to display tooltip, since this is a default behavior.
Default Value:
  • null
Names
Item Name
Property tooltip.renderer
Example
 See the tooltip attribute for usage examples.

tooltip-display :string

Specifies the tooltip behavior of the thematic map.
Supported Values:
Name Type
"auto" string
"labelAndShortDesc" string
"none" string
"shortDesc" string
Default Value:
  • "none"
Names
Item Name
Property tooltipDisplay
Property change event tooltipDisplayChanged
Property change listener attribute (must be of type function) on-tooltip-display-changed
Examples

Initialize the thematic map with the tooltip-display attribute specified:

<oj-thematic-map tooltip-display='auto'></oj-thematic-map>

Get or set the tooltipDisplay property after initialization:

// getter
var value = myThematicMap.tooltipDisplay;

// setter
myThematicMap.tooltipDisplay="auto";

touch-response :string

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:
Name Type
"auto" string
"touchStart" string
Default Value:
  • "auto"
Names
Item Name
Property touchResponse
Property change event touchResponseChanged
Property change listener attribute (must be of type function) on-touch-response-changed
Examples

Initialize the thematic map with the touch-response attribute specified:

<oj-thematic-map touch-response='touchStart'></oj-thematic-map>

Get or set the touchResponse property after initialization:

// getter
var value = myThematicMap.touchResponse;

// setter
myThematicMap.touchResponse="touchStart";

track-resize :string

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:
Name Type
"off" string
"on" string
Default Value:
  • "on"
Names
Item Name
Property trackResize
Property change event trackResizeChanged
Property change listener attribute (must be of type function) on-track-resize-changed
Examples

Initialize the data visualization element with the track-resize attribute specified:

<oj-some-dvt track-resize='off'></oj-some-dvt>

Get or set the trackResize property after initialization:

// getter
var value = myComponent.trackResize;

// setter
myComponent.trackResize="off";

translations :Object

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 this component has translations, their documentation immediately follows this doc entry.

Default Value:
  • an object containing all resources relevant to the component, or null if none
Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function) on-translations-changed
Examples

Initialize the component, overriding some translated resources and leaving the others intact:

<!-- Using dot notation -->
<oj-some-element translations.some-key='some value' translations.some-other-key='some other value'></oj-some-element>

<!-- Using JSON notation -->
<oj-some-element translations='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-some-element>

Get or set the translations property after initialization:

// Get one
var value = myComponent.translations.someKey;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myComponent.setProperty('translations.someKey', 'some value');

// Get all
var values = myComponent.translations;

// Set all.  Must list every resource key, as those not listed are lost.
myComponent.translations = {
    someKey: 'some value',
    someOtherKey: 'some other value'
};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Determines whether element zooming is allowed.
Supported Values:
Name Type
"auto" string
"none" string
Default Value:
  • "none"
Names
Item Name
Property zooming
Property change event zoomingChanged
Property change listener attribute (must be of type function) on-zooming-changed
Examples

Initialize the thematic map with the zooming attribute specified:

<oj-thematic-map zooming='auto'></oj-thematic-map>

Get or set the zooming property after initialization:

// getter
var value = myThematicMap.zooming;

// setter
myThematicMap.zooming="auto";

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) → {Object|null}

Returns an object with the following properties for automation testing verification of an area with the specified index in the areas property.
Parameters:
Name Type Description
index number
Properties:
Name Type
color string
label string
selected boolean
tooltip string
Returns:
An object containing properties for the area, or null if none exists.
Type
Object | null

getContextByNode(node) → {Object|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 Description
node Element The child DOM node
Returns:
The context for the DOM node, or null when none is found.
Type
Object | null
Example
 // Returns {'subId': 'oj-some-sub-id', 'componentSpecificProperty': someValue, ...}
var context = myComponent.getContextByNode(nodeInsideElement);
Returns an object with the following properties for automation testing verification of a link with the specified index in the links property.
Parameters:
Name Type Description
index number
Properties:
Name Type
color string
label string
selected boolean
tooltip string
Returns:
An object containing properties for the link, or null if none exists.
Type
Object | null

getMarker(index) → {Object|null}

Returns an object with the following properties for automation testing verification of a marker with the specified index in the markers property.
Parameters:
Name Type Description
index number
Properties:
Name Type
color string
label string
selected boolean
tooltip string
Returns:
An object containing properties for the marker, or null if none exists.
Type
Object | null

getProperty(property) → {*}

Retrieves a value for a property or a single subproperty for complex properties.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
*
Example

Get a single subproperty of a complex property:

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

refresh()

Refreshes the component.

setProperties(properties)

Performs a batch set of properties.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Example

Set a batch of properties:

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

setProperty(property, value)

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value * The new value to set the property to.
Example

Set a single subproperty of a complex property:

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