Image Map

Image Map 위젯은 타일 기반 지리 지도 대신 사용자 지정 이미지 배경에 엔티티를 표시합니다. 평면도, 장비 배치도 등 현장 도면을 올린 다음, HMI 장치의 실시간 텔레메트리에 연결한 마커, 다각형, 원을 그 위에 놓습니다.

실내 위치 파악, 스마트 빌딩 시각화, 주차장 감시, 공장 배치도 등 지리 지도가 알맞은 배경이 아닌 경우에 씁니다.

주요 기능

Image Map은 MX On Cloud의 지도 위젯 네 가지 중 하나이며, 위젯마다 쓰임새가 다릅니다:

위젯	주요 용도
Map	지리 타일 지도에 현재 엔티티 위치를 실시간으로 표시합니다.
Image Map	사용자 지정 배경 이미지를 씁니다. 평면도, 주차장, 실내 배치도에 알맞습니다.
Trip Map	타임라인 제어를 모두 갖춘 경로 애니메이션 재생. 움직임을 단계별로 분석할 때 알맞습니다.
Route Map	과거 경로 전체를 고정된 경로 선으로 그립니다. 전체 이동을 한눈에 검토할 때 알맞습니다.

Image Map만의 특징:

올린 이미지를 무엇이든 지도 배경으로 씁니다(평면도, 도면, 회로도).
엔티티 위치를 위도/경도가 아니라 상대 좌표(0~1)로 정합니다.
대화형 편집을 지원해 위젯에서 바로 마커, 다각형, 원을 놓고, 옮기고, 지울 수 있습니다.
마커, 다각형, 원, Polylines 오버레이를 지원합니다.

위젯 추가

대시보드를 열고 수정 모드로 바꿉니다.
위쪽의 위젯 추가를 클릭하거나, 화면 가운데의 위젯 추가 아이콘을 클릭합니다.
Maps 위젯 번들을 엽니다.
Image Map을 선택합니다.
위젯 설정을 마친 다음 추가를 클릭합니다.

지도 유형

Image Map은 늘 이미지를 배경으로 씁니다. 이미지 소스를 설정합니다:

이미지 소스 — 이미지: 내 컴퓨터에서 고정 이미지를 올리거나 MX On Cloud 이미지 갤러리에서 고릅니다. PNG, JPEG 등 흔한 형식을 지원합니다.
이미지 소스 — 엔터티 키: 엔티티 속성이나 텔레메트리 값에서 배경 이미지를 동적으로 불러옵니다.
- 소스 엔터티 별칭: 이미지 URL 키를 가진 엔티티 별칭.
- 이미지 URL 키: 값이 이미지 URL인 속성이나 텔레메트리 키.

엔티티마다 다른 평면도를 보여 주거나 실행 중에 배경 이미지를 바꿔야 할 때 엔터티 키를 씁니다.

오버레이

오버레이는 이미지 위에 놓이는 시각 요소입니다. 오버레이 유형마다 자체 데이터 소스에 연결되고 따로 설정합니다.

마커는 개별 엔티티(센서, HMI 장치, 자산)를 나타내며, 이미지의 특정 위치에 아이콘으로 표시됩니다.

마커 추가하기: 마커 추가를 클릭하고 데이터 소스를 선택한 다음 위치 키를 정하고 저장을 클릭합니다.

데이터 소스

위치 데이터를 보내는 엔티티를 선택합니다: 기능, 장치, 개체(엔티티 별칭). 필터를 적용해 범위를 좁힙니다.

키

X 위치 키: 가로 위치(0 = 왼쪽 가장자리, 1 = 오른쪽 가장자리)가 담긴 속성이나 텔레메트리 키. 기본값: xPos.
Y 위치 키: 세로 위치(0 = 위쪽 가장자리, 1 = 아래쪽 가장자리)가 담긴 속성이나 텔레메트리 키. 기본값: yPos.
추가 데이터 키: 라벨, 툴팁, 색상 함수에 쓰는 추가 키(예: temperature, status).

예를 들어 엔티티가 xPos = 0.25, yPos = 0.6이면 마커는 이미지의 왼쪽에서 25%, 위에서 60% 위치에 나타납니다.

모양 — 마커

표시 모드 세 가지:

도형: 기본 제공 도형을 고르고 크기(px)와 색상을 정합니다. 텔레메트리 값에 따라 마커 색을 동적으로 바꾸려면 색상 함수(JavaScript)를 씁니다.
아이콘: 기본 제공 아이콘을 고르고 크기와 색상을 정합니다. 값 범위마다 색상을 정하려면 색상 범위 규칙을 씁니다.
이미지: 이미지 URL을 넣거나 { url, size, offset }을 돌려주는 마커 이미지 함수를 씁니다.

마커 오프셋 — 기준점 위치를 미세 조정합니다(가로, 세로, 0–1 범위).

모양 — 라벨

마커 위에 표시되는 글:

패턴(기본값): ${entityName}, ${entityLabel} 같은 템플릿 변수나 데이터 키를 씁니다.
함수: 데이터 값에 따라 HTML 문자열을 돌려줍니다.

모양 — 툴팁

마커를 조작하면 나타나는 팝업:

패턴 / 함수: 내용을 템플릿이나 JavaScript 함수로 정합니다.
툴팁 트리거: 클릭 시 툴팁 표시 또는 호버 시 툴팁 표시.
툴팁 자동 닫기: 지도의 다른 곳을 클릭하면 닫습니다.
툴팁 오프셋: 가로·세로 위치 조정.
태그 동작: <link-act name='action-name'>Label</link-act>로 툴팁 안에 이름이 있는 동작 링크를 추가합니다.

동작

클릭 시 — 마커를 클릭하면 실행되는 동작. 쓸 수 있는 유형: 동작 안 함, 새로운 대시보드 상태 탐색, 현재 대시보드 상태 업데이트, 다른 대시보드 탐색, Custom action, Custom action (with HTML template), 모바일 액션, URL 열기.

위치 변환

그리기 전에 마커 좌표를 다시 계산하는 JavaScript 함수. 겹친 마커를 퍼뜨리거나 좌표를 사용자 지정 이미지 축척에 맞게 다시 매핑할 때 유용합니다.

함수 시그니처: f(origXPos, origYPos, data, dsData, aspect)

매개변수:

origXPos: number — 원래 상대 x 좌표(0~1).
origYPos: number — 원래 상대 y 좌표(0~1).
data — 이 마커의 엔티티 데이터: 설정한 데이터 소스의 속성과 텔레메트리.
dsData — 추가 데이터 소스를 포함한 모든 데이터 레이어의 전체 데이터.
aspect: number — 이미지 종횡비(너비 / 높이).

{ x: number, y: number }를 돌려줘야 합니다. 각각 0~1 범위의 새 상대 좌표입니다.

기본값(그대로 통과):

return {x: origXPos, y: origYPos};

예시 — 겹친 마커를 원 모양으로 퍼뜨립니다:

var xPos = data.xPos;
var yPos = data.yPos;
var locationGroup = dsData.filter((item) => item.xPos === xPos && item.yPos === yPos);
if (locationGroup.length > 1) {
  const count = locationGroup.length;
  const index = locationGroup.indexOf(data);
  const radius = 0.035;
  const angle = (360 / count) * index - 45;
  const x = xPos + radius * Math.sin(angle * Math.PI / 180) / aspect;
  const y = yPos + radius * Math.cos(angle * Math.PI / 180);
  return {x: x, y: y};
} else {
  return {x: xPos, y: yPos};
}

그룹

그룹 이름을 지정합니다. 그룹은 위젯의 그룹 패널에 나타나며, 그룹 전체를 한 번에 표시하거나 숨길 수 있습니다.

마커 편집

위젯에서 바로 쓰는 대화형 배치·편집 도구를 켭니다:

