Create map with pins using PnP Map in the SharePoint Framework (SPFx) webpart

This article demonstrates how to implement the PnP Map control in the SharePoint Framework (SPFx) web part.
The PnP Map control allows you to render an interactive map, display locations from a SharePoint list, and visually represent them as pins.

📦 Install dependencies

Install the PnP React Controls library:

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

🧩 Configure the component

Add the following interface for your state:

export interface ISpfxPnpMapState {
  location: ICoordinates;
  Name: string;
}

Update your render method with the PnP Map control:

public render(): React.ReactElement<ISpfxPnpMapProps> {
  return (
    <div className={styles.spfxPnpMap}>
      <Map titleText={this.state.Name}
        coordinates={this.state.location}
        enableSearch={false}
        zoom={14} />
    </div>
  );
}

🧠 Fetch coordinates dynamically

You can pull the coordinates from a SharePoint list and display them as pins using the following method:

@autobind
private async _getItems() {
  const items: any[] = await sp.web.lists.getByTitle("CustomerLocation").items();
  this.setState({
    location: { latitude: items[0].Latitude, longitude: items[0].Longitude },
    Name: items[0].Title
  });
}

This method retrieves the latitude and longitude fields from the CustomerLocation list and updates the map accordingly.

🚀 Deploy the solution

Once ready, build and package your solution using:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file to your App Catalog and deploy it.

After deployment, add the web part to a SharePoint page — the map will render with pins representing locations from your list.

🧭 Summary

You’ve successfully created an interactive map web part in SharePoint Framework (SPFx) using PnP Controls.
This feature is ideal for displaying store locations, office maps, or custom geographic data directly on SharePoint pages.

📂 GitHub Source