HERE Technologies LogoHERE
HERE Technologies LogoHERE
HERE Technologies LogoHERE
Azure

3 min read

10 September 2019

Using Map Image API in Azure

berlin map tile blog.gif

Earlier this year, we announced the launch of HERE location services for the Microsoft Azure Marketplace. Specifically, we released three Azure Resource Manager (ARM) templates to simplify the integration of our REST services as Azure functions within an Azure solution. The templates cover the following:

  • 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

Although our APIs can be used in multiple client types, our focus will be how to consume Azure Functions from HTML. The following are prerequisites for getting started:

Deploying Serverless Functions

At azure.microsoft.com, select Azure Marketplace.

2019azure marketplace blog

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

2019azure search here blog

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

2019azure get here blog

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 blog

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

2019azure here config blog

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 blog

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

2019azure map url blog

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

Consuming MapImage Function

Create an HTML page with the following content:

In the HTML, replace the your-azure-url-id and your-azure-function-code values in each <img> tag's src with what is in your copied URL. View the HTML in browser.

2019azure maps browser blog

You should now see four images representing unique ways to use the map image API. 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 Maps. For more information about HERE, please visit our developer portal at developer.here.com

Recently, we launched "Azure Connections", a new series on our Twitch channel. The focus of this series is to guide developers how to quickly adopt our Azure Marketplace integrations into coding solutions. Each episode features a core API. The first episode tackles map images, and this post navigates the steps to do the implementation. Join us next on October 2nd, 2019 for the second episode on Geocoding.

Portrait of Michael Palermo

Michael Palermo

Share article

Sign up for our newsletter

Why sign up:

  • Latest offers and discounts

  • Tailored content delivered weekly

  • Exclusive events

  • One click to unsubscribe