편집 도구: 추가, 이동, 제거 도구를 켭니다. 해당 버튼이 위젯의 왼쪽 패널에 나타납니다.
위치 저장 속성 범위: 서버 또는 공유. 마커를 놓거나 옮길 때 x/y 좌표를 저장할 곳을 정합니다.
정밀한 그리기를 위해 다른 꼭짓점에 스냅 사용: 마커를 가까운 다각형 꼭짓점이나 원 중심에 붙입니다.

지도 마커 클러스터링 사용

낮은 확대 수준에서 가까운 마커를 클러스터 아이콘 하나로 묶습니다. 클러스터 아이콘에는 안에 든 항목 수가 표시됩니다.

다각형은 이미지 위의 영역(평면도의 방, 기계 구역, 제한 구역 등 강조하거나 엔티티 데이터와 연결할 영역)을 정합니다.

다각형 추가하기: 다각형 추가를 클릭하고 데이터 소스를 선택한 다음 다각형 키를 정하고 저장을 클릭합니다.

데이터 소스

기능, 장치, 개체(별칭). 필요하면 필터를 적용합니다.

키

다각형 키: 좌표 배열이 담긴 속성 키(기본값: perimeter).
추가 데이터 키: 라벨, 툴팁, 함수에 쓸 추가 키.

좌표 형식 — 상대 [x, y] 쌍의 배열, 값은 각각 0~1:

[[x1,y1],[x2,y2],...,[xN,yN]]

예시:

[[0.313,0.445],[0.974,0.425],[0.963,0.941],[0.43,0.812],[0.362,0.804]]

모양 — 채우기

다각형 안쪽을 그리는 방식:

색상: 단색 채우기(고정 또는 데이터 기반).
줄무늬: 대각선 빗금 무늬. 구역이나 제한 구역을 나타낼 때 유용합니다.
이미지: 사용자 지정 이미지 채우기.

모양 — 선

테두리 선. 두께(px)와 색상을 정합니다.

모양 — 라벨

다각형 가운데에 표시되는 글. 패턴 또는 함수. ${entityName} 같은 자리표시자를 지원합니다.

모양 — 툴팁

클릭하거나 마우스를 올리면 나타나는 팝업. 패턴 또는 함수. 다음을 설정합니다:

툴팁 트리거: 클릭 시 또는 호버 시.
툴팁 자동 닫기.
태그 동작: 툴팁 안의 이름 있는 동작 링크.

동작

클릭 시 동작. 마커와 같은 동작 유형을 씁니다.

그룹

가시성을 켜고 끌 수 있도록 그룹 이름을 지정합니다.

다각형 편집

대화형 그리기·편집 도구:

편집 도구: 추가, 편집(꼭짓점 모양 바꾸기), 이동, 제거 도구를 켭니다.
위치 저장 속성 범위: 좌표를 저장할 속성 범위(서버 또는 공유).
정밀한 그리기를 위해 다른 꼭짓점에 스냅 사용.

원은 둥근 영역(신호 범위, 감지 범위, 제한 경계 등 엔티티 데이터와 연결한 원형 영역)을 정합니다.

원 추가하기: 원 추가를 클릭하고 데이터 소스를 선택한 다음 원 키를 정하고 저장을 클릭합니다.

데이터 소스

기능, 장치, 개체(별칭). 필요하면 필터를 적용합니다.

키

원 키: 원 도형 정보가 담긴 속성 키(기본값: perimeter).
추가 데이터 키: 라벨, 툴팁, 함수에 쓸 추가 키.

좌표 형식 — 배열 [x, y, radius]. x와 y는 중심 좌표(0~1)이고 radius는 이미지에 대한 원의 상대 크기입니다:

[x, y, radius]

예시:

[0.344, 0.595, 0.23]

모양 — 채우기

색상, 줄무늬, 이미지 — 다각형과 같은 옵션입니다.

모양 — 선

테두리 선 두께와 색상.

모양 — 라벨

