PnP Location Picker Control for SPFx

The PnP LocationPicker control helps you easily integrate the SharePoint location column into your SPFx web parts.
Instead of manually handling coordinates, addresses, and metadata, the control provides a user-friendly interface for picking locations—matching SharePoint’s native location field experience.

✅ Why Use the Location Picker?

• Works seamlessly with SharePoint Location columns
• Provides consistent user experience with native SharePoint forms
• Automatically returns coordinates, address, city, postal code, and country
• Fully configurable and easy to use in React-based SPFx projects

🛠 Implementation Example

First, import the control from the PnP library:

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

Then, use it within your component like this:

<LocationPicker
  context={this.props.context}
  label="Select Location"
  defaultValue={{
    DisplayName: "Microsoft HQ",
    Address: "1 Microsoft Way, Redmond, WA 98052, USA",
    Coordinates: { Latitude: 47.642, Longitude: -122.125 }
  }}
  onChange={(location) => {
    console.log("Selected location:", location);
  }}
/>

This will render a modern, map-enabled picker UI consistent with SharePoint’s list form design.

⚙️ Key Properties

🎥 Demo Walkthrough

Watch the full video walkthrough to see how this control works in action:

📂 GitHub Sample Project

🧠 Notes from the Author

I developed this control as part of the PnP SPFx Controls initiative to simplify form handling in SPFx.
The goal was to make working with SharePoint’s modern location fields simple, fast, and consistent across environments.

• It supports geolocation autocomplete powered by Bing Maps APIs.
• Returns both structured data and formatted address values.
• Great for project tracking, branch locator, and resource mapping scenarios.
• Always test with different regional address formats for localization consistency.
• Make sure your tenant has the necessary Bing Maps configuration enabled.

✅ Final Thoughts

The PnP LocationPicker control saves hours of custom coding while ensuring your SPFx web parts feel native to SharePoint’s modern UX.
It’s a plug-and-play control every SPFx developer should know!