Skip To Content

Multiple maps

In this topic

An app can contain more than one map. Most often, an additional map is used to display an overview of the area of interest that is being studied on the main map. You can also use multiple maps to show the following:

  • Different layers of information about a specific area side by side.
  • The detail of an area based on the mouse or touch area of the main map.

The number of maps that can be shown is limited by your hardware. Screen size and graphics processing will dictate how many maps can be practically used in your app. There is no hard limit imposed by the runtime.

Add an overview map

An overview map shows the extent of the main map at a smaller scale and provides spatial context for the area of interest. When you pan a map looking at detail, it is easy to lose where you started or to be unable to estimate how far away you are from features that are no longer in view.

To create an overview map, do the following:

  • Ensure you have a main map component with a uniquely named ID.
  • Define an overview map component.
  • Handle the extent changed event of the main map and update the overview map extent appropriately.
  • Optionally display a graphic on the overview map that represents the current extent of the main map.
Overview map displaying current extent

The following XAML defines a main map and a smaller overview map (displayed in the upper-right of the page).

<Grid>
    <esri:MapView x:Name="MyMapView" ExtentChanged="MyMapView_ExtentChanged">
        <esri:Map>
            <esri:ArcGISTiledMapServiceLayer ID="Basemap"
			ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        </esri:Map>
    </esri:MapView>
    <esri:MapView x:Name="MyOverviewMapView" 
                Width="150" Height="100"
                HorizontalAlignment="Right" VerticalAlignment="Top">
        <esri:MapView.InteractionOptions>
            <esri:InteractionOptions IsEnabled="False"/>
        </esri:MapView.InteractionOptions>
        <esri:Map>
            <esri:ArcGISTiledMapServiceLayer ID="Basemap"
			ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer"/>
        </esri:Map>
    </esri:MapView>
</Grid>
Note:

You may want to disable user interaction (panning, zooming, rotating) with the overview map so the extent shown is always based on the extent in the main map view. Use the MapView.InteractionOptions property as shown in the previous example to disable user interaction. See the Navigate the map topic for more information about restricting the built-in map interaction.

Code in the ExtentChanged event for the main map updates the overview map to display the same location at a smaller scale (larger map area).

void MyMapView_ExtentChanged(object sender, EventArgs e)
{
    // display the overview map at an extent 4 times larger than the main map extent
    MyOverviewMapView.SetViewAsync(MyMapView.Extent.Expand(4));
}

To display an outline representing the current extent of the main map in the overview map, you must include a graphics layer and a graphic component in your overview map. In the extent changed event, after updating the extent of the overview map, you can set the extent graphic to show the current extent of the main map. The following example adds an extent graphic to a graphics layer in the overview map when the page initializes. The geometry of the graphic is then updated when the main map view extent changes.

private Graphic overviewExtentGraphic;
public MainWindow()
{
    InitializeComponent();
    overviewExtentGraphic = new Graphic(MyMapView.Extent, 
                                        FindResource("RedBoxSym") as SimpleFillSymbol);
    var graphics = MyOverviewMapView.Map.Layers["ExtentGraphicsLayer"] as GraphicsLayer;
    graphics.Graphics.Add(overviewExtentGraphic);
}

void MyMapView_ExtentChanged(object sender, EventArgs e)
{
    MyOverviewMapView.SetViewAsync(MyMapView.Extent.Expand(4));
    overviewExtentGraphic.Geometry = MyMapView.Extent;
}

Side-by-side maps

Side-by-side maps are a great way to show different layers of information at the same time. For example, you can compare imagery with topographic information, display before-and-after images, or show different levels of detail side by side.

The recommended approach when sharing extents between multiple maps is to disable interaction for all but one map, and allow that interaction to control updates to all other (dependent) maps. Map interaction is enabled by default, but can be disabled by setting the MapView.InteractionOptions.IsEnabled property to False, as shown in the following XAML.

<esri:MapView.InteractionOptions>
    <esri:InteractionOptions IsEnabled="False"/>
</esri:MapView.InteractionOptions>

You can set the extent of the dependent maps in code that handles the ExtentChanged or NavigationCompleted event.

void MapViewOne_NavigationCompleted(object sender, EventArgs e)
{
    MapViewTwo.SetViewAsync(MapViewOne.Extent);   
}

Detail map

Using an overview as your main map and showing detail in a separate window might be useful when you have multiple project sites spread apart geographically. You can define each map to have different layers of information, or they can have the same map layers but shown at a different scale.

To define a detail map that is related to a main map, the same methodology that was described for an overview map is used. The extent of the detail map is dependent on the extent of the main map, but at a fraction of the scale. In the following example, the detail map uses a scale of 10 percent of the main map.

void MyMainMapView_NavigationCompleted(object sender, EventArgs e)
{
    var detailExtent = MyMainMapView.Extent.Expand(0.1);
    MyDetailMapView.SetViewAsync(detailExtent);
    MyDetailMapView2.SetViewAsync(detailExtent);
    MyDetailMapView3.SetViewAsync(detailExtent);    
}

The Envelope.Expand method takes a value greater than 0. Values less than 1 result in a smaller envelope, values greater than 1 produce a larger extent. In the previous example, the value of 0.1 will show the map at a much larger scale (smaller map area) than the main map.

The extent of the detail map views are controlled by the main map

A way to achieve a similar outcome without the addition of a second map component to your app is to use the map magnifier. The map magnifier is a property of the map component. Although the default is false, if you add the property with a value of true to your map, when you tap and hold on the map, a circular window appears and magnifies that area of the map.

<esri:MapView x:Name="MyMainMapView" ShowMagnifierOnTapAndHold="True">
    ...
</esri:MapView>

The map magnifier will only magnify the layers that are contained in the main map. If different layers are required, a second map component is required.

Share data between map views

Sharing the same map instance simultaneously among two or more map views, or a layer instance simultaneously between maps, is not supported and is likely to cause stability or performance issues. Working with graphics overlays or distinct feature layer instances that share the same feature service (ServiceFeatureTable) can cause the same issues and is also not supported in multiple map views at the same time.

If you need to reuse a Map in another MapView, you should ensure that it is then removed from the previous control. The same technique can be used for reusing a layer instance between maps.

The following example moves a layer from one map to another.

var layer = MyMapView1.Map.Layers["MyFeatureLayer"] as FeatureLayer;

MyMapView2.Map.Layers.Add(layer); // add the layer to a new map
MyMapView1.Map.Layers.Remove(layer); // remove the layer from its original map

Note:

Location display can only be enabled in a single map view in your app at a time. If you attempt to enable location display in several map views simultaneously, it will only appear in one.

Related topics