Mobile map (search and route)

View inWPFUWPFormsiOSAndroid
View on GitHub

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. Tap on a map in the list to open it. If a locator task is available, tap 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

  1. Create a MobileMapPackage using MobileMapPackage.OpenAsync(path).
  2. Get a list of maps using the Maps property.
  3. If the package has a locator, access it using the LocatorTask property.
  4. 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.

Tags

disconnected, field mobility, geocode, network, network analysis, offline, routing, search, transportation

Sample Code

MobileMapSearchAndRoute.xamlMobileMapSearchAndRoute.xaml.cs
                                                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:esriUI="clr-namespace:Esri.ArcGISRuntime.Xamarin.Forms;assembly=Esri.ArcGISRuntime.Xamarin.Forms"
             xmlns:mapping="clr-namespace:Esri.ArcGISRuntime.Mapping;assembly=Esri.ArcGISRuntime"
             xmlns:resources="clr-namespace:Forms.Resources;assembly=ArcGISRuntime"
             xmlns:converters="clr-namespace:ArcGISRuntimeXamarin.Converters;assembly=ArcGISRuntime"
             xmlns:converters1="clr-namespace:Forms.Converters"
             x:Class="ArcGISRuntimeXamarin.Samples.MobileMapSearchAndRoute.MobileMapSearchAndRoute">
    <ContentPage.Resources>
        <converters:NullOrEmptyToVisibilityConverter x:Key="NullToVisibilityConverter" />
        <converters1:ItemToImageSourceConverter x:Key="ItemToImageSourceConverter" />
    </ContentPage.Resources>
    <RelativeLayout>
        <esriUI:MapView x:Name="MyMapView" Style="{StaticResource MapWithFormStyle}"
                        BindingContext="{x:Reference Name=ResponsiveFormContainer}" />
        <resources:ResponsiveFormContainer x:Name="ResponsiveFormContainer">
            <StackLayout>
                <Label
                    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."
                    LineBreakMode="WordWrap" />
                <ListView x:Name="MapListView"
                          ItemSelected="Map_Selected"
                          HeightRequest="150"
                          RowHeight="50"
                          Margin="0,5,0,0">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="mapping:Map">
                            <ViewCell>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Column="0"
                                           Source="{Binding Item, Converter={StaticResource ItemToImageSourceConverter}}" />
                                    <Image Grid.Column="1"
                                           Source="{resources:ImageResource ArcGISRuntime.Resources.routingSymbol.png}"
                                           HeightRequest="25" WidthRequest="25"
                                           Margin="5"
                                           IsVisible="{Binding TransportationNetworks,Converter={StaticResource NullToVisibilityConverter}}" />
                                    <Label Grid.Column="2"
                                           Text="{Binding Item.Title}"
                                           VerticalTextAlignment="Center"
                                           HorizontalTextAlignment="Start" />
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </resources:ResponsiveFormContainer>
    </RelativeLayout>
</ContentPage>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.