원 가운데에 표시되는 글. 패턴 또는 함수. ${entityName} 같은 자리표시자를 지원합니다.

모양 — 툴팁

클릭하거나 마우스를 올리면 나타나는 팝업. 패턴 또는 함수. 트리거, 자동 닫기, 태그 동작을 설정합니다.

동작

클릭 시 동작. 마커와 같은 동작 유형을 씁니다.

그룹

가시성을 켜고 끌 수 있도록 그룹 이름을 지정합니다.

원 편집

대화형 그리기·편집 도구:

편집 도구: 추가, 편집(반지름 크기 조정), 이동, 제거 도구를 켭니다.
위치 저장 속성 범위: 좌표를 저장할 속성 범위(서버 또는 공유).
정밀한 그리기를 위해 다른 꼭짓점에 스냅 사용.

Polylines는 속성 좌표 배열로 저장한 고정 경로를 표시합니다(예: 평면도의 복도, 케이블 경로, 컨베이어 벨트 경로 등 고정된 선형 요소). 점을 보여 주는 마커와 달리, Polylines는 이미지를 가로지르는 이어진 선을 그립니다.

Polyline 추가하기: Add polyline을 클릭하고 데이터 소스를 선택한 다음 Polyline 키를 정하고 저장을 클릭합니다.

데이터 소스

기능, 장치, 개체(별칭). 필요하면 필터를 적용합니다.

키

Polyline key: 좌표 배열이 담긴 속성 키(기본값: perimeter).
추가 데이터 키: 라벨이나 툴팁에 쓸 추가 키.

좌표 형식 — 상대 [x, y] 쌍의 배열, 값은 각각 0~1:

[[x1,y1],[x2,y2],...,[xN,yN]]

예시 — 평면도를 가로지르는 복도:

[[0.1,0.5],[0.3,0.5],[0.3,0.8],[0.7,0.8]]

모양 — 선

선 두께(px)와 색상.

모양 — 라벨

폴리라인을 따라 표시되는 글. 패턴 또는 함수.

모양 — 툴팁

클릭하거나 마우스를 올리면 나타나는 팝업. 패턴 또는 함수. 다음을 설정합니다:

툴팁 트리거: 클릭 시 또는 호버 시.
툴팁 자동 닫기.
태그 동작: 툴팁 안의 이름 있는 동작 링크.

동작

클릭 시 동작. 유형: 동작 안 함, 새로운 대시보드 상태 탐색, 현재 대시보드 상태 업데이트, 다른 대시보드 탐색, Custom action, Custom action (with HTML template), 모바일 액션, URL 열기.

그룹

가시성을 켜고 끌 수 있도록 그룹 이름을 지정합니다.

Edit polyline

대화형 편집 도구:

편집 도구: 추가, 편집, 이동, 제거 도구를 켭니다.
위치 저장 속성 범위: 좌표를 저장할 속성 범위(서버 또는 공유).
정밀한 그리기를 위해 다른 꼭짓점에 스냅 사용.

추가 데이터 소스

추가 데이터 소스는 지도에 직접 표시하지 않는 엔티티의 텔레메트리나 속성을 제공합니다. 오버레이 함수의 조건 로직에 씁니다(예: 관련 HMI 장치 데이터에 따라 색이 바뀌는 마커, 정보를 더한 툴팁, 계산한 표시 값).

소스: 엔티티 유형 — 기능, 장치, 개체 별명.
데이터 키: 엔티티에서 읽을 텔레메트리나 속성 키.

더 설정하려면 데이터 소스 추가를 클릭합니다.

지도 컨트롤

위젯에서 쓸 대화형 컨트롤을 설정합니다.

위치 — 컨트롤 패널의 위치: 왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래.

줌 동작 — 확대/축소 방법을 켭니다:

스크롤: 마우스 휠로 확대/축소.
더블 클릭: 두 번 클릭하면 확대.
컨트롤 버튼: 지도에 + / − 확대/축소 버튼을 표시합니다.

