Save Location details to SharePoint Location column through SPFx and PnP JS


The Location field in SharePoint has been announced in February 2019 - (https://techcommunity.microsoft.com/t5/sharepoint/add-location-details-to-sharepoint-data-and-content/m-p/284875). Before this announcement, data has been saved as addresses and coordinates(Latitude, Longitude) in different columns in SharePoint because if they have to be filtered by address, city, or state.   

The data of the location column is saved with all these details:
Image 1

If you want to save only the coordinates, you can pass only that value to the location column while saving the item. If you want to save, only the address like city, country and Pincode, you can pass only those values to the location column. I initially thought because it is a location column you have to pass the coordinates for saving. But, there is no mandatory value that needs to be passed to save the value for the location column and that is really useful. 

Save Location Details through SPFx/PnP JS:
In this example, I am going to get the address from bing map first for the location coordinates, and then save the address and coordinates to the location column using PnP JS.
  1. Get the set of address values based on latitude and longitude using bing maps. You can get the values from the following REST service : 
         http://dev.virtualearth.net/REST/v1/Locations/{point}?includeEntityTypes={entityTypes}&includeNeighborhood={includeNeighborhood}&include={includeValue}&key={BingMapsKey} 
    The API requires these two mandatory parameters- the points(Latitude and Longitude) and the bing map key. Follow this Microsoft article to get the bing map keys - Getting a Bing Maps Key

public getAddress(LatitudestringLongitudestringkeystring): Promise<any[]> {
    //Reference: https://docs.microsoft.com/en-us/bingmaps/rest-services/locations/find-a-location-by-point
    let urlstring = "https://dev.virtualearth.net/REST/v1/Locations/" + Latitude + "," + Longitude + "?key=" + key;
    return fetch(url, {
      credentials: 'omit',
      method: 'GET'
    }).then(response => response.json())
      .then(result => {
        let addrssany = result.resourceSets[0].resources[0].address;
        let resultAddressany = {
          City: addrss.adminDistrict2,
          CountryOrRegion: addrss.countryRegion,
          PostalCode: addrss.postalCode,
          State: addrss.adminDistrict,
          Street: addrss.addressLine,
        };
        return [resultAddressresult.resourceSets[0].resources[0].name];
      });
  }

In addition to the address value, I additionally took the display name of the location.

    2. The next is the simplest step.  Save the data to the SharePoint Location column by passing the values that are necessary to save. Pass the same key as per the Image 1.
 public saveLocationData(LatitudestringLongitudestring) {
    //pass the key and coordinates
    let key = "AjClfsBm-UGnvnk_WHbgUkjRRETzD7noDytrb9YwOSjB8-xxxxxxxxxxxxxxxxxx";
    this.getAddress(LatitudeLongitudekey).then(async (locationResult=> {
      sp.web.lists.getByTitle("listname").items.getById(1).update({
        address: JSON.stringify({
          "Address": locationResult[0],
          "DisplayName": locationResult[1],
          "Coordinates": { "Latitude": Latitude"Longitude": Longitude }
        })
      }).then((itemUpdateResult=> {
        console.info(itemUpdateResult);
      });
    });
  }

I updated an item in this example. You can use the same logic to create an item as well. The item is updated with coordinates, address and display name. 

Comments

Post a Comment

Thank you for your comment.

Popular posts from this blog

Get All content types from ContentTypeHub using SharePoint Rest API v2 using JavaScript

How To Create/ Generate QRcode In SPFx Web Part