Add a map with buttons and bookmarks

There are hundreds of languages in India, all with overlapping territories. This results in a complicated geographic story that is difficult to communicate with symbols and pop-ups alone. You'll use ArcGIS Experience Builder to build a web app that guides a viewer's experience of the map. You'll also add buttons that expose more information, and bookmarks that allow people to view only one language on the map at a time.

Create a mapcentric app

The map that you'll use for this lesson is a thematic map, meaning that it focuses on a specific theme (languages in India). It is different from a reference or topographic map, which describes the physical environment. The information that you include in the map's layout helps to communicate the theme or story.

In this case, the map is the best communication device for your story, so you'll make an app that features it as the largest item and has text and other information off to the side. This kind of design is often referred to as mapcentric

  1. Open the Languages of India web map and sign in.
    Note:

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

    Map of languages in India

    The map for this lesson was already prepared with symbology and pop-ups. It shows where 21 languages are spoken as a mother tongue in India. The data is from the 2011 government census. The opacity of the color indicates the percentage of speakers. For example, if a district has a 50 percent transparent purple color, half of the people there speak Telugu as their mother tongue.

    Note:

    The census defines mother tongue as "the language spoken in childhood by the person's mother to the person." In the absence of a mother, the main language spoken in the childhood home is listed as the mother tongue.

    The map needs a legend and other surround information. For web maps, this information is usually presented in a web app. There are several kinds of web apps in ArcGIS, including Dashboards, StoryMaps, and Instant Apps. You'll use ArcGIS Experience Builder for this map because you need to customize the tools and design.

  2. On the top toolbar, click the app launcher button and click Experience Builder.

    Experience Builder in the ArcGIS app launcher

    Note:

    If you can't find ArcGIS Experience Builder, click Show More, or go to ArcGIS Experience Builder.

    ArcGIS Experience Builder appears in a new tab. Optionally, you can close the original tab with the Languages of India web map; it is no longer needed.

  3. Click Create new.

    A list of templates appears that you can use to create common layout designs. For this lesson, you'll start with a blank canvas. You'll use the fullscreen page type, which allows you to place widgets on the canvas at any position, even overlapping one another.

  4. Under Blank fullscreen, click Create.

    Create button on the Blank fullscreen template

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

    A blank canvas appears, where you will build your web app. Apps built with Experience Builder are also called web experiences.

  6. At the bottom of the screen next to the zoom controls, click the Fit width to current window button.

    Fit width to current window button

  7. In the Page 1 pane, turn on Header. Change Height to 45 px.

    Header height set to 45 pixels

    You can also change the color of the header in this pane, but instead, you'll change the color theme, which will affect the entire app, not just the header.

  8. On the side toolbar, click the Theme button. On the Theme pane, click Vivid.

    Theme set to Vivid

    The page header changes to orange. Themes help to ensure that consistent colors and fonts are used throughout the design.

    Next, you'll add the map. You want the map to be the main focus, so you'll make it fill the entire page.

  9. On the side toolbar, click the Insert button. In the Insert widget pane, click Map and drag it onto the canvas

    Drag a Map widget onto the canvas from the Insert widget pane.

    A toolbar appears above the new map.

  10. On the map's toolbar, click the alignment button and click Full size.

    Full size alignment

    A default map is shown. You'll replace it with your map of languages in India.

  11. In the Map 1 pane, click Select map.

    Select map button on the Map 1 pane

  12. At the bottom of the Select data pane, click Add new data.

    The Add data page appears.

  13. Click the ArcGIS Online tab. In the search bar, type Languages of India owner:Learn_ArcGIS and press Enter.

    Search for the map in ArcGIS Online.

  14. Select the Languages of India web map and click Done.
  15. In the Select data pane, click Languages of India.

    The map appears on the canvas and in the Map 1 pane.

    App with map and header

  16. Close the Select data pane.
  17. At the top of the screen, on the builder toolbar, click the Live view button. Click some of the district polygons on the map.

    Live view with open pop-up

    The pop-up lists all of the languages that are spoken in that district as a mother tongue. Instead a long table of fields, only the relevant information is included in the pop-up, and it is formatted to be easy to read. Good pop-up design is essential to making effective thematic maps.

    Note:

    To see how these pop-ups were configured with text and an Arcade expression, open the Languages of India web map.

  18. Close the pop-up and turn off Live view.
  19. On the builder toolbar, click the Rename experience button and type Languages of India, followed by your initials.

    Experience renamed as Languages of India

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

    Save button on the builder toolbar

