sy-geo-map

Geo Map

지리적 위치와 규모를 지도 위에 표시합니다.

sy-geo-map

도시·시설·관측 지점의 분포를 탐색하세요.

경도와 위도의 순서를 확인하세요. 투영법에 따라 거리와 면적의 표현이 달라집니다.

기본 차트 등급: Pro. 추가 렌더러·커스텀 브랜딩 등 기능의 권한은 별도입니다.

입력데이터 설명
data{ longitude, latitude, value?, label? } 배열입니다.
projection지도 좌표를 화면으로 투영하는 방식입니다.
mapRegion초기에 보여줄 지역입니다.

전체 적용 예제

html
<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: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
  // 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-geo-map",
      "props": {
        "data": [
          {
            "id": "seoul",
            "label": "서울",
            "longitude": 126.98,
            "latitude": 37.57,
            "value": 80
          },
          {
            "id": "tokyo",
            "label": "도쿄",
            "longitude": 139.69,
            "latitude": 35.68,
            "value": 65
          },
          {
            "id": "taipei",
            "label": "타이베이",
            "longitude": 121.56,
            "latitude": 25.03,
            "value": 45
          },
          {
            "id": "singapore",
            "label": "싱가포르",
            "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 예제 차트');
    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);

  // SPA에서는 화면이 해제될 때 이 함수를 호출하세요.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('nodeClick', onEvent);
    container.replaceChildren();
  }
</script>

Properties

data

{ longitude, latitude, value?, label? } 배열입니다.

항목값
JavaScript 프로퍼티data
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입GeoMapData
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

features

Owned geographic polygons and great-circle LineStrings, below data points.

항목값
JavaScript 프로퍼티features
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입GeoMapFeatureCollection
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

polygonColor

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.

항목값
JavaScript 프로퍼티polygonColor
HTML attributepolygon-color
타입string
기본값'#0d9488'

polygonOpacity

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.

항목값
JavaScript 프로퍼티polygonOpacity
HTML attributepolygon-opacity
타입number
기본값0.7

connectionWidth

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.

항목값
JavaScript 프로퍼티connectionWidth
HTML attributeconnection-width
타입number
기본값2

connectionColor

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.

항목값
JavaScript 프로퍼티connectionColor
HTML attributeconnection-color
타입string
기본값'#7c3aed'

connectionOpacity

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.

항목값
JavaScript 프로퍼티connectionOpacity
HTML attributeconnection-opacity
타입number
기본값0.85

connectionPath

Surface great-circle arcs (default), or flat-map straight routes. On globes, straight lifts the equirectangular route onto the surface.

항목값
JavaScript 프로퍼티connectionPath
HTML attributeconnection-path
타입GeoMapConnectionPath
기본값'great-circle'
허용값great-circle, straight

mapColorAxis

Choropleth: feature property to a shared color ramp and numeric legend.

항목값
JavaScript 프로퍼티mapColorAxis
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입GeoMapColorAxisInput
기본값undefined
타입에 포함된 리터럴auto

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

mapBubble

Geographic bubbles encode point values by area; object options are property-bound.

항목값
JavaScript 프로퍼티mapBubble
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입GeoMapBubbleInput
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

mapHeat

Bounded screen-space Gaussian density below connections and points.

항목값
JavaScript 프로퍼티mapHeat
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입GeoMapHeatInput
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

mapLayers

Layer presentation masks; assign an object property. Hidden sources retain selection and pinned-card identity.

항목값
JavaScript 프로퍼티mapLayers
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입GeoMapLayersInput
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

mapLegend

Native buttons for point, polygon, connection and heat visibility.

항목값
JavaScript 프로퍼티mapLegend
HTML attributemap-legend
타입boolean
기본값false

mapLegendLayers

Optional ordered legend subset for geographic specializations; source layers stay intact.

항목값
JavaScript 프로퍼티mapLegendLayers
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입ReadonlyArray<GeoMapLayer>
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

mapLayerNames

JavaScript 프로퍼티로 전달합니다. 타입: Partial<Record<GeoMapLayer,string>>.

항목값
JavaScript 프로퍼티mapLayerNames
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입Partial<Record<GeoMapLayer,string>>
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

width

차트의 너비를 px 단위로 지정합니다. 컨테이너 너비가 변하는 앱에서는 ResizeObserver에서 width를 갱신하세요.

항목값
JavaScript 프로퍼티width
HTML attributewidth
타입number
기본값900

height

차트의 높이를 px 단위로 지정합니다. 축, 제목과 범례가 차지하는 공간을 함께 고려하세요.

항목값
JavaScript 프로퍼티height
HTML attributeheight
타입number
기본값400

brandPosition

로고를 고정할 코너입니다. Community·Pro 모두 네 코너 중 하나를 선택할 수 있으며 화면과 이미지 내보내기에 같은 위치를 사용합니다.

항목값
JavaScript 프로퍼티brandPosition
HTML attributebrand-position
타입'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
기본값'bottom-right'
허용값top-left, top-right, bottom-left, bottom-right

padding

Padding around the coordinate frame in CSS pixels.

항목값
JavaScript 프로퍼티padding
HTML attributepadding
타입number
기본값16

projection

지도 좌표를 화면으로 투영하는 방식입니다.

항목값
JavaScript 프로퍼티projection
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입GeoMapProjection
기본값'identity'
타입에 포함된 리터럴identity, mercator, equirectangular, albers, orthographic

mapRegion

초기에 보여줄 지역입니다.

항목값
JavaScript 프로퍼티mapRegion
HTML attributemap-region
타입GeoMapRegion
기본값'world'
허용값world, africa, asia, europe, north-america, south-america, oceania, antarctica

mapBackground

Bundled public-domain land/coastline data; no runtime map download or API key.

항목값
JavaScript 프로퍼티mapBackground
HTML attributemap-background
타입GeoMapBackground
기본값'natural-earth'
허용값none, natural-earth

mapFixed

Lock geographic dragging: flat maps wrap longitude inside a fixed frame; Albers/Orthographic rotate. Zoom is separate.

항목값
JavaScript 프로퍼티mapFixed
HTML attributemap-fixed
타입boolean
기본값false

crosshair

Geographic crosshair. Bare attribute or {} uses defaults; an object prop or JSON attribute overrides options. Omit/remove the attribute to disable.

항목값
JavaScript 프로퍼티crosshair
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입CartesianCrosshairInput
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

crosshairSnapDistance

Point-center capture distance in CSS pixels when crosshair.snap is enabled; direct marker hits also snap.

항목값
JavaScript 프로퍼티crosshairSnapDistance
HTML attributecrosshair-snap-distance
타입number
기본값12

nodeRadius

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.

항목값
JavaScript 프로퍼티nodeRadius
HTML attributenode-radius
타입number
기본값5

color

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.

항목값
JavaScript 프로퍼티color
HTML attributecolor
타입string
기본값'auto'

activeColor

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.

항목값
JavaScript 프로퍼티activeColor
HTML attributeactive-color
타입string
기본값'#f59e0b'

inactiveOtherPoints

Dim other point/feature glyphs around the focused, hovered or selected source identity. Heat stays unchanged.

항목값
JavaScript 프로퍼티inactiveOtherPoints
HTML attributeinactive-other-points
타입boolean
기본값false

inactivePointOpacity

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.

항목값
JavaScript 프로퍼티inactivePointOpacity
HTML attributeinactive-point-opacity
타입number
기본값.2

nodeLabels

허용값: auto, show, hide. 기본값: 'auto'.

항목값
JavaScript 프로퍼티nodeLabels
HTML attributenode-labels
타입GeoMapLabelMode
기본값'auto'
허용값auto, show, hide

featureLabels

Optional region and connection names, sharing point-label collision avoidance.

항목값
JavaScript 프로퍼티featureLabels
HTML attributefeature-labels
타입GeoMapLabelMode
기본값'hide'
허용값auto, show, hide

featureLabelValue

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.

항목값
JavaScript 프로퍼티featureLabelValue
HTML attributefeature-label-value
타입boolean
기본값false

nodeLabelValue

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.

항목값
JavaScript 프로퍼티nodeLabelValue
HTML attributenode-label-value
타입boolean
기본값false

chartTitle

차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요.

항목값
JavaScript 프로퍼티chartTitle
HTML attributechart-title
타입string
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

chartSubtitle

차트 내부 부제목입니다.

항목값
JavaScript 프로퍼티chartSubtitle
HTML attributechart-subtitle
타입string
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

enableMouseTracking

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.

항목값
JavaScript 프로퍼티enableMouseTracking
HTML attributeenable-mouse-tracking
타입boolean
기본값true

tooltip

포인터에 따라 표시할 값, 위치, 내용의 툴팁 설정입니다.

항목값
JavaScript 프로퍼티tooltip
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입CartesianTooltipInput
기본값undefined
타입에 포함된 리터럴auto, off

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

tooltipEnabled

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.

항목값
JavaScript 프로퍼티tooltipEnabled
HTML attributetooltip-show
타입boolean
기본값true

tooltipFormat

JavaScript 프로퍼티로 전달합니다. 타입: (detail: GeoMapHitDetail) => string.

항목값
JavaScript 프로퍼티tooltipFormat
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입(detail: GeoMapHitDetail) => string
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

featureTooltipFormat

Formats owned polygon/connection metadata; point tooltipFormat remains independent.

항목값
JavaScript 프로퍼티featureTooltipFormat
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입(detail:GeoMapFeatureHitDetail)=>string
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

animated

초기 표시와 데이터 변경의 애니메이션 사용 여부입니다.

항목값
JavaScript 프로퍼티animated
HTML attributeanimate
타입boolean
기본값false

animationDuration

애니메이션 지속 시간(ms).

항목값
JavaScript 프로퍼티animationDuration
HTML attributeanimation-duration
타입number
기본값600

animationEasing

허용값: linear, ease-out, ease-in, ease-in-out. 기본값: 'ease-out'.

항목값
JavaScript 프로퍼티animationEasing
HTML attributeanimation-easing
타입GeoMapEasing
기본값'ease-out'
허용값linear, ease-out, ease-in, ease-in-out

animationType

허용값: initial, update. 기본값: undefined.

항목값
JavaScript 프로퍼티animationType
HTML attributeanimation-type
타입GeoMapAnimationType
기본값undefined
허용값initial, update

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

streamSource

실시간 데이터를 전달하는 스트림 소스입니다. 해당 타입의 계약을 확인하세요.

항목값
JavaScript 프로퍼티streamSource
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입GeoMapStreamSource
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

streamMax

보관할 스트리밍 데이터의 최대 수입니다.

항목값
JavaScript 프로퍼티streamMax
HTML attributestream-max
타입number
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

streamWindow

화면에 유지할 스트리밍 데이터 구간입니다.

항목값
JavaScript 프로퍼티streamWindow
HTML attributestream-window
타입number
기본값undefined

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

zoom

확대·축소와 표시 범위의 동작 설정입니다.

항목값
JavaScript 프로퍼티zoom
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입CartesianZoomInput
기본값undefined
타입에 포함된 리터럴auto, off, true, false, x, y, xy, inside

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

engine

auto·standard·pro 렌더러 선택입니다. 엔진 선택은 차트 종류의 Pro 사용 권한과 별개입니다.

항목값
JavaScript 프로퍼티engine
HTML attributeengine
타입GeoMapEngineMode
기본값'auto'
허용값auto, standard, pro

unavailable

허용값: fallback, error. 기본값: 'fallback'.

항목값
JavaScript 프로퍼티unavailable
HTML attributeunavailable
타입GeoMapUnavailableBehaviour
기본값'fallback'
허용값fallback, error

Events

rendered

차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다.

이벤트 이름: rendered. 대소문자를 구분합니다. payload는 CustomEvent<GeoMapRenderResult & { tier: GeoMapEngineTier }>의 detail에서 읽습니다.

javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // GeoMapRenderResult & { tier: GeoMapEngineTier }
});

nodeClick

CustomEvent.detail 타입: GeoMapHitDetail. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: nodeClick. 대소문자를 구분합니다. payload는 CustomEvent<GeoMapHitDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('nodeClick', event => {
  console.log(event.detail); // GeoMapHitDetail
});

nodeHover

CustomEvent.detail 타입: GeoMapHitDetail | null. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: nodeHover. 대소문자를 구분합니다. payload는 CustomEvent<GeoMapHitDetail | null>의 detail에서 읽습니다.

javascript
chart.addEventListener('nodeHover', event => {
  console.log(event.detail); // GeoMapHitDetail | null
});

featureClick

CustomEvent.detail 타입: GeoMapFeatureHitDetail. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: featureClick. 대소문자를 구분합니다. payload는 CustomEvent<GeoMapFeatureHitDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('featureClick', event => {
  console.log(event.detail); // GeoMapFeatureHitDetail
});

featureHover

CustomEvent.detail 타입: GeoMapFeatureHitDetail | null. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: featureHover. 대소문자를 구분합니다. payload는 CustomEvent<GeoMapFeatureHitDetail | null>의 detail에서 읽습니다.

javascript
chart.addEventListener('featureHover', event => {
  console.log(event.detail); // GeoMapFeatureHitDetail | null
});

featureSelectionChange

CustomEvent.detail 타입: GeoMapFeatureSelectionChangeEventDetail. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: featureSelectionChange. 대소문자를 구분합니다. payload는 CustomEvent<GeoMapFeatureSelectionChangeEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('featureSelectionChange', event => {
  console.log(event.detail); // GeoMapFeatureSelectionChangeEventDetail
});

selectionChanged

CustomEvent.detail 타입: GeoMapSelectionChangeEventDetail. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: selectionChanged. 대소문자를 구분합니다. payload는 CustomEvent<GeoMapSelectionChangeEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('selectionChanged', event => {
  console.log(event.detail); // GeoMapSelectionChangeEventDetail
});

pointContextMenu

CustomEvent.detail 타입: ChartPointContextMenuEventDetail<GeoMapPickDetail>. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: pointContextMenu. 대소문자를 구분합니다. payload는 CustomEvent<ChartPointContextMenuEventDetail<GeoMapPickDetail>>의 detail에서 읽습니다.

javascript
chart.addEventListener('pointContextMenu', event => {
  console.log(event.detail); // ChartPointContextMenuEventDetail<GeoMapPickDetail>
});

appended

CustomEvent.detail 타입: { count: number; replaced: number }. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: appended. 대소문자를 구분합니다. payload는 CustomEvent<{ count: number; replaced: number }>의 detail에서 읽습니다.

