ScribbleMaps를 앱에 추가하기

참고:

사용자가 Scribble Maps에 로그인하고, 사용 가능한 지도를 탐색하고, 지도 데이터를 웹 애플리케이션으로 직접 반환하도록 하려면 ScribbleMaps Connect Picker를 사용하세요.

이 선택 도구는 팝업으로 열리며 그 안에서 사용자 로그인 프로세스를 처리하므로, 애플리케이션에서 Scribble Maps 자격 증명을 직접 수집할 필요가 없습니다.

Connect Picker 작동 방식

ScribbleMaps Connect Picker를 사용하면 사용자가 Scribble Maps에서 지도를 탐색, 검색 및 선택한 다음, 해당 지도 데이터를 원하는 형식으로 애플리케이션에 직접 반환할 수 있습니다.

이 기능은 사용자가 Scribble Maps에서 지리 데이터를 생성하거나 관리한 다음, 자체 지도 브라우저나 로그인 흐름을 구축하지 않고도 해당 데이터를 자체 앱으로 로드하려는 경우에 유용합니다.

사용 사례 / 예시:

이 연동은 대시보드, 부동산 도구, 현장 데이터 애플리케이션 및 사용자가 Scribble Maps에서 매핑된 데이터를 선택하고 로드해야 하는 기타 웹 앱에 유용합니다.

목차 보기 ↑

Client ID 가져오기

Scribble Maps 개발자 사이트를 엽니다:
https://developers.scribblemaps.com
무료 프로젝트를 등록합니다.
Client ID를 복사합니다.

Connect Picker를 호출할 때 이 값을 사용하게 됩니다.

목차 보기 ↑

페이지에 SDK 추가하기

웹 페이지에 Connect Picker SDK를 추가합니다:

<script src="https://api.scribblemaps.com/connect/picker.js"></script>

페이지 변경 사항을 저장합니다.

이제 애플리케이션에서 Scribble Maps Connect Picker를 사용할 수 있습니다.

목차 보기 ↑

Connect Picker 열기

페이지에서 ScribbleMapsConnect.pick()을 호출합니다.
clientId, 원하는 내보내기 format, 그리고 onSelect 콜백을 전달합니다.

다음 예시와 유사한 코드를 사용합니다:

ScribbleMapsConnect.pick({
  clientId: 'YOUR_CLIENT_ID',
  format: 'geojson',
  onSelect: function (result) {
    // result.data contains your GeoJSON
    // result.title, result.mapCode, result.thumbUrl also available
    loadIntoMyApp(result.data);
  }
});

선택 도구가 열리면 사용자는 인증을 진행하고, 사용 가능한 지도를 탐색한 후 하나를 선택할 수 있습니다.

목차 보기 ↑

선택한 지도 데이터 처리하기

onSelect 콜백에서 result.data에 액세스합니다.

여기에는 요청한 형식의 지도 데이터가 포함되어 있습니다.
(선택 사항) 반환된 추가 필드를 사용합니다:
- result.title — 지도 제목
- result.mapCode — Scribble Maps 지도 코드
- result.thumbUrl — 지도의 썸네일 URL
데이터를 애플리케이션 로직에 전달합니다.

예를 들어, 반환된 GeoJSON을 자체 지도 뷰어나 데이터 워크플로에 로드합니다.

목차 보기 ↑

선택적 구성

애플리케이션 워크플로에 더 잘 맞도록 선택 도구를 구성할 수 있습니다.

format 값을 변경하여 내보내기 형식을 선택합니다.

예: geojson, kml, csv, gpx, dxf, shapefile 또는 smjson.
tabs 옵션을 사용하여 사용자가 탐색할 수 있는 지도 소스를 선택합니다.

사용자는 personal library, team-shared maps 또는 community collection에서 지도를 탐색할 수 있습니다.
(선택 사항) 제공된 버튼 스타일을 사용하여 light 또는 dark 인터페이스에 맞춥니다.

목차 보기 ↑

지원되는 형식 및 반환되는 필드

지원되는 내보내기 형식:

GeoJSON

KML

CSV

GPX

DXF

Shapefile

SMJSON

반환되는 결과 필드:

data

title

mapCode

thumbUrl

구성이 완료되면 Connect Picker를 통해 사용자는 단일 연동 지점을 통해 애플리케이션 내에서 직접 Scribble Maps 데이터에 액세스할 수 있습니다.

목차

Connect Picker 작동 방식

Client ID 가져오기

페이지에 SDK 추가하기

Connect Picker 열기

선택한 지도 데이터 처리하기

선택적 구성

지원되는 형식 및 반환되는 필드

관련 문서