sy-geo-map
Geo Map
Show geographic locations and magnitudes on a map.
sy-geo-map
Explore the distribution of cities, facilities, or observation sites.
Check the longitude and latitude order. Projection affects the representation of distances and areas.
Base chart tier: Pro. Features such as additional renderers and custom branding have separate entitlement requirements.
| Input | Data description |
|---|---|
data | An array of { longitude, latitude, value?, label? }. |
projection | How geographic coordinates project onto the screen. |
mapRegion | The region shown initially. |
- Run in Components
Change options and view framework-specific code
- Shared installation and integration
Complete implementation example
<div id="chart-container" style="width: 100%; min-width: 0;"></div>
<script type="module">
import { defineCustomElement as define0 } from '@syidax/advanced-pro/components/sy-geo-map.js';
define0();
// Pro: complete registerLicense at app startup using your issued certificate.
// The website preview certificate is not for use in customer apps.
const specs = [
{
"id": "example-chart",
"tag": "sy-geo-map",
"props": {
"data": [
{
"id": "seoul",
"label": "Seoul",
"longitude": 126.98,
"latitude": 37.57,
"value": 80
},
{
"id": "tokyo",
"label": "Tokyo",
"longitude": 139.69,
"latitude": 35.68,
"value": 65
},
{
"id": "taipei",
"label": "Taipei",
"longitude": 121.56,
"latitude": 25.03,
"value": 45
},
{
"id": "singapore",
"label": "Singapore",
"longitude": 103.82,
"latitude": 1.35,
"value": 55
}
],
"mapRegion": "asia",
"mapBackground": "natural-earth",
"projection": "mercator",
"nodeLabels": "show",
"width": 640,
"height": 360,
"brandPosition": "bottom-right",
"brandLogo": ""
}
}
];
const container = document.querySelector('#chart-container');
const elements = specs.map(({ tag, id, props }) => {
const element = document.createElement(tag);
element.id = id;
Object.assign(element, props);
element.setAttribute('aria-label', 'geo-map example chart');
return element;
});
container.replaceChildren(...elements);
const chart = elements.at(-1);
const onEvent = event => {
console.log('nodeClick', event.detail);
};
chart.addEventListener('nodeClick', onEvent);
const observer = new ResizeObserver(([entry]) => {
const width = Math.max(160, Math.floor(entry.contentRect.width));
elements.forEach(element => { element.width = width; });
});
observer.observe(container);
// In an SPA, call this function when the view is disposed.
function disposeChart() {
observer.disconnect();
chart.removeEventListener('nodeClick', onEvent);
container.replaceChildren();
}
</script>Properties
data
An array of { longitude, latitude, value?, label? }.
| Item | Value |
|---|---|
| JavaScript property | data |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GeoMapData |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapData
Type definition
features
Owned geographic polygons and great-circle LineStrings, below data points.
| Item | Value |
|---|---|
| JavaScript property | features |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GeoMapFeatureCollection |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapFeatureCollection
Type definition
polygonColor
Set as an HTML attribute or JavaScript property. type: string.
| Item | Value |
|---|---|
| JavaScript property | polygonColor |
| HTML attribute | polygon-color |
| Type | string |
| Default | '#0d9488' |
polygonOpacity
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | polygonOpacity |
| HTML attribute | polygon-opacity |
| Type | number |
| Default | 0.7 |
connectionWidth
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | connectionWidth |
| HTML attribute | connection-width |
| Type | number |
| Default | 2 |
connectionColor
Set as an HTML attribute or JavaScript property. type: string.
| Item | Value |
|---|---|
| JavaScript property | connectionColor |
| HTML attribute | connection-color |
| Type | string |
| Default | '#7c3aed' |
connectionOpacity
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | connectionOpacity |
| HTML attribute | connection-opacity |
| Type | number |
| Default | 0.85 |
connectionPath
Surface great-circle arcs (default), or flat-map straight routes. On globes, straight lifts the equirectangular route onto the surface.
| Item | Value |
|---|---|
| JavaScript property | connectionPath |
| HTML attribute | connection-path |
| Type | GeoMapConnectionPath |
| Default | 'great-circle' |
| Allowed values | great-circle, straight |
- GeoMapConnectionPath
Type definition
mapColorAxis
Choropleth: feature property to a shared color ramp and numeric legend.
| Item | Value |
|---|---|
| JavaScript property | mapColorAxis |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GeoMapColorAxisInput |
| Default | undefined |
| Literals in the type | auto |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapColorAxisInput
Type definition
mapBubble
Geographic bubbles encode point values by area; object options are property-bound.
| Item | Value |
|---|---|
| JavaScript property | mapBubble |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GeoMapBubbleInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapBubbleInput
Type definition
mapHeat
Bounded screen-space Gaussian density below connections and points.
| Item | Value |
|---|---|
| JavaScript property | mapHeat |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GeoMapHeatInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapHeatInput
Type definition
mapLayers
Layer presentation masks; assign an object property. Hidden sources retain selection and pinned-card identity.
| Item | Value |
|---|---|
| JavaScript property | mapLayers |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GeoMapLayersInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapLayersInput
Type definition
mapLegend
Native buttons for point, polygon, connection and heat visibility.
| Item | Value |
|---|---|
| JavaScript property | mapLegend |
| HTML attribute | map-legend |
| Type | boolean |
| Default | false |
mapLegendLayers
Optional ordered legend subset for geographic specializations; source layers stay intact.
| Item | Value |
|---|---|
| JavaScript property | mapLegendLayers |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | ReadonlyArray<GeoMapLayer> |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapLayer
Type definition
mapLayerNames
Pass as a JavaScript property. type: Partial<Record<GeoMapLayer,string>>.
| Item | Value |
|---|---|
| JavaScript property | mapLayerNames |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | Partial<Record<GeoMapLayer,string>> |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapLayer
Type definition
width
Chart width in pixels. If the container width changes, update width from a ResizeObserver.
| Item | Value |
|---|---|
| JavaScript property | width |
| HTML attribute | width |
| Type | number |
| Default | 900 |
height
Chart height in pixels. Allow space for axes, titles, and the legend.
| Item | Value |
|---|---|
| JavaScript property | height |
| HTML attribute | height |
| Type | number |
| Default | 400 |
brandLogo
The default is the Syidax symbol and wordmark. With the Pro chart.branding entitlement, set none to remove it or provide a PNG, JPEG, or WebP data URL to replace it.
| Item | Value |
|---|---|
| JavaScript property | brandLogo |
| HTML attribute | brand-logo |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
brandPosition
The corner where the logo is anchored. Community and Pro both support all four corners, using the same position on screen and in image exports.
| Item | Value |
|---|---|
| JavaScript property | brandPosition |
| HTML attribute | brand-position |
| Type | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' |
| Default | 'bottom-right' |
| Allowed values | top-left, top-right, bottom-left, bottom-right |
padding
Padding around the coordinate frame in CSS pixels.
| Item | Value |
|---|---|
| JavaScript property | padding |
| HTML attribute | padding |
| Type | number |
| Default | 16 |
projection
How geographic coordinates project onto the screen.
| Item | Value |
|---|---|
| JavaScript property | projection |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GeoMapProjection |
| Default | 'identity' |
| Literals in the type | identity, mercator, equirectangular, albers, orthographic |
- GeoMapProjection
Type definition
mapRegion
The region shown initially.
| Item | Value |
|---|---|
| JavaScript property | mapRegion |
| HTML attribute | map-region |
| Type | GeoMapRegion |
| Default | 'world' |
| Allowed values | world, africa, asia, europe, north-america, south-america, oceania, antarctica |
- GeoMapRegion
Type definition
mapBackground
Bundled public-domain land/coastline data; no runtime map download or API key.
| Item | Value |
|---|---|
| JavaScript property | mapBackground |
| HTML attribute | map-background |
| Type | GeoMapBackground |
| Default | 'natural-earth' |
| Allowed values | none, natural-earth |
- GeoMapBackground
Type definition
mapFixed
Lock geographic dragging: flat maps wrap longitude inside a fixed frame; Albers/Orthographic rotate. Zoom is separate.
| Item | Value |
|---|---|
| JavaScript property | mapFixed |
| HTML attribute | map-fixed |
| Type | boolean |
| Default | false |
crosshair
Geographic crosshair. Bare attribute or {} uses defaults; an object prop or JSON attribute overrides options. Omit/remove the attribute to disable.
| Item | Value |
|---|---|
| JavaScript property | crosshair |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianCrosshairInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianCrosshairInput
Type definition
crosshairSnapDistance
Point-center capture distance in CSS pixels when crosshair.snap is enabled; direct marker hits also snap.
| Item | Value |
|---|---|
| JavaScript property | crosshairSnapDistance |
| HTML attribute | crosshair-snap-distance |
| Type | number |
| Default | 12 |
nodeRadius
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | nodeRadius |
| HTML attribute | node-radius |
| Type | number |
| Default | 5 |
color
Set as an HTML attribute or JavaScript property. type: string.
| Item | Value |
|---|---|
| JavaScript property | color |
| HTML attribute | color |
| Type | string |
| Default | 'auto' |
activeColor
Set as an HTML attribute or JavaScript property. type: string.
| Item | Value |
|---|---|
| JavaScript property | activeColor |
| HTML attribute | active-color |
| Type | string |
| Default | '#f59e0b' |
inactiveOtherPoints
Dim other point/feature glyphs around the focused, hovered or selected source identity. Heat stays unchanged.
| Item | Value |
|---|---|
| JavaScript property | inactiveOtherPoints |
| HTML attribute | inactive-other-points |
| Type | boolean |
| Default | false |
inactivePointOpacity
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | inactivePointOpacity |
| HTML attribute | inactive-point-opacity |
| Type | number |
| Default | .2 |
nodeLabels
Allowed values: auto, show, hide. Default: 'auto'.
| Item | Value |
|---|---|
| JavaScript property | nodeLabels |
| HTML attribute | node-labels |
| Type | GeoMapLabelMode |
| Default | 'auto' |
| Allowed values | auto, show, hide |
- GeoMapLabelMode
Type definition
featureLabels
Optional region and connection names, sharing point-label collision avoidance.
| Item | Value |
|---|---|
| JavaScript property | featureLabels |
| HTML attribute | feature-labels |
| Type | GeoMapLabelMode |
| Default | 'hide' |
| Allowed values | auto, show, hide |
- GeoMapLabelMode
Type definition
featureLabelValue
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | featureLabelValue |
| HTML attribute | feature-label-value |
| Type | boolean |
| Default | false |
nodeLabelValue
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | nodeLabelValue |
| HTML attribute | node-label-value |
| Type | boolean |
| Default | false |
chartTitle
The title inside the chart. Explain the data's unit and meaning alongside it.
| Item | Value |
|---|---|
| JavaScript property | chartTitle |
| HTML attribute | chart-title |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
chartSubtitle
The subtitle inside the chart.
| Item | Value |
|---|---|
| JavaScript property | chartSubtitle |
| HTML attribute | chart-subtitle |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
enableMouseTracking
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | enableMouseTracking |
| HTML attribute | enable-mouse-tracking |
| Type | boolean |
| Default | true |
tooltip
Tooltip settings for pointer-driven values, position, and content.
| Item | Value |
|---|---|
| JavaScript property | tooltip |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianTooltipInput |
| Default | undefined |
| Literals in the type | auto, off |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianTooltipInput
Type definition
tooltipEnabled
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | tooltipEnabled |
| HTML attribute | tooltip-show |
| Type | boolean |
| Default | true |
tooltipFormat
Pass as a JavaScript property. type: (detail: GeoMapHitDetail) => string.
| Item | Value |
|---|---|
| JavaScript property | tooltipFormat |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | (detail: GeoMapHitDetail) => string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapHitDetail
Type definition
featureTooltipFormat
Formats owned polygon/connection metadata; point tooltipFormat remains independent.
| Item | Value |
|---|---|
| JavaScript property | featureTooltipFormat |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | (detail:GeoMapFeatureHitDetail)=>string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapFeatureHitDetail
Type definition
animated
Whether to animate initial display and data changes.
| Item | Value |
|---|---|
| JavaScript property | animated |
| HTML attribute | animate |
| Type | boolean |
| Default | false |
animationDuration
Animation duration in milliseconds.
| Item | Value |
|---|---|
| JavaScript property | animationDuration |
| HTML attribute | animation-duration |
| Type | number |
| Default | 600 |
animationEasing
Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.
| Item | Value |
|---|---|
| JavaScript property | animationEasing |
| HTML attribute | animation-easing |
| Type | GeoMapEasing |
| Default | 'ease-out' |
| Allowed values | linear, ease-out, ease-in, ease-in-out |
- GeoMapEasing
Type definition
animationType
Allowed values: initial, update. Default: undefined.
| Item | Value |
|---|---|
| JavaScript property | animationType |
| HTML attribute | animation-type |
| Type | GeoMapAnimationType |
| Default | undefined |
| Allowed values | initial, update |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapAnimationType
Type definition
streamSource
A stream source for live data. Check the contract for the specific type.
| Item | Value |
|---|---|
| JavaScript property | streamSource |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GeoMapStreamSource |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GeoMapStreamSource
Type definition
streamMax
The maximum number of streaming data points to retain.
| Item | Value |
|---|---|
| JavaScript property | streamMax |
| HTML attribute | stream-max |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
streamWindow
The streaming data range to keep visible.
| Item | Value |
|---|---|
| JavaScript property | streamWindow |
| HTML attribute | stream-window |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
zoom
Settings for zooming and the visible range.
| Item | Value |
|---|---|
| JavaScript property | zoom |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianZoomInput |
| Default | undefined |
| Literals in the type | auto, off, true, false, x, y, xy, inside |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianZoomInput
Type definition
engine
Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.
| Item | Value |
|---|---|
| JavaScript property | engine |
| HTML attribute | engine |
| Type | GeoMapEngineMode |
| Default | 'auto' |
| Allowed values | auto, standard, pro |
- GeoMapEngineMode
Type definition
Events
rendered
Emits rendering results in detail when chart drawing completes.
Event name: rendered. Names are case-sensitive. Read the payload from detail on CustomEvent<GeoMapRenderResult & { tier: GeoMapEngineTier }>.
chart.addEventListener('rendered', event => {
console.log(event.detail); // GeoMapRenderResult & { tier: GeoMapEngineTier }
});- GeoMapRenderResult
Type definition
- GeoMapEngineTier
Type definition
nodeClick
CustomEvent.detail type: GeoMapHitDetail. Event names are case-sensitive.
Event name: nodeClick. Names are case-sensitive. Read the payload from detail on CustomEvent<GeoMapHitDetail>.
chart.addEventListener('nodeClick', event => {
console.log(event.detail); // GeoMapHitDetail
});- GeoMapHitDetail
Type definition
nodeHover
CustomEvent.detail type: GeoMapHitDetail | null. Event names are case-sensitive.
Event name: nodeHover. Names are case-sensitive. Read the payload from detail on CustomEvent<GeoMapHitDetail | null>.
chart.addEventListener('nodeHover', event => {
console.log(event.detail); // GeoMapHitDetail | null
});- GeoMapHitDetail
Type definition
featureClick
CustomEvent.detail type: GeoMapFeatureHitDetail. Event names are case-sensitive.
Event name: featureClick. Names are case-sensitive. Read the payload from detail on CustomEvent<GeoMapFeatureHitDetail>.
chart.addEventListener('featureClick', event => {
console.log(event.detail); // GeoMapFeatureHitDetail
});- GeoMapFeatureHitDetail
Type definition
featureHover
CustomEvent.detail type: GeoMapFeatureHitDetail | null. Event names are case-sensitive.
Event name: featureHover. Names are case-sensitive. Read the payload from detail on CustomEvent<GeoMapFeatureHitDetail | null>.
chart.addEventListener('featureHover', event => {
console.log(event.detail); // GeoMapFeatureHitDetail | null
});- GeoMapFeatureHitDetail
Type definition
featureSelectionChange
CustomEvent.detail type: GeoMapFeatureSelectionChangeEventDetail. Event names are case-sensitive.
Event name: featureSelectionChange. Names are case-sensitive. Read the payload from detail on CustomEvent<GeoMapFeatureSelectionChangeEventDetail>.
chart.addEventListener('featureSelectionChange', event => {
console.log(event.detail); // GeoMapFeatureSelectionChangeEventDetail
});- GeoMapFeatureSelectionChangeEventDetail
Type definition
selectionChanged
CustomEvent.detail type: GeoMapSelectionChangeEventDetail. Event names are case-sensitive.
Event name: selectionChanged. Names are case-sensitive. Read the payload from detail on CustomEvent<GeoMapSelectionChangeEventDetail>.
chart.addEventListener('selectionChanged', event => {
console.log(event.detail); // GeoMapSelectionChangeEventDetail
});- GeoMapSelectionChangeEventDetail
Type definition
pointContextMenu
CustomEvent.detail type: ChartPointContextMenuEventDetail<GeoMapPickDetail>. Event names are case-sensitive.
Event name: pointContextMenu. Names are case-sensitive. Read the payload from detail on CustomEvent<ChartPointContextMenuEventDetail<GeoMapPickDetail>>.
chart.addEventListener('pointContextMenu', event => {
console.log(event.detail); // ChartPointContextMenuEventDetail<GeoMapPickDetail>
});- ChartPointContextMenuEventDetail
Type definition
- GeoMapPickDetail
Type definition
appended
CustomEvent.detail type: { count: number; replaced: number }. Event names are case-sensitive.
Event name: appended. Names are case-sensitive. Read the payload from detail on CustomEvent<{ count: number; replaced: number }>.
chart.addEventListener('appended', event => {
console.log(event.detail); // { count: number; replaced: number }
});windowSlid
CustomEvent.detail type: { dropped: number }. Event names are case-sensitive.
Event name: windowSlid. Names are case-sensitive. Read the payload from detail on CustomEvent<{ dropped: number }>.
chart.addEventListener('windowSlid', event => {
console.log(event.detail); // { dropped: number }
});tooltipShow
Whether to display the built-in tooltip.
Event name: tooltipShow. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianTooltipEventDetail>.
chart.addEventListener('tooltipShow', event => {
console.log(event.detail); // CartesianTooltipEventDetail
});- CartesianTooltipEventDetail
Type definition
tooltipHide
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: tooltipHide. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('tooltipHide', event => {
console.log(event.detail); // void
});tooltipAction
CustomEvent.detail type: CartesianTooltipActionEventDetail. Event names are case-sensitive.
Event name: tooltipAction. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianTooltipActionEventDetail>.
chart.addEventListener('tooltipAction', event => {
console.log(event.detail); // CartesianTooltipActionEventDetail
});- CartesianTooltipActionEventDetail
Type definition
chartAnimationStart
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationStart. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationStart', event => {
console.log(event.detail); // void
});chartAnimationEnd
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationEnd. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationEnd', event => {
console.log(event.detail); // void
});chartAnimationInterrupted
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationInterrupted. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationInterrupted', event => {
console.log(event.detail); // void
});zoomChange
CustomEvent.detail type: CartesianZoomChangeEventDetail. Event names are case-sensitive.
Event name: zoomChange. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianZoomChangeEventDetail>.
chart.addEventListener('zoomChange', event => {
console.log(event.detail); // CartesianZoomChangeEventDetail
});- CartesianZoomChangeEventDetail
Type definition
mapViewChange
CustomEvent.detail type: GeoMapViewChangeEventDetail. Event names are case-sensitive.
Event name: mapViewChange. Names are case-sensitive. Read the payload from detail on CustomEvent<GeoMapViewChangeEventDetail>.
chart.addEventListener('mapViewChange', event => {
console.log(event.detail); // GeoMapViewChangeEventDetail
});- GeoMapViewChangeEventDetail
Type definition
mapLayerChange
CustomEvent.detail type: GeoMapLayerChangeEventDetail. Event names are case-sensitive.
Event name: mapLayerChange. Names are case-sensitive. Read the payload from detail on CustomEvent<GeoMapLayerChangeEventDetail>.
chart.addEventListener('mapLayerChange', event => {
console.log(event.detail); // GeoMapLayerChangeEventDetail
});- GeoMapLayerChangeEventDetail
Type definition
crosshairMove
CustomEvent.detail type: CartesianCrosshairEventDetail | null. Event names are case-sensitive.
Event name: crosshairMove. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianCrosshairEventDetail | null>.
chart.addEventListener('crosshairMove', event => {
console.log(event.detail); // CartesianCrosshairEventDetail | null
});- CartesianCrosshairEventDetail
Type definition
Methods
getMapLayers
An asynchronous method. Check the argument and return types below.
getMapLayers(): Promise<GeoMapLayerDetail[]>Return type: Promise<GeoMapLayerDetail[]>. Call the method after element registration and await its Promise result.
- GeoMapLayerDetail
Type definition
setMapLayerVisible
Immediately mask a layer without restarting active animations, rescaling or reframing. Unknown keys return null.
setMapLayerVisible(layer: GeoMapLayer, visible: boolean): Promise<GeoMapLayerDetail|null>| Arguments | Type | Required |
|---|---|---|
layer | GeoMapLayer | Required |
visible | boolean | Required |
Return type: Promise<GeoMapLayerDetail|null>. Call the method after element registration and await its Promise result.
- GeoMapLayerDetail
Type definition
- GeoMapLayer
Type definition
redraw
Redraw the chart using its current data and options. Inspect the rendered result after the returned Promise resolves.
redraw(): Promise<GeoMapRenderResult>Return type: Promise<GeoMapRenderResult>. Call the method after element registration and await its Promise result.
- GeoMapRenderResult
Type definition
recycleGpu
Release and reacquire the shared GPU surface without resetting data, pins or geographic view. Without the grant (or while frozen) nothing is recycled: no GPU work starts.
recycleGpu(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
getConnections
An asynchronous method. Check the argument and return types below.
getConnections(): Promise<GeoMapConnectionView[]>Return type: Promise<GeoMapConnectionView[]>. Call the method after element registration and await its Promise result.
- GeoMapConnectionView
Type definition
getEngineStatus
Requested engine vs what runs, and why (CHART-ADD-08); a frozen or unlicensed chart reports the license outcome.
getEngineStatus(): Promise<ChartEngineStatus>Return type: Promise<ChartEngineStatus>. Call the method after element registration and await its Promise result.
- ChartEngineStatus
Type definition
getActiveTier
An asynchronous method. Check the argument and return types below.
getActiveTier(): Promise<GeoMapEngineTier>Return type: Promise<GeoMapEngineTier>. Call the method after element registration and await its Promise result.
- GeoMapEngineTier
Type definition
getMapAvailability
Owned current engine status. A Pro decision can be pending before asynchronous device initialization finishes.
getMapAvailability(): Promise<GeoMapAvailabilityDetail>Return type: Promise<GeoMapAvailabilityDetail>. Call the method after element registration and await its Promise result.
- GeoMapAvailabilityDetail
Type definition
setData
Replace the bar set.
setData(data: GeoMapData): Promise<void>| Arguments | Type | Required |
|---|---|---|
data | GeoMapData | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GeoMapData
Type definition
setFeatures
Validate atomically; invalid input rejects and leaves the previous layer intact.
setFeatures(features?: GeoMapFeatureCollection): Promise<void>| Arguments | Type | Required |
|---|---|---|
features | GeoMapFeatureCollection | Optional |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GeoMapFeatureCollection
Type definition
getFeatures
An asynchronous method. Check the argument and return types below.
getFeatures(): Promise<GeoMapFeatureCollection>Return type: Promise<GeoMapFeatureCollection>. Call the method after element registration and await its Promise result.
- GeoMapFeatureCollection
Type definition
getMapColorAxis
An asynchronous method. Check the argument and return types below.
getMapColorAxis(): Promise<GeoMapColorAxisDetail|null>Return type: Promise<GeoMapColorAxisDetail|null>. Call the method after element registration and await its Promise result.
- GeoMapColorAxisDetail
Type definition
getFeatureSelection
An asynchronous method. Check the argument and return types below.
getFeatureSelection(): Promise<GeoMapFeatureSelection>Return type: Promise<GeoMapFeatureSelection>. Call the method after element registration and await its Promise result.
- GeoMapFeatureSelection
Type definition
selectFeatureAt
An asynchronous method. Check the argument and return types below.
selectFeatureAt(index: number): Promise<GeoMapFeatureHitDetail | null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<GeoMapFeatureHitDetail | null>. Call the method after element registration and await its Promise result.
- GeoMapFeatureHitDetail
Type definition
showTooltipAtFeature
An asynchronous method. Check the argument and return types below.
showTooltipAtFeature(index: number): Promise<CartesianTooltipEventDetail | null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<CartesianTooltipEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianTooltipEventDetail
Type definition
parseTopoJSON
Decode a Topology (object or JSON text) into owned GeoJSON; does not change chart data.
parseTopoJSON(input: unknown, objectName?: string): Promise<GeoMapFeatureCollection>| Arguments | Type | Required |
|---|---|---|
input | unknown | Required |
objectName | string | Optional |
Return type: Promise<GeoMapFeatureCollection>. Call the method after element registration and await its Promise result.
- GeoMapFeatureCollection
Type definition
parseGeoJSON
Decode RFC 7946 Geometry, Feature or FeatureCollection into owned features without changing chart data.
parseGeoJSON(input: unknown): Promise<GeoMapFeatureCollection>| Arguments | Type | Required |
|---|---|---|
input | unknown | Required |
Return type: Promise<GeoMapFeatureCollection>. Call the method after element registration and await its Promise result.
- GeoMapFeatureCollection
Type definition
getNodes
An asynchronous method. Check the argument and return types below.
getNodes(): Promise<GeoMapPoint[]>Return type: Promise<GeoMapPoint[]>. Call the method after element registration and await its Promise result.
- GeoMapPoint
Type definition
getNode
An asynchronous method. Check the argument and return types below.
getNode(index: number): Promise<GeoMapPoint | null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<GeoMapPoint | null>. Call the method after element registration and await its Promise result.
- GeoMapPoint
Type definition
getNodeById
An asynchronous method. Check the argument and return types below.
getNodeById(id: string): Promise<GeoMapPoint | null>| Arguments | Type | Required |
|---|---|---|
id | string | Required |
Return type: Promise<GeoMapPoint | null>. Call the method after element registration and await its Promise result.
- GeoMapPoint
Type definition
getNodeCount
An asynchronous method. Check the argument and return types below.
getNodeCount(): Promise<number>Return type: Promise<number>. Call the method after element registration and await its Promise result.
getExtent
An asynchronous method. Check the argument and return types below.
getExtent(): Promise<GeoMapExtent>Return type: Promise<GeoMapExtent>. Call the method after element registration and await its Promise result.
- GeoMapExtent
Type definition
getMapDiagnostics
Current base input and active normalized stream window; not lifetime ingestion counters. Returns an owned snapshot.
getMapDiagnostics(): Promise<GeoMapDiagnostics>Return type: Promise<GeoMapDiagnostics>. Call the method after element registration and await its Promise result.
- GeoMapDiagnostics
Type definition
getLayout
Host-local geometry as shown. Scale fields preserve ellipses under non-uniform viewport zoom.
getLayout(): Promise<GeoMapLayoutResult>Return type: Promise<GeoMapLayoutResult>. Call the method after element registration and await its Promise result.
- GeoMapLayoutResult
Type definition
appendPoint
Append one value to the stream. Check the argument type and the licensing requirements for streaming.
appendPoint(node: GeoMapPointInput): Promise<void>| Arguments | Type | Required |
|---|---|---|
node | GeoMapPointInput | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GeoMapPointInput
Type definition
appendBatch
Append multiple values to the stream. Check the argument type and the licensing requirements for streaming.
appendBatch(nodes: ReadonlyArray<GeoMapPointInput>): Promise<void>| Arguments | Type | Required |
|---|---|---|
nodes | ReadonlyArray<GeoMapPointInput> | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GeoMapPointInput
Type definition
shift
Drop the oldest streamed categories (the data boxes are not the stream).
shift(count: number): Promise<void>| Arguments | Type | Required |
|---|---|---|
count | number | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
replace
Swap the streamed set (replace([]) clears it); the base values never leave. Without chart.streaming the dies upsert into the base like a batch (quietly: no appended, no binChanged, as a ring replace).
replace(nodes: ReadonlyArray<GeoMapPointInput>): Promise<void>| Arguments | Type | Required |
|---|---|---|
nodes | ReadonlyArray<GeoMapPointInput> | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GeoMapPointInput
Type definition
getStreamSource
The stream session's source (Chart Pro): like the stream methods it waits for a license still being confirmed.
getStreamSource(): Promise<GeoMapStreamSource | undefined>Return type: Promise<GeoMapStreamSource | undefined>. Call the method after element registration and await its Promise result.
- GeoMapStreamSource
Type definition
pauseAnimation
Pause the current animation.
pauseAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
resumeAnimation
Resume a paused animation.
resumeAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
replayAnimation
Replay the initial sweep from min → value(s). No-op when animation is off / reduced.
replayAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
setAnimation
An asynchronous method. Check the argument and return types below.
setAnimation(options: { enabled?: boolean; duration?: number; easing?: GeoMapEasing; type?: GeoMapAnimationType }): Promise<void>| Arguments | Type | Required |
|---|---|---|
options | { enabled?: boolean; duration?: number; easing?: GeoMapEasing; type?: GeoMapAnimationType } | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GeoMapEasing
Type definition
- GeoMapAnimationType
Type definition
hitTest
The box under a host-local CSS point (the nearest slot, within half a pitch), or null.
hitTest(cssX: number, cssY: number): Promise<GeoMapPickDetail | null>| Arguments | Type | Required |
|---|---|---|
cssX | number | Required |
cssY | number | Required |
Return type: Promise<GeoMapPickDetail | null>. Call the method after element registration and await its Promise result.
- GeoMapPickDetail
Type definition
selectNodeAt
Select (pin) a node: its neighbourhood stays highlighted after the pointer leaves; a negative or unknown index releases the selection. Emits selectionChanged when it changes.
selectNodeAt(index: number): Promise<GeoMapHitDetail | null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<GeoMapHitDetail | null>. Call the method after element registration and await its Promise result.
- GeoMapHitDetail
Type definition
clearSelection
Release the selection (emits selectionChanged when there was one).
clearSelection(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
getSelection
The selection: the selected node's / link's detail (null = none); its anchors are Pro-derived, refused without a valid license.
getSelection(): Promise<GeoMapSelection>Return type: Promise<GeoMapSelection>. Call the method after element registration and await its Promise result.
- GeoMapSelection
Type definition
showTooltipAtIndex
open the tooltip on a box (the facade's showTooltipAtPoint routes here); null off the boxes or with the tooltip off.
showTooltipAtIndex(index: number): Promise<CartesianTooltipEventDetail | null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<CartesianTooltipEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianTooltipEventDetail
Type definition
showTooltipAtPoint
Open the tooltip for a dot programmatically. pointIndex is the category (row) index; the optional seriesIndex selects a group within that row (defaults to the first visible group's dot in the row). Returns the emitted tooltip detail, or null when no dot resolves / the tooltip is disabled.
showTooltipAtPoint(index: number): Promise<CartesianTooltipEventDetail | null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<CartesianTooltipEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianTooltipEventDetail
Type definition
hideTooltip
Close the currently visible tooltip.
hideTooltip(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
zoomTo
Zoom to explicit windows over the unit extents: x / y as { min, max } or [min, max] (null clears that orientation).
zoomTo(request: CartesianZoomRequest): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
request | CartesianZoomRequest | Required |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
- CartesianZoomRequest
Type definition
zoomBy
Scale the current windows by factor (< 1 zooms in) around anchorFraction (0..1, default centre).
zoomBy(factor: number, anchorFraction?: number): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
factor | number | Required |
anchorFraction | number | Optional |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
panBy
Slide the zoomed windows by unit-extent units ({ x?, y? }); a no-op at the full extent.
panBy(delta: { x?: number; y?: number }): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
delta | { x?: number; y?: number } | Required |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
resetZoom
Reset the zoomed or panned range to the original data range.
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
resetMapView
Restore the configured projection/region and clear map movement and zoom.
resetMapView(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
getMapView
Owned geographic camera, effective region and viewport state.
getMapView(): Promise<GeoMapViewDetail>Return type: Promise<GeoMapViewDetail>. Call the method after element registration and await its Promise result.
- GeoMapViewDetail
Type definition
fitMap
Fit current point/feature geometry with a uniform scale. Empty candidates leave the view unchanged.
fitMap(options?: GeoMapFitOptions): Promise<GeoMapFitDetail|null>| Arguments | Type | Required |
|---|---|---|
options | GeoMapFitOptions | Optional |
Return type: Promise<GeoMapFitDetail|null>. Call the method after element registration and await its Promise result.
- GeoMapFitDetail
Type definition
- GeoMapFitOptions
Type definition
getZoom
Read the current zoom range. Check the return type's nullability and the range for each axis.
getZoom(): Promise<CartesianZoomState | null>Return type: Promise<CartesianZoomState | null>. Call the method after element registration and await its Promise result.
- CartesianZoomState
Type definition
getZoomExtent
The full extent (0 … 1) and key of the diagram's orientations (null before the first layout).
getZoomExtent(request?: CartesianZoomExtentRequest): Promise<CartesianZoomExtentDetail | null>| Arguments | Type | Required |
|---|---|---|
request | CartesianZoomExtentRequest | Optional |
Return type: Promise<CartesianZoomExtentDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomExtentDetail
Type definition
- CartesianZoomExtentRequest
Type definition
getDataTable
Current normalized table, including the retained stream; independent of GPU availability.
getDataTable(): Promise<ChartDataTable>Return type: Promise<ChartDataTable>. Call the method after element registration and await its Promise result.
- ChartDataTable
Type definition
getLabels
the placed node labels in HOST-local CSS px as shown (the plot offset added; under a zoom the labels of the nodes outside the window are left out), shown or hidden with the reason.
getLabels(): Promise<GeoMapLabel[]>Return type: Promise<GeoMapLabel[]>. Call the method after element registration and await its Promise result.
- GeoMapLabel
Type definition
getMapLabels
Full source text and current screen placement for both point and feature names.
getMapLabels(): Promise<GeoMapLabelView>Return type: Promise<GeoMapLabelView>. Call the method after element registration and await its Promise result.
- GeoMapLabelView
Type definition
getMapHeat
An asynchronous method. Check the argument and return types below.
getMapHeat(): Promise<GeoMapHeatDetail|null>Return type: Promise<GeoMapHeatDetail|null>. Call the method after element registration and await its Promise result.
- GeoMapHeatDetail
Type definition
getMapHeatAt
Read aggregate density at a host-relative point; original point/feature selection remains separate.
getMapHeatAt(cssX: number, cssY: number): Promise<GeoMapHeatPointDetail|null>| Arguments | Type | Required |
|---|---|---|
cssX | number | Required |
cssY | number | Required |
Return type: Promise<GeoMapHeatPointDetail|null>. Call the method after element registration and await its Promise result.
- GeoMapHeatPointDetail
Type definition
getMapHeatAtCoordinate
Read the current visible density at geography without requiring a source point or marker. Returns null for invalid, projection-clipped, offscreen or rear-hemisphere coordinates and hidden heat.
getMapHeatAtCoordinate(longitude: number, latitude: number): Promise<GeoMapHeatPointDetail|null>| Arguments | Type | Required |
|---|---|---|
longitude | number | Required |
latitude | number | Required |
Return type: Promise<GeoMapHeatPointDetail|null>. Call the method after element registration and await its Promise result.
- GeoMapHeatPointDetail
Type definition
getMapBubbleScale
An asynchronous method. Check the argument and return types below.
getMapBubbleScale(): Promise<GeoMapBubbleScaleDetail|null>Return type: Promise<GeoMapBubbleScaleDetail|null>. Call the method after element registration and await its Promise result.
- GeoMapBubbleScaleDetail
Type definition
showCrosshairAtData
Quiet geographic synchronization; invalid, hidden or clipped coordinates leave no guide.
showCrosshairAtData(request: {dataX:number;dataY:number}): Promise<boolean>| Arguments | Type | Required |
|---|---|---|
request | {dataX:number;dataY:number} | Required |
Return type: Promise<boolean>. Call the method after element registration and await its Promise result.
hideCrosshair
hide the crosshair shown by showCrosshairAt (or the pointer's).
hideCrosshair(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.