Turn a web map into a web app

Your team agrees that a map-focused web app is the best communication device for your story. You'll find and modify a web map, create a new web app from the map, and configure its basic layout structure.

Find a map with housing data

Instead of starting with a blank web map, you'll modify an existing one. ArcGIS Living Atlas of the World is a curated collection of geographic data and maps. It includes Esri Maps for Public Policy, a site dedicated to raising the level of spatial and data literacy in public policy. You'll search this site for data and maps related to housing policy.

  1. Go to the Esri Maps for Public Policy site.

    Here you can search through data resources related to a variety of public policy topics. In this lesson, you’re searching for a web map related to housing.

  2. Click the Issues tab.

    Issues tab

  3. Click the Economic Opportunity tab. In the search bar, type vacant housing and press Enter.

    Economic Opportunity tab and search bar

  4. In the search results, click the title of the web map named Owned, Rented, or Vacant Housing Units, owned by lisa_ berry.

    The map's item page appears, where you can read about the map and the data it contains. This map shows where owner-occupied housing, rented housing, or vacant housing is more prevalent. The data in this map is from the American Community Survey (ACS), which is conducted by the United States Census Bureau. This map is a good starting point for your app.

    Note:

    ACS five-year estimates are commonly used for public policy decisions and cover a wide variety of topics such as poverty, income, housing, and more. To learn more about ACS layers available in ArcGIS Living Atlas, view the Learn about your community using Census ACS layers in Living Atlas path.

    You intend to use this map in a public-facing web app, so before you continue, you'll check if there are any special restrictions or limitations on using the content.

  5. Scroll to the bottom of the item page and find the Terms of Use section.

    Esri Terms of Use section

    The web map is licensed under the Web Services and API Terms of Use for Esri. You can learn more about these terms by clicking either View Summary or View Terms of Use. The summary explains that anyone may use this web map for both internal and external use so long as they provide attribution to Esri and its data providers.

  6. Scroll up and find the Credits (Attribution) section.

    Credits section

    This is the information that you need to properly attribute the data providers. You'll use this information later.

Configure the web map

So far you have found a web map about housing occupancy that you can use as the primary content for your web app, and you verified that you have permission to use it for your specific project. Next, you’ll save a copy of the web map and reconfigure its layers to better suit the purpose of your web app.

  1. Scroll to the top of the item page and click Sign In. Sign in to your ArcGIS organizational account.
    Note:

    If you don't have an organizational account, you can sign up for an ArcGIS free trial.

  2. At the top of the item page, click the Open in Map Viewer button.

    Open in Map Viewer button

    Note:

    If you do not see a button for Open in Map Viewer, click the arrow next to Open in Map Viewer Classic and choose Open in Map Viewer.

    The map appears.

  3. On the Contents (dark) toolbar, click the Layers button.

    Layers button on the Contents toolbar

    Tip:

    If you do not see a Contents toolbar, click Open in new Map Viewer at the top of the page.

    The Layers pane appears. Three layers are listed, containing housing data at the state, county, and census tract level. Each layer is configured to appear at different scales, so only the Tract layer is visible currently.

    Your advocacy group focuses on local level housing issues, so you are only interested in the census tract level data. You'll save a copy of the web map with only the Tract layer.

  4. In the Layers pane, on the State layer, click the Options button. Click Remove.

    Option button and Remove button

  5. Also remove the County layer.

    Only the data relevant to your web app remains. Next, you'll make sure it is visible at all scales.

  6. Click the Tract layer.

    The Properties pane appears on the other side of the map.

    Tip:

    If the Properties pane is not visible, on the Settings (light) toolbar, click the Properties button.

  7. Scroll down in the Properties pane. Adjust the Visible range slider until it ranges from World to Room.

    Visible range slider

  8. On the Contents toolbar, click the Save and open button and click Save as.

    Save and open button and Save button

  9. In the Save map window, for Title, type Housing map. In the Summary box, replace the existing text with the following:

    This map shows if owner-occupied housing, rented housing, or vacant housing is more prevalent in an area. This national data is from the most current American Community Survey (ACS) estimates census tracts. This is a copy of the web map found here: https://www.arcgis.com/home/item.html?id=8e3b994782444345953a30e2a6e5ab23

  10. Click Save map.

Create a web app

