Generate offline map

View in

MAUI

UWP

WPF

WinUI

View on GitHub

Take a web map offline.

Image of generate offline map

Use case

Taking a web map offline allows users continued productivity when their network connectivity is poor or nonexistent. For example, by taking a map offline, a field worker inspecting utility lines in remote areas could still access a feature's location and attribute information.

How to use the sample

When the app starts, you will be prompted to sign in using a free ArcGIS Online account. Once the map loads, zoom to the extent you want to take offline. The red border shows the extent that will be downloaded. Click the "Take Map Offline" button to start the offline map job. The progress bar will show the job's progress. When complete, the offline map will replace the online map in the map view.

How it works

Create an Map with a Portal item pointing to the web map.
Create GenerateOfflineMapParameters specifying the download area geometry, minimum scale, and maximum scale.
Create an OfflineMapTask with the map.
Create the OfflineMapJob with OfflineMapTask.GenerateOfflineMap(params, downloadDirectoryPath) and start it with OfflineMapJob.Start().
When the job is done, get the offline map with OfflineMapJob.Result.OfflineMap.

Relevant API

GenerateOfflineMapJob
GenerateOfflineMapParameters
GenerateOfflineMapResult
OfflineMapTask
Portal

About the data

The map used in this sample shows the stormwater network within Naperville, IL, USA, with cartography designed for web and mobile devices with offline support.

Additional information

The creation of the offline map can be fine-tuned using parameter overrides for feature layers, or by using local basemaps to achieve more customized results.

Sample Code

GenerateOfflineMap.xaml

GenerateOfflineMap.xaml.cs

Use dark colors for code blocksCopy
﻿<UserControl
    x:Class="ArcGIS.UWP.Samples.GenerateOfflineMap.GenerateOfflineMap"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls">
    <Grid>
        <esriUI:MapView x:Name="MyMapView"/>

        <Border x:Name="takeOfflineArea" Background="White" BorderBrush="Black" BorderThickness="1"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Margin="30" Padding="20" Width="375">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <Button x:Name="TakeMapOfflineButton"
                        Width="250"
                        Click="TakeMapOfflineButton_Click"
                        IsEnabled="True"
                        Content="Take map offline"/>
            </StackPanel>
        </Border>

        <Border x:Name="messageArea" Visibility="Collapsed"
                Background="White" BorderBrush="Black" BorderThickness="1"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Margin="30" Padding="5" Width="450">
            <StackPanel>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10"
                           FontWeight="Bold"
                           Text="Map is offline!"/>
            </StackPanel>
        </Border>

        <Grid x:Name="busyIndicator" Background="#807f7f7f" Visibility="Collapsed">
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10"
                           Foreground="White" FontSize="18">
                    <Run Text="Generating offline map... "></Run>
                    <Run x:Name="Percentage" Text=""></Run>
                </TextBlock>
                <ProgressBar x:Name="progressBar"
                             Grid.Row="1"
                             Minimum="0" Maximum="100"
                             IsEnabled="True"
                             HorizontalAlignment="Center" VerticalAlignment="Center"
                             Width="100" Height="10" Margin="0,0,0,10"/>
                <Button x:Name="CancelJobButton"
                        Grid.Row="3"
                        Content="Cancel"
                        Click="CancelJobButton_Click"
                        HorizontalAlignment="Center"
                        Width="100"/>
            </Grid>
        </Grid>
        <Grid x:Name="loadingIndicator"
              Background="#807f7f7f"
              Visibility="Visible">
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <TextBlock Text="Loading online map..."
                           Foreground="White" FontSize="18"
                           Margin="10"/>
                <ProgressBar Grid.Row="1"
                             IsEnabled="True" IsIndeterminate="True"
                             Width="100" Height="10"
                             HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </Grid>
    </Grid>
</UserControl>