Configurable apps in ArcGIS Online are template applications that you can configure easily, no coding required. They help you publish apps quickly to support a variety of workflows and users. Configurable apps are the fastest and easiest way to go from a map to a shareable app.
About this tutorial
In this tutorial you will create a simple application that features a swipe tool using Media Map, one of the configurable app templates. You can view the completed Media Map app and follow along by using the New York City Yesterday and Today web map.
Media Map is intended for anyone that wants to display an interactive map with basic tools and map navigation. It’s a compact, simple, and useful configurable app choice, and these features also make it ideal for embedding in web pages or other apps. Media Map is one of the new configurable apps that offers express setup and full setup modes for easy app configuration.
Swipe is a popular tool that lets viewers interact with map layers to see differences, or changes, or to do visual analysis. Grab the swipe handle and move it back and forth to view what’s underneath a layer, or to compare one or more layers. Media Map also supports a swipe tool, which is available to configure when in full setup mode. Follow these steps to configure Media Map with a swipe tool.
Create a Media Map swipe
A map is the centerpiece of any app. Best practices are important for the complete app experience. Apply basic map craft such as configuring effective pop-ups, using scale dependencies, and more. For details, see Web maps.
Step 1 – Open the New York City Yesterday and Today map item and sign in to your account.
Open the map and examine it to find the historic New York City 1836 layer (from the David Rumsey collection) overlaying the World Streets basemap. Optionally, save a copy of the map as your own and share it. When finished, return to the map item Overview.
Step 2 – From the map item page, click Create a Web App.
Step 3 – Click Configurable Apps.
Step 4 – Locate and select Media Map.
Step 5 – Click Create Web App. You can optionally preview you map in the app.
Step 6 – Create a new web app by doing the following:
a – Enter the app title.
b – Add tags.
c – Enter a summary description.
d – Consider other options and click Done when finished.
After clicking Done, Media Map will open with several onboarding messages. Click Next to go through them or click X in the upper right to dismiss them. Check Don’t show this again to prevent seeing the messages in the future.
Media Map will open in express setup mode. To enable swipe, switch to full setup mode.
Step 7 – Click Full setup.
Step 8 – Click Switch to acknowledge that you want to enter full setup.
Step 9 – Click Interactivity, then Modify.
Step 10 – Toggle the swipe tool on. The swipe options will display.
Step 11 – Choose the layer you want to swipe. In Select leading layers, check the box for New York City 1836.
Our sample web map only has one operational layer so there is no need to select a trailing layer. If your map has multiple operational layers you can specify both the leading and trailing layers to swipe. Click the slider if the app does not update to show your changes.
Step 12 – (Optional) Set the swipe direction and initial slider position. As you make changes the app will update.
Step 13 – When finished, click Publish, then Confirm, to publish the app.
Step 14 – After a confirmation message, click Launch to open the app.
Doing more with swipe
There’s a lot more you can do using Media Map and swipe. The example shown below uses three different swipe layers and includes a layer list to toggle layer visibility, an introduction panel, and fullscreen, share, and home buttons.
For more information, see:
This blog article was originally published on November 19, 2020, and has been updated.