Azure MapsRender REST client library for JavaScript

Azure Maps Render Client

**If you are not familiar with our REST client, please spend 5 minutes to take a look at our REST client docs to use this library, the REST client provides a light-weighted & developer friendly way to call azure rest api

Key links:

• Source code
• Package (NPM)
• API reference documentation
• Product Information

Getting started

Currently supported environments

• LTS versions of Node.js
• Latest versions of Safari, Chrome, Edge and Firefox.

Prerequisites

• You must have an Azure subscription to use this package.
• An Azure Maps account. You can create the resource via the Azure Portal, the Azure PowerShell, or the Azure CLI.

If you use Azure CLI, replace <resource-group-name> and <map-account-name> of your choice, and select a proper pricing tier based on your needs via the <sku-name> parameter. Please refer to Azure Maps Reference for Azure CLI for more details.

az maps account create --resource-group <resource-group-name> --name <map-account-name> --sku <sku-name>

Install the @azure-rest/maps-render package

Install the Azure Maps Render REST client library for JavaScript with npm:

npm install @azure-rest/maps-render

Create and authenticate a MapsRenderClient

You'll need a credential instance for authentication when creating the MapsRenderClient instance used to access the Azure Maps render APIs. You can use either an Azure Active Directory (Azure AD) credential or an Azure subscription key to authenticate. For more information on authentication, see Authentication with Azure Maps.

Using an Azure AD credential

To use an Azure Active Directory (AAD) token credential, provide an instance of the desired credential type obtained from the @azure/identity library.

To authenticate with AAD, you must first npm install @azure/identity

After setup, you can choose which type of credential from @azure/identity to use. As an example, DefaultAzureCredential can be used to authenticate the client.

You'll need to register the new Azure AD application and grant access to Azure Maps by assigning the required role to your service principal. For more information, see Host a daemon on non-Azure resources. Set the values of the client ID, tenant ID, and client secret of the AAD application as environment variables: AZURE_CLIENT_ID, AZURE_TENANT_ID, AZURE_CLIENT_SECRET.

You will also need to specify the Azure Maps resource you intend to use by specifying the clientId in the client options. The Azure Maps resource client id can be found in the Authentication sections in the Azure Maps resource. Please refer to the documentation on how to find it.

const MapsRender = require("@azure-rest/maps-render").default;
const { DefaultAzureCredential } = require("@azure/identity");

const credential = new DefaultAzureCredential();
const client = MapsRender(credential, "<maps-account-client-id>");

Using a Subscription Key Credential

You can authenticate with your Azure Maps Subscription Key. Please install the"@azure/core-auth"package:

npm install @azure/core-auth

const MapsRender = require("@azure-rest/maps-render").default;
const { AzureKeyCredential } = require("@azure/core-auth");

const credential = new AzureKeyCredential("<subscription-key>");
const client = MapsRender(credential);

Using a Shared Access Signature (SAS) Token Credential

Shared access signature (SAS) tokens are authentication tokens created using the JSON Web token (JWT) format and are cryptographically signed to prove authentication for an application to the Azure Maps REST API.

You can get the SAS token using AzureMapsManagementClient.accounts.listSas from "@azure/arm-maps" package. Please follow the section Create and authenticate a AzureMapsManagementClient to setup first.

Second, follow Managed identities for Azure Maps to create a managed identity for your Azure Maps account. Copy the principal ID (object ID) of the managed identity.

Third, you will need to install"@azure/core-auth"package to use AzureSASCredential:

npm install @azure/core-auth

Finally, you can use the SAS token to authenticate the client:

  const MapsRender = require("@azure-rest/maps-render").default;
  const { AzureSASCredential } = require("@azure/core-auth");
  const { DefaultAzureCredential } = require("@azure/identity");
  const { AzureMapsManagementClient } = require("@azure/arm-maps");

  const subscriptionId = "<subscription ID of the map account>"
  const resourceGroupName = "<resource group name of the map account>";
  const accountName = "<name of the map account>";
  const mapsAccountSasParameters = {
    start: "<start time in ISO format>", // e.g. "2023-11-24T03:51:53.161Z"
    expiry: "<expiry time in ISO format>", // maximum value to start + 1 day
    maxRatePerSecond: 500,
    principalId: "<principle ID (object ID) of the managed identity>",
    signingKey: "primaryKey",
  };
  const credential = new DefaultAzureCredential();
  const managementClient = new AzureMapsManagementClient(credential, subscriptionId);
  const {accountSasToken} = await managementClient.accounts.listSas(
    resourceGroupName,
    accountName,
    mapsAccountSasParameters
  );
  if (accountSasToken === undefined) {
    throw new Error("No accountSasToken was found for the Maps Account.");
  }
  const sasCredential = new AzureSASCredential(accountSasToken);
  const client = MapsRender(sasCredential);

Key concepts

MapsRenderClient

MapsRenderClient is the primary interface for developers using the Azure Maps Render client library. Explore the methods on this client object to understand the different features of the Azure Maps Render service that you can access.

Examples

The following sections provide several code snippets covering some of the most common Azure Maps Render tasks, including:

• Request map tiles in vector or raster formats
• Request map copyright attribution information
• Request metadata for a tileset

Request map tiles in vector or raster formats

You can request map tiles in vector or raster formats. These tiles are typically to be integrated into a map control or SDK. Some example tiles that can be requested are Azure Maps road tiles, real-time Weather Radar tiles or the map tiles created using Azure Maps Creator.

const { createWriteStream } = require("fs");
const { positionToTileXY } = require("@azure-rest/maps-render");

const zoom = 6;
// Use the helper function `positionToTileXY` to get the tile index from the coordinate.
const { x, y } = positionToTileXY([47.61559, -122.33817], 6, "256");
const response = await client
  .path("/map/tile")
  .get({
    queryParameters: {
      tilesetId: "microsoft.base.road",
      zoom,
      x,
      y,
    },
  })
  .asNodeStream();

// Handle the error.
if (!response.body) {
  throw Error("No response body");
}
response.body.pipe(createWriteStream("tile.png"));

Request map copyright attribution information

You can request map copyright attribution information for a section of a tileset. A tileset is a collection of raster or vector data broken up into a uniform grid of square tiles at preset zoom levels. Every tileset has a tilesetId to use when making requests. The supported tilesetIds are listed here.

const { isUnexpected } = require("@azure-rest/maps-render");

const response = await client.path("/map/attribution").get({
  queryParameters: {
    tilesetId: "microsoft.base",
    zoom: 6,
    /** The order is [SouthwestCorner_Longitude, SouthwestCorner_Latitude, NortheastCorner_Longitude, NortheastCorner_Latitude] */
    bounds: [-122.414162, 47.57949, -122.247157, 47.668372],
  },
});

// Handle exception.
if (isUnexpected(response)) {
  throw response.body.error;
}

console.log("Copyright attribution for microsoft.base: ");
response.body.copyrights.forEach((copyright) => console.log(copyright));

Request metadata for a tileset

You can request metadata for a tileset in TileJSON format using the following code snippet.

const { isUnexpected } = require("@azure-rest/maps-render");

const response = await client.path("/map/tileset").get({
  queryParameters: {
    tilesetId: "microsoft.base",
  },
});

if (isUnexpected(response)) {
  throw response.body.error;
}

console.log("The metadata of Microsoft Base tileset: ");
const { maxzoom, minzoom, bounds = [] } = response.body;
console.log(`The zoom range started from ${minzoom} to ${maxzoom}`);
console.log(
  `The left bound is ${bounds[0]}, bottom bound is ${bounds[1]}, right bound is ${bounds[2]}, and top bound is ${bounds[3]}`
);

Troubleshooting

Logging

Enabling logging may help uncover useful information about failures. In order to see a log of HTTP requests and responses, set the AZURE_LOG_LEVEL environment variable to info. Alternatively, logging can be enabled at runtime by calling setLogLevel in the @azure/logger:

const { setLogLevel } = require("@azure/logger");

setLogLevel("info");

For more detailed instructions on how to enable logs, you can look at the @azure/logger package docs.

Next steps

Please take a look at the samples directory for detailed examples on how to use this library.

Contributing

If you'd like to contribute to this library, please read the contributing guide to learn more about how to build and test the code.

Related projects

• Microsoft Azure SDK for JavaScript