Using Geocode API in Azure

By Michael Palermo | 31 October 2019

Developers targeting the Azure Platform can easily create their own serverless functions to provide location services. This is possible by using HERE location services for the Microsoft Azure Marketplace. 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:

  • 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.

Scope and Requirements

You can call our APIs from multiple client types. In this post you will learn how to consume our APIs fromAzure 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.

2019azure_app_services

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

2019azure_geocode-url

Copy the URL and save it to a text file. You will use it in your HTML client page.

Consuming MapImage Function

Consider the following javascript in an HTML page:


const AZURE_FN = "your-azure-url-id";
const AZURE_FN_KEY = "your-azure-function-code";
function processForm() {
    let place = document.getElementById("placeInput").value;
    console.log(place);
    if (place == "") {
        alert("Need a place!");
        return false;
    }
    invokeGeoAPI(place);
} 
function invokeGeoAPI(place) {
    fetch(`https://${AZURE_FN}.azurewebsites.net/api/geocoder/6.2/geocode.json?searchtext=${place}&code=${AZURE_FN_KEY}`)
        .then(response => response.json())
        .then(response => {
            console.log(response);
            console.log(response.Response.View[0].Result[0].Location.DisplayPosition)
    });
}

In the above script, be sure to replace the your-azure-url-id and your-azure-function-code values declared as constants and concatenated into URL string. The script calls the Azure function when a user types a place into an input box. The results are not displayed on the page, but in the developer's console in the browser. The Azure function returns the latitude and longitude of the place entered. Users can enter full addresses, city name, state name, country name, and so forth.

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 Geocode. For more information about HERE, please visit our developer portal at developer.here.com