GeofencingService Example

1<template>
2  <lightning-card title="Geofencing Service" icon-name="custom:custom14">
3    <div class="slds-var-m-around_medium">
4      <p><lightning-formatted-text value="{geofencingResults}"></lightning-formatted-text></p>
5      <div class="slds-var-m-around_medium">
6        <p>Create an entry and exit geofence at the Salesforce Tower:</p>
7        <lightning-button
8          variant="brand"
9          label="Add Geofences"
10          title="Add Geofences to SF Tower"
11          onclick="{addGeofence}"
12          class="slds-var-m-around_x-small"
13          disabled="{geofencingServiceDisabled}"
14        >
15        </lightning-button>
16      </div>
17      <div class="slds-var-m-around_medium">
18        <p>
19          <lightning-formatted-text value="{geofencingAddedResults}"></lightning-formatted-text>
20        </p>
21      </div>
22    </div>
23    <div class="slds-var-m-around_medium">
24      <div class="slds-var-m-around_medium">
25        <p>Remove all active geofences:</p>
26        <lightning-button
27          variant="brand"
28          label="Remove All Geofences"
29          title="Remove all geofences"
30          onclick="{removeGeofences}"
31          class="slds-var-m-around_x-small"
32          disabled="{geofencingServiceDisabled}"
33        >
34        </lightning-button>
35      </div>
36      <div class="slds-var-m-around_medium">
37        <p>
38          <lightning-formatted-text value="{removeGeofencesResults}"></lightning-formatted-text>
39        </p>
40      </div>
41    </div>
42    <div class="slds-var-m-around_medium">
43      <div class="slds-var-m-around_medium">
44        <p>Get list of all active geofences:</p>
45        <lightning-button
46          variant="brand"
47          label="Get Active Geofences"
48          title="Get active geofences"
49          onclick="{getActiveGeofences}"
50          class="slds-var-m-around_x-small"
51          disabled="{geofencingServiceDisabled}"
52        >
53        </lightning-button>
54      </div>
55      <div class="slds-var-m-around_medium">
56        <p>
57          <lightning-formatted-text value="{activeGeofencesResults}"></lightning-formatted-text>
58        </p>
59        <ul class="slds-var-m-around_medium">
60          <template for:each="{activeGeofences}" for:item="geofence">
61            <li key="{geofence}">{geofence}</li>
62          </template>
63        </ul>
64      </div>
65    </div>
66  </lightning-card>
67</template>

1// geofencingServiceExample.js
2import { LightningElement } from "lwc";
3import { getGeofencingService } from "lightning/mobileCapabilities";
4
5export default class GeofencingServiceExample extends LightningElement {
6  // Internal component state
7  myGeofencingService;
8  geofencingServiceDisabled = false;
9  geofencingResults;
10  geofencingAddedResults;
11  removeGeofencesResults;
12  activeGeofencesResults;
13  activeGeofences = [];
14
15  // Define an entry and an exit geofence at the Salesforce Tower
16  sftowerEntry = {
17    latitude: 37.7899,
18    longitude: -122.3969,
19    radius: 50,
20    notifyOnEntry: true,
21    notifyOnExit: false,
22    message: "Welcome to Salesforce Tower",
23    triggerOnce: false,
24  };
25  sftowerExit = {
26    latitude: 37.7899,
27    longitude: -122.3969,
28    radius: 50,
29    notifyOnEntry: false,
30    notifyOnExit: true,
31    message: "Thanks for visiting Salesforce Tower",
32    triggerOnce: false,
33  };
34
35  // When the component is initialized, detect whether GeofencingService is available
36  connectedCallback() {
37    this.myGeofencingService = getGeofencingService();
38    if (this.myGeofencingService == null || !this.myGeofencingService.isAvailable()) {
39      // GeofencingService isn't available, so disable the buttons
40      this.geofencingServiceDisabled = true;
41      this.geofencingResults =
42        "GeofencingService is not available. Try again from the Salesforce app on a mobile device.";
43    } else {
44      this.geofencingResults = "GeofencingService is available.";
45    }
46  }
47
48  // Start monitoring the entry and exit geofences at the Salesforce Tower
49  addGeofence() {
50    if (this.myGeofencingService != null && this.myGeofencingService.isAvailable()) {
51      Promise.all([
52        this.myGeofencingService.startMonitoringGeofence(this.sftowerEntry),
53        this.myGeofencingService.startMonitoringGeofence(this.sftowerExit),
54      ])
55        .then((ids) => {
56          this.geofencingAddedResults = `Geofences added with IDs: ${ids.join(", ")}`;
57        })
58        .catch((error) => {
59          this.geofencingAddedResults = `Error: ${JSON.stringify(error)}`;
60        });
61    }
62  }
63
64  // Stop monitoring and remove all active geofences
65  removeGeofences() {
66    if (this.myGeofencingService != null && this.myGeofencingService.isAvailable()) {
67      this.myGeofencingService
68        .stopMonitoringAllGeofences()
69        .then(() => {
70          this.removeGeofencesResults = "All geofences removed.";
71          this.activeGeofences = [];
72        })
73        .catch((error) => {
74          this.removeGeofencesResults = `Error: ${JSON.stringify(error)}`;
75        });
76    }
77  }
78
79  // Get the IDs of all active geofences
80  getActiveGeofences() {
81    if (this.myGeofencingService != null && this.myGeofencingService.isAvailable()) {
82      this.myGeofencingService
83        .getMonitoredGeofences()
84        .then((results) => {
85          this.activeGeofences = JSON.parse(JSON.stringify(results));
86          this.activeGeofencesResults = `Number of active geofences: ${this.activeGeofences.length}`;
87        })
88        .catch((error) => {
89          this.activeGeofencesResults = `Error: ${JSON.stringify(error)}`;
90        });
91    }
92  }
93}