ArcGIS Online

Refine the configurable app experience using Define Visible Map Extent

The September 2020 ArcGIS Online update introduces the new Define Visible Map Extent tool into the configurable app experience. Setting an extent that map viewers will see is one of the first things that cartographers and GIS professionals are taught to do when building a printed map. This new capability in configurable apps brings this concept to interactive mapping by focusing viewers on the relevant locations and minimizing distractions from other areas of the map.

The Define Visible Map Extent tool allows application authors to define an extent that only includes areas relevant to the data in the map.  For instance, if a map contains data about Yosemite National Park, defining the visible extent prevents map viewers from navigating out of the park boundaries and into surrounding national forests. The area an author chooses can be as small as a neighborhood or as large as a continent depending on how they prefer to tailor the experience of the app.

Use the steps below to get started with the Define Visible Map Extent tool in the Media Map application template.

Step 1: Create a map

Building a configurable app with a defined extent starts with creating a map. Add data that is concentrated in a specific geographic region to your web map. This example uses historic maps and imagery data for the city of Redlands, California (Image 1). Set your map to the view that you want to be the default extent of your application and save the map.

Image of City of Redlands imagery data displayed in Map Viewer Beta
Image 1 - Imagery data for the City of Redlands in Map Viewer Beta

Step 2: Choose an app template

Browse to the Item Details page of your map, click Create Web App, and choose Configurable Apps. While this example uses Media Map, Define Visible Map Extent is also available in Attachment Viewer, Interactive Legend, Minimalist, Nearby, and Zone Lookup. Select Media Map and click Create Web App (Image 2).

Image of Create a web app window, highlighting Media Map item.
Image 2 - Select Media Map in the Create a web app window

Step 3: Configure Define Extent settings

As a part of the updated configuration experience, the application opens in Express Setup, which contains the most essential settings for configuring the app. The Define Visible Map Extent settings are located in Full Setup, which contains all settings available in this application. To switch to the Full Setup experience, click Switch to Full Setup at the bottom of the Express Setup menu (Image 3).

Image of Switch to Full Setup option on configuration panel
Image 3 - Switch to Full Setup

Once in the Full Setup experience, click Interactivity and browse to the Navigate section to locate the Define visible map extent setting (Image 4).

Explore and Navigation section of configuration panel, highlighting Define visible map extent settings
Image 4 - Define visible map extent option

Enabling define visible map extent opens the following configuration options (Image 5):

Image of Define visible map extent settings, pointing to each option available
Image 5 - Define visible map extent configuration options
  1. Enable or disable Define visible map extent
  2. Open the Choose Extent window to choose the map area to constrain panning around map
  3. Set the visibility range slider to specify maximum and minimum zoom levels in the map

Click the Define Extent button to open the Choose Extent window. In this window, the drawing tool is used to specify the geographic area to which panning on the map is limited. In this example, the map area is set to include only the city of Redlands. Click Confirm to save this setting (Image 6).

Image of the Choose Extent window with extent around City of Redlands selected, highlighting Confirm button
Image 6 - Use the drawing tool to set a map area in the Choose Extent window.

Next, use the visibility range slider to set the range within which viewers can to zoom in and out of the map area (Image 7). This example sets the visibility range from the Neighborhood zoom level (1:20,000) to the Room zoom level (1:400).

Define visible extent settings, highlighting with visibility range slider.
Image 7 - Visibility range limited from Neighborhood to Room

Step 4: Complete and publish app

Explore the remaining settings in Media Map to add more functionality to your app. In this example, the Layer List is enabled and set to open at the start of the application, giving viewers the option to view multiple imagery layers and turn them on and off. The Bookmark tool allows viewers to navigate to notable areas in city using bookmarks configured in Map Viewer. The Basemap toggle button allows viewers to observe the data on a different basemap. Finally, the Swipe tool is configured to allow viewers to swipe the most recent imagery over the historic imagery. The completed sample application can be found here (Image 8).

Image of completed Media Map application with City of Redlands historic imagery
Image 8 - Completed Media Map application with Redlands Historic Imagery

Once remaining settings are configured in the app, the app is ready to be published and shared. Browse to the bottom of the configuration panel and click Publish to open the Publish window (Image 9).

Image of the Publish option on the configuration panel and the Confirm button on the Publish window
Image 9 - Publish the application to save settings and share the app

Click Confirm to save all settings and publish the application. The app is now ready to be shared. You can share what you build and keep sharing your ideas with us on GeoNet.

About the author

Krista McPherson

Krista is a Product Engineer on the Holistic Team who works with ArcGIS Online and configurable apps.

Leave a Reply

Please Login to comment
newest oldest
Ekrem Canli
Ekrem Canli

Such a great feature to define visible map extent – but why limit it just to a few configurable apps? Why not make it a baseline feature for web maps so you can use a restricted map extent also in all web apps, experience builder, etc?

Next Article

What's new in ArcGIS Survey123 (October 2020)

Read this article