You now have a web map configured for your needs. You'll create a web app from this map with ArcGIS Experience Builder. You'll design the layout of the app with a map and a column.

  1. On the Contents toolbar, click the Create app button.

    Create app button and gallery

    A list of options appear. There are several ArcGIS products that allow you to create web apps from web maps. Each offers different tools and is suitable for different situations. For this project, you want to exercise a lot of control over the appearance of the app, so it can match both the web map and your organization's style. You'll choose ArcGIS Experience Builder, because it provides the most customization control.

  2. Click Experience Builder.

    A template gallery appears. For future projects, these templates can save you time by preconfiguring the layout, but for this lesson, you’ll start with a blank canvas so you can more directly learn how to structure a layout.

  3. On the Blank fullscreen card, click Create.

    Create button on Blank fullscreen card

  4. If a Getting started window appears, click Skip.

    ArcGIS Experience Builder appears, showing the map in the center of the canvas. You'll rename your experience with a more meaningful title.

  5. On the top ribbon, click Untitled experience and type Housing Availability.

    App title

    Next, you'll ensure that you can see the entire canvas.

  6. In the bottom right corner of the screen, click the Fit width to current window button.

    Fit width to current window button

  7. If the Insert widget pane is not already visible, on the side toolbar, click the Insert button.

    Insert button on side toolbar

  8. Scroll to the bottom of the Insert widget pane and find the Layout section.

    Layout widgets help you to arrange groups of widgets in your app. Sizing and positioning widgets neatly is often easier when they are inside of a layout widget.

  9. Drag the Column widget onto the canvas.

    Column widget added to canvas

  10. On the Column widget's toolbar, click the position button and click Full height.

    Position button and Full height button

  11. Click the position button again and click Snap to left.

    Now that the column is in place, you'll resize the map. One of the goals for your project is that the map should be the main focus of the app, so you'll make it fill the entire canvas.

  12. Click the Map widget to select it. On the map’s toolbar, click the position button and click Full size.

    Position button and Full size button

    The map expands to fill the entire canvas, with a portion of it hidden behind the column. Next, you'll define the default extent of the map in the map's property settings.

  13. In the Map pane, under Initial view, click Custom and click Modify.

    Custom option and Modify button

    The Modify initial view window appears.

  14. Zoom to your community or another area of the United States that interests you, for example, Manhattan Island in New York City.

    Map centered on Manhattan Island

  15. Click OK.

    You'll make a few more configurations to the Map widget.

  16. In the Map pane, under Tools, turn off Search.

    Search option turned off

    Later you’ll add a Search widget that you have more control over.

  17. Near the bottom of the Map pane, under Tools layout, under Large and medium size, choose the second option.

    Second tools layout option selected for large and medium sized screen

    The map's navigation controls move to the bottom right corner of the map. Previously, they were hidden behind the column.

    Finally, you'll disable pop-ups. Later in the lesson, you'll add widgets to show information about the number of housing units of each type in each tract. This information will make the pop-ups unnecessary.

  18. At the bottom of the Map pane, under Options, turn on Disable pop-up.

    Disable pop-ups turned on

  19. On the builder toolbar, click the Save button.

    Save button on builder toolbar

  20. Close the Map Viewer browser tab and the Esri Maps for Public Policy browser tab.

So far in this lesson, you've found a web map, modified it for your needs, and converted it into a web app in ArcGIS Experience Builder.


Add and configure widgets

Now that you’ve configured the map, it’s time to add a few widgets to help users understand and explore the data. You’ll add Chart, Text, Search, and Menu widgets.

Add a Chart widget

You'll add a pie chart to the empty column. You'll connect the chart to the data in the map, so it displays the housing composition of the selected census tract.

  1. If necessary, reopen your Housing Availability app in ArcGIS Experience Builder.

    Map and column

  2. In the Insert widget pane, click the Search button and type chart.

    Search bar in the Insert widget pane

  3. In the search results, drag the Chart widget onto the column.

    A blank Chart widget appears in the column. The rest of the column appears transparent, since by default, it has no background color.

    Blank Chart widget

    Next, you'll configure the chart so that it displays housing information from the map.

  4. In the Chart pane, click Select data.

    Select data button

  5. In the Select data pane, expand Housing map and click Tract.

    Tract data in Select data pane

  6. In the Chart pane, under Tract, click Default and choose Selected features.
  7. Under Chart type, click Select chart and in the Chart type pane, choose Pie.

    Tract set to Selected features and Chart type set to Pie

    A pie chart is appropriate for this data since it is divided into three categories (owner occupied, renter occupied, and vacant), which together add up to 100 percent of housing units.

  8. In the Chart pane, under Data, set the following parameters:
    • For Category type, choose By field.
    • For Statistics, choose SUM.
    • For Number Fields, check Vacant Housing Units, Owner-Occupied Housing Units, and Renter-Occupied Housing Units.
    • For Sort by, choose Category axis.

    Data parameters

    The chart shows a No data found warning. This warning appears because you chose to show selected features on the chart and there are currently no features selected.

  9. On the builder toolbar, click Live view.

    Live view button

    In live view mode, you can interact with your web app as a user might. You can't select widgets and move them around.

  10. On the map, click any census tract.

    Now that a census tract is selected, the pie chart turns blue and the warning disappears. You'll exit live view mode so you can continue to configure the Chart widget.

  11. Turn off Live view. Click the Chart widget.

    The Chart pane reappears. You'll add a legend to the chart to explain the three categories.

  12. In the Chart pane, next to General, click the arrow to expand this section.

    Expander arrow for General section

  13. Turn on Legend. For Legend position, choose Bottom.

    Legend turned on and Legend position set to Bottom

    Next, you'll add color to the chart so that it matches the colors on the map.

  14. Expand the Slices section. Under Color mode, choose By category and click the settings button.

    By category option and category settings button

  15. In the Slice color pane, click the color next to B25002_003E (Vacant housing units) and click More.

    More button in the color picker window

  16. For Hex, type #aa7b7b and press Enter.

    Color set to #aa7b7b

    The color updates to a muted red color.

  17. Change the color for B25003_002E (Owner-Occupied housing units) to #d3c268, a yellow color. Change the color for B25003_003E (Renter-Occupied housing units) to #6b99b5, a blue color.

    The chart and its legend now match the colors of the map. If your selected census tract is yellow, the largest slice in the pie chart is also yellow.

    Chart and legend with red, yellow, and blue colors

    Configuring the chart to match the colors on the map makes the chart easier to read and also allows it to double as a map's legend.

  18. Turn on Live view and click different tracts to observe changes in the chart.
    Note:

    A few census tracts will display only one or two slices, because they have only one or two housing types.

Configure a view for empty selections

The Chart widget will still show the No data found warning in some situations. You'll choose a census tract to act as the default feature. When the web app is first opened, the chart will display data for the default feature.

  1. On the map, click an area without a census tract, for example Central Park or any water area.

    The chart returns to the No data found view. The chart will also appear like this when the web app is first opened. You can fix this problem by configuring a view for empty selections.

  2. On the side toolbar, click the Data button. In the Data pane, click the Housing map card.

    Housing map card in the Data pane

  3. Under In use, click the Tract card.
  4. At the bottom of the pane, check the View for empty selection check box.

    The Chart widget populates with red, blue, and yellow slices. This setting ensures that the chart does not appear empty when no feature is selected.

  5. Next to the check box, click the Settings button.

    View for empty selection turned on and settings button

    The View for empty selection window appears. Here, you'll choose which census tract will appear when none is selected on the map. In the following steps, you'll choose Census Tract 94 in New York County, New York. If you chose to center your map over another city, choose a tract from that area instead.

  6. On the Filter tab, click Add and click Clause set.

    Clause set option in Add menu

    Two empty clauses appear.

  7. Click Add again and click Clause.

    Now there are three clauses. You'll use the first clause to narrow down the data by state.

  8. For the first clause, click OBJECTID and choose State. For the second menu, choose is.
  9. Next to the third menu, click the Select source type button and choose Unique.

    Unique option in Select source type menu

    Now you can choose from a list of all unique values in the State field.

  10. Click the third menu. In the search bar, type new and choose New York, or your state of interest.

    New York in third menu

  11. Configure the second clause to read County is New York County, or your county of interest. If the county does not appear in the third menu, click Search more to reveal more search results.
    Tip:

    Remember to change the source type to Unique.

  12. Configure the third clause to read NAME is Census Tract 94, or a census tract in your area of interest.
  13. Ensure that the control above the clauses is set to And.

    Three completed clauses

    When And is chosen, a feature must satisfy all three of the clauses. The table shows one row for the one feature selected by the three clauses. The pie chart will show the results for this census tract when none are selected in the map.

  14. Click Apply changes.
    Note:

    The default chart view will appear when the web app is first opened. The no data view will continue to appear when a blank part of the map is selected.

