Using the LocationPicker Control in SPFx with PnP React Controls

The LocationPicker control from the PnP SPFx React Controls library is a powerful component that allows users to search and select locations using the Microsoft location services integrated with SharePoint Framework.

Official documentation for this control:

LocationPicker Documentation

This control is useful when your solution needs:

• Office locations
• Meeting places
• Delivery addresses
• Site references
• Geographic metadata

Why use LocationPicker?

Without this control, you would need to:

• Build a search box
• Integrate geolocation APIs
• Handle suggestions
• Parse addresses manually
• Store coordinates

The PnP control abstracts all of this.

It returns structured data like:

{
  DisplayName: "Microsoft São Paulo",
  Address: {
    Street: "Av. Nações Unidas",
    City: "São Paulo",
    CountryOrRegion: "Brazil"
  },
  Coordinates: {
    Latitude: -23.5505,
    Longitude: -46.6333
  }
}

Installation

Inside your SPFx solution:

npm install @pnp/spfx-controls-react --save
npm install

Run:

heft start

Importing the control

Use:

import { LocationPicker, ILocationPickerItem } from "@pnp/spfx-controls-react/lib/LocationPicker";

Important TypeScript detail

A common issue:

locValue.Address.Street

Produces:

'locValue.Address' is possibly 'undefined'

This happens because the Address object is optional.

Solution:

Use optional chaining:

locValue.Address?.Street

This avoids runtime errors.

Complete example

LocationPickerWp.tsx

import * as React from 'react';
import {
  LocationPicker,
  ILocationPickerItem
} from "@pnp/spfx-controls-react/lib/LocationPicker";
import { ILocationPickerWpProps } from './ILocationPickerWpProps';
const LocationPickerWp: React.FC<ILocationPickerWpProps> = ({ context }) => {
  return (
    <LocationPicker
      context={context}
      label="Location"
      onChange={(locValue: ILocationPickerItem) => {
        console.log(
          `${locValue.DisplayName}, ${locValue.Address?.Street ?? ''}`
        );
        console.log("Full object:");
        console.log(locValue);
        console.log("Coordinates:");
        console.log(locValue.Coordinates?.Latitude);
        console.log(locValue.Coordinates?.Longitude);
      }}
    />
  );
};
export default LocationPickerWp;

ILocationPickerWpProps.ts

import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface ILocationPickerWpProps {
  context: WebPartContext;
}

What the control returns

The onChange event gives an ILocationPickerItem.

Useful properties:

Example:

onChange={(location) => {
  console.log(location.DisplayName);
  console.log(location.Address?.City);
  console.log(location.Address?.CountryOrRegion);
  console.log(location.Coordinates?.Latitude);
}}

Real-world use cases

Event management

Store:

• Meeting room
• Venue
• Coordinates

Example:

EventLocation: selectedLocation.DisplayName

SharePoint list integration

Save into list:

await sp.web.lists.getByTitle("Events").items.add({
  Title: "Annual Meeting",
  Location: selectedLocation.DisplayName
});

Mapping integration

Use coordinates:

const lat = selectedLocation.Coordinates?.Latitude;
const lng = selectedLocation.Coordinates?.Longitude;

Perfect for:

• Bing Maps
• Google Maps
• Power BI map visuals

Best practices

Always null-check Address

Good:

location.Address?.Street

Bad:

location.Address.Street

Log the full object first

Useful for discovering available properties:

console.log(location);

Store the full object if needed

Sometimes storing only DisplayName is not enough.

Save:

• Street
• City
• Country
• Coordinates

Final thoughts

The LocationPicker is one of the most practical controls in the PnP library because it adds geolocation intelligence with almost no code.

Benefits:

• Fast integration
• Strong typing
• Microsoft ecosystem aligned
• Better UX
• Ready for list storage and mapping

This is a great control for:

• Facility management
• Travel apps
• Event systems
• Asset tracking
• Geo-based dashboards

Official references:

PnP Controls:
PnP SPFx React Controls Library

LocationPicker:
Official LocationPicker Docs

Fluent UI:
Fluent UI React