Add buttons

You've now set up an app with the map as the main focus. The next goal on your criteria list is to provide some context for people who may be unfamiliar with the topic. You'll add some buttons so people can access this information without taking up too much space on the layout.

  1. On the side toolbar, click the Insert button.
  2. From the Insert widget pane, drag a Button widget onto the canvas. Place it on top of the map, near the lower left corner.

    Drag button widget onto the canvas.

  3. In the Button 1 pane, for Text, type How many languages are spoken in India?.

    Text for Button 1

  4. On the Quick style window, click the second (orange) button style.

    Second style in the Quick style window

  5. Close the Quick style window and drag the edges of the button until it is wide enough to show all of the text.
  6. On the button's toolbar, click the Duplicate button.

    Duplicate button

    A copy of the button appears.

  7. On the new button's toolbar, click the Duplicate button to make another copy.
  8. Drag the new buttons to place them above the original button so they are stacked in the corner of the app.
  9. Click the bottom button to select it.

    Lowest of three buttons selected

  10. At the top of the Button 1 pane, click the edit button next to Button 1 and rename it Official languages button.
  11. Change the Text to What is the official language?

    Text and name changed for button

  12. Click the middle button and rename it Map languages button. Change its Text to Which languages are shown on this map?
  13. Click the top button and rename it Number of languages button.

    Three buttons in corner of map

Add windows and connect them to the buttons

You'll configure the buttons so when they are clicked, a ToolTip-style window will appear with text. First, you need to create those windows.

  1. On the side toolbar, click the Page button and click the Window tab. Click the Add window button.

    Window tab and Add window button

  2. Scroll down and choose Tooltip.

    A new window appears on the canvas.

  3. In the Window pane, rename Window 1 to Official language.

    Window renamed to Official language

  4. On the canvas, select the Title text. On the text's toolbar, click the Delete button.

    Delete the title text.

  5. Also delete the image.
  6. Select the text. Double-click and paste the following:

    Each state or territory can name its own official languages. The official language of India is Hindi in Devanagari script, but English may also be used for official purposes. This use of English was tentatively planned to end in 1965, but the change was met with resistance from parts of the country that did not speak Hindi natively.

    Tip:

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

    The text does not fit properly inside the window yet. You'll change the size of both the window and the text block to make it fit.

  7. Click outside of the text to select the window. On the Official language pane, under Size, set width to 250 px. Set height to 220 px.

    Width and height settings

  8. Select the text and drag its sides until it is almost as wide as the window. On the text's toolbar, click the alignment button and choose Horizontal center. Click the alignment button again and choose Vertical center.

    Horizontal center and Vertical center alignment options

    You'll make a two more windows, so there is one for each of the orange buttons.

  9. In the Window pane, point to Official languages and click the More button. Click Duplicate.

    Duplicate the window.

  10. Rename the Official languages copy window to Map languages.
  11. Replace the text on the window with the following:

    India has no national language, but 22 languages are named in the Eighth Schedule to the Constitution of India. The status of scheduled obligates the government to promote these languages.

    This map shows where each of the scheduled languages is spoken as a mother tongue, according to the 2011 census.

  12. Make another duplicate of one of the windows. Rename it Number of languages.

    Three renamed windows

  13. Replace the text in the Number of languages window with the following:

    The Census of India 2011 names 273 languages. Other sources list up to 780. The difference between counts is explained by the difficulty in defining a language versus a dialect.

    Next, you'll connect the buttons to their windows.

  14. In the Window pane, click the Page tab.

    Page tab

  15. On the canvas, click the What is the official language? button. In the Official language button pane, click Set link.
  16. In the Set link pane, for Link to, choose Window. For Select a window, choose Official language.

    Set link to the Official language window

  17. Click OK.
  18. Click the Which languages are shown on this map? button and link it to the Map languages window.
  19. Click the How many languages are spoken in India? button and link it to the Number of languages window.
  20. Turn on Live view and click the new buttons to test them.

    Button with open window

Add bookmarks to display one language at a time

The map needs a legend to explain which language each color represents. However, there are so many colors that simply adding a list of them will not be helpful. When a legend lists more than five colors, it can become difficult to interpret. In this case, it is difficult to distinguish between the different greens used to represent Manipuri, Sindhi, Santali, and Punjabi. Instead of a traditional legend, you'll add bookmarks, which will allow people to view one language at a time. This will accomplish two of the goals from the list of design criteria:

  • The map symbols should be clearly and simply explained.
  • The app should allow viewers to explore one language at a time, or all languages at once.
  1. Turn off Live view.
  2. From the Insert widget pane, drag a Bookmark widget onto the canvas and place it over the right side of the map.

    Bookmarks allow you to guide the viewer's experience of the map. Each bookmark can zoom the map to a defined location and can also control which layers are visible.

  3. In the Bookmark 1 pane, accept the default template choice. At the bottom of the pane, click Next.
  4. For Select a Map widget, choose Map 1.

    Bookmark widget set to Map 1

    The first bookmark you add will be the same as the default view, showing all languages.

  5. Click Add bookmark.

    A preview window appears.

  6. Click Save.
  7. In the Bookmark 1 pane, click Bookmark-1 and rename it All languages.

    All languages bookmark

    Now you'll add bookmarks that allow people to view only one language at a time.

  8. Click Add bookmark. Rename Bookmark-2 as Hindi.
  9. On the preview window, click the layers button. Turn off visibility for all layers except for:
    • Pop-ups
    • Pop-ups for no-data
    • Hindi
    • India outline

    Visibility turned off for most layers in the Hindi bookmark

  10. Position the map so the yellow area is in the center and click Save.
  11. Add another bookmark and name it Bengali.
  12. On the preview window, in the Layers list, turn off visibility for Hindi and turn on visibility for Bengali.

    Bengali layer visible and Hindi layer invisible

  13. Zoom and pan to place the blue area of the map in the center of the preview window. Click Save.
  14. Add another bookmark. Rename it Marathi and make Marathi the only visible language layer on the map. Position the turquoise part of the map in the center of the preview window and click Save.
  15. Add 18 more bookmarks for the remaining language layers:
    • Telugu
    • Tamil
    • Gujarati
    • Urdu
    • Kannada
    • Odia
    • Malayalam
    • Punjabi
    • Assamese
    • Maithili
    • Santali
    • Kashmiri
    • Nepali
    • Sindhi
    • Dogri
    • Konkani
    • Manipuri
    • Bodo
    Note:

    If you do not add all 18 bookmarks, you can still complete the rest of this lesson.

  16. Close the preview window.
  17. On the canvas, click the bookmark widget. On its toolbar, click the alignment button and click Snap to right.

    Snap to right alignment

  18. Click the alignment button again and click Full height. Drag the left side of the bookmark widget so two columns of bookmarks are visible.

    Map with bookmarks for different languages

  19. Turn on Live view and click some of the bookmarks to test them.

    They should each zoom to the selected language and display only that language.

    Malayalam bookmark selected

    Even though only one language is shown at a time, the pop-ups should still appear for every district in India, since they are stored on a separate, invisible layer.

    Tip:

    If you're unhappy with one of the bookmarks, find it in the Bookmark 1 pane and click the Change the bookmark view button to reopen the preview window.

    Change the bookmark view button

  20. Click the All languages bookmark and turn off Live view. On the builder toolbar, click Save.

You've now built an interactive layout with a map, buttons that display information about the map, and a set of bookmarks that display the map layers individually.


Add a map with a legend and a list

So far, the web app does a good job of illustrating the distribution of some of the main languages in India. However, there are many more languages that are not represented. The northeast of India in particular is linguistically diverse, but this area appears faded on your map, since there are many districts without a dominant mother tongue.

Northeast India in language map

You'll add a second map to show the number of languages spoken as a mother tongue in each district. This will better highlight areas of great linguistic diversity.

Add and configure a new page

