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

‍

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"

‍

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:

_{AccountMapController}

public with sharing class AccountMapController {
    
    @AuraEnabled(cacheable=true)
    public static List<Account> getCustomers() {
        SObjectAccessDecision decision = Security.stripInaccessible(AccessType.READABLE, [SELECT Id, Name, BillingStreet, BillingCity, BillingState, BillingPostalCode, BillingCountry, BillingLatitude, BillingLongitude, Industry, Won_Opportunity_Amount__c 
                                                                                          FROM Account 
                                                                                          WHERE Type = 'Customer' 
                                                                                          ORDER BY Name ASC]);
        return (List<Account>) decision.getRecords();
    }
    
}

‍

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:

_{accountMap.html}

<template>

    <lightning-card title="Account Map" icon-name="action:map">

        <div class="slds-p-around_small">

            <template lwc:if={accounts}>

                <lightning-map map-markers={mapMarkers} markers-title="Customers"></lightning-map>
            
            </template>

            <template lwc:elseif={error}>

                <div class="slds-text-color_destructive slds-align_absolute-center">
                    <p> <lightning-formatted-text value={error}></lightning-formatted-text> </p>
                </div>

            </template>

        </div>
        
    </lightning-card>

</template>

‍

_{accountMap.js}

import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import LOCALE from '@salesforce/i18n/locale';
import CURRENCY from '@salesforce/i18n/currency';
import getCustomers from '@salesforce/apex/AccountMapController.getCustomers';

export default class AccountMap extends NavigationMixin(LightningElement) {

    accounts;
    mapMarkers = [];
    error;

    @wire(getCustomers)
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
            this.error = undefined;

            this.accounts.forEach(acc =>{

                let description = `Industry: ${acc.Industry}`;

                // Check for access to Won Opportunity Amount and format according to locale
                if(acc.Won_Opportunity_Amount__c) {
                    let formattedWonOpptyAmt = new Intl.NumberFormat(LOCALE, {
                        style: 'currency',
                        currency: CURRENCY,
                        currencyDisplay: 'symbol'
                    }).format(acc.Won_Opportunity_Amount__c);
                    description += `<br> Won Opportunity Amount: ${formattedWonOpptyAmt}`;
                }

                // Plot markers
                this.mapMarkers.push({
                    location: {
                        Street : acc.BillingStreet,
                        City : acc.BillingCity,
                        State : acc.BillingState,
                        PostalCode: acc.BillingPostalCode,
                        Country : acc.BillingCountry,
                        Latitude : acc.BillingLatitude,
                        Latitude : acc.BillingLongitude
                    },
                    title : acc.Name,
                    description : description,
                    icon: 'standard:account'
                });

            });

        } else if (error) {
            this.error = error;
            this.accounts = undefined;
            console.log(this.error);
        }
    }

}

‍

_{accountMap.js-meta.xml}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Account Map</masterLabel>
    <description>Displays a map of Customers based on Billing Addresses and Won Opportunity Amounts.</description>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>