javascript
chart.addEventListener('appended', event => {
  console.log(event.detail); // { count: number; replaced: number }
});

windowSlid

CustomEvent.detail 타입: { dropped: number }. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: windowSlid. 대소문자를 구분합니다. payload는 CustomEvent<{ dropped: number }>의 detail에서 읽습니다.

javascript
chart.addEventListener('windowSlid', event => {
  console.log(event.detail); // { dropped: number }
});

tooltipShow

내장 툴팁 표시 여부입니다.

이벤트 이름: tooltipShow. 대소문자를 구분합니다. payload는 CustomEvent<CartesianTooltipEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('tooltipShow', event => {
  console.log(event.detail); // CartesianTooltipEventDetail
});

tooltipHide

CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: tooltipHide. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.

javascript
chart.addEventListener('tooltipHide', event => {
  console.log(event.detail); // void
});

tooltipAction

CustomEvent.detail 타입: CartesianTooltipActionEventDetail. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: tooltipAction. 대소문자를 구분합니다. payload는 CustomEvent<CartesianTooltipActionEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('tooltipAction', event => {
  console.log(event.detail); // CartesianTooltipActionEventDetail
});

chartAnimationStart

CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: chartAnimationStart. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.

javascript
chart.addEventListener('chartAnimationStart', event => {
  console.log(event.detail); // void
});

chartAnimationEnd

CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: chartAnimationEnd. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.

javascript
chart.addEventListener('chartAnimationEnd', event => {
  console.log(event.detail); // void
});

chartAnimationInterrupted

CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: chartAnimationInterrupted. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.

javascript
chart.addEventListener('chartAnimationInterrupted', event => {
  console.log(event.detail); // void
});

zoomChange

CustomEvent.detail 타입: CartesianZoomChangeEventDetail. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: zoomChange. 대소문자를 구분합니다. payload는 CustomEvent<CartesianZoomChangeEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('zoomChange', event => {
  console.log(event.detail); // CartesianZoomChangeEventDetail
});

mapViewChange

CustomEvent.detail 타입: GeoMapViewChangeEventDetail. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: mapViewChange. 대소문자를 구분합니다. payload는 CustomEvent<GeoMapViewChangeEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('mapViewChange', event => {
  console.log(event.detail); // GeoMapViewChangeEventDetail
});

mapLayerChange

CustomEvent.detail 타입: GeoMapLayerChangeEventDetail. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: mapLayerChange. 대소문자를 구분합니다. payload는 CustomEvent<GeoMapLayerChangeEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('mapLayerChange', event => {
  console.log(event.detail); // GeoMapLayerChangeEventDetail
});

crosshairMove

CustomEvent.detail 타입: CartesianCrosshairEventDetail | null. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: crosshairMove. 대소문자를 구분합니다. payload는 CustomEvent<CartesianCrosshairEventDetail | null>의 detail에서 읽습니다.