Rather than crowding the layout with a second map, you'll add a second page to your web app, so people can switch between the two maps.

  1. On the side toolbar, click the Page button.
  2. In the Page pane, point to Page 1 and click the More button. Click Duplicate.

    Duplicate Page 1

    You'll rename the two pages so they are easier to tell apart.

  3. Rename Page 1 to Languages of India. Rename Page 1 copy to Language Density.

    Renamed pages in the Page pane

    You now have two identical pages. You'll remove the widgets from the second page and replace its map.

  4. In the Page pane, ensure that the Language Density page is selected.
  5. On the canvas, select and delete the three buttons and the bookmark widget.
  6. Click the map to select it. In the Map 1 copy pane, for Languages of India, click the Remove button.

    Remove the Languages of India map.

    The map on the canvas reverts to the default Topographic basemap and the Select data pane appears.

  7. At the bottom of the Select data pane, click Add new data.
  8. On the ArcGIS Online tab, search for and select the Language Density in India web map owned by Learn_ArcGIS.

    Language Density in India web map

  9. Click Done.
  10. In the Select data pane, click Language Density in India.

    New map selected in the Select data pane

    The Map 1 copy pane shows a preview of the new map. The map also appears on the canvas.

  11. Close the Select data pane.
  12. Rename Map 1 copy to Language Density Map.

    Next, you'll move the map aside to make some more room on the layout.

  13. In the Language Density Map pane, click the Style tab.
  14. In the toolbar at the top of the pane, click the Snap to right button. For Width, choose Custom and type 60 %.

    Width set to 60 per cent

    A blank space appears on the canvas to the left of the map.

  15. Click the Content tab. For Initial view, choose Custom and click Modify.

    Modify initial view button

  16. In the Modify initial view window, reposition the map to the center and click OK.
  17. On the side toolbar, click the Insert button.
  18. In the Insert widget pane, scroll down to the Layout section.

    Layout widgets are containers that allow you to better organize other widgets on the canvas. You'll add a column widget, which allows you to stack items vertically.

  19. Drag a Column widget onto the left side of the canvas. Snap it to the left and make it full height.
  20. In the Column 1 pane, on the Style tab, change Width to 40 %.

    Empty column and map

    The layout for this page now consists of a column and a map.

Add a menu to switch between pages

Next, you'll add a menu to the header so people can switch between the two pages.

  1. On the canvas, point to the orange header and click Edit header.

    Edit header button

  2. From the Insert widget pane, click and drag the Menu widget onto the header.

    Drag menu widget onto header

  3. On the menu's toolbar, click the alignment button and choose Full size.

    The menu has two titles, one for each page.

  4. On the builder toolbar, click the Live view button. Click the menu titles to switch between the two pages.

    The titles change color when they are selected and when you hover over them, although in their current style they are not always easy to see. Next, you'll update their style to make them more legible.

  5. In the Page pane, in the Outline section, under Header, click Menu 1.

    The Outline section provides a nested list of all of the widgets in your app.

  6. In the Menu 1 pane, under Appearance, choose Pills. Turn on Advanced to access more settings.

    Pills button and Advanced toggle button

  7. In the Advanced section, under Text, click the Bold button.
  8. Click the text color button.

    Text color button

  9. In the color menu, under Theme colors, in the top row, choose the white color.

    White color selected from Theme colors

    Theme colors will update automatically if the theme of the web experience is changed.

  10. Click the Hover tab to edit the text for the hover state. Change the text color to white.

    Text color set to white on the Hover tab

  11. Click the menu titles to test their new style.

    Menu titles

  12. Switch to the Language Density page and turn off Live view.

Build a custom legend

The new map shows the density of mother tongue languages. Dark red districts have many languages spoken as a mother tongue, while pale yellow districts have few. Next, you'll add a legend to explain the map's colors.

  1. From the Insert widget pane, drag a Legend widget onto the column.
  2. In the Legend 1 pane, for Select a Map widget, choose Language Density Map.

    The legend updates.

    Legend

    This legend is not ideal for your map. LangCount is not a clear descriptor, and the District and India polygons aren't necessary.

  3. In the Legend 1 pane, turn on Use card style.

    Use card style turned on

    This version of the legend does not suit your needs either. However, you can use part of it to build a custom legend for your map.

    Card style legend

  4. Take a screen capture of the LangCount color ramp. If necessary, crop it to a rectangle without any white edges.

    Yellow to red color ramp

    Note:

    If you are unable to capture or crop a screen capture, you can download the image.

  5. Delete the legend widget.
  6. Drag a Text widget onto the column and type Number of languages spoken as mother tongue:

    Text widget in the column

  7. Highlight the text. In the Text 3 pane, on the Content tab, click the Bold button and change the text alignment to Center.

    Text set to bold and centered

  8. Click the Style tab and change Height to 25 px.
  9. Drag a Row widget onto the column and drop it below the text.

    Rows organize content side by side. You can place a row inside a column or vice versa. By default, a row has some extra space around its edges and between its contents so items are not too crowded. You'll remove this space to make your legend appear compact.

  10. In the Row 1 pane, on the Content tab, change Gap and all of the Padding values to 0 px.

    Gap and padding set to 0 pixels

  11. Click the Style tab. For Height, type 35 px.
  12. Drag an Image widget onto the row and place it roughly in the middle.

    Image widget added to row

  13. In the Image 1 pane, on the Content tab, click Select an image.
  14. Click Upload and choose the screen capture you captured or downloaded earlier.

    Color ramp image added to the row

    You'll add some more text to describe what either end of the color ramp means.

  15. Drag a text widget onto the row and drop it next to the red end of the color ramp.
  16. Type 30 or more and make the text bold.

    Legend text next to color ramp

  17. Drag another text widget next to the yellow end of the color ramp. Type 1 and make the text bold. Also make the text right-justified

    Text set to bold and right-justified

  18. Drag the sides of the image and text widgets so the 1 text takes up one column of the row and the 30 or more text takes up three columns.

    Legend made of a color ramp image and text

    There's still extra space between the legend title and the color ramp, even though you removed the gap setting from the row. This is because there is also a gap setting on the column.

  19. In the Page pane, in the Outline section, click Column 1.

    Column 1 in the Outline section of the Page pane

  20. In the Column 1 pane, on the Content tab, change Gap to 0 px.

Add a list with text and images

Thematic maps often have a story or message to communicate. Adding text and images to the map can help to enliven the data by pointing out significant features and providing context for why they are interesting. You'll add a list widget to your layout to share information about a few of the languages in India.

  1. Drag a List widget onto the column and drop it beneath the legend row.
  2. In the List 1 pane, on the Content tab, click the first horizontal template and click Start.

    Template selected for the list widget

  3. Click Select data. In the Select data pane, expand Language Density in India and choose Language notes.

    Template selected for the list widget

    This layer was created to store contextual information for the map. Like the pop-ups layers, it uses a transparent symbol so it is not visible on the map.

    On the canvas, the first list item is selected. You'll make all of your edits to the first card, which will then be applied dynamically to all cards.

  4. On the first list card, select the image.

    Image selected from the first list card

  5. In the Image 3 pane, on the Content tab, under Image source, click Dynamic.
  6. For URL, click the Attribute button, and click Attribute.

    Image source set to URL from an attribute

  7. In the Attribute pane, click Picture.

    The Picture field contains URL addresses to images, so each list card will display a different photo. You'll credit the source of each image in a ToolTip.

  8. For Tooltip, click the Static button and change it to Attribute. In the Attribute pane, choose PictureCredit.

    Tooltip set to the PictureCredit attribute

    Note:

    You can see how the Language notes layer is structured in the layer's table view.

  9. Close the Attribute pane.
  10. On the first list card, delete the first line of text.
  11. Click the remaining text. On the text's toolbar, click the Dynamic content button.
  12. Click Paragraph1, press Enter twice, and click Paragraph2.

    Dynamic content window

  13. Close the Dynamic content window.
  14. Drag the sides of the text box so it almost fills the available space, leaving a small gap on either side. Make it full height.

    Above the list there is an empty space with an Actions button.

    Actions button above the list

    This button allows users to process the data in the list—for example, to export it. This functionality is not necessary for your short list, so you'll remove this feature.

  15. Click the empty space above the list. In the List 1 pane, click the Action tab. Click Data action and turn off Enable data action.

    Enable data action turned off in the List 1 pane

    The action button and the empty space disappear from the list.

  16. Click the Message action tab and click Add a trigger.

    Add a trigger button on the Message action tab.

    Message actions are changes that are applied to a target widget when a change in the source widget acts as a trigger. You'll add a trigger that uses the list as a source widget and the map as a target widget. When someone clicks a card in the list, it will trigger an action that zooms to the feature on the map.

  17. In the Select a trigger pane, click Record Selection Changes. For Select a target, choose Language Density Map.
  18. For Select an action, choose Zoom to. Close the Action settings pane.

    Close the Action settings pane

  19. Turn on Live view and click some of the list items to test them. Each one should zoom to a different part of India and highlight the area on the map.

    Selected card in the list with feature selected on the map

  20. Turn off Live view and save the web experience.

