PnP React Controls

Patterns and Practices (PnP) provides a list of reusable React controls to developers for building solutions such as webparts and extensions using SharePoint Framework.
Refer to this link to get the list of React controls for SPFx.
You will see how to use PnP Map control in SPFx webpart.

PnP Map Control

This control renders a map in your solution. The control also has the ability to search for new locations. Refer to this link for more details.
PnP Map Control In SharePoint Framework
In this article, you will see how to perform the following tasks,
Prerequisites

Create SPFx solution

Open Node.js command prompt.
Create a new folder.
>md spfx-pnpreact-map
Navigate to the folder.
> cd spfx-pnpreact-map
Execute the following command to create SPFx webpart.
>yo @microsoft/sharepoint
Enter all the required details to create a new solution as shown below.
PnP Map Control In SharePoint Framework
Yeoman generator will perform the scaffolding process and once it is completed, lock down the version of project dependencies by executing the following command.
>npm shrinkwrap
Execute the following command to open the solution in the code editor.
>code .

Implement Map Control solution

Execute the following command to install the PnP React Controls NPM package.
>npm install @pnp/spfx-controls-react --save
Open the component file “src\webparts\pnPMapControl\components\PnPMapControl.tsx” and import the control.
  1. import { Map, ICoordinates, MapType } from "@pnp/spfx-controls-react/lib/Map";
Update the render method as shown below.
  1. public render(): React.ReactElement<IPnPMapControlProps> {
  2. return (
  3. <Map titleText="New of London"
  4. coordinates={{ latitude: 51.507351, longitude: -0.127758 }}
  5. enableSearch={true} />
  6. );
  7. }
Updated React component (src\webparts\pnPMapControl\components\PnPMapControl.tsx),
  1. import * as React from 'react';
  2. import styles from './PnPMapControl.module.scss';
  3. import { IPnPMapControlProps } from './IPnPMapControlProps';
  4. import { escape } from '@microsoft/sp-lodash-subset';
  5. import { Map, ICoordinates, MapType } from "@pnp/spfx-controls-react/lib/Map";
  7. export default class PnPMapControl extends React.Component<IPnPMapControlProps, {}> {
  8. public render(): React.ReactElement<IPnPMapControlProps> {
  9. return (
  10. <Map titleText="New of London"
  11. coordinates={{ latitude: 51.507351, longitude: -0.127758 }}
  12. enableSearch={true} />
  13. );
  14. }
  15. }

Deploy the solution

Execute the following commands to bundle and package the solution.
>gulp bundle --ship
>gulp package-solution --ship
Navigate to tenant app catalog – Example: https://c986.sharepoint.com/sites/appcatalog/SitePages/Home.aspx
Go to Apps for SharePoint library and upload the package file (sharepoint\solution\spfx-pnpreact-map.sppkg).
Click Deploy.
PnP Map Control In SharePoint Framework

Test the webpart

Navigate to the SharePoint site and add the app.
PnP Map Control In SharePoint Framework
Navigate to the page and add the webpart as shown below.
PnP Map Control In SharePoint Framework
Result
Webpart added successfully,
PnP Map Control In SharePoint Framework

Summary

Thus, in this article, you saw how to use PnP Map Control in SharePoint Framework.