축척 — 거리 축척 막대를 표시합니다. 미터법(km / m)이나 야드파운드법(mi / ft)을 고릅니다. 평면도나 사용자 지정 이미지에서 실제 거리가 의미 없으면 축척을 끕니다.

지도 작업 버튼

지도 위에 겹쳐 표시할 사용자 지정 버튼을 추가합니다. 버튼마다 클릭하면 미리 정한 동작을 실행합니다.

버튼마다 라벨, 아이콘, 색상, 동작이 있습니다.

쓸 수 있는 동작 유형: 동작 안 함, 새로운 대시보드 상태 탐색, 현재 대시보드 상태 업데이트, 다른 대시보드 탐색, Custom action, Custom action (with HTML template), 모바일 액션, URL 열기, 맵 항목 배치.

버튼을 더 설정하려면 버튼 추가를 클릭합니다.

동작 설정에 대한 자세한 내용은 위젯 동작을 참고하세요.

공통 지도 설정

로드할 엔터티 수 제한: 한 번에 불러올 엔티티 최대 수. 데이터가 많을 때 성능 문제를 막습니다(기본값: 16384).

모양

제목: 위젯 헤더 라벨. 기본으로 꺼져 있습니다. 패턴 변수로 ${entityName}이나 ${entityLabel}을 쓰거나 고정 문자열을 입력합니다.
카드 아이콘: 헤더의 제목 옆에 표시되는 아이콘. 크기(px), 정렬, 색상을 정합니다.

카드 모양

배경: 카드 배경색.
카드 버튼 표시: 위젯 헤더의 Data export와 전체화면 버튼을 켜고 끕니다.
카드 모서리 반경: 모서리 둥글기(px, 기본값: 0px).
카드 패딩: 내용과 카드 가장자리 사이의 안쪽 간격(px, 기본값: 8px).

액션

위젯 헤더 버튼 동작을 추가합니다. 위젯 헤더의 아이콘 버튼으로, 클릭하면 설정한 동작을 실행합니다.

쓸 수 있는 동작 유형과 설정은 위젯 동작을 참고하세요.

예시

온도 센서가 있는 아파트 평면도

목표: Image Map에 아파트 평면도를 표시하고, 그 위에 온도 센서 마커를 놓아 현재 온도를 색으로 구분한 상태와 함께 실시간으로 보여 줍니다.

예시 위젯 내려받기

이 예시용으로 미리 설정한 Image Map 위젯을 내려받아 내 대시보드에서 다시 쓸 수 있습니다.

가져온 뒤 대상 엔티티를 환경에 맞게 바꿉니다.

사전 준비

아파트 평면도 이미지를 내려받아 위젯에서 MX On Cloud 이미지 갤러리에 올립니다.
MX On Cloud로 temperature 텔레메트리 키를 보내는 Smart Device라는 HMI 장치를 만들고 라이선스를 등록합니다(HMI 장치 연결 가이드 참고).

1단계: 위젯 추가

대시보드를 수정 모드로 열고 Image Map 위젯을 추가합니다.

2단계: 위젯 설정

지도 유형

이미지 소스: 이미지
이미지 파일: 갤러리에서 아파트 평면도 이미지를 고릅니다.

오버레이

오버레이 ⇾ 마커에서 마커 추가를 클릭합니다. 다음과 같이 설정합니다:

소스: 장치 — Smart Device
X 위치 키: xPos
Y 위치 키: yPos
추가 데이터 키: temperature

마커 모양을 설정합니다:

마커: 아이콘 — Thermostat, 크기 36
색상 설정: 범위
- 색상 범위 소스 키: temperature
- 색상 범위: 파랑(20 미만) → 초록(20–25) → 빨강(25 초과)
라벨 패턴:

<div style='position: relative; white-space: nowrap; text-align: center; font-size: 14px; top: 2px;'><span style='margin-left: -500%;'></span><div style='border: 2px solid #00695c; border-radius: 10px; color: #000; background-color: #fff; padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px;'>${entityLabel}</div></div>