javascript
chart.addEventListener('crosshairMove', event => {
  console.log(event.detail); // CartesianCrosshairEventDetail | null
});

Methods

getMapLayers

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getMapLayers(): Promise<GeoMapLayerDetail[]>

반환 타입: Promise<GeoMapLayerDetail[]>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

setMapLayerVisible

Immediately mask a layer without restarting active animations, rescaling or reframing. Unknown keys return null.

typescript
setMapLayerVisible(layer: GeoMapLayer, visible: boolean): Promise<GeoMapLayerDetail|null>
인수타입필수 여부
layerGeoMapLayer필수
visibleboolean필수

반환 타입: Promise<GeoMapLayerDetail|null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

redraw

현재 데이터와 옵션으로 차트를 다시 그립니다. 반환되는 Promise가 완료되면 렌더링 결과를 확인할 수 있습니다.

typescript
redraw(): Promise<GeoMapRenderResult>

반환 타입: Promise<GeoMapRenderResult>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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.

typescript
recycleGpu(): Promise<void>

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getConnections

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getConnections(): Promise<GeoMapConnectionView[]>

반환 타입: Promise<GeoMapConnectionView[]>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getEngineStatus

Requested engine vs what runs, and why (CHART-ADD-08); a frozen or unlicensed chart reports the license outcome.

typescript
getEngineStatus(): Promise<ChartEngineStatus>

반환 타입: Promise<ChartEngineStatus>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getActiveTier

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getActiveTier(): Promise<GeoMapEngineTier>

반환 타입: Promise<GeoMapEngineTier>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getUnavailableReason

Why the WebGPU renderer could not run (the fallback notice's reason); undefined when nothing fell back.

typescript
getUnavailableReason(): Promise<string | undefined>

반환 타입: Promise<string | undefined>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getMapAvailability

Owned current engine status. A Pro decision can be pending before asynchronous device initialization finishes.

typescript
getMapAvailability(): Promise<GeoMapAvailabilityDetail>

반환 타입: Promise<GeoMapAvailabilityDetail>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

setData

Replace the bar set.

typescript
setData(data: GeoMapData): Promise<void>
인수타입필수 여부
dataGeoMapData필수

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

setFeatures

Validate atomically; invalid input rejects and leaves the previous layer intact.

typescript
setFeatures(features?: GeoMapFeatureCollection): Promise<void>
인수타입필수 여부
featuresGeoMapFeatureCollection선택

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getFeatures

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getFeatures(): Promise<GeoMapFeatureCollection>

반환 타입: Promise<GeoMapFeatureCollection>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getMapColorAxis

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getMapColorAxis(): Promise<GeoMapColorAxisDetail|null>

반환 타입: Promise<GeoMapColorAxisDetail|null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getFeatureSelection

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getFeatureSelection(): Promise<GeoMapFeatureSelection>

반환 타입: Promise<GeoMapFeatureSelection>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

selectFeatureAt

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
selectFeatureAt(index: number): Promise<GeoMapFeatureHitDetail | null>
인수타입필수 여부
indexnumber필수

반환 타입: Promise<GeoMapFeatureHitDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

showTooltipAtFeature

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
showTooltipAtFeature(index: number): Promise<CartesianTooltipEventDetail | null>
인수타입필수 여부
indexnumber필수

반환 타입: Promise<CartesianTooltipEventDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

parseTopoJSON

Decode a Topology (object or JSON text) into owned GeoJSON; does not change chart data.

typescript
parseTopoJSON(input: unknown, objectName?: string): Promise<GeoMapFeatureCollection>
인수타입필수 여부
inputunknown필수
objectNamestring선택

반환 타입: Promise<GeoMapFeatureCollection>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

parseGeoJSON

Decode RFC 7946 Geometry, Feature or FeatureCollection into owned features without changing chart data.

typescript
parseGeoJSON(input: unknown): Promise<GeoMapFeatureCollection>
인수타입필수 여부
inputunknown필수

반환 타입: Promise<GeoMapFeatureCollection>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getNodes

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getNodes(): Promise<GeoMapPoint[]>

반환 타입: Promise<GeoMapPoint[]>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getNode

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getNode(index: number): Promise<GeoMapPoint | null>
인수타입필수 여부
indexnumber필수

반환 타입: Promise<GeoMapPoint | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getNodeById

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getNodeById(id: string): Promise<GeoMapPoint | null>
인수타입필수 여부
idstring필수

반환 타입: Promise<GeoMapPoint | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getNodeCount

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getNodeCount(): Promise<number>

반환 타입: Promise<number>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getExtent

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getExtent(): Promise<GeoMapExtent>

반환 타입: Promise<GeoMapExtent>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getMapDiagnostics

Current base input and active normalized stream window; not lifetime ingestion counters. Returns an owned snapshot.

typescript
getMapDiagnostics(): Promise<GeoMapDiagnostics>

반환 타입: Promise<GeoMapDiagnostics>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getLayout

Host-local geometry as shown. Scale fields preserve ellipses under non-uniform viewport zoom.

typescript
getLayout(): Promise<GeoMapLayoutResult>

반환 타입: Promise<GeoMapLayoutResult>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

appendPoint

스트림에 값 하나를 추가합니다. 메서드 인수 타입과 스트리밍 기능의 라이선스 조건을 확인하세요.

typescript
appendPoint(node: GeoMapPointInput): Promise<void>
인수타입필수 여부
nodeGeoMapPointInput필수

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

appendBatch

스트림에 여러 값을 한 번에 추가합니다. 메서드 인수 타입과 스트리밍 기능의 라이선스 조건을 확인하세요.

typescript
appendBatch(nodes: ReadonlyArray<GeoMapPointInput>): Promise<void>
인수타입필수 여부
nodesReadonlyArray<GeoMapPointInput>필수

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

shift

Drop the oldest streamed categories (the data boxes are not the stream).

typescript
shift(count: number): Promise<void>
인수타입필수 여부
countnumber필수

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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).

typescript
replace(nodes: ReadonlyArray<GeoMapPointInput>): Promise<void>
인수타입필수 여부
nodesReadonlyArray<GeoMapPointInput>필수

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getStreamSource

The stream session's source (Chart Pro): like the stream methods it waits for a license still being confirmed.

typescript
getStreamSource(): Promise<GeoMapStreamSource | undefined>

반환 타입: Promise<GeoMapStreamSource | undefined>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

pauseAnimation

진행 중인 애니메이션을 일시 정지합니다.

typescript
pauseAnimation(): Promise<void>

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

resumeAnimation

일시 정지한 애니메이션을 다시 진행합니다.

typescript
resumeAnimation(): Promise<void>

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

replayAnimation

Replay the initial sweep from min → value(s). No-op when animation is off / reduced.

typescript
replayAnimation(): Promise<void>

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

setAnimation

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
setAnimation(options: { enabled?: boolean; duration?: number; easing?: GeoMapEasing; type?: GeoMapAnimationType }): Promise<void>
인수타입필수 여부
options{ enabled?: boolean; duration?: number; easing?: GeoMapEasing; type?: GeoMapAnimationType }필수

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

hitTest

The box under a host-local CSS point (the nearest slot, within half a pitch), or null.

typescript
hitTest(cssX: number, cssY: number): Promise<GeoMapPickDetail | null>
인수타입필수 여부
cssXnumber필수
cssYnumber필수

반환 타입: Promise<GeoMapPickDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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.

typescript
selectNodeAt(index: number): Promise<GeoMapHitDetail | null>
인수타입필수 여부
indexnumber필수

반환 타입: Promise<GeoMapHitDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

clearSelection

Release the selection (emits selectionChanged when there was one).

typescript
clearSelection(): Promise<void>

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getSelection

The selection: the selected node's / link's detail (null = none); its anchors are Pro-derived, refused without a valid license.

typescript
getSelection(): Promise<GeoMapSelection>

반환 타입: Promise<GeoMapSelection>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

showTooltipAtIndex

