Convert a static map into a web app

You created a map of ancient cities in Africa for the high school history class that you teach. Now you want to create an interactive web app version of this map so your students can better explore the locations and relate them to their present-day context. In this tutorial, you'll learn how to share a web map from ArcGIS Pro, control which basemaps appear as you zoom in and out and build a dashboard application that students can use to explore the map on a desktop or mobile device.

This tutorial was last tested on July 6, 2023.

View final result

Requirements

• ArcGIS organizational account with a Publisher, Facilitator, or Administrator role in an ArcGIS organization (see options for software access)
• ArcGIS Pro
• ArcGIS Dashboards

Convert a static map into a web app

Share the map as a web map

Sometimes you will start a map with ArcGIS Pro and then realize that you need to create a web version of it, so you can share it in an interactive form. You can share your map to ArcGIS Online and continue your work there.

1. Download the Ancient cities in Africa zip file and unzip it to a location on your computer, for example, your C:\ drive.
2. Open the unzipped folder and double-click Ancient cities in Africa.aprx to open the project in ArcGIS Pro.

   

3. If prompted, sign in to your ArcGIS account.

   Note:

   If you don't have access to ArcGIS Pro or an ArcGIS organizational account, see options for software access.

   A map appears, showing the locations of 37 ancient cities in Africa. This map was created from a list of the oldest continuously inhabited cities in Africa on Wikipedia. If you want to learn how to make this map, try the tutorial Convert a list of historic places into a map.

   

   You need to create an interactive version of this map. You'll start by sharing the map as a web map, which will convert it into a map that can be viewed and edited in ArcGIS Online.

4. On the ribbon, click the Share tab. In the Share As group, click Web Map.

   

5. In the Share As Web Map pane, change the following parameters:
   • For Name, type Ancient cities in Africa web map, followed by your initials.
   • For Summary, type Some of the oldest continuously inhabited cities in Africa.
   • For Tags, type the name of your class: Ancient History.
   • For Select a Configuration, choose Copy all data: Exploratory.
   • Ensure that Use symbol types compatible with all clients is checked.
   • For Share with, check Everyone.

   

6. Click the Analyze button.

   

   Two errors appears on the Messages tab. You won't be able o share your map until all errors have been resolved.

7. Expand the error message and, if necessary, drag the edge of the pane so you can read the full message.

   

   There are two types of errors identified. First, you will address the map projection error.

   Two of the layers in your map have a different projection than the map's projection. This is a common error because web maps have stricter requirements about coordinate systems than in ArcGIS Pro. To resolve the error and continue sharing, you'll change your map's coordinate system to match the Web Mercator coordinate system used by the basemap layers. A web map must use the same coordinate system as its basemap.

8. Point to one of the nested error messages and click the Options button that appears.

   

9. In the menu that appears, click Update Map To Use Basemap's Coordinate System.

   

   One of the red error messages is updated with a green check mark, indicating that it has been resolved.

10. Click Analyze again.

    The map projection error is resolved, but there is one outstanding error to resolve.

11. Double-click the error for unique numeric IDs.

    

    The Map Properties window appears on the General tab.

12. Check the box for Allow assignment of unique numeric IDs for sharing web layers.

    

13. Click OK.

    The error message is updated with a green check mark, indicating that it has been resolved.

14. In the Share As Web Map pane, click Analyze.

    No errors or warnings were found. When you updated the map to use the basemap's coordinate system, it resolved both projection errors.

    Note:

    You can learn more about projections in web maps in the tutorial Make a web map without Web Mercator.

15. Click Share.

    When sharing has completed, a green message banner appears at the bottom of the pane.

16. Click Manage the web map to view the web map in ArcGIS Online.

    

    The web map's item details page appears in a browser.

17. Close ArcGIS Pro.

    There is no need to save the map.

Configure basemap layers for different scales