Modify the chart's appearance

You'll complete the Chart widget by adjusting some of its appearance properties. You'll start by removing the buttons from the top of the widget. These provide functions that aren't necessary in your app. You'll remove them so they don’t distract from the map's message.

  1. Turn off Live view and select the Chart widget.
  2. In the Chart pane, expand the Tools section. Turn off Selection.

    Selection turned off

    Two of the buttons disappear from the Chart widget.

  3. Click the Action tab and click the Data action tab. Turn off Enable data action.

    Enable data action turned off

    The third button disappears from the chart. Next, you'll change the background color of the Chart widget.

  4. Click the Content tab and expand the Appearance section. Click the background color and click More.
  5. For Hex, type #000000. For A, type 75.

    Color set to 75 percent opaque black

    A stands for Alpha, and controls the opacity of the color. The map is partially visible behind the Chart widget now. However, the text is almost invisible. You'll change it to white.

  6. Next to Text elements, click the settings button.

    Text elements settings button

  7. In the Text elements pane, next to Legend label, click the edit button.
  8. Click the black square. Under Standard colors, choose white.

    White color in the color picker window for text color

  9. In the Chart pane, expand the Slices section. Change the Outline color to black.

    Outline color set to black

    The finished Chart widget has white text on a dark background.

    Finished Chart widget

Add a Text widget

Next, you’ll add some text to give context to the map, including a title and data acknowledgement. You'll format different parts of the text to make it more readable and add some links where users of your app can find more information about the data shown on the map.

  1. On the side toolbar, click the Insert button. In the Insert widget pane, clear the search. Find the Text widget and drag it onto the column below the chart.

    Text widget added to column widget

    The Text widget automatically positions itself below the Chart widget with a small gap in between.

  2. Double-click the Text widget and copy and paste the following text:

    Owned, Rented, or Vacant?

    Click a Census Tract to see housing information for that area.

    Housing in Tract, County, State. The median rent is $Rent. The median home value is $Value.

    Map by Lisa Berry, Esri. Data from U.S. Census Bureau's American Community Survey (ACS) 2015-2019 5-year estimates, Table B25002.

    Include the spaces between the lines of text. The third line of text will make more sense later, when you add dynamic elements.

    Tip:

    Use Ctrl+Shift+V or Command+Shift+V to paste the text without any formatting.

    Next, you'll change the height of the Text widget.

  3. In the Text pane, click the Style tab. Next to Height, click the arrow button and choose Auto.

    Auto option in Height menu

    This setting will ensure that the Text widget is always tall enough to show all of its contents and never too tall.

    Next, you'll choose the same text and background colors as the Chart widget.

  4. In the Text pane, under Background, click the Fill color. Under Recent colors, choose the semitransparent black that you created for the pie chart background.
  5. Click the Content tab. Under Text format, click the Font color button. Under Standard colors, choose white.
  6. Under Text format, click the Center button.

    Text color set to white and alignment set to center

    The chart's text is now white and center aligned. Next, you'll format the first line of text—your app's title—to be larger and bolder.

  7. Highlight the first line of text. On the text toolbar, click the Bold button and change the size to 25 px.

    First line of text set to bold and 25 px

    Tip:

    If the text toolbar is not visible, change the font properties on the Content tab in the Text pane.

    Next, you'll include a link to a U.S. Census Bureau resource for readers who may not know what a census tract is.

  8. In the second line of text, highlight the words Census Tract. In the Text pane, on the Content tab, under Text format, click the Link button.

    Link button in text format options

  9. In the Set link pane, for Link to, choose URL. For URL, copy and paste https://www2.census.gov/geo/pdfs/education/CensusTracts.pdf.
  10. For Open in, choose New window. Click OK.

    Set link parameters

  11. Make the Census Tract text bold.

    You'll also link to more information about the American Community Survey. Your data visualization will be considered more trustworthy if it provides information about how the data was collected, and by whom.

  12. In the last line of text, highlight the American Community Survey (ACS) text and link it to the following URL: https://www.census.gov/programs-surveys/acs/about.html.
  13. Make the American Community Survey (ACS) text bold.

    Bold button in text toolbar

    Since the Text widget contains the map's title, you'll place it at the top of the column.

  14. Drag the Chart widget below the Text widget.

    You'll also remove the gap between the column's items.

  15. Click the empty bottom part of the column, or the gap between the Text and Chart widgets to select the column.
  16. In the Column pane, for Gap, type 0 px.

    Gap set to 0 px

    The Text and Chart widgets now appear as one item.

    Text and Chart widgets

Add dynamic text

For the third line of text, you'll include housing information that updates to reflect selections on the map, in the same way as the chart. You saw the fields that are available in the data when you configured the pie chart. You'll display some of those fields in the Text widget.

  1. Select the Text widget. In the Text pane, turn on Connect to data. Click Select data.

    Connect to data turned on and Select data button

  2. In the Select data pane, expand Housing map and click Tract.

    Now the Text widget has access to the housing data in the map.

  3. In the Text widget, highlight the word Tract.

    You'll replace this text with dynamic content.

  4. In the Text widget’s toolbar, click the Dynamic content button.

    Tract text selected and Dynamic content button

  5. In the Dynamic content window, click the NAME field.

    NAME field in the Dynamic content window

    In the Text widget, the highlighted text is replaced with {NAME}. An extra space was also added between the field and the comma.

  6. Remove the extra space.

    {NAME} field in the Text widget

  7. Replace the following words with the following fields:
    • Replace the word County with the County field.
    • Replace the word State with the State field.
    • Replace the word Rent with the Median Rent (Contract Rent for Renter-Occupied Housing Units Paying Cash Rent) field.
    • Replace the word Value with the Median Home Value (for Owner-Occupied Housing Units) field.
    Tip:

    To see the full name of a field, point to the field.

  8. Remove any extra spaces.
  9. Change all of the dynamic fields to bold.

    Third line of Text widget with dynamic content

  10. Turn on Live view and click different census tracts on the map.

    The dynamic text updates to reflect housing information for the selected tract.

    Finished Text widget displaying values for a selected tract

Add a Search widget

Earlier, you removed the search bar from the Map widget. Now you'll replace it with a Search widget. This widget offers more customization control than the built-in tool. For example, you can place it anywhere, and modify its appearance.

  1. Turn off Live view. From the Insert widget pane, click the Search widget and drag it onto the map.

    Search widget in the Insert widget pane

  2. Place the Search widget near the top right corner of the map.

    The Search widget's default hint text is Find address or place. You'll reword this text.

  3. In the Search pane, click New search source and select the ArcGIS World Geocoding Service.

    ArcGIS World Geocoding Service in the Search 1 pane

  4. In the Set locator source pane, under Search options, for Hint, type Search for your area.

    Hint set to Search for your area

    The hint text in the Search widget changes.

    Next, you'll connect the Search widget to the Map widget with an action.

  5. In the Search pane, click the Action tab. Click Add a trigger.
  6. In the Select a trigger pane, click Record selection changes.

    Record selection changes in the Select a trigger pane

  7. Under Widgets, click Map. Under Select an action, click Pan to.

    Pan to in the Select an action pane

  8. Close the Action settings pane.

    You'll test the Search widget to ensure that the action was set up correctly.

  9. Turn on Live view. In the Search widget, type a place name. In the search results, click one of the place names.

    Search bar with results

    The map zooms to the selected location.

  10. On the map, near the zoom controls, click the Home button.

    Web app with Map, Text, Chart, and Search widgets

  11. On the builder toolbar, turn off Live view and click Save.

Add a page

Your data visualization is now complete. Next, you’ll add the related article that your coworkers wrote. You could add a link to the story in the Text widget, but you'd prefer to make the story more obvious and feel like a part of the web app. You'll add a second page to the app and embed the story in it.

  1. On the side toolbar, click the Page button.

    Page button and Page pane

  2. In the Page pane, click the Add page button and click the Blank fullscreen option.

    Add page button and Blank fullscreen option

    A new blank canvas appears.

  3. In the Page pane, point to Page 2 and click the More button. Click Rename.

    Rename option in More menu for Page 2

  4. Rename Page 2 to Story. Rename Page to Map.

    Pages renamed to Map and Story in the Page pane

  5. From the Insert widget pane, add an Embed widget to the canvas.
  6. On the Embed widget's toolbar, click the position button and click Full size.

    Full size option in the Position menu

    For this lesson, you'll embed How the Age of Housing Impacts Affordability, a story written by Steven Aviles on Esri’s Policy Maps team.

  7. In the Embed pane, for Embed by, choose URL.
  8. Paste the following URL code: https://storymaps.arcgis.com/stories/ae7f226a5ffd4466acbe0c7a14deab0e.

    URL in the Embed pane

    The story appears on the canvas. It was created with ArcGIS StoryMaps.

Add a Menu widget

Next, you'll add a Menu widget. This will provide a way for users to switch between the two pages of your app. To prevent the menu from hiding parts of the story, you'll add a header to the page first.

  1. On the side toolbar, click the Page button. In the Page pane, click the Story page.

    Story page in the Page pane

  2. In the Story pane, turn on Header.

    A blue bar appears at the top of the page.

  3. For Height, type 60 px.
  4. Point to the header and click Edit header.

    Edit header button

  5. From the Insert widget pane, add a Menu widget to the page header.

    Menu widget added to the header

  6. Snap the Menu widget to the top right corner.
  7. In the Menu pane, on the Content tab, for Style, choose Pills.

    Menu widget set to Pills style

    The blue color of the header and the Menu widget don't match the rest of your app. Instead of changing colors in multiple locations, you'll change the app's theme.

  8. On the side toolbar, click the Theme button. In the Theme pane, click Ink.

    Theme button and Ink theme

    The header changes to white and the menu pill changes to a dark gray color.

    The Menu widget allows users to switch from the story to the map. You'll add the same Menu widget to the map page so they can also switch to the story.

  9. Open the Page pane and click the Map page.

    You don't need to add a header to the page, since users can pan on the map to see areas that are hidden by widgets.

  10. From the Insert widget pane, add a Menu widget to the page. Snap it to the top right corner.
  11. In the Menu 2 pane, for Style, choose Pills.
  12. Move the Search widget down and place it below the Menu widget.
  13. Turn on Live view. Click the menu buttons to test switching between the two pages.

    Menu widget

  14. In the Page pane, make sure that the Make homepage button is visible next to the Map page.

    Make homepage button

    This button indicates which page acts as the home page. It will appear when the app is first opened.

  15. Click Save.

You have created a web app with two pages, containing a map and a story. You configured Map, Column, Chart, Text, Search, Embed, and Menu widgets. You connected widgets using actions and dynamic content to help users explore housing availability.


Optimize the app for mobile devices

So far, you have achieved three of the goals for the web app:

  • The map should be the main focus of the app.
  • The app should allow users to search for their own address or areas of interest.
  • The app should include dynamic text and charts to allow users to explore and interact with the data.
  • The map should be paired with a journalistic story.

There is one remaining goal: the app should work on a mobile device as well as a desktop computer screen.

Currently, your web app looks good on a large screen only. To finish the project, you'll adjust elements until the app looks good on any screen size.

Optimize the story page for mobile

To make the story page work across different screen sizes, you'll adjust the sizing of the Menu widget from relative sizing (defined in percentages) to absolute sizing (defined in pixels).

  1. If necessary, reopen your Housing Availability app in ArcGIS Experience Builder. Turn on Live view.
  2. If necessary, on the app's menu, click the Story pill to view the Story page.
  3. On the builder toolbar, click the Edit your page for small screen devices button to switch to small screen mode.

    Edit your page for small screen devices button

    This view emulates how your app will appear on a mobile device.

  4. Scroll through the story to confirm that none of the text or maps are cut off.

    ArcGIS StoryMaps stories are already configured to resize for mobile devices. However, the Menu widget on the page header is too short to read.

    Story page on a small screen

    You could create a custom layout for small screens, but in this case, you can fix this problem by changing how the Menu widget is sized across all screen sizes. Solutions that work across all screen sizes are preferable to custom solutions for different screen sizes because they make the app easier to edit and maintain in the future.

  5. On the builder toolbar, click the Edit your page for large screen devices button.

    Edit your page for large screen devices button

    It's necessary to switch to large screen mode to reconfigure widgets.

  6. Turn off Live view. Click Edit header and click the Menu widget.

    Menu widget selected on canvas

  7. In the Menu pane, click the Style tab. Find the Width property.

    The Width property is defined as a percentage of the screen's width, which becomes too small on narrow screens. You'll define the width in pixels instead, so you can ensure that it's always the same size, regardless of screen size.

  8. Next to Width, click the Change unit button and choose px.

    Change unit button and px option

  9. Set Width to 250 px.

    Width set to 250 px

  10. Switch to small screen mode.

    The menu is now large enough to read on the small screen.

    Edit your page for small screen devices button

Optimize the map page for mobile

Next, you'll make adjustments to the map page so it too works on all screen sizes. You'll change some elements to absolute sizing. You'll also configure a custom layout for mobile devices.

  1. In the Page pane, click the Map page.

    All of the widgets are too narrow on this page. Most of the text can't be read.

    Map page on a small screen

  2. On the builder toolbar, click the Edit your page for medium screen devices button to switch to medium screen mode.

    Edit your page for medium screen devices button

    This view emulates how your app will appear on a tablet. It looks better, but the chart's legend and the menu are still cut off. You'll adjust their widths to absolute sizing.

  3. Switch to large screen mode.
  4. Select the Menu widget. In the Menu 2 pane, on the Style tab, change Width to 250 px.
  5. Select the Search widget. Change its Width to 250 px.

    Width of Search widget set to 250 px

  6. Click below the chart to select the Column widget. Set its Width to 300 px.
  7. Switch to medium screen mode.

    The layout changes are effective on this screen size.

    Map page on a medium screen

  8. Switch to small screen mode.

    Map page on a small screen

    The changes are not effective here. The map is almost entirely hidden behind the Text and Chart widgets. You discussed with your teammates and decided that the chart isn't necessary for the mobile version of your web app. You’ll hide it from view when the screen size is small. To do this, you need to create a custom layout for small screens.

  9. Next to the canvas, click Custom.

    Custom button

  10. In the warning pop-up window, click OK.

    Now you can make changes to the layout that will only affect the app when it's viewed on small screens. You'll hide the Chart widget so that it appears when the screen is large and disappears when the screen is small.

  11. Click the Chart widget. On its toolbar, click the Move to the pending list button.

    Move to the pending list button

    The Chart widget disappears.

    It's important that you don't delete the Chart widget. Even though you are in custom mode, if you delete a widget, it will be deleted from all versions of the app. The pending list allows you to remove widgets from view without deleting them.

    Tip:

    If you accidentally deleted the Chart widget, click the Undo button on the builder toolbar. If you decide to add Chart back later, you can find it on the Insert widget pane, on the Pending tab.

    Next, you'll change the size and position of the Text widget so it no longer hides the Search and Menu widgets.

  12. Click the Text widget. Drag it outside of the column and place it on the map.

    Text widget moved out of Column widget

  13. Move the Column widget to the pending list.

    Move to the pending list button

  14. Snap the Text widget to the bottom left corner.
  15. In the Text pane, click the Style tab. Change Width to 90 percent and Height to 30 percent.

    Width set to 90 percent and Height set to 30 percent

    This size prevents the map's navigation controls from hiding any of the text.

    Text widget in lower left corner of app

    Note:

    In custom mode, you can change the size and position of widgets without affecting other screen sizes. However, changes to other properties will be visible on all screen sizes. For example, if you choose a smaller font size for the Text widget, it will appear smaller on all screen sizes. If you want a smaller font size on small screens only, you must duplicate the Text widget, move the original widget to the pending list, and change the font size in the new widget.

Finalize and publish

To finish the project, you'll preview, publish, and share the web app.

  1. On the builder toolbar, click the Save button.
  2. When the Saved successfully message appears, click the Preview button.

    Preview button and Saved successfully message

    A new browser window appears with your app.

  3. Test the app by exploring the map, chart, and story.
  4. Resize the browser window to test the app's layout on different screen sizes.

    Map page of finished web app

  5. Return to the Experience Builder editing tab. On the builder toolbar, click Publish.

    You'll also update the app's sharing settings to make it accessible to the public.

  6. Click the More button and click Change share settings.

    More button and Change share settings option

    The item page appears for the web app.

  7. Click Share.

    Share button

  8. Click Everyone (public) and click Save.

In this lesson, you built a multipage web app that features a map and story about housing occupancy in the United States. You added interactive widgets to enhance readers’ understanding of the data. Finally, you altered the layout to ensure that it works for screens of all sizes.

Now you and your teammates can embed your work on your housing advocacy group’s website or share links to the web app on social media.

You can find more lessons in the Learn ArcGIS Lesson Gallery.