Account Map LWC

To handle this request, we're going to create a Lightning Web Component that plots Account data on a lightning-map component. The component will invoke an Apex method via the wire service.

Here are the high-level steps:

  1. Create Roll-Up Summary Field
  2. Enable "Geocodes for Account Billing Address" Data Integration Rule
  3. Create Apex Class
  4. Create Lightning Web Component

Create Roll-Up Summary Field

Let's add a Custom Field on the Account object that displays Won Opportunity Amount.

  • Navigate to Setup > Object Manager > Account > Fields & Relationships and click "New"
  • Field Type: Roll-Up Summary
  • Field Label: Won Opportunity Amount
  • Summarized Object: Opportunities
  • Roll-Up Type: Sum
  • Field to Aggregate: Amount
  • Filter Criteria: Won Equals True
Won Opportunity Amount Custom Field
Roll-Up Summary Field

Enable "Geocodes for Account Billing Address" Data Integration Rule

This feature will cause Latitude and Longitude values to populate on Accounts based on Billing Addresses. The lightning-map component can only contain a maximum of 10 geocoded address lookups (which means that we'll need to provide Latitude and Longitude coordinates if we exceed that count).

  • Navigate to Setup > Data Integration Rules and choose "Geocodes for Account Billing Address"
  • Click "Activate"
Geocodes for Account Billing Address
Data Integration Rule

Create Apex Class

We'll create an Apex Class to query the server-side Account data.

  • Navigate to Setup > Apex Classes and click "New"
  • Copy and paste the following code:


Create Lightning Web Component

Lastly, we will add a Lightning Web Component to plot the Account-related data on a lightning-map component.

  • Navigate to VS Code
  • Open the Command Palette (Ctrl+Shift+P) and choose "SFDX: Create Lightning Web Component"
  • Copy and paste the following code: