React Displaying Imagery from Azure Maps
The React IgrAzureMapsImagery 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 React map component can display geographic imagery from Azure Maps in the map’s background content using the IgrAzureMapsImagery class.
React Displaying Imagery from Azure Maps Example
Code Snippet
The following code snippet shows how to display geographic imagery tiles from Azure Maps in React IgrGeographicMap using IgrAzureMapsImagery class.
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrAzureMapsImagery } from 'igniteui-react-maps';
import { AzureMapsImageryStyle } from 'igniteui-react-maps';
// ...
const tileSource = new IgrAzureMapsImagery();
tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY";
tileSource.imageryStyle = AzureMapsImageryStyle.Satellite; // or
tileSource.imageryStyle = AzureMapsImageryStyle.Road; // or
tileSource.imageryStyle = AzureMapsImageryStyle.DarkGrey; // Traffic, Weather etc.
const geoMap = new IgrGeographicMap({ name: "geoMap" });
geoMap.backgroundContent = tileSource;
React Displaying Tile Series Overlays over Imagery from Azure Maps Example
When working with the IgrGeographicTileSeries, 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.
Code Snippet
The following code snippet shows how to display geographic imagery tiles ontop of a background imagery joining eg. traffic with a dark grey map for the React IgrGeographicMap using IgrAzureMapsImagery and IgrGeographicTileSeries classes.
// App.tsx
import React, { useEffect, useRef } from 'react';
import {
IgrGeographicMap,
IgrGeographicTileSeries,
IgrAzureMapsImagery,
AzureMapsImageryStyle
} from 'igniteui-react-maps';
export default function App() {
const mapRef = useRef<IgrGeographicMap>(null);
const tileSeriesRef = useRef<IgrGeographicTileSeries>(null);
const azureKey = "<YOUR_KEY_HERE>";
// Update TileSeries
const series = new IgrGeographicTileSeries({
name: "AzureTileSeries",
});
const overlay = new IgrAzureMapsImagery({});
overlay.apiKey = azureKey;
overlay.imageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay;
series.tileImagery = overlay;
// Update Map Background
const background = new IgrAzureMapsImagery({});
background.apiKey = azureKey;
background.imageryStyle = AzureMapsImageryStyle.DarkGrey;
this.geoMap.backgroundContent = background;
this.geoMap.series.add(series);
return (
<div style={{ height: "100vh" }}>
<IgrGeographicMap
ref={mapRef}
width="100%" height="100%"
zoomable={true}>
<IgrGeographicTileSeries ref={tileSeriesRef} />
</IgrGeographicMap>
</div>
);
}
Properties
The following table summarizes properties of the IgrAzureMapsImagery class:
| 속성 이름 | 부동산 유형 | 설명 |
|---|---|---|
apiKey |
끈 | Azure Maps 이미지 서비스에 필요한 API 키를 설정하기 위한 속성을 나타냅니다. 이 키는 azure.microsoft.com 웹 사이트에서 가져와야 합니다. |
imageryStyle |
AzureMapsImageryStyle |
Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following AzureMapsImageryStyle enumeration values:
|