Blazor Displaying Imagery from Esri Maps

    The IgbArcGISOnlineMapImagery 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.

    Blazor Displaying Imagery from Esri Maps Example

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    Code Snippet

    The following code snippet shows how to display Blazor geographic imagery tiles from Esri imagery servers in IgbGeographicMap using IgbArcGISOnlineMapImagery class.

    @using IgniteUI.Blazor.Controls
    
    
    <IgbGeographicMap Height="100%" Width="100%"
        Zoomable="true"
        BackgroundContent="EsriImagery" />
    
    protected override void OnInitialized()
    {
        IgbArcGISOnlineMapImagery imagery = new IgbArcGISOnlineMapImagery()
        {
            MapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"
        };
    
        this.EsriImagery = imagery;
    }
    razor

    Esri Utility

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

    @using IgniteUI.Blazor.Controls
    
    
    <IgbGeographicMap Height="100%" Width="100%"
        Zoomable="true"
        BackgroundContent="EsriImagery" />
    
    protected override void OnInitialized()
    {
        IgbArcGISOnlineMapImagery imagery = new IgbArcGISOnlineMapImagery()
        {
            MapServerUri = EsriStyle.WorldOceansMap
        };
    
        this.EsriImagery = imagery;
    }
    razor

    API References