Angular Binding Imagery from Bing Maps

Bing Maps is Microsoft’s® licensed geographic imagery mapping service. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component displays geographic imagery from Bing Maps in the map’s background content using the IgxBingMapsMapImagery class. However, by default the map component displays geographic imagery from the Open Street Maps in the map background content requiring you to configure the control to display Bing Maps’ geographic imagery. Prior to using Bing Maps’ geographic imagery, you must register and obtain a Bing Map API key from www.bingmapsportal.com You must use the Bing Maps’ API key to set the BingMapsMapImagery object’s ApiKey property.

Demo

Code Snippet

The following code snippet shows how to display geographic imagery tiles from Bing Maps in IgxGeographicMapComponent using IgxBingMapsMapImagery class.

<igx-geographic-map #map
    width="100%"
    height="100%"
    zoomable="true" >
</igx-geographic-map>

import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxBingMapsMapImagery } from 'igniteui-angular-maps';
// ...
const tileSource = new IgxBingMapsMapImagery();
tileSource.apiKey = "YOUR_BING_MAPS_API_KEY";
tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels; // or
tileSource.imageryStyle = BingMapsImageryStyle.Aerial; // or
tileSource.imageryStyle = BingMapsImageryStyle.Road;

// resolving BingMaps uri based on HTTP protocol of hosting website
let tileUri = tileSource.actualBingImageryRestUri;
const isHttpSecured = window.location.toString().startsWith("https:");
if (isHttpSecured) {
    tileUri = tileUri.replace("http:", "https:");
} else {
    tileUri = tileUri.replace("https:", "http:");
}
tileSource.bingImageryRestUri = tileUri;

this.map.backgroundContent = tileSource;

Properties

The following table summarized data structures required for each type of geographic series :

Property Name	Property Type	Description
apiKey	string	Represents the property for setting an API key required for the Bing Maps imagery service. You must obtain this key from the www.bingmapsportal.com website.
bingImageryRestUri	string	Represents the property for setting the Bing Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI.
cultureName	string	Represents a property for setting the culture name for the tile source.
imageryStyle	BingMapsImageryStyle	Represents the property for setting the Bing Maps imagery tiles map style. This property can be set to the following BingMapsImageryStyle enumeration values: Aerial - Specifies the Aerial map style without road or labels overlay AerialWithLabels - Specifies the Aerial map style with road and labels overlay Road - Specifies the Roads map style without Aerial overlay
isDeferredLoad	Boolean	Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values.
isInitialized	Boolean	Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component.
subDomains	ObservableCollection	Represents an image collection of URI sub domains
tilePath	string	Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps

Code Snippet

The following code snippet shows how to display geographic imagery from Bing Maps in the background content of the map component.