Take a web map offline.
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
Mapwith aPortalitem pointing to the web map. - Create
GenerateOfflineMapParametersspecifying the download area geometry, minimum scale, and maximum scale. - Create an
OfflineMapTaskwith the map. - Create the
OfflineMapJobwithOfflineMapTask.GenerateOfflineMap(params, downloadDirectoryPath)and start it withOfflineMapJob.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.
Tags
download, offline, save, web map
Sample Code
<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>