Frequently asked question

Can the size or position of the map switcher widget in ArcGIS Experience Builder be changed?

Last Published: January 23, 2024

Answer

The map switcher widget allows users to switch between different maps within a single app. However, it is not possible to change the size or position of the map switcher widget within the Map widget in the standard edition of ArcGIS Experience Builder. The functionality is not available by design, as it is inherent in the overall map tool layout design.

The image of the map switcher widget within the Map widget in ArcGIS Experience Builder.

As a workaround, use the Button, Image or Widget Controller widget to customize the web experience to replicate the map switcher widget functionality.

Note:
To use workarounds with the Button or Image widget, images of the first and second web maps are required to create the thumbnails of the image sources.

Use the Button widget

  1. In ArcGIS Experience Builder, click Create new, select the preferred template, and click Create.
  2. On the Insert widget panel, drag and drop the Map widget to the canvas.
  3. On the Map panel, configure the following settings.
    1. Click Select map. Click Add new data on the Select data panel to add the web map.
The image of the Map panel.
    1. If necessary, configure the tools for the web map under Tools.
    2. Click the Style tab to configure the size and position of the Map widget. In this example, the Full size option is selected.
  1. Click the Page icon > Add page to add a new page.
The image of the Add page icon to create a new page.
  1. Repeat Steps 2 through 3 to add a second web map in a new Map widget.
  2. Navigate to the first Map widget on the first page, and configure the following settings.
    1. Click the Action tab > Message action > Add a trigger.
The image of the 'Add a trigger' button.
    1. Click Extent changes > Map 2 > Pan to.
The image of the 'Pan to' action being added as a trigger.
    1. Click Add action > Map 2 > Zoom to.
  1. Navigate to the second Map widget on the second page, and repeat Step 6 with Map instead of Map 2.
The image of the 'Pan to' and 'Zoom to' actions are added as the triggers to the first map.
  1. On the first page, drag and drop the Button widget The image of the Button widget. from the Insert widget panel to a desired position in the Map widget.
  1. On the Button panel, configure the following settings.
    1. Click Set link, under Link to, select Page from the drop-down menu. For Select a page, select the second page from Step 4. Click OK.
    2. Edit the Tooltip and Text sections if necessary. Toggle theĀ Advanced option on.
    3. Under Default, click Browse next to Image. Upload the image of the second map to be set as a thumbnail of the button. Configure the otherĀ Background settings.
  2. Repeat Steps 8 through 9 to add another Button widget to the Map widget on the second page. Link the first page and upload the first map image as the thumbnail for the second button.
  3. Click Save > Publish. Preview the web experience.
The image of the Button widget being used to replicate the map switcher widget functionality.

Use the Image widget

  1. Repeat Steps 1 through 7 from the workaround above.
  2. On the first page, drag and drop the Image widget The image of the Image widget. from the Insert widget panel to a desired position in the Map widget.
  3. On the Image panel, configure the following settings.
    1. Under Image source, click Select an image to add the second map image.
    2. Click Set link, under Link to, select Page from the drop-down menu. For Select a page, select the second page. Click OK.
    3. Edit the Tooltip and Alt Text sections if necessary.
The image of the configurations of the Image widget.
  1. Repeat Steps 2 through 3 to add another Image widget to the Map widget on the second page. Add the first map image and link the first page.
  2. Click Save > Publish. Preview the web experience.
The image of the Image widget being used to replicate the map switcher widget functionality.

Use the Widget Controller widget

  1. Repeat Steps 1 through 3 from the first workaround.
  2. On the Insert widget panel, drag and drop the Widget Controller widget The image of the Widget Controller widget. to a desired position of the Map widget.
  3. Drag and drop a new Map widget to the existing Widget Controller widget. Add the second web map to the new widget.
  4. Navigate to the first Map widget, configure the following settings.
    1. Click the Action tab > Message action > Add a trigger.
    2. Click Extent changes > Map 2 > Pan to.
    3. Click Add action > Map 2 > Zoom to.
  1. Navigate to the second Map widget and repeat Step 4 with Map instead of Map 2.
  2. Click the Widget Controller widget to open the Widget Controller panel.
  3. On the Widget Controller panel, configure the following settings.
    1. Under Widget panel arrangement, select the Fixed option.
    2. Under Position & size, click px to select % for W and H. Edit the desired size for W and H. In this example, both are set to 100% for a full size display of the Map widget.
    3. Configure other necessary settings and click Save > Publish.
The image of the configurations of the Widget Controller widget.
  1. Preview the web experience.
The image of the Widget Controller widget being used to replicate the map switcher widget functionality.
Note:
Alternatively, use the ArcGIS Experience Builder Developer Edition to customize the Map widget. Refer to ArcGIS Developers: Getting started with widget development and ArcGIS Developers: Widget implementation for more information.

Article ID:000031819

Software:
  • ArcGIS Experience Builder
  • ArcGIS Experience Builder Developer

Get help from ArcGIS experts

Contact technical support

Download the Esri Support App

Go to download options

Related Information

Discover more on this topic