Azure

Using Places API in Azure

By Michael Palermo | 05 November 2019

Are you an Azure developer? Would you like to see how easy it is to create your own Azure Functions to provide location services? At HERE, we made this very easy by making available our core location services at the Microsoft Azure Marketplace. Currently, there are three Azure Resource Manager (ARM) templates to simplify the integration of our REST services as Azure functions. The following templates are available, and this post will focus on the first (specifically using the Places API):

  • Serverless Functions - Deploys HERE location services as Azure functions that can be invoked directly within any Azure applications and/or solutions.
  • Web App Backends - Deploys HERE location services as Azure functions along with Azure Service Bus and Cosmos DB to optimize for web application backend.
  • Real-Time Data Streams - Deploys HERE location services as Azure functions along with Event Hub and Cosmos DB to optimize for real-time streaming applications.

What is the Places API? It allows developers to search for points of interest at a given geolocation. For more information, check out Places (Search) API.

 

Scope and Requirements

You can call our APIs from multiple client types. In this post you will learn how to consume our APIs from Azure Functions, which in turn will be invoked from an HTML client. The following are prerequisites for getting started:

Deploying Serverless Functions

At azure.microsoft.com, select Azure Marketplace.

2019azure_marketplace

Search for "HERE Maps" and select HERE Maps & Location Services.

2019azure_search_here

At the landing page for HERE Maps & Location Services, choose GET IT NOW.

2019azure_get_here

Follow prompts until you are at the landing page for HERE Maps & Location Services template within the Azure Portal, then select Create.

2019azure_create_here

After choosing the basic configuration, you will be prompted to enter your HERE App ID and App Code.

2019azure_here_config

Once you have completed the process and deployed the template, navigate to App Services in the Azure Portal. Click on your recently created Function App, which will have its own unique identifier (we will call this the app_id).

2019azure_app_services

Within the function app, select places under the Functions, and then click on the
</> Get function URL.

2019azure_places-url

Copy the URL and save it to a text file. The end of the URL contains a querystring - code={places-function-code}.

Consuming the Places Function

Consider the following javascript in an HTML page:


// element on page where results will go
const display = document.getElementById("display");
const AZURE_FN = "your-azure-app-id";
const AZURE_PLACES_CODE = "your-places-function-code";
const API = "azurewebsites.net/api/places/v1/discover/explore";
let atin = "at";
let geo = "52.54435,13.35289"; // berlin

function invokeGeoAPI(search) { // search supplied by user
  let url = `https://${AZURE_FN}.${API}?${atin}=${geo}&q=${search}&code=${AZURE_PLACES_CODE}`;
  fetch(url)
  .then(response => response.json())
  .then(response => {
    console.log(response);
    display.innerHTML = "";
    let items = response.results.items || response.results;
    // helper function to display results
    displayItems(items);
  });
}

In the above script, be sure to replace the your-azure-app-id and your-places-function-code values declared as constants and concatenated into url string. When the script is executed, it displays all the locations that match the users input. For more commentary and additional uses, please watch our on-demand episode on this topic!

Summary

Developers can quickly utilize location services from HERE within Azure! To access the code files associated with this post, please visit our GitHub LiveStreams page for Azure Places. For more information about HERE, please visit our developer portal at developer.here.com