BOAT MAP COMPONENT
boatMap.html
<template>
<lightning-card title="Current Boat Location" icon-name="action:map">
<template if:true={showMap}>
<lightning-map map-markers={mapMarkers} zoom-level="10"></lightning-map>
</template>
<template if:false={showMap}>
<span class="slds-align_absolute-center">
Please select a boat to see its location!
</span>
</template>
</lightning-card>
</template>
boatMap.js
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
// import BOATMC from the message channel
import { APPLICATION_SCOPE, MessageContext, subscribe, unsubscribe } from 'lightning/messageService';
import BOATMC from '@salesforce/messageChannel/BoatMessageChannel__c';
// Declare the const LONGITUDE_FIELD for the boat's Longitude__s
// Declare the const LATITUDE_FIELD for the boat's Latitude
// Declare the const BOAT_FIELDS as a list of [LONGITUDE_FIELD, LATITUDE_FIELD];
const LONGITUDE_FIELD = 'Boat__c.Geolocation__Longitude__s';
const LATITUDE_FIELD = 'Boat__c.Geolocation__Latitude__s';
const BOAT_FIELDS = [LONGITUDE_FIELD, LATITUDE_FIELD];
export default class BoatMap extends LightningElement {
// private
subscription = null;
@api boatId;
// Getter and Setter to allow for logic to run on recordId change
// this getter must be public
@api
get recordId() {
return this.boatId;
}
set recordId(value) {
this.setAttribute('boatId', value);
this.boatId = value;
}
error = undefined;
mapMarkers = [];
// Initialize messageContext for Message Service
@wire(MessageContext)
messageContext;
// Getting record's location to construct map markers using recordId
// Wire the getRecord method using ('$boatId')
@wire(getRecord, {
recordId: this.boatId,
fields: BOAT_FIELDS})
wiredRecord({ error, data }) {
// Error handling
if (data) {
this.error = undefined;
const longitude = data.fields.Geolocation__Longitude__s.value;
const latitude = data.fields.Geolocation__Latitude__s.value;
this.updateMap(longitude, latitude);
} else if (error) {
this.error = error;
this.recordId = undefined;
this.mapMarkers = [];
}
}
// Encapsulate logic for Lightning message service subscribe and unsubsubscribe
subscribeToMessageChannel() {
if (!this.subscription) {
this.subscription = subscribe(
this.messageContext,
BOATMC,
(message) => {
this.boatId = message.recordId;
},
{ scope: APPLICATION_SCOPE }
);
}
}
unsubscribeToMessageChannel() {
unsubscribe(this.subscription);
this.subscription = null;
}
// Runs when component is connected, subscribes to BoatMC
connectedCallback() {
// recordId is populated on Record Pages, and this component
// should not update when this component is on a record page.
if (this.subscription || this.recordId) {
return;
}
// Subscribe to the message channel to retrieve the recordID and assign it to boatId.
this.subscribeMC();
}
subscribeMC() {
let subscription = subscribe(
this.messageContext,
BOATMC,
(message) => { this.boatId = message.recordId },
{ scope: APPLICATION_SCOPE });
}
// Creates the map markers array with the current boat's location for the map.
updateMap(Longitude, Latitude) {
this.mapMarkers = [Longitude, Latitude];
}
// Getter method for displaying the map component, or a helper method.
get showMap() {
return this.mapMarkers.length > 0;
}
}
boatMap.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="boatMap">
<apiVersion>48.0</apiVersion>
<masterLabel>Boat Map Component</masterLabel>
<description>Component to display a given boat's location!</description>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Boat__c</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Comments
Post a Comment