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 configuring a swipe tool, however it’s available only 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 sample map and sign in to your account. Examine the map to find the historic New York City 1836 layer (from the David Rumsey collection) overlaying the World Streets basemap.
Step 2 – Save the map, share it, and click Create a Web App.
An alternative way to create a web app is to open the map item, sign in, and in the Overview tab click Create web app. Then continue to Step 3 below.
Step 3 – Find Media Map and select it.
Step 4 – Click Create web app.
Step 5 – 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 may 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 6 – Click Switch to full setup.
Step 7 – Click Switch to acknowledge that you want to enter full setup.
Step 8 – Click Interactivity, then Modify.
Step 9 – Toggle the swipe tool on. The swipe options will display.
Step 10 – 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 11 – (Optional) Set the swipe direction and initial slider position. As you make changes the app will update.
Step 12 – When finished, click Publish, then Confirm, to publish the app.
Step 13 – 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: