Multiple maps

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 whose extent property is bound to the extent of the main map, but at some other scale.
  • Optionally display a graphic on the overview map that represents the current extent of the main map.
Overview map displaying current extent

The following property definition for the overview map defines an extent four times the size of the main map. Most importantly, when a user pans the main map, the overview map will pan to match.

extent: mainMap.extent.scale(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. The geometry of the graphic can be bound directly to the extent of the main map. The following example shows that the geometry of a red rectangle is dependent on the extent of the main map component. Whenever the user pans or zooms, the geometry is updated.

onExtentChanged: {
        redBox.geometry = mainMap.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. To ensure that your maps always display the same extent, bind the extent of one map to the other, as shown below:

Map {
        id: leftMap

    Map {
        id: rightMap
        extent: leftMap.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.

extent: mainMap.extent.scale(0.1)
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.

magnifierOnPressAndHoldEnabled: true

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.