툴팁 패턴:

<b>${entityName}</b><br/><br/><b>Temperature:</b> ${temperature} °C

편집 도구를 설정합니다:

편집 도구: 추가, 이동, 제거
위치 저장 속성 범위: 서버

지도 컨트롤

스크롤과 더블 클릭 확대/축소를 끕니다.

모양

제목을 정합니다: Sensor Map

카드 모양

카드 모서리 반경을 12px로 정합니다.

추가를 클릭해 위젯을 대시보드에 넣습니다. 필요하면 크기와 위치를 조정한 다음 대시보드를 저장합니다.

3단계: 지도에 마커 놓기

Image Map 위젯의 왼쪽 패널에서 마커 배치를 클릭합니다.
평면도 이미지의 원하는 곳을 클릭해 그 위치에 마커를 놓습니다.
Smart Device의 마커가 고른 위치에 나타납니다.

마커를 끌어 위치를 조정하거나, 마커를 클릭하고 마커 제거를 선택해 지울 수 있습니다.

결과

Image Map 위젯이 거실에 온도 조절기 마커를 둔 아파트 평면도를 보여 줍니다. 마커 색은 현재 온도에 따라 바뀝니다. 서늘하면 파랑, 보통이면 초록, 따뜻하면 빨강입니다. 마커에 마우스를 올리면 정확한 측정값이 담긴 툴팁이 열립니다.

로봇 청소기 작업 영역 다각형

목표: HMI 장치 속성에 연결해 아파트 평면도에 로봇 청소기의 청소 구역을 나타내는 다각형을 그립니다.

예시 위젯 내려받기

이 예시용으로 미리 설정한 Image Map 위젯을 내려받아 내 대시보드에서 다시 쓸 수 있습니다.

가져온 뒤 대상 엔티티를 환경에 맞게 바꿉니다.

사전 준비

아파트 평면도 이미지를 내려받아 MX On Cloud 이미지 갤러리에 올립니다.
Robot Vacuum이라는 HMI 장치를 만듭니다.

1단계: 위젯 추가

대시보드를 수정 모드로 열고 Image Map 위젯을 추가합니다.

2단계: 위젯 설정

지도 유형

이미지 소스: 이미지
이미지 파일: 갤러리에서 아파트 평면도 이미지를 고릅니다.

오버레이

오버레이 ⇾ 다각형에서 다각형 추가를 클릭합니다. 다음과 같이 설정합니다:

소스: 장치 — Robot Vacuum
다각형 키: perimeter

다각형 모양을 설정합니다:

채우기: 색상 — #3388FF33
선: 0px
툴팁 패턴: <b>Robot vacuum working area</b>
툴팁 트리거: 호버 시 툴팁 표시

편집 도구를 설정합니다:

편집 도구: 추가, 제거
위치 저장 속성 범위: 서버

지도 컨트롤

스크롤과 더블 클릭 확대/축소를 끕니다.

모양

제목을 정합니다: Apartment plan #8

카드 모양

카드 모서리 반경을 12px로 정합니다.

추가를 클릭해 위젯을 대시보드에 넣습니다. 필요하면 크기와 위치를 조정한 다음 대시보드를 저장합니다.

3단계: 지도에 다각형 그리기

Image Map 위젯의 왼쪽 패널에서 사각형 그리기나 다각형 그리기를 클릭합니다.
평면도를 클릭해 다각형의 첫 점을 놓습니다.
계속 클릭해 경계를 따라 점을 더 추가합니다.
첫 점을 다시 클릭해 모양을 닫고 저장합니다.

정한 청소 영역을 나타내는 다각형이 Image Map에 나타납니다. 나중에 편집 도구로 모양을 바꾸거나 이동 도구로 위치를 옮길 수 있습니다.

결과

Image Map 위젯이 로봇 청소기 작업 영역을 반투명 파란 다각형으로 표시한 아파트 평면도를 보여 줍니다. 다각형에 마우스를 올리면 툴팁이 나타납니다.

