Angular Displaying Imagery from Esri Maps

    The IgxArcGISOnlineMapImagery is a free geographic imagery mapping service created by Esri company. It provides over 40 styles of geographic imagery tiles of the world and some thematic tiles for the USA. This geographic imagery service can be accessed directly on www.arcgisonline.com web site.

    Angular Displaying Imagery from Esri Maps Example

    Code Snippet

    The following code snippet shows how to display Angular geographic imagery tiles from Esri imagery servers in IgxGeographicMapComponent using IgxArcGISOnlineMapImagery class.

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

    import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
// ...
public geoMap: IgxGeographicMapComponent;

const tileSource = new IgxArcGISOnlineMapImagery();
tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";

this.geoMap.backgroundContent = tileSource;

    Esri Utility

    Alternatively, you can use the EsriUtility which defines all styles provided by Esri imagery servers.

    import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
import { EsriUtility, EsriStyle } from './EsriUtility';
// ...
public geoMap: IgxGeographicMapComponent;

const tileSource = new IgxArcGISOnlineMapImagery();
tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap);

this.geoMap.backgroundContent = tileSource;

    API References