Web Components Displaying Imagery from Esri Maps
The IgcArcGISOnlineMapImagery 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.
Web Components Displaying Imagery from Esri Maps Example
Code Snippet
The following code snippet shows how to display Web Components geographic imagery tiles from Esri imagery servers in IgcGeographicMapComponent using IgcArcGISOnlineMapImagery class.
import { IgcGeographicMap } from 'igniteui-webcomponents-maps';
import { IgcArcGISOnlineMapImagery } from 'igniteui-webcomponents-maps';
// ...
const tileSource = new IgcArcGISOnlineMapImagery();
tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
const geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent
geoMap.backgroundContent = tileSource;
Esri Utility
Alternatively, you can use the EsriUtility which defines all styles provided by Esri imagery servers.
import { IgcGeographicMap } from 'igniteui-webcomponents-maps';
import { IgcArcGISOnlineMapImagery } from 'igniteui-webcomponents-maps';
import { EsriUtility, EsriStyle } from './EsriUtility';
// ...
const tileSource = new IgcArcGISOnlineMapImagery();
tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap);
const geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent
geoMap.backgroundContent = tileSource;