You've now added a second page to your web app and a second map, which shows how many mother tongue languages are spoken in each district. You added a menu to allow switching between the two pages and you built a custom legend. Finally you added a list that is dynamically driven by a map layer and set up an action so people can explore the map by clicking items in the list.


Complete the web app design

Your web app has all of the elements that you intended to include. However, before you decide that a map layout is complete, it's important to assess the following questions:

  • What is the visual hierarchy of the layout? Which parts draw your eye first, second, and third?
  • Are the maps adequately explained?
  • Should you remove anything? Sometimes information that is interesting can distract from information that is important.
  • Is the layout visually consistent? Do you use the same colors and fonts throughout?
  • Is anything missing?

In this case, the last two questions require further work. You still must configure style settings on the column next to the language density map. In addition, some important information is missing: text to credit the data source.

Add credit text

Credit information and other metadata are usually designed to be small and out of the way of the rest of the map. They should be low in the visual hierarchy, but they should always be present. You'll add credit text below the list.

  1. Drag a Text widget onto the column, below the list.
  2. Copy and paste the following text:

    The data for this map is from the 2011 Census of India, via ArcGIS Living Atlas of the World. This map was made by following the Learn ArcGIS lesson Design a layout for a thematic map in ArcGIS Experience Builder by Your Name, 2021.

  3. In the Text 9 pane, on the Style tab, change the Height to 80 px.
  4. Highlight all of the text. In the text toolbar, change the size to 11 px.

    Selected text set to 11 px in the text toolbar

  5. Highlight 2011 Census of India. In the Text 9 pane, on the Content tab, click the Link button.

    Link button

  6. In the Set link pane, for Link to, choose URL. For URL, paste https://censusindia.gov.in/2011Census/C-16_25062018_NEW.pdf.

    Link set to URL

  7. Click OK.
  8. Highlight ArcGIS Living Atlas of the World and set the link to https://www.arcgis.com/home/item.html?id=16a1324c517048db890b86a87858a8ef.

    The text turns orange to indicate it is a link. The color is determined by the theme that you chose earlier.

  9. Replace Your Name with your name or initials, and if necessary, replace 2021 with the current year.

Style the column and the list

Next, you'll restyle the list so it shows as many cards as it can within the space that it has. You'll also make the cards appear white when they are selected and gray when they are not.

  1. Select the column. In the Column 1 pane, click the Style tab. Under Background, change the Fill color to white.

    Background fill set to white

  2. Select the list. On the List 1 pane, on the Style tab, for Height, choose Stretch.

    The Stretch setting will cause a widget to stretch to fill all of the available space in its container. In this case, the container is the column. The list expands to the maximum height that is possible without pushing the credit text off the page.

  3. Click the Content tab and expand Arrangement. Set Vertical spacing (px) to 0.

    Vertical spacing set to 0

    The gaps between the list cards disappear.

    List cards with no space between them

  4. Expand States and click the Fill color. From the Theme colors list, choose the lightest gray color (#efefef Light-200).

    Lightest gray color selected from the Theme colors

  5. For Border, change the size to 0 px.
  6. Turn on Live view and click some of the list items to test them.

    The background color of the list cards changes to white when they are selected. This makes it easier for people to know what is currently selected. But there are some other things that you want to change: there is not enough room to read the text, the text jumps in position when a card is selected, and a thin orange border appears when a card is selected.

    Card selected in the list with a white background and displaced text

    You'll start by fixing the position of the text.

  7. Turn off Live view. On the first list card, select the text.
  8. In the states menu that appears next to the card, click the link button and choose Apply to selected.

    Apply to selected option for text in list card

    Now the text that appears on the card when it is selected will look the same as the text that appears on the card normally.

  9. Click any of the inactive cards to deselect the text.
  10. Drag the orange divider at the bottom of the first list card until all of the text in the first card is visible.

    Drag the bottom edge of the list card to expand it.

    There will be more or less room available for each card depending on the screen resolution. It is okay if not all of the text fits in each card.

  11. On the builder toolbar, click the Change screen size button to preview the layout on different screen sizes.

    Change screen size options on the builder toolbar.

    You'll also change the border of the selected card from orange to white.

  12. In the List 1 pane, in the States section, next to Selected, click On.

    On button for the selected state

    The settings for the selected state of list cards appear.

  13. For Border, change the color to white and the size to 3 px.

    Border set to 3 pixels and white

  14. Turn on Live view and test the list. Turn off Live view again when you are done testing.

    There is no gap between the legend and the list.

    No space between the legend and the list

    You removed all gaps to make the content more condensed, but it would be nice to maintain a gap in this one area.

  15. In the Page pane, in the Outline section, expand Column 1 and click Row 1.
  16. In the Row 1 pane, for Padding, change Bottom to 5 px.

    Bottom padding set to 5 pixels

    A small white space appears between the legend and the list.

Restyle buttons for smaller screens

Your web app now achieves all of the goals from the project's list of criteria, except for the last item: the app should work on a mobile device as well as a desktop computer screen. You've viewed the layout on different desktop screen sizes but not smaller ones. Next, you'll adjust your layout to fit on a mobile device.

  1. Switch to the Languages of India page.
  2. On the builder toolbar, click the Edit your page for medium screen devices button to preview the layout for tablets and similarly sized screens.

    Edit your page for medium screen devices button

    The buttons are too short for medium-sized screens. You'll return to the full-sized preview to edit them.

    Truncated buttons on the medium-sized layout

  3. Click the Edit your page for large screen devices button to return to a desktop-sized preview.
  4. On the canvas, select the top button. In the Number of languages button pane, click the Style tab.

    The width is shown as a percentage of the width of the container. In this case, the container is the map. So when the map is resized to fit on a smaller screen, the buttons are as well. You'll define the size of the buttons by pixels instead to prevent them from resizing.

  5. For Width, click the Change unit button and choose px.

    Change the unit to pixels for the width setting.

  6. Change the Height property to px as well. Set Width to 250 px and Height to 40 px.

    Width and height settings

  7. Change the size of the other two buttons to match the first one.

    You'll also change the font size to fit on the resized buttons.

  8. Click the Content tab, expand Advanced and change the font size to 12 px. Click the Hover tab and change the font size to 12 px there as well.

    Hover text set to 12 pixels

  9. Change the font size of the other two buttons to match the first one. Change it for both the Regular and Hover states.
  10. In the builder toolbar, switch between the three screen size previews.

    Edit your page for small screen devices button

    The buttons fit in all three screen sizes; however, the buttons float in different places on different screen sizes.

    Buttons separated by wide gaps

    This is because their positions are also determined by percentage. You'll change it to pixels to get more consistent behavior across screen sizes.

  11. Switch to the desktop preview and select the bottom button. In the Button 1 pane, click the Style tab.

    Under Size & Position, there is a position diagram. This defines how far away the button is from the edges of its container.

  12. In the position diagram, click both Change units buttons and change them to px.

    Change units to pixels in the position diagram.

  13. Change the left position to 5 px and the bottom position to 20 px.

    Position diagram with final positions

  14. Select the middle button. Change its left position to 5 px and its bottom position to 65 px.

    Position of middle button

  15. Select the top button. Change its left position to 5 px and its bottom position to 110 px.
  16. Switch between the three screen size previews.

    The buttons now fit on all three screen sizes.

Rearrange elements for smaller screens

Sometimes you can create a design that works on any screen size, as you did with the buttons. But other times, you need to customize the layout for smaller screens. This approach is needed for the Language Density page. You'll place the legend and text in a sidebar that can be hidden.

  1. Switch to the Language Density page and on the builder toolbar, click the Edit your page for medium screen devices button.

    The layout looks acceptable on medium-sized screens.

  2. Click the Edit your page for small screen devices button.

    Language Density page shown on a small screen device

    The layout is too crowded for small screens. You'll create a custom layout for this page when it is viewed on mobile devices.

    Next to the canvas, there are two state menus: one for the header and one for the body of the app. They are both set to Auto, meaning the layout for small screens is the same as the layout for large screens.

  3. Click the bottom Custom button.

    Custom option for the body of the Language Density page

  4. In the Are you sure you want to enable it? window, click OK.

    Now you can change the layout design for the page on small screens without effecting the design for large screens. You'll place the content aside temporarily so you can add the sidebar widget.

  5. In the Page pane, in the Outline section, click Column 1. Click the More button and click Move to the pending list.

    Move Column 1 to the pending list.

    The column disappears from the canvas.

  6. Also move the Language Density map to the pending list.
  7. On the side toolbar, click the Insert button. From the Layout section, drag a Sidebar widget onto the canvas and make it full size.

    Sidebar added to the canvas and set to full size

  8. In the Insert widget pane, click the Pending tab.
  9. Drag Column 1 onto the left side of the sidebar widget.

    Column 1 added to the sidebar from the pending list

  10. Make the column full size.
  11. Drag the Language Density map onto the right side of the sidebar widget and make it full size as well.
  12. Turn on Live view and click the sidebar handle to test opening and closing the sidebar.

    Sidebar handle

    The sidebar allows both the information and the map to be usable on small screens. However, the legend is still not visible.

  13. Turn off Live view. In the Page pane, expand Column 1 and click Row 1.
  14. In the Row 1 pane, on the Style tab, change Height to 150 px.

    The row expands to show all three items. Rows are automatically displayed as columns on small screens, but this modified arrangement is not suitable for the legend, so you will force the items back into a row.

  15. Click the 1 text and resize it until it occupies only the left-most column.

    Legend label text shrunk to one column of the row

  16. Click the 30 or more text and resize it until it occupies only the three right-most columns.
  17. Drag the 30 or more text above the color ramp.

    Legend label shrunk to three columns of the row

  18. Drag the color ramp and place it between the two text labels.

    Color ramp image of the legend placed between the two labels

  19. In the Page pane, in the Outline section, click Row 1.
  20. In the Row 1 pane, on the Style tab, change Height to 30 px.

    Height of the legend row set to 30 pixels

  21. Turn on Live view and preview the layout in all three screen sizes.

Preview and share the web app

You have finished designing the web app about languages in India. You are ready to publish the app and share it with others.

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

    Preview button on the builder toolbar

    A new browser tab opens, displaying the new web experience.

  3. Test the app by exploring the buttons, bookmarks, list items, and pop-ups.

    While you can preview the app in this view, other people cannot see it until it is published and shared.

  4. Return to the Experience Builder editing tab. On the builder toolbar, click Publish.
  5. Click the More button and choose Change share settings.

    Change share settings for the web app

    The item details page for the web app appears.

  6. Click the Share button.

    Share button on the item details page

  7. Click Everyone (public) and click Save.
  8. Scroll to the bottom of the item details page. Under URL, click the Copy button.

    Copy link button on the item details page

    You can give this link to colleagues and friends to share the web app with them. You can continue to edit the app and test your edits with the Preview button. Other people will not see your edits until you click the Publish button again.

In this lesson, you built a multipage web app that features two maps about languages in India. You created filtered map views of individual languages using bookmarks, and you created a guided tour of some interesting parts of the data using a list. You added buttons, credit text, and a custom legend. Finally, you altered the layout to ensure that it will work on screens of different sizes.

Good layout design is essential to sharing thematic web maps that communicate clearly. An effective layout limits the number of tools and carefully guides the map viewer through an engaging exploration of the data. ArcGIS Experience Builder gives you the tools to build a custom layout that is ideally suited to your map.

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