Skip To Content

Change layer style and configure pop-ups

In this lesson, you'll apply style changes to the map that you made in the previous lesson, and you'll configure pop-ups to display useful information. These updates will identify areas of high child population and low household income in Detroit, helping your charity decide where to allocate funding this year.

Change the style

The Detroit Demographics layer is currently styled based on one attribute: median household income. You'll change the style of the layer to highlight both of the demographic attributes that you want to display: median household income and child population.

  1. If necessary, open your Detroit Demographic Analysis map. (Sign in to your ArcGIS organizational account.
  2. At the top of the page, click Content. Click the ellipsis next to your web map and choose Open in Map Viewer.)

    Open in Map Viewer

  3. In the Contents pane, point to the Detroit Demographics layer and click the Change Style button.

    Change Style button

    The Change Style pane opens. Currently, the map has a layer styled based on one attribute—median household income. You’ll add a second attribute—child population—so that both attributes can be represented in the same map layer.

  4. For Choose an attribute to show, click Add attribute.
  5. For the second attribute, choose 2018 Children (Age <14).

    Second attribute, 2018 Children (Age <14)

    Based on the two attributes you chose to map, several drawing styles are offered. The Color and Size style is recommended, as indicated with a blue check mark. This style uses colors and different-sized symbols to show two attributes in a single layer on the map. The layer automatically updates on the map with a new default style, with circles for each census tract. The size of the circle indicates the number of children, while the color of the circle indicates median household income.

    Before you accept the default settings, you'll make a few small changes to refine the style.

  6. Under Color and Size, click Options.

    Color & Size Options button

    The Color and Size style is using color to show 2018 Median Household Income and size to show 2018 Children (Age <14). You'll change the theme and color to reflect median household incomes that are above and below the average.

  7. Under Counts and Amounts (Color), click Options.
  8. For Theme, choose Above and Below.

    Above and Below theme

    Unlike the default single-color ramp, Above and Below uses two color ramps to emphasize values that are either above the average value or below it. With this style, it will be easy to see at a glance which areas have below-average income levels. Next, you'll change the colors used.

  9. Click Symbols.

    Symbols button

    A window opens with options to change the shape, color, and outline of the symbols on the map.

  10. Click Fill and click the blue-to-orange color ramp.

    Blue-to-orange color ramp

  11. Click Outline and change the transparency to 50%, if necessary.

    Transparency slider set to 50%

  12. Click OK and then click OK in the Change Style pane.

    Many symbols overlap, so you'll reduce their size to help highlight the overall pattern of high and low values.

  13. Under Counts and Amounts (Size), click Options.
  14. For Size, choose Specify size range. Confirm that the Min size is 8 px (pixels) and change the Max size to 40 px.
  15. At the bottom of the Change Style pane, click OK. Click Done twice.

    Map styled by two attributes

    The Detroit Demographics layer now shows both key attributes on the map: median household income and child population. New patterns in the data may be evident to you already. You'll explore the map in more detail later. First, you'll configure pop-ups for the layer to more easily display the attribute data of each census tract area.

Configure pop-ups

Pop-ups provide descriptive information about the features in a layer, often based on attributes in the data. Pop-ups appear when you click a feature on the map. You can specify what information is displayed in pop-ups and how that information is presented.

  1. Click a census tract area on the map to display its pop-up.

    Default pop-up

    The basic configuration of a pop-up is just what you see: a list of fields and values. Most pop-ups are stylized views of the attribute table associated with a layer. In this case, the default configuration has a few problems. For example, too many fields are listed, making the pop-up difficult to read, and many of the attributes are not needed for your analysis.


    Sometimes field names are unfamiliar abbreviations or are unclear in other ways. For example, it may not be obvious that SQMI means square mileage. You can resolve this problem in the pop-up by changing the field alias to something more informative or familiar without changing the data itself. An alias is a display name that replaces the field name in the pop-up. To change an alias, point to the layer, click the More Options button, and click Configure Pop-up. Then, click Configure Attributes, click the field alias value that you want to change, and type a new alias.

  2. Close the pop-up.

    To make the data in the Detroit Demographics layer easier to read and to provide more useful information, you'll customize how the attributes are displayed.

  3. Point to the Detroit Demographics layer, click the More Options button, and click Configure Pop-up.

    The Configure Pop-up pane opens.

  4. For Pop-up Title, edit the text by removing your name or initials from the title.
  5. For Pop-up Contents, change Display to A custom attribute display.

    Pop-up title and display settings

  6. Click Configure.

    The Custom Attribute Display window opens. You can write your own content for the pop-ups, using variables for each field value that you want to describe. (You can also format the text and include hyperlinks and images.) Your custom display will use the following attribute fields:

    • FIPS {FIPS}
    • 2018 Median Household Income {MEDHINC_CY}
    • 2018 Children (Age <14) {CHILD_CY}
    • 2018 Total Population {TOTPOP_CY}

  7. In the Custom Attribute Display window, type The followed by a space. Then, click the Add field name button and choose FIPS {FIPS}.

    Add Field Name button in the Custom Attribute Display window

    Field names in braces { } work like variables. For instance, when you click a census tract area in your map, the pop-up will display the code for that feature.

  8. Continue typing to complete the content that will display in your custom pop-ups. As needed, use the Add field name button to insert the three other field names in braces.

    The {FIPS} census tract area has a median household income of ${MEDHINC_CY}.

    There are {CHILD_CY} children under the age of 14 out of {TOTPOP_CY} total residents.

  9. Use the Bold button to bold the fields and the dollar sign ($) to the left of {MEDHINC_CY}.

    Some Internet browsers may not have the capability to format pop-ups. If you encounter difficulties, you can continue with the unformatted text.

    Formatted content for the custom pop-ups

  10. Click OK. In the Configure Pop-up pane, click OK.
  11. Click a census tract area on the map to confirm that your pop-up was configured correctly.

    Pop-up with new configuration

    The pop-up displays with the new configuration. By default, numeric attributes such as population and income are displayed with two decimal places. This makes sense for median household income but not for child population and total population.

    Next, you'll change how the pop-ups display these population attribute values.

  12. Open the Configure Pop-up pane again.
  13. Under Pop-up Contents, click Configure Attributes.

    Configure Attributes

    The Configure Attributes window opens, listing the layer's attributes.

  14. Scroll down to the end of the list, and click the {TOTPOP_CY} field to select it.

    A few options appear to the right of the fields.

  15. Change Format from 2 decimal places to 0 decimal places.

    Field format

    Now when your pop-up displays the population values, they will not include any decimal places.

  16. Click the {CHILD_CY} field and change its format to 0 decimal places.
  17. Click OK.

    At the bottom of the Configure Pop-up pane, click OK.

  18. Click a census tract area to open its pop-up.

    Final configured pop-up

    The pop-up that you configured gives you key demographic information for each census tract area.


    If you want to use this layer in another map with the same style and pop-ups, you can save the layer. Doing so saves the style and pop-ups as properties of the layer that will be present in any other map in which the layer is used. Otherwise, when you add the layer to a different map, it will have a default style and pop-up. To save the layer, point to the layer, click the More Options button, and click Save Layer.

  19. Save the map.

In this lesson, you changed the style of the Detroit Demographics layer to show household income and child population using color and size. You also configured pop-ups to highlight key demographic information. In the next lesson, you'll explore the map that you've created to see what patterns have been revealed.