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.

    Ancient cities in Africa.aprx file in a file browser window

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

    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.

    Map of ancient cities in Africa

    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.

    Web Map button on the Share tab of the ribbon

  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.

    Share As Web Map pane

  6. Click the Analyze button.

    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.

    Dragging the edge of the pane to make it wider

    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.

    Options button on an error message

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

    Update Map To Use Basemap's Coordinate System in the error message's context menu

    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.

    Error related to unique numeric IDs in the Analyze results

    The Map Properties window appears on the General tab.

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

    Allow assignment of unique numeric IDs for sharing web layers checked in the Map Properties window

  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.


    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.

    Manage the web map link

    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.

    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.

    Open in Map Viewer button

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

    Basemap button on the Contents toolbar

    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.

    Current basemap World Hillshade on the Basemap pane

    Two layers are listed: Modern Antique and World Hillshade.

  6. Click Add layer.

    Add layer button on the Basemap pane

  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.

    Add layer to basemap button on the World Imagery card

    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.

    Add layer to basemap button on the Hybrid Reference Layer card

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

    There are now four layers listed in the Basemap pane.

    Four layers 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.

    First stop on the Visible range slider set to Cities 1:160,000.

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

    Visible range slider set to range from Cities to Room.

  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.

    Visible range slider set to range from World 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.

    Four basemap layers and map of Alexandria with imagery basemap

  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.

    Save button in the Save and open context menu

  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.

    Create app button

    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.

    Menu with choices for Instant Apps, Experience Builder, StoryMaps, and Dashboards

    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.

    Configure button on the map element

  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.

    Map element settings

  9. Click Done.

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

  10. On the dashboard toolbar, click View.

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

    View on the dashboard 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.

    Details in the options for Add element

  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.

    Title turned off in the Details options.

  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.

    Details pane showing attributes for Agadez.

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.

    Maximum features displayed set to 37 in the Data options.

    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.

    Line item icon set to None in the List options.

    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.

    Filter expanded in the Actions tab

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

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

    Details (1) turned on under Filter

    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.

    Three actions configured for when selection changes.

  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.

    Details element and map for Mombasa

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.

    Drag item button on the list element

  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.

    Dragging list element to bottom docking position of the map element

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

    Docking element as a column next to 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.

    Dragging the space between the list and map elements

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

    Dragging the space between the list and details elements

    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.

    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.

    Mobile view of the dashboard, showing Alexandria

  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?


    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.

    First line of text highlighted and formatted as bold in the text editor.

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

    Last three paragraphs highlighted and converted to a numbered list in the text editor.

  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.

    Rich text tab

  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.

    Rich text element

  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.

    Dashboard with the map, list, and details elements visible

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.

    Dashboard item details option in the Home menu

    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:

    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.

    Everyone (public) button in the Share window

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

    Copy button for URL

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


    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.