open the tooltip on a box (the facade's showTooltipAtPoint routes here); null off the boxes or with the tooltip off.

typescript
showTooltipAtIndex(index: number): Promise<CartesianTooltipEventDetail | null>
인수타입필수 여부
indexnumber필수

반환 타입: Promise<CartesianTooltipEventDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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.

typescript
showTooltipAtPoint(index: number): Promise<CartesianTooltipEventDetail | null>
인수타입필수 여부
indexnumber필수

반환 타입: Promise<CartesianTooltipEventDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

hideTooltip

현재 표시 중인 툴팁을 닫습니다.

typescript
hideTooltip(): Promise<void>

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

zoomTo

Zoom to explicit windows over the unit extents: x / y as { min, max } or [min, max] (null clears that orientation).

typescript
zoomTo(request: CartesianZoomRequest): Promise<CartesianZoomChangeEventDetail | null>
인수타입필수 여부
requestCartesianZoomRequest필수

반환 타입: Promise<CartesianZoomChangeEventDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

zoomBy

Scale the current windows by factor (< 1 zooms in) around anchorFraction (0..1, default centre).

typescript
zoomBy(factor: number, anchorFraction?: number): Promise<CartesianZoomChangeEventDetail | null>
인수타입필수 여부
factornumber필수
anchorFractionnumber선택

반환 타입: Promise<CartesianZoomChangeEventDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

panBy

Slide the zoomed windows by unit-extent units ({ x?, y? }); a no-op at the full extent.

typescript
panBy(delta: { x?: number; y?: number }): Promise<CartesianZoomChangeEventDetail | null>
인수타입필수 여부
delta{ x?: number; y?: number }필수

반환 타입: Promise<CartesianZoomChangeEventDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

resetZoom

확대·이동한 범위를 초기 데이터 범위로 되돌립니다.

typescript
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>

반환 타입: Promise<CartesianZoomChangeEventDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

resetMapView

Restore the configured projection/region and clear map movement and zoom.

typescript
resetMapView(): Promise<void>

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getMapView

Owned geographic camera, effective region and viewport state.

typescript
getMapView(): Promise<GeoMapViewDetail>

반환 타입: Promise<GeoMapViewDetail>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

fitMap

Fit current point/feature geometry with a uniform scale. Empty candidates leave the view unchanged.

typescript
fitMap(options?: GeoMapFitOptions): Promise<GeoMapFitDetail|null>
인수타입필수 여부
optionsGeoMapFitOptions선택

반환 타입: Promise<GeoMapFitDetail|null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getZoom

현재 확대 범위를 읽습니다. 반환 타입의 null 허용 여부와 축별 범위를 확인하세요.

typescript
getZoom(): Promise<CartesianZoomState | null>

반환 타입: Promise<CartesianZoomState | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getZoomExtent

The full extent (0 … 1) and key of the diagram's orientations (null before the first layout).

typescript
getZoomExtent(request?: CartesianZoomExtentRequest): Promise<CartesianZoomExtentDetail | null>
인수타입필수 여부
requestCartesianZoomExtentRequest선택

반환 타입: Promise<CartesianZoomExtentDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getDataTable

Current normalized table, including the retained stream; independent of GPU availability.

typescript
getDataTable(): Promise<ChartDataTable>

반환 타입: Promise<ChartDataTable>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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.

typescript
getLabels(): Promise<GeoMapLabel[]>

반환 타입: Promise<GeoMapLabel[]>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getMapLabels

Full source text and current screen placement for both point and feature names.

typescript
getMapLabels(): Promise<GeoMapLabelView>

반환 타입: Promise<GeoMapLabelView>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getMapHeat

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getMapHeat(): Promise<GeoMapHeatDetail|null>

반환 타입: Promise<GeoMapHeatDetail|null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getMapHeatAt

Read aggregate density at a host-relative point; original point/feature selection remains separate.

typescript
getMapHeatAt(cssX: number, cssY: number): Promise<GeoMapHeatPointDetail|null>
인수타입필수 여부
cssXnumber필수
cssYnumber필수

반환 타입: Promise<GeoMapHeatPointDetail|null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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.

typescript
getMapHeatAtCoordinate(longitude: number, latitude: number): Promise<GeoMapHeatPointDetail|null>
인수타입필수 여부
longitudenumber필수
latitudenumber필수

반환 타입: Promise<GeoMapHeatPointDetail|null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

getMapBubbleScale

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

typescript
getMapBubbleScale(): Promise<GeoMapBubbleScaleDetail|null>

반환 타입: Promise<GeoMapBubbleScaleDetail|null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

showCrosshairAtData

Quiet geographic synchronization; invalid, hidden or clipped coordinates leave no guide.

typescript
showCrosshairAtData(request: {dataX:number;dataY:number}): Promise<boolean>
인수타입필수 여부
request{dataX:number;dataY:number}필수

반환 타입: Promise<boolean>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

hideCrosshair

hide the crosshair shown by showCrosshairAt (or the pointer's).

typescript
hideCrosshair(): Promise<void>

반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.