Wi-Fi 범위 구역

목표: 아파트 평면도에 Wi-Fi 공유기의 신호 범위를 원으로 시각화합니다.

예시 위젯 내려받기

이 예시용으로 미리 설정한 Image Map 위젯을 내려받아 내 대시보드에서 다시 쓸 수 있습니다.

가져온 뒤 대상 엔티티를 환경에 맞게 바꿉니다.

사전 준비

아파트 평면도 이미지를 내려받아 MX On Cloud 이미지 갤러리에 올립니다.
Wi-Fi Router라는 HMI 장치를 만듭니다.

1단계: 위젯 추가

대시보드를 수정 모드로 열고 Image Map 위젯을 추가합니다.

2단계: 위젯 설정

지도 유형

이미지 소스: 이미지
이미지 파일: 갤러리에서 아파트 평면도 이미지를 고릅니다.

오버레이

오버레이 ⇾ 원에서 원 추가를 클릭합니다. 다음과 같이 설정합니다:

소스: 장치 — Wi-Fi Router
원 키: perimeter

원 모양을 설정합니다:

채우기: 색상 — #3388FF33
선: 2px — #048AD3
툴팁 패턴: <b>${entityName}</b>
툴팁 트리거: 호버 시 툴팁 표시

편집 도구를 설정합니다:

편집 도구: 추가, 제거
위치 저장 속성 범위: 서버

지도 컨트롤

스크롤과 더블 클릭 확대/축소를 끕니다.

모양

제목을 정합니다: Apartment plan #8

카드 모양

카드 모서리 반경을 12px로 정합니다.

추가를 클릭해 위젯을 대시보드에 넣습니다. 필요하면 크기와 위치를 조정한 다음 대시보드를 저장합니다.

3단계: 지도에 원 그리기

Image Map 위젯의 왼쪽 패널에서 원 그리기를 클릭합니다.
평면도를 클릭해 공유기 위치에 원의 중심을 놓습니다.
마우스를 움직여 원하는 반지름을 정한 다음, 다시 클릭해 원을 만들고 저장합니다.

나중에 원 편집 도구로 원의 크기나 위치를 조정할 수 있습니다.

결과

Image Map 위젯이 Wi-Fi 공유기의 대략적인 신호 범위를 파란 원 오버레이로 보여 주는 아파트 평면도를 표시합니다. 원에 마우스를 올리면 공유기 이름이 담긴 툴팁이 나타납니다.

문제 해결

저장한 뒤 마커가 보이지 않음:

엔티티에 x·y 위치 키가 속성으로 들어 있는지 확인합니다. 키가 비어 있으면 마커에 위치가 없어 그려지지 않습니다.
위젯 구성의 키 이름이 엔티티의 속성 키 이름과 정확히 같은지 확인합니다.
위젯 왼쪽 패널의 마커 배치 도구로 마커를 직접 놓습니다. 그러면 엔티티에 xPos와 yPos 속성이 자동으로 기록됩니다.

다각형이나 원이 표시되지 않음:

엔티티에 속성 키가 있고 값 형식이 올바른지 확인합니다.
다각형: [[x1,y1],[x2,y2],...], 값은 0~1.
원: [x, y, radius], x와 y는 0~1.
위젯의 다각형 그리기나 원 그리기 도구로 모양을 직접 만들면 속성이 자동으로 기록됩니다.

배경 이미지가 불러와지지 않음:

이미지 소스: 이미지를 쓴다면 이미지가 MX On Cloud 이미지 갤러리에 올라가 있는지 확인합니다.
이미지 소스: 엔터티 키를 쓴다면 엔티티의 속성 키에 올바른 이미지 URL이 들어 있는지 확인합니다.

위젯에 편집 도구가 나타나지 않음:

오버레이의 마커 편집 / 다각형 편집 / 원 편집 영역에서 해당 편집 도구(추가, 이동, 제거, 편집)를 켭니다.