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:
| Package Version | Service Version |
|---|---|
| ^1.0.0-beta.4 | V1 |
| ^2.0.0-beta.1 | 2024-04-01 |
- LTS versions of Node.js
- Latest versions of Safari, Chrome, Edge and Firefox.
- 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 Maps Render REST client library for JavaScript with npm:
npm install @azure-rest/maps-renderYou'll need a credential instance for authentication when creating the MapsRenderClient instance used to access the Azure Maps render APIs. You can use either a Microsoft Entra ID credential or an Azure subscription key to authenticate. For more information on authentication, see Authentication with Azure Maps.
To use an Microsoft Entra ID token credential, provide an instance of the desired credential type obtained from the @azure/identity library.
To authenticate with Microsoft Entra ID, 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 Microsoft Entra ID 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 Microsoft Entra ID 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.
import { DefaultAzureCredential } from "@azure/identity";
import MapsRender from "@azure-rest/maps-render";
const credential = new DefaultAzureCredential();
const client = MapsRender(credential, "<maps-account-client-id>");You can authenticate with your Azure Maps Subscription Key. Please install the"@azure/core-auth"package:
npm install @azure/core-authimport { AzureKeyCredential } from "@azure/core-auth";
import MapsRender from "@azure-rest/maps-render";
const credential = new AzureKeyCredential("<subscription-key>");
const client = MapsRender(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-authFinally, you can use the SAS token to authenticate the client:
import { DefaultAzureCredential } from "@azure/identity";
import { AzureMapsManagementClient } from "@azure/arm-maps";
import { AzureSASCredential } from "@azure/core-auth";
import MapsRender from "@azure-rest/maps-render";
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);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.
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
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.
import { DefaultAzureCredential } from "@azure/identity";
import MapsRender, { positionToTileXY } from "@azure-rest/maps-render";
import { createWriteStream } from "node:fs";
const credential = new DefaultAzureCredential();
const client = MapsRender(credential, "<maps-account-client-id>");
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"));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.
import { DefaultAzureCredential } from "@azure/identity";
import MapsRender, { isUnexpected } from "@azure-rest/maps-render";
const credential = new DefaultAzureCredential();
const client = MapsRender(credential, "<maps-account-client-id>");
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));You can request metadata for a tileset in TileJSON format using the following code snippet.
import { DefaultAzureCredential } from "@azure/identity";
import MapsRender, { isUnexpected } from "@azure-rest/maps-render";
const credential = new DefaultAzureCredential();
const client = MapsRender(credential, "<maps-account-client-id>");
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]}`,
);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:
import { setLogLevel } from "@azure/logger";
setLogLevel("info");For more detailed instructions on how to enable logs, you can look at the @azure/logger package docs.
Please take a look at the samples directory for detailed examples on how to use this library.
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.