Mobile map (search and route)

View in

Android

Forms

UWP

WPF

WinUI

iOS

View on GitHub

Sample viewer app

Display maps and use locators to enable search and routing offline using a Mobile Map Package.

Image of mobile map search and route

Use case

Mobile map packages make it easy to transmit and store the necessary components for an offline map experience including: transportation networks (for routing/navigation), locators (address search, forward and reverse geocoding), and maps.

A field worker might download a mobile map package to support their operations while working offline.

How to use the sample

A list of maps from a mobile map package will be displayed. If the map contains transportation networks, the list item will have a navigation icon. Click on a map in the list to open it. If a locator task is available, click on the map to reverse geocode the location's address. If transportation networks are available, a route will be calculated between geocode locations.

How it works

Create a MobileMapPackage using MobileMapPackage.OpenAsync(path).
Get a list of maps using the Maps property.
If the package has a locator, access it using the LocatorTask property.
To see if a map contains transportation networks, check each map's TransportationNetworks property.

Relevant API

GeocodeResult
MobileMapPackage
ReverseGeocodeParameters
Route
RouteParameters
RouteResult
RouteTask
TransportationNetworkDataset

Offline data

This sample uses the San Francisco mobile map package.

Sample Code

MobileMapSearchAndRoute.xaml

MobileMapSearchAndRoute.xaml.cs

Use dark colors for code blocksCopy
﻿<UserControl x:Class="ArcGISRuntime.WPF.Samples.MobileMapSearchAndRoute.MobileMapSearchAndRoute"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:converters="clr-namespace:ArcGISRuntime.Converters"
             xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
             xmlns:viewer="clr-namespace:ArcGISRuntime.WPF.Viewer.Converters">
    <UserControl.Resources>
        <converters:ItemToImageSourceConverter x:Key="ItemToImageSourceConverter" />
        <viewer:NullOrEmptyToVisibilityConverter x:Key="NullToVisibilityConverter" />
    </UserControl.Resources>
    <Grid>
        <esri:MapView x:Name="MyMapView" />
        <Border Style="{StaticResource BorderStyle}">
            <StackPanel>
                <TextBlock FontWeight="SemiBold"
                           Text="Select a map from the package. If a network is available, you can route between tapped points. If a locator is available, the address for each tapped point will be displayed in a callout."
                           TextWrapping="Wrap" />
                <ListBox ItemsSource="{Binding Maps}" SelectionChanged="Map_Selected">
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        </Style>
                    </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>
                        <DataTemplate DataType="esri:Map">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="100" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Image Grid.Column="0" Source="{Binding Item, Converter={StaticResource ItemToImageSourceConverter}}" />
                                <Image Grid.Column="1"
                                       Width="50"
                                       Height="50"
                                       Margin="5"
                                       Source="../../../Resources/routingSymbol.png"
                                       Visibility="{Binding TransportationNetworks, Converter={StaticResource NullToVisibilityConverter}}" />
                                <TextBlock Grid.Column="2"
                                           VerticalAlignment="Center"
                                           Text="{Binding Item.Title}"
                                           TextAlignment="Right" />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>