내 지도에 연결하는 폴리곤 편집기
서비스에서 사용 중인 지도와 에디터의 입출력 인터페이스를 맞추면, 폴리곤을 새 창에서 편집하고 결과를 원래 지도에 반영할 수 있습니다. 서로 다른 도메인에서도 같은 방식으로 연결합니다.
경복궁 권역·경로·마커로 먼저 실행해 보세요
버튼을 누르면 경복궁을 감싸는 사각형, 예제 경로와 시작 위치 마커가 새 창에 표시됩니다. 도형을 선택해 꼭짓점을 옮기고 저장하면 이 지도와 JSON이 바뀝니다.
폴리곤·선·마커가 각각 1개씩 준비되었습니다.
사각형은 권역, 선은 예제 경로, 마커는 경로의 시작 위치입니다. 실제 지적·행정 경계나 공식 관람 동선은 아닙니다. 처음 열린 편집 창에서 경복궁 주변을 확대해 보세요. 이 예제는 서버에 저장하지 않으며 새로고침하면 초기화됩니다.
새 창에 보낼 scene JSON
각 필드의 목적을 주석으로 적은 JSONC 예제입니다. ‘JSON 복사’를 누르면 주석 없는 실제 데이터를 복사합니다. 새 창에는 이 데이터를 INIT 메시지의 scene 객체로 보냅니다.
{ // 필수: 에디터와 주고받는 데이터 형식의 버전입니다. 현재는 2를 사용합니다. "version": 2, // 선택: 편집 데이터 전체의 이름입니다. 저장 결과에도 포함됩니다. "name": "경복궁 권역 편집", // 필수: 새 창에 표시할 도형 목록입니다. []이면 도형 없이 시작합니다. // 여러 도형을 넣으면 배열 뒤쪽 도형이 지도 위에 겹쳐 그려집니다. "features": [ { // 선택: 저장 후 같은 도형을 찾기 위한 고유 ID입니다. // 생략하면 자동 생성됩니다. 같은 목록 안에서 중복될 수 없습니다. "id": "gyeongbokgung-area", // 선택: 도형 목록과 지도 라벨에 표시할 이름입니다. "name": "경복궁 예제 권역", // 선택, 기본 false: false는 편집 가능, true는 잠금 상태로 시작합니다. // 사용자가 화면에서 잠금을 해제할 수 있으므로 접근 권한 설정은 아닙니다. "locked": false, // 선택, 기본 true: 지도에 표시할지 정합니다. // false로 숨겨도 도형 데이터는 저장 결과에 포함됩니다. "visible": true, // 필수: 실제 위치와 모양을 나타내는 GeoJSON geometry입니다. "geometry": { // Polygon은 면적을 가진 다각형입니다. "type": "Polygon", // WGS84 [경도, 위도] 순서입니다. 첫 번째 링은 바깥 경계이며, // 뒤에 링을 추가하면 다각형 내부에서 비워 둘 구멍이 됩니다. "coordinates": [ [ [126.972, 37.5745], // 남서쪽 꼭짓점 [126.982, 37.5745], // 남동쪽 꼭짓점 [126.982, 37.5855], // 북동쪽 꼭짓점 [126.972, 37.5855], // 북서쪽 꼭짓점 [126.972, 37.5745], // 첫 좌표를 반복해 바깥 경계를 닫습니다. ], ], }, // 선택: 서비스에서 쓰는 업무 정보를 도형에 붙여 보관합니다. // 이 도형의 좌표를 편집해 저장해도 함께 돌려받습니다. "properties": { // 예제 서비스의 권역 ID입니다. 필드명과 값은 서비스에서 자유롭게 정합니다. "serviceAreaId": "palace-001", }, }, { // 같은 도형 목록에 선을 추가합니다. 폴리곤 위에 그려집니다. "id": "gyeongbokgung-route", "name": "경복궁 예제 경로", "locked": false, "visible": true, "geometry": { // LineString은 두 개 이상의 좌표를 순서대로 잇는 선입니다. "type": "LineString", // Polygon의 링보다 배열이 한 단계 얕습니다. 첫 점으로 닫을 필요가 없습니다. "coordinates": [ [126.976, 37.577], // 시작점: 아래 마커와 같은 위치 [126.976, 37.5795], // 경유점 [126.979, 37.5815], // 도착점: 실제 관람 동선이 아닌 연습용 경로입니다. ], }, "properties": { // 좌표를 수정한 뒤에도 이 업무 ID로 서비스의 경로 데이터와 연결합니다. "routeId": "palace-route-001", }, }, { // 마지막에 넣어 선과 폴리곤 위에 표시할 위치 마커입니다. "id": "gyeongbokgung-marker", "name": "경복궁 예제 마커", "locked": false, "visible": true, "geometry": { // Point는 지도에 핀 모양의 마커로 표시됩니다. "type": "Point", // 좌표 목록이 아닌 [경도, 위도] 한 쌍입니다. 예제 경로의 시작 위치입니다. "coordinates": [126.976, 37.577], }, "properties": { // 서비스에서 장소를 식별하는 업무 ID입니다. 필드명은 자유롭게 정합니다. "placeId": "palace-marker-001", }, }, ],}서비스 페이지와 에디터 창
이 문서에서 서비스 페이지는 편집 버튼이 있는 기존 업무 화면을, 에디터 창은 그 버튼으로 새로 여는 Termia 화면을 뜻합니다. 서비스 지도의 폴리곤을 에디터 입력 형식으로 보내고, 반환된 폴리곤을 사용하는 지도 라이브러리의 갱신 API에 연결합니다.
배포된 에디터를 사용하는 안내입니다. Termia 저장소를 복제하거나 내부 코드를 수정할 필요 없이, 자신의 지도에서 입력과 결과를 연결하면 됩니다.
서비스 페이지: 지도에서 편집할 폴리곤을 준비하고 창을 엽니다. 편집 결과로 지도와 기준 데이터를 갱신하고, 필요하면 자신의 저장 API를 호출합니다.
에디터 창: 전달받은 도형을 지도에 표시하고 편집 도구를 제공합니다. ‘저장하고 편집 완료’를 누르면 결과 전체를 서비스 페이지에 반환합니다.
직접 그리기와 전달받은 도형 편집은 로그인 없이 사용할 수 있습니다. 공개 에디터의 행정동·법정동·우편번호 선택은 에디터가 로그인을 안내하며, 서비스에서 로그인 기능을 구현하거나 토큰을 전달할 필요는 없습니다.
지도 데이터 전달부터 결과 반영까지
1. 서비스의 편집 버튼에서
https://maps-editor.pages.dev/editor/를 새 창으로 엽니다. 기존 지도를 교체하지 않고 편집 화면만 별도 창으로 연결합니다.2. 에디터의
MAP_EDITOR_READY를 받으면MAP_EDITOR_INIT으로 편집할scene과 편집 회차의sessionId를 보냅니다. 좌표는 [경도, 위도]이며, 기존 지도 데이터를 이 형식으로 변환합니다.3.
MAP_EDITOR_SUBMIT의 결과를 검증한 뒤 편집 창을 닫고, 서비스 데이터와 지도의 폴리곤을 갱신합니다.MAP_EDITOR_CANCEL이면 기존 데이터를 유지합니다.
다른 주소에서도 연결할 수 있습니다
HTTPS 사이트라면 에디터와 도메인이 달라도 연동할 수 있습니다. 기본 설정에서는 별도 도메인 등록이 필요하지 않습니다. HTTP·로컬 개발 주소의 조건과 운영자가 연결 사이트를 제한한 경우는 연결 가능한 주소와 조건에서 확인하세요. 현재 직접 연 에디터는 입력을 기다립니다. 단독 실행은 검토 중이며 이번 변경에 포함되지 않습니다.
저장하면 무엇을 받나요?
‘저장하고 편집 완료’를 누르면 MAP_EDITOR_SUBMIT으로 편집 결과 전체를 받습니다. 현재 지도 데이터를 이 결과로 교체하면 다음 편집도 수정된 권역에서 시작할 수 있습니다.
| 에디터에서 한 일 | 서비스가 받는 결과 |
|---|---|
| 폴리곤·정점을 수정 | 수정된 geometry 좌표와 도형의 id·name·properties |
| 행정동·법정동을 권역에 추가·합치기 | 권역에 반영된 폴리곤. 단순히 조회한 참고 경계 전체는 포함하지 않음 |
| 편집을 완료 | 변경된 도형만이 아닌 전체 features. 숨긴 도형도 포함 |
| 취소 | scene 없는 MAP_EDITOR_CANCEL. 기존 지도 데이터를 유지 |
결과 전달과 서비스 저장은 별개입니다
완료 버튼은 편집 결과를 돌려주는 동작입니다. 데이터베이스 저장이 필요하면 결과를 받은 서비스에서 자신의 저장 기능을 실행하세요.
이어서 보기
| 하려는 작업 | 문서 | 확인할 내용 |
|---|---|---|
| 데이터를 보내고 결과 받기 | 연동 인터페이스 | 메시지·입출력 JSON, 새 창에 표시되는 내용, 서비스 연결 예제 |
| 권역을 그리거나 경계로 조합하기 | 편집 도구 안내 | 그리기·경계 선택·합치기·빼기, 저장·취소 |
| 전체 흐름을 직접 확인하기 | 연동 데모 | 입력 전달 → 새 창 편집 → 지도와 JSON 갱신 |