Angular Displaying Imagery from Bing Maps

    The Angular IgxBingMapsMapImagery is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the www.bing.com/maps web site. The Ignite UI for Angular map component can display geographic imagery from Bing Maps in the map’s background content using the IgxBingMapsMapImagery class.

    Angular Displaying Imagery from Bing Maps Example

    Code Snippet

    The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular 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 properties of the IgxBingMapsMapImagery class:

    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.
    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
    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.
    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 SubDomainsCollection 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

    API References