English

FAQ: Is it possible to embed multiple web maps in a single web app?

Question

Is it possible to embed multiple web maps in a single web app?

Answer

Yes, it is possible to embed multiple web maps in a single web app using Esri Story Map templates and the Compare template. Use any of the web app options below to embed multiple web maps in a single web app:

Esri Story Map templates
Certain Esri Story Map templates are suitable to embed multiple web maps. Embedding web maps in a story map is suitable for data presentation, comparison, and relationship studies. Refer to the table below to determine the suitability of Esri Story Map templates for embedding multiple web maps:

Story map templateIs it possible to embed multiple web maps in this template?How is this template suitable for multiple web maps?How to embed different web maps using this template?Example
Cascade; Journal; SeriesYesData presentation; study relationship between different map extents or different locationsA web map is embedded in each tab or sectionThe population density in different countries
Swipe & SpyglassYesData comparison; study relationship within the same map extentTwo web maps are embedded side by sideThe population density and crime rate in the U.S.
Basic; Tour; ShortlistNo---

To create a story map from the Story Maps website, refer to ArcGIS Blog: How to Make a Story Map. To create a story map from an existing web map, refer to ArcGIS Online help: Create apps from maps. Select the desired story map template by clicking Configurable Apps > Build a Story Map in the Create a New Web App dialog box.
This is the Create a New Web App dialog box.

To add additional web maps inside the web app, choose any of the options below:

Story Map Cascade
  1. Click the add symbol (+).
  2. Select Media.
    Choose Media.
  3. In the ArcGIS tab, select the additional web map to embed.
    Select a web map from the ArcGIS tab.
    The image below shows a Story Map Cascade comparing populations of the U.S. and Japan in different sections. Each web map is embedded in a different section.
    This is the output in Story Map Cascade.
Story Map Journal
  1. Click ADD SECTION Add Section..
  2. In the ADD SECTION dialog box, specify the title for the new section.
  3. For CONTENT, accept the default Map option.
  4. In the Map drop-down, click Select a map, and select the additional web map to embed.
  5. Click NEXT and configure Side Panel Content.
  6. Click ADD.
    This is the ADD SECTION dialog box.
    The image below shows a Story Map Journal comparing populations of Japan, the U.S., and Germany in different sections. Each web map is embedded in a different section.
    Multiple web maps embedded at different sections.
Story Map Series
  1. Click ADD Click ADD..
  2. In the ADD TAB dialog box, specify the title for the new section.
  3. For CONTENT, accept the default Map option.
  4. In the Map field, click Select a map, and select the additional web map to embed.
  5. Click ADD.
    This is the ADD TAB dialog box.
    The image below shows a Story Map Series comparing populations of Japan, the U.S., and Germany in different tabs. Each web map is embedded in a different tab.
    Each web map in a different tab.
Story Map Swipe & Spyglass
  1. Click SETTINGS Click SETTINGS..
  2. In the Story settings dialog box, select the Swipe Type tab.
  3. Select Two web maps and browse for the second additional web map. Click Apply.
    This is the Story Settings dialog box.
    The image below shows a Story Map Swipe & Spyglass comparing two web maps side by side, with the same map extent, on the same map. Sliding the boundary slider reveals a layer from each web map.
    This is the U.S. Crime and Population analysis.


The Compare template
The Compare template is suitable to make a side by side comparison of two web maps, with the same extent, on two different maps. This is also suitable for data comparison, visualization, and relationship studies between different attributes of the same map extent. Follow the steps below to use the Compare template:

  1. When sharing a web map as a web app, select Configurable Apps > Compare Maps/Layers > Compare.
    This is the Compare template.
  2. In the General tab, specify web maps for Map 1 and Map 2.
  3. Click Save.
    This is the General tab.
    The image below shows the Compare template comparing two web maps side by side, with the same map extent, on two different maps.
    This is the output of the Compare template.
Note:
An alternative to compare maps with the same map extent is to create different layers on the same map. However, this option displays only the topmost layer visible at a time. For more information on how to manage layers, refer to the ArcGIS Online: Layers and Web AppBuilder for ArcGIS: Layer List widget.

For Developer options on multiple web maps, refer to Compare Analysis (Mature), ArcGIS API for JavaScript: Swap web maps in the same view, and ArcGIS API for JavaScript: Synchronize MapView and SceneView.

Related Information