Your map now exists as a web map, which you could share with your students. However, you would rather create a slightly more customized experience so it is easier for them to explore the map and make the connections that you discussed in class. One way that you will achieve this is to control which basemaps appear at different scales.

1. At the top of the item details page, click Sign In and sign in to your ArcGIS account. Use the same account that you used to sign in to ArcGIS Pro.
2. Click Open in Map Viewer.

   Note:

   ArcGIS Online offers two map viewers for viewing, using, and creating maps. This tutorial uses the new Map Viewer. If your button says Open in Map Viewer Classic, click the arrow button and choose Open in Map Viewer instead.

   

3. If a window appears with the message Map Viewer is out of beta, click OK.
4. On the Contents (dark) toolbar, click Basemap.

   

   A list of basemap options appears. You'd like to continue using the current basemap when the map is zoomed out but show the imagery basemap when it is zoomed in. To do so, you'll add multiple basemaps to the map and control when each is visible.

5. Click Current Basemap World Hillshade.

   

   Two layers are listed: Modern Antique and World Hillshade.

6. Click Add layer.

   

7. At the top of the Add layer pane, click My Content and choose Living Atlas.
8. In the search bar, type Imagery and press Enter.
9. In the search results, on the World Imagery card, click the Add layer to basemap button.

   

   The map updates with imagery. However, it does not have any labels. You'll add these as a separate layer.

10. Search for Hybrid Reference Layer. Scroll through the search results until you find the Hybrid Reference Layer tile layer owned by Esri and click the Add layer to basemap button.

    

11. At the top of the Add layer pane, click the back button.

    There are now four layers listed in the Basemap pane.

    

12. Click Hybrid Reference Layer.

    The layer's Properties pane appears. You'll adjust its visible range so it only appears at certain scales.

13. At the bottom of the Properties pane, for Visible range, click World and change it to Cities.

    

    The slider updates to indicate that the layer will only be visible when the map is zoomed in past the Cities scale.

    

14. In the Basemap pane, click World Imagery. In the Properties pane, for Visible range, click World and change it to Cities.

    The World Imagery and Hybrid Reference layers should have the same visible range.

    The imagery basemap disappears from the map. In the Basemap pane, the top two layers are grayed out to indicate that they are not currently visible. Next, you'll adjust the other two layers so they are only visible when you are zoomed out.

15. Click the Modern Antique layer. For Visible range, click Room and change it to Cities.

    

16. Click the World Hillshade layer. For Visible range, click Room and change it to Cities.

    The Modern Antique and World Hillshade layers should have the same visible range.

    Next, you'll test that the visibility ranges you set up for your basemaps work properly.

17. On the map, zoom in to one of the cities.

    As you get close to the city, the basemap should update to show imagery.

    

18. Zoom out until you can see all of Africa. Center the continent in the middle of the map.

    The Modern Antique basemap should be visible.

19. In the Contents pane, click Save and open and click Save.

    

20. In the Web Map window, click Save this map.

Create a dashboard

Next, you'll package your map inside of a web app. Web apps provide simpler interfaces for sharing maps. In a web app, you can control and streamline the map's options. You'll create an app that allows your students to explore the cities through the map and a list at the same time.

1. On the Contents toolbar, clickMore and Create app.

   

   Several options appear. These are different methods for creating web apps, each tailored to different forms. To choose the best method, you should first imagine what you would like your app to look like and how you would like it to behave. Then you can choose the template that best fits your vision.

   

   For this app, you want to provide a list of all the cities so your students can click each city in turn, view its attribute information, and explore its location on the map. After some experimentation with ArcGIS StoryMaps and ArcGIS Instant Apps, you found that ArcGIS Dashboards provided the experience closest to what you wanted.

2. Click Dashboards.
3. In the Create new dashboard window, for Title, type Explore ancient cities in Africa, followed by your initials.

   The Tags and Summary should already be filled in, taking their values from the web map.

4. Click Create dashboard.

   The new dashboard appears with your map filling the entire space. You'll add a few more elements to this space, but you'll start by configuring the map.

5. Point to the upper left corner of the map until a set of buttons appear. Click the Configure button.

   

6. In the Map window, on the Settings tab, turn off Pop-ups.

   You'll expose the data's attributes elsewhere in the app, so including pop-ups will be redundant.

   Most of the time, the map will be zoomed in to different cities. You'll need a default extent button to make it easy for your students to return to a scale where they can see all of Africa.

7. Turn on Default extent and bookmarks.

   You'll add a few more controls to make it easier to navigate the map.

8. Turn on Search and Zoom in/out.

   

9. Click Done.

   Next, you'll add a details element to show the attributes of each city.

10. On the dashboard toolbar, click View.

    Tip:

    At the bottom of the dashboard toolbar, you can click Expand or Collapse to expand and collapse the toolbar.

    

    To create a details element, you have to choose a layer from which to create it. You'll choose the only layer in your dashboard: the ancient cities layer.

11. In the View panel, click Add element and click Details.

    

12. In the Select a layer window, click Africa_Geocoded.

    A preview and options for the details element appear. You expect that most of your students will view this app on a mobile device instead of a desktop computer, so you'll look for ways to save space.

13. Click the Details tab and turn off Title.

    The Title is the same as the Name field, so it's not necessary.

    

14. Click Done.

    The details element appears in your dashboard preview, next to your map, taking up half of the dashboard's space. You'll rearrange all of the elements later.

    

Configure an interactive list

Next, you'll add a list element to list all of the cities. You'll also use actions to connect the list to the rest of the dashboard so students can use it as a navigation tool.

1. On the View panel, click the Add element button and click List.
2. In the Select a layer window, click Africa_Geocoded.

   A list preview and options appear. There are 37 cities in your dataset, so you'll make sure that they are all included in the list.

3. In the Data options pane, for Maximum features displayed, type 37.

   

   Next, you'll remove the point symbols that appear next to each city name in the list. This will save space, which is valuable on smaller screens.

4. Click the List tab. For Line item icon, choose None.

   

   The point symbols disappear from the list.

   Finally, you'll link the list to the map and details elements, so when a city is clicked on the list, the rest of the dashboard reacts.

5. Click the Actions tab. Under When selection changes, expand Filter.

   

   You'll filter the details element whenever a selection is made in the list element.

6. Under Filter, turn on Details (1).

   

   Next, you'll add more actions so that the map also reacts to a selection in the list.

7. Expand Pan and turn on Ancient cities in Africa web map. Expand Zoom and turn on Ancient cities in Africa web map.

   

8. Click Done.
9. On the dashboard, in the list element, click one of the cities in the list.

   The details element populates with information about that city and the map zooms to the city, showing the imagery basemap.

   

Rearrange the dashboard

Currently, the list takes up most of the space on the dashboard. You'd prefer that the map be the largest element. You also want to make sure that the layout works on both desktop and mobile screens.

1. Point to the upper corner of the list element until the buttons appear. Click and hold the Drag item button.

   

2. Drag the list element over the map element until docking positions appear. Drop the list onto the bottom docking position to dock it as a row.

   

3. Drag the details element and dock it as a column to the right of the list element.

   

   Now the dashboard has the map on top and the list and details elements below.

4. Point to the divider between the map and the other elements and drag it downward until it reaches approximately 60 percent.

   

5. Drag the divider between the list and the details elements until it reaches approximately 30 percent.

   

   The details element should have the larger space. Next, you'll test whether this layout works on a smaller screen.

6. Press Ctrl+Shift+I to open your browser's inspect window. Press Ctrl+Shift+M to switch to the responsive design view.

   Note:

   These shortcuts work for Chrome, Firefox, and Microsoft Edge. If you are using Safari, type Option+Command+R. If you are using Internet Explorer, press F12, then Ctrl+Shift+M.

   The view of the dashboard shrinks to imitate the screen of a mobile device.

   

7. Experiment with panning, zooming, scrolling, and clicking on the small view of the dashboard.

   This view of the dashboard includes a ribbon at the top with the dashboard editing controls. These will not appear on the final version of the dashboard, so you will have a bit more vertical space.

   This layout is legible and usable on both a desktop and a mobile screen.

Add text to describe the dashboard

To complete the dashboard, you'll include some information about the map and some questions to guide students' exploration.

1. Close the inspect window to return to the regular view of the dashboard.
2. On the View panel, click the Add element button and click Rich text.
3. In the text editor, paste the following:

   Ancient cities in Africa

   This map shows some of the oldest continuously inhabited cities in Africa. Click the city names in the list to visit each of these ancient cities on a modern map.

   As you explore the map imagery, can you find any evidence that points to an ancient past; for example, old neighborhoods or buildings? If so, in which cities?

   This map only shows places that are still inhabited today. Some places that were important cities in the past are only small villages now. Can you find any on this map?

   Some other important cities from the past are no longer inhabited, like Great Zimbabwe. Can you find the ruins of Great Zimbabwe on this map?

   Tip:

   Press Ctrl+Shift+V to paste the text without its original formatting. If you are using Safari, press Command+Shift+V.

4. Highlight the first line of text and click the Bold button.

   

5. Highlight the first reference to Great Zimbabwe and click the Link button.
6. In the Link window, for URL, paste https://en.wikipedia.org/wiki/Great_Zimbabwe. Click OK.
7. Highlight all of the text after on a modern map. Click the Insert/Remove Numbered List button.

   

8. Click Done.
9. Drag the rich text element onto the center of the map to stack the two items.

   The rich text element is hidden behind the map and can be accessed with a tab beneath the map.

10. Click the Rich text tab beneath the map.

    

11. In the list, select and deselect cities to test the dashboard.

    The text appears, replacing the map. It may seem that there is too much space for the text, but the extra space will be necessary when the dashboard is viewed on a mobile device.

    

12. On the Rich text tab, click the edit button.
13. Type About the map and press Enter to rename the tab.
14. Click the Map tab. Explore the dashboard to ensure that it works as you expect.

    

Save and share the dashboard

You're ready to share the dashboard with your students. You'll update the sharing level and metadata and send them the correct URL for sharing.

1. On the dashboard toolbar, click Save and click Save.
2. At the top of the screen, next to your dashboard title, click the menu button and click Dashboard item details.

   

   The item page for your dashboard appears. You'll add some metadata to the item before you share it.

3. Next to Add a brief summary about the item, click the Edit button and type Some of the oldest continuously inhabited cities in Africa. Click Save.
4. Edit the Description as well. Type or copy and paste Data source: https://en.wikipedia.org/wiki/List_of_oldest_continuously_inhabited_cities.

   Next, you'll share the dashboard publicly, to ensure that your students can view it, even if they are not signed in to ArcGIS Online.

5. Click Share. In the Share window, click Everyone (public) and click Save.

   

6. At the bottom of the item details page, under URL, click the Copy button.

   

   This is the URL that you can share with your students.

   Tip:

   If your students are asked to sign in before accessing the dashboard, ensure that both the dashboard and the map are shared with Everyone (public).

7. Click View Dashboard to view the finished app in a new tab.

Web and static maps offer different advantages and have different challenges. If your map begins in one form, you are not restricted to it. In this tutorial, you converted a static map into an interactive web app and took advantage of some of the benefits of that form, including multiple basemaps, scale visibility control, interactive lists, and attribute views. You learned how to share a map from ArcGIS Pro to ArcGIS Online, convert a web map into a dashboard app, and configure a dashboard layout that can work for both desktop and mobile devices.

To learn more about creating web app layouts, try the tutorial Design a layout for a thematic map in ArcGIS Experience Builder.

You can find more cartography tutorials on the How to make a map page.