세일즈포스 LWC로 lightning-map 활용한 지도 구현 가이드 (1부)

LWC에서 <lightning-map>을 활용하여 지도를 구현하는 방법을 자세히 알아보겠습니다. 위도와 경도를 갖춘 데이터가 있다면 외부 API를 사용하지 않고 Salesforce의 스탠다드 컴포넌트를 이용하여 손쉽게 지도를 구현할 수 있습니다.

 

선행 작업

샘플 데이터 다운로드

아이스크림 가게 정보가 담긴 Account 더미 데이터 입니다 (10 개).

파일에는 이름, 주소, 이메일, 핸드폰, 레코드 아이디 컬럼으로 구성되어 있습니다.

Account에 레코드 타입이 있는 경우, csv 파일의 RecordTypeId 값을 해당 레코드 타입의 Id 값으로 대체해주시면 됩니다.

Ice_Cream_Store_Accounts_Data.csv

0.00MB

 

Account에 필드 추가 (Option)

Account에 Company Email (CompanyEmail__c)를 추가하여 데이터 불러올 때 Email을 여기 필드에 맵핑하도록 합니다. 제가 진행하고 있는 시나리오는 Business Account를 불러오는건데 Person Account가 아닌 경우 Email 필드가 PersonEmail 필드로 연결되어 있어 레코드 타입 불일치로 데이터를 불러 올 수가 없습니다.

 

Dataloader.io로 데이터 불러오기

• Setup -> Dataloader -> 페이지 이동 후 로그인.
• NEW TASK 선택.

 

데이터를 불러오기전 제대로 맵핑이 되어있는지 확인 후 데이터를 불러오시면 됩니다.

 

 

 

Data Integration Rule 설정 작업

 

• Setup -> Data Integration Rule -> Geocodes for Account Billing Address 활성화.
• Address 필드에 주소가 형식에 맞게 입력되면 이 옵션을 통해서 자동으로 위도 경도 값을 구해 값이 채워집니다.
• 다만, 정확성은 조금 떨이지니 정확한 수치가 필요하신 분들은 커스텀 필드 생성하여 직접 값을 구하여 넣는걸 추천합니다.

 

LWC로 <lightning-map> 구현 준비

참고: Lightning-map documentation

lightning-map - documentation - Salesforce Lightning Component Library

 

LWC 생성하기

지도 생성에 앞서 우선 LWC 껍데기부터 생성하도록 하겠습니다.

이름: iceCreamStoreMap

<template>
    <h1>Hello Ice Cream Store Map!</h1>
</template>

 

Metadata에 아래 내용을 추가한 후 배포합니다.

<isExposed>true</isExposed> 
<targets>
        <target>lightning__AppPage</target>
</targets>

• isExposed가 true가 되어야 배치할 수 있는 컴포넌트 리스트에 노출이 됩니다.
• target은 어디에 사용될 컴포넌트인지 정의합니다.
• 참고: XML Configuration File Elements 

XML Configuration File Elements | Reference | Lightning Web Components Developer Guide | Salesforce Developers

 

Lightning App Builder에서 App Page 생성하기

• Setup -> Lightning App Builder -> New -> App Page
• 이름은 편하신 이름으로 진행주시면 됩니다.

단순하게 컴포넌트 하나만 확인할 예정이니 One Region으로 선택하였습니다.

위에서 만든 LWC를 검색하여 배치 후 저장합니다.

 

결과 확인

 

위에서 배포한 LWC가 성공적으로 작동하는것을 확인하였습니다.

이로써 작업하기에 앞서 기본작업이 완료되었습니다.

다음 포스트에서는 <lightning-map> 컴포넌트 설명과 데이터를 가져와 지도에 표시하는 방법을 다루어보도록 하겠습니다.