Web Components Imagery from Azure Maps Preview
The Web Components IgcAzureMapsImagery is geographic imagery mapping service provided by Microsoft®. It provides several styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.azure.microsoft.com web site. The Ignite UI for Web Components map component can display geographic imagery from Azure Maps in the map’s background content using the IgcAzureMapsImagery class.
Web Components Displaying Imagery from Azure Maps - Overview
Web Components Displaying Imagery from Azure Maps - Code Example
The following code snippet shows how to display geographic imagery tiles from Azure Maps in Web Components GeographicMap using IgcAzureMapsImagery class.
const tileSource = new IgcAzureMapsImagery();
tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY";
tileSource.imageryStyle = AzureMapsImageryStyle.Satellite; // or
tileSource.imageryStyle = AzureMapsImageryStyle.Road; // or
tileSource.imageryStyle = AzureMapsImageryStyle.DarkGrey; // Traffic, Weather etc.
map.backgroundContent = tileSource;Web Components Overlaying Imagery from Azure Maps - Overview
When working with the GeographicTileSeries, you can combine overlays (traffic, weather, labels) on top of a base map style such as eg. Satellite, Road, or DarkGrey. Using TerraOverlay with eg. Satellite to visualize terrain.
- Base Styles: Satellite, Road, Terra, and DarkGrey provide the core background tiles.
- Overlay Styles: Traffic and Weather imagery (e.g.,
TrafficRelativeOverlay,WeatherRadarOverlay) are designed to be layered on top of a base style by assigning them to a tile series. - Hybrid Styles: Variants like
HybridRoadOverlayandHybridDarkGreyOverlayalready combine a base style with overlays (labels, roads, etc.), so you don’t need to manage multiple layers manually.
This design allows you to build richer maps, for example:
- Displaying Satellite imagery with a TrafficOverlay to highlight congestion on real-world images.
- Using Terra with WeatherRadarOverlay to visualize terrain with precipitation.
- Applying DarkGrey with LabelsRoadOverlay for a dashboard-friendly, contrast-heavy view.
Web Components Overlaying Imagery from Azure Maps - Code Example
The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the Web Components GeographicMap using IgcAzureMapsImagery and GeographicTileSeries classes.
<!-- index.html -->
<html>
<head>
<script type="module" src="index.ts"></script>
</head>
<body style="margin:0;">
<igc-geographic-map id="map" width="100%" height="100%" zoomable="true">
<igc-geographic-tile-series id="tileSeries"></igc-geographic-tile-series>
</igc-geographic-map>
</body>
</html>// index.ts
import {
IgcGeographicMapComponent,
IgcGeographicTileSeriesComponent,
IgcAzureMapsImagery,
AzureMapsImageryStyle,
IgcGeographicMapModule
} from 'igniteui-webcomponents-maps';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(IgcGeographicMapModule);
const azureKey = "<YOUR_KEY_HERE>";
window.addEventListener("load", () => {
const map = document.getElementById("map") as IgcGeographicMapComponent;
const tileSeries = document.getElementById("tileSeries") as IgcGeographicTileSeriesComponent;
// Update TileSeries
const overlay = new IgcAzureMapsImagery();
overlay.apiKey = azureKey;
overlay.imageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay;
tileSeries.tileImagery = overlay;
// Update Map Background
const background = new IgcAzureMapsImagery();
background.apiKey = azureKey;
background.imageryStyle = AzureMapsImageryStyle.DarkGrey;
map.backgroundContent = background;
});Properties
The following table summarizes properties of the IgcAzureMapsImagery class:
| Property Name | Property Type | Description |
|---|---|---|
ApiKey | string | Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website. |
ImageryStyle | IgxAzureMapsImageryStyle | Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following IgxAzureMapsImageryStyle enumeration values:
|