Use the LocationService API

Add LocationService to a Lightning Web Component

In your component’s JavaScript file, import LocationService using the standard JavaScript import statement. Specifically, import the getLocationService() factory function from the lightning/mobileCapabilities module, like so:

import { getLocationService } from 'lightning/mobileCapabilities';

After it’s imported into your component, use the factory function to get an instance of LocationService. With your LocationService instance, use the isAvailable() utility function to verify availability. Use the location calculation functions to get the current location, or to configure and receive location change updates.

Test LocationService Availability

LocationService depends on physical device hardware and platform features. A component that uses LocationService renders without errors on a desktop computer or in a mobile browser, but location functions fail. To avoid these errors, check if LocationService functionality is available before you use it.

handleGetCurrentLocationClick(event) {
    const myLocationService = getLocationService();
    if(myLocationService.isAvailable()) {
        // Perform geolocation operations
    }
    else {
        // LocationService not available
        // Not running in an app with GPS, location APIs, etc.
        // Handle with message, error, beep, and so on
    }
}

Determine Current Location

Determining the current location is a simple function call. While the call is asynchronous, and must be handled as a JavaScript Promise, it’s a “one and done” call that allocates and releases resources automatically.

myLocationService.getCurrentPosition({ enableHighAccuracy: true }).
    then((result) => {
        this.myLocation = result.coords;
        // Do something with the location here
        // Display a map, look up an address, save to a record
        // 🎵 It's your thing, do what you wanna do 🎵
    }).
    catch((error) => {
        // Handle any errors here
        console.error(error);
    });
}

See getCurrentPosition(options) for more details for configuration, results format, and error handling.

Request Location Change Updates

To receive updates when a device’s location changes significantly, subscribe to location updates with the startWatchingPosition() function. Provide a callback function to handle position updates when they happen.

myLocationWatchId = 0;
async startTracking() {
    let locationService = getLocationService();
    this.myLocationWatchId = await locationService.
        startWatchingPosition({ enableHighAccuracy:true }, (result, error) => {

        // Check for error first
        if(error) {
            console.error(error);
            this.stopTracking();
        }
        else {
            this.myLocation = result.coords;

            // Now do your thing with the updated location
            // Refresh a map, upsert a record, or whatever
        }
    });
}

See startWatchingPosition(options, callback) for additional usage details, including important resource allocation notes. See stopWatchingPosition(watchId) for an example stopTracking() function.