Create and style a web map

First, you'll add relevant data layers to a blank web map: farmers markets, DC retail locations that accept SNAP (Supplemental Nutrition Assistance Program), poverty status, and race and Hispanic origin. Then, you'll begin symbolizing the layers to effectively show the data for your area of interest, Washington, DC. Your map will show farmers markets symbolized by what benefits they currently accept, as well as where they are in relation to other retailers, poverty rates, and the racial and ethnic composition of the community.

Add farmers market and SNAP retail data to a new map 

To fully understand the scope of the issue, you want to map where in the Washington, DC, area fresh food is being sold. You'll add data from ArcGIS Living Atlas to show where farmers markets are, as well as stores that accept SNAP or WIC.

  1. 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. On the ribbon, click the Map tab.

    Note:
    Depending on your organizational and user settings, you may have opened Map Viewer Classic, formerly known as Map Viewer. ArcGIS Online offers two map viewers for viewing, using, and creating maps. For more information on the map viewers available and which to use, please see this FAQ.

    This lesson uses Map Viewer.

  3. If necessary, in the pop-up window, click Open in New Map Viewer or on the ribbon, click Open in New Map Viewer.

    Map Viewer opens.

  4. Read the pop-up and click OK.
  5. On the Settings (light) toolbar, click Search.

    Click the Search button on the Settings toolbar.

    The search box appears at the top of the map pane.

  6. In the search box, type Washington, D.C. and press Enter.

    Map zoomed to the Washington, DC search result

    The map zooms to the Washington, DC, area. Next you'll add data to the map. Because the map already shows your area of interest, you can use it as a spatial search filter.

  7. Close the search results pop-up.
  8. If necessary, on the Contents (dark) toolbar, click Layers.
  9. In the Layers pane, click Add layer.

    Add a layer to the map.

    The Add layer pane appears. The layer you want to add is stored in ArcGIS Online.

  10. In the Add layer pane, click My Content and choose ArcGIS Online.

    Search for content in ArcGIS Online.

  11. In the Search bar, type USDA farmers market directory owner:Learn_ArcGIS and press Enter.
  12. Click the USDA Farmers Market Directory layer search result to view the item's metadata.

    The item’s description appears in the pane. This layer shows a subset of the full directory showing farmers markets as of March 2, 2020. While the layer has been modified more recently, the data itself is as of March 2, 2020.  Because many farmers markets shut down during the pandemic, you're using this older view of the data to have a better idea of access when farmers markets are fully open.

  13. Click Add to map.

    Add a layer of farmers market data.

    The layer is added to the map. Farmers markets are currently symbolized as green points. Before you start symbolizing these points, you'll change the basemap. The current basemap, Topographic, shows both human features, such as roads and neighborhoods, and natural features, such as elevation and green space. You'll select a neutral basemap to make the data on the map stand out more.

  14. On the Contents toolbar, click Basemap and choose Human Geography Map.

    Human Geography Map basemap option

    The Human Geography basemap displays state and county boundaries as well as highways and other infrastructure, providing context.

    Human Geography basemap

    Next, you'll add a layer showing stores in the area that accept food assistance programs.

  15. On the Contents toolbar, click Layers. In the Layers pane, click Add layer.
  16. In the Add layer pane, change the search location to ArcGIS Online. In the search bar, type SNAP Store Locations owner:Learn_ArcGIS.
  17. For the SNAP Store Locations search result, click Add.

    Add SNAP store locations layer to the map.

    The SNAP store locations layer is added to the map. You can now see where food stores are that accept food assistance programs.

Filter data

Your map now contains two layers showing where stores are that accept food assistance and farmers markets. This data extends beyond the Washington, DC, city limits. You'll filter the features in these two layers to show only the data you need.

  1. In the Add layer pane, click the back arrow to return to the Layers pane. Ensure the SNAP Store Locations layer is selected and close the Layers pane.

    Close the layers pane.

  2. On the Settings toolbar, click Filter.

    Filter button on the Settings toolbar.

    The Filter pane appears. In this pane, you can build expressions to select data to show or hide from the selected layer. In this case, you want to select all stores within the boundaries of the District of Columbia, so you'll build the expression State is D.C.

    Note:

    The city of Washington, DC, is formally known as the District of Columbia, and is considered a state equivalent in this layer.

  3. In the Filter pane, click Add expression.

    Add an expression to filter the data.

  4. For Expression, click the first box. From the attribute list, choose State and click Replace.

    Replace the default attribute with State.

    The first box of the expression now reads State. In the second box, you can choose an operator, and in the final box, you can choose an attribute value.

  5. Ensure the second box reads is. In the third box, type DC.

    Filter expression

    Note:

    To see the attribute values that can be selected, click the arrow for the third box.

    The filter is automatically applied, and store locations not within the boundaries of Washington, DC, are unavailable. Once you confirm this is the filter you want to apply, you'll save the results.

  6. In the Filter pane, click Save.

    Filtered results of SNAP Store Locations

    The map shows only stores within the boundaries of Washington, DC. You'll repeat this process to filter farmers markets. First, you'll need to change the active layer, then you can apply the second filter.

  7. On the Settings ribbon, click Filter.
  8. At the top of the Filter pane, click SNAP Store Locations.

    Change the layer to Filter.

  9. For Layers, choose USDA Farmers Market Directory.

    Change the active layer to USDA Farmers Market Directory.

    The farmers market layer is now active, and any filters you create will apply to this layer.

  10. In the Filter pane, click Add expression and build the expression State is District of Columbia.
  11. Click Save.

    Both layers filtered to the Washington, DC, border.

    Even with the data filtered, the store locations layer still covers up the farmers markets. You'll reorder these in the Layers pane.

  12. In the Layers pane, drag the USDA Farmers Market Directory layer above the SNAP Store Locations layer.

    This changes the order that these features draw on the map. You now see the farmers markets drawing on top of the SNAP store locations. Your focus is on the farmers markets, so having them draw on top makes them display more prominently.

Symbolize SNAP Store Locations

Your map now shows the two layers that show the location of fresh food in the DC area. Both are shown with default symbology, making it difficult to do visual analysis. You’ll start by symbolizing the store locations so you can see the farmers markets better.

  1. In the Layers pane, click SNAP Store Locations layer to make it the active layer.
  2. On the Settings toolbar, click Styles.

    Open the Styles pane for the SNAP Store Locations layer.

    By default, the layer draws as a single symbol. You'll change this symbol to something less busy than the current icon.

  3. Under Try a drawing style, for Location (single symbol), click Style options.

    Open the style options for the single symbol.

    The Style options pane appears.

  4. In the Style options pane, click the symbol under Symbol style.

    The Symbol window appears. This pane allows you to control the shape, size, color, and other characteristics of the symbol. You'll start by changing the shape of the symbol.

  5. If necessary, expand Symbols. For Basic shapes, click the circle.

    Choose the circle symbol.

    The map updates to show the new circle symbol. At the current size, they cover the basemap, making it difficult to tell where they're located. You'll resize the symbol.

  6. For Size, change the symbol size to 6.

    Next, you'll change the color. There are several default colors given. You'll use the Custom color options to select a dark navy blue that stands out on the map.

  7. For Fill, expand Custom Color. For Hex, type or paste #002673.

    Choose a navy blue custom color.

    Finally, you'll remove the outline.

  8. For Outline, turn off the Enable outline option.

    Symbolized store locations.

  9. Close the Symbol pane. In the Style options pane, click the back arrow.

    The SNAP Store Location layer is now symbolized as small blue points on the map. These represent retailers that accept SNAP benefits. Click a few in the map to see the pop-ups.

Create custom symbology with an Arcade expression

Now you will symbolize the farmers markets. Instead of simply showing the location of farmers markets, you will use color to depict which types of public assistance benefits they accept. For this lesson, the two programs you will consider are SNAP, which serves low-income families, and WIC, which serves low-income pregnant and postpartum women and children under the age of fiveArcade expressions allow you to work with the data in your layers in a flexible way. You will use if/else logic to combine these two attributes.

  1. In the Layers pane, click USDA Farmers Market Directory to make it the active layer.

    Before symbolizing the layer, you'll open the attribute table to see what data is available to work with.

  2. For USDA Farmers Market Directory, click Open actions and choose Show table.

    The table appears at the bottom of the map window.

  3. Scroll until you see the WIC and SNAP attributes.

    SNAP and WIC attributes.

    There are several attributes describing additional food assistance programs. For this lesson, you'll focus on SNAP and WIC. Each market is marked with a Y if they accept the program, and an N if they don't accept the program. You'll use these attributes and their values in the Arcade expression.

  4. Close the table.
  5. If necessary, in the Settings toolbar, click Styles.
  6. For Choose attributes, click Expression.

    Choose an expression for styling.

    The New Expression window appears. You'll create a variable called category that will take on different values for the different farmers markets depending on what combination of SNAP and WIC benefits are accepted (both, SNAP but not WIC, WIC but not SNAP, and neither).

  7. Click the Edit button next to New Expression and name the expression Public assistance category. Click Save.

    Title the new expression.

    The expression will use if/else logic. If the first condition is met (both are accepted), your new variable category will be assigned the value of "Both SNAP and WIC accepted", otherwise, the second condition will be tested, and so on. If no conditions are met, the final else statement assigns the value of "Neither SNAP nor WIC accepted".  Finally, you'll use the return function.

  8. Delete the first three lines of script and type or paste the following into the Arcade Expression window:
    var category
    if ($feature.WIC == "Y" && $feature.SNAP == "Y") {
    Category = "Both SNAP and WIC accepted"
    }
    else if ($feature.WIC == "N" && $feature.SNAP == "Y") {
    Category =  "SNAP accepted but not WIC"
    }
    else if ($feature.WIC == "Y" && $feature.SNAP == "N") {
    Category = "WIC accepted but not SNAP"
    }
    else category = "Neither SNAP nor WIC accepted"
    return category

    Tip:

    You can click the SNAP and WIC attributes in the Globals tab to add them to your expression.

  9. Click Test to see a result to check for any syntax errors.

    Test the expression for syntax errors.

    Note:

    If pasting this expression into the builder, make sure the quotation are all straight. Curly quotations may cause the expression to fail. You can fix this by retyping all the "" directly into the Arcade editor.

    The Results and Messages tabs appear. The result shows one of the categories specified in the script.

  10. Click OK.

    Arcade expression symbolized on the map.

    The map now shows the farmers markets points colored based on these categories that you created through your expression that combined two attributes together. Smart mapping in ArcGIS Online picked up on these being string values (categories) and suggested the symbology style of Types. Note that there are no locations that accept SNAP but not WIC.

  11. For Try a drawing style, on the Types (unique symbols) card, click Style options.

    To differentiate these from the store locations, you'll choose a different shape for these symbols.

  12. Click the symbol under Symbol style. In the Symbol window, expand Symbols and choose the diamond.

    Choose the diamond shape for farmers market points.

  13. For Size, change the symbol size to 16. For Fill, choose the Fruit Basket color ramp.

    Fruit basket color ramp.

    Note:

    Point to the color ramp to see the name.

  14. Close the symbol pane and click Done two times to close the Styles pane.

    Now the points are all symbolized how you want them to appear on your final map.

  15. In the Contents toolbar, click Legend.

    Symbolized map with the legend

  16. On the Contents toolbar, click Save.
  17. In the Save map window, enter the following information:

    • TitleFarmers Market food access followed by your initials
    • TagsFood access, food assistance, WIC, SNAP
    • SummaryThis map shows the location of farmers markets in Washington D.C. that accept two forms of food assistance, SNAP and WIC.

  18. Click Save map.

Add contextual layers from ArcGIS Living Atlas

Now that the two layers showing fresh food market locations are symbolized, you'll add contextual layers showing poverty, race and ethnicity, and the district boundary from ArcGIS Living Atlas.

Note:

SNAP eligibility includes income levels up to 130 percent of the Federal Poverty Level and WIC eligibility includes income levels up to 185 percent of the Federal Poverty Level, which means there are individuals and families with incomes slightly above the Federal Poverty Level who can still benefit from SNAP and WIC. For this lesson, you will only analyze the Poverty Status layer from ArcGIS Living Atlas, which will still provide important context as to spatial patterns of farmers markets throughout the District of Columbia. You may consider using the Median Household Income layer to calculate eligibility based on a household size of four on your own.

  1. On the Contents toolbar, click Layers. In the Layers pane, click Add layer. Click My Content and choose Living Atlas.
  2. Search for Poverty status. On the ACS Poverty Status Variables – Boundaries result layer by Esri, click Add.

    Add the ACS Poverty Status Variables layer.

  3. In the Layers pane, click the back button.

    Tract level ACS poverty data

    Three new layers are added to your map: State, County, and Tract. The legend that opens in the Properties pane shows that darker pink tracts have higher percentages of population whose income is below poverty level. Currently, the tract level is visible since your map is zoomed in to a city. If you zoom out, you'll see the county and state level data. For this lesson, you'll use the tract and state level layers.

  4. In the Contents pane, drag the USDA Farmers Market Directory and SNAP Store Locations layers above the ACS Poverty Status layers.
  5. For the county level poverty data, click Open actions and choose Remove.

    Remove the extra data layers from the map.

    There are now three visible layers on your map showing farmers market data, store location point data, and the tract level poverty data. This poverty rate data is helpful contextual information, but you don't want it to reduce the visibility of the point data on the map. You'll use transparency to blend the data into the basemap so it's visible but doesn't block the point data.

  6. In the Properties pane, for Transparency, drag the slider to 65 percent transparency.

    Change the transparency to 65 percent.

    Like the SNAP retail locations, this is supporting information to the farmers markets. The transparency allows the poverty information to come through without overwhelming the map. Now, you'll symbolize the State layer.

  7. At the top of the Properties pane, click the ACS Poverty Status Variables- Boundaries-Tract banner and choose the State layer to make it the active layer.

    The State layer isn't currently visible because its Visible range value is set to very small zoom extents—you can only see it if you're zoomed out to look at the entire United States. You'll change the Visible range value to be seen at all scales and symbolize the layer.

  8. For Visible range, drag the second handle of the slider to the opposite end of the scale.

    Visible range of the layer

    Now the layer is visible at all scale extents and covers the tract level layer you already symbolized. You'll use this layer to further make the District of Columbia stand out on the map. While you could also use filter queries on the Tract layer, this mask will apply to all layers, including the basemap, helping your area of interest stand out more.

  9. On the Settings toolbar, click Filter.
  10. Click Add expression and build the expression Name is not District of Columbia.

    Build the query to select all states but District of Columbia.

  11. Click Save.
  12. On the Settings toolbar, click Styles. For Try a drawing style, scroll down and click Location (single symbol).

    Note:

    You can also remove the poverty attribute under Choose attributes.

  13. On the Location (single symbol) card, click Style options.
  14. Click the symbol under Symbol style. For Colors, choose the light gray.

    Choose a light gray for the state layer.

    You see the district through the dark gray state boundary with the filter applied.

  15. In the Layers pane, for the State layer, click Open actions and choose Rename. Rename the layer District Boundary and click OK.
  16. On the Contents ribbon, click Save.

Map race and ethnicity

The final contextual layer you'll add from ArcGIS Living Atlas will show race and ethnicity. After adding it to the map, you'll apply a similar transparency. For now, the layer will sit on top of the poverty status layer you added previously. In the final app, you'll be able to view these two contextual layers one at a time, but for now you're just adding both to the map so you'll be able to pull data from them into the pop-ups you'll configure for each farmers market location.

  1. In the Layers pane, point to the ACS Poverty Status Variables – Boundaries – Tract layer and click the visibility button to hide it.

    Hide the tract layer.

  2. Click Add layer and search for the Race and Hispanic Origin layer in the ArcGIS Living Atlas. For the ACS Race and Hispanic Origin Variables – Boundaries layer, click Add.

    Add the ACS Race and Hispanic Origin Variables-Boundaries layer.

    You can use the legend in the Properties pane and the pop-ups to see what the layer colors symbolize.

  3. In the Add Layer pane, click the back button. Layers pane, for the County and State Race and Hispanic Origin layers, click Open actions and choose Remove.
  4. Drag the ACS Race and Hispanic Origin Variables – Boundaries – Tract layer below the poverty status layer.

    Layers pane with the Race and Hispanic Origin Tract layer.

    Reordering the layer means that the District Boundary (formerly State) layer masks this layer outside of the District of Columbia as well. You'll change the layer transparency of the layer to be similar.

  5. In the Properties pane, for Transparency, move the slider to 40 percent.

    Map showing race and poverty data.

  6. Save the map.

Your map now contains five layers containing fresh food locations and contextual demographic information. All this data has been symbolized. In the next lesson, you'll create pop-ups for each farmers market location that shows all the contextual information in a readable format.


Customize pop-ups with Arcade

Now that you’ve styled your map, you will create an informative pop-up for the farmers markets. You'll use Arcade to incorporate information from other layers within the map into the layer's pop-ups. This information, including what percentage of the population is below the poverty level in the same tract as the farmers market and how many SNAP-accepting store locations are within walking distance from each market, will help the co-op decide which locations to target for accessibility programs.

Edit default pop-ups

All the layers already have pop-ups configured to share information about their default attributes. You'll make sure only the farmers market layer has pop-ups turned on. Then, you'll start configuring your own. Because the pop-ups are meant to convey information about each farmers market, you'll start by displaying important facts about each market.

  1. In the Layers pane, click the District Boundary layer to make it active.
  2. On the Settings (light) toolbar, click Configure pop-ups and turn off the Enable pop-ups toggle button.

    Turn off the preconfigured pop-ups.

  3. Turn off pop-ups for SNAP Store Locations, Poverty Status, and Race and Hispanic Origin.

    The only layer that still has pop-ups enabled is the farmers market layer.

  4. In the Pop-ups pane, click the layer selection menu and choose USDA Farmers Market Directory as the active layer.
  5. The current pop-up is an unformatted list of all the attributes contained in the layer. You saw this list earlier in the table as well. First, you'll format the title of the pop-up.
  6. For Title, click Edit.

    Edit the pop-up title.

    The current title is made up of two types of text. The first part of the title that reads National_Farmers_Market_Directory: is static. It will appear the same in each pop-up. The second part of the title, encased in brackets, is an attribute field. Inserting an attribute field allows you to display feature-specific information in the pop-up.

  7. At the beginning of the pop-up title, delete National_Farmers_Market_Directory: so that only the attribute remains. Click OK.

    Edit the title of the pop-up.

  8. For Fields list, click Options and choose Delete.

    Delete the fields list from the pop-up.

    Now you can add custom elements to the pop-up. You'll use an Arcade script to format it the way you want.

  9. Above Title, click Manage expressions. In the Pop-up expressions pane, click Add expression.

    An Arcade editor window appears. Like before, you'll write and test an expression in this window.

    Note:

    The expression builder for pop-ups supports several functions that aren't supported in labeling and symbology. Because of this, expressions written for layer functionality other than pop-ups won't be available in the pop-up builder.

  10. In the Expression pane, paste and test the expression you used for symbology.
    var category
    if ($feature.WIC == "Y" && $feature.SNAP == "Y") {
    Category = "Both SNAP and WIC accepted"
    }
    else if ($feature.WIC == "N" && $feature.SNAP == "Y") {
    Category =  "SNAP accepted but not WIC"
    }
    else if ($feature.WIC == "Y" && $feature.SNAP == "N") {
    Category = "WIC accepted but not SNAP"
    }
    else category = "Neither SNAP nor WIC accepted"
    return category
  11. Next to Custom, click the Edit button and type Public assistance category (pop-up text). Click Save.
  12. In the Arcade editor, click OK.

    The Arcade expression is added to the Pop-up expressions pane.

    The expression is added to the Pop-up expressions pane and can now be added to the pop-up.

  13. In the Pop-up expressions, click the back arrow.

    You'll add the expression to a text field and add more contextual information.

  14. In the Pop-ups pane, click Add content.
  15. In the Content menu, click Text.

    Add a Text component to the pop-up.

    A blank text editor appears.

  16. Type the following text: This market is located at.

    Next, you'll add attribute fields to pull in the location of the market. Inserting an attribute field allows you to display feature-specific information in the pop-up. For example, when you click a market on the map, a city field displays the name of the city the market is located in.

  17. Press the spacebar and type {street.

    Add the Street attribute.

    The list of attributes updates as you type.

  18. From the list, choose street {street}.
  19. Press Enter and add the attributes {city}, {State}, {zip} separated by commas.
  20. Press Enter again and type {expression. Choose Public assistance category (pop-up text) {expression/expr0}.

    Add the Arcade expression to your pop-up.

  21. Highlight and bold {expression/expr0}, and click OK.

    The example pop-up shows the new configuration. Click any markets on the map to see others.

  22. Save the map.

Add poverty status data to the pop-up

Now that your pop-up shows the relevant information about each market, you'll start adding some of the contextual information for decision-making. For each market, it would be helpful to understand how many people in the same census tract receive food assistance and might benefit from that market accepting SNAP and WIC. You'll write another Arcade expression using the Intersects function to create a location-based relationship between the farmers market and the poverty layer.

  1. In the Pop-ups pane, click Manage expression. Click Add expression.
  2. In the Arcade editor, rename the new expression Poverty rate in the tract where the market is located. Click Save.

    In this expression, you'll create a variable named pov to pull in poverty data from the ACS Poverty Status Variables layer.

  3. In the Expression box, type var pov = to create the new variable pov.

    This variable will represent the ACS Poverty Status Variables – Boundaries layer.

  4. On the Globals tab, expand the $map item by clicking the arrow.

    Expand the $map item to see other layers currently on the map.

  5. For Layer: ACS Poverty Status Variables – Boundaries – Tract, click FeatureSetById.

    ACS Poverty Status variable added to the expression.

    The layer is added to the variable. The rest of the function you write will pull data out of the specified layer.

  6. Scroll to the right to see the closed parenthesis and press Enter to start a new line.
  7. On the second line, type return pov and click Test.

    Test the variable pov.

    You'll see about 30 rows of the Poverty Status layer's attribute table. The Type listed at the bottom is FeatureSet  Before, you may have noticed that most Type results were String, as the previous expressions were returning text. A type of FeatureSet means that potentially more than one feature from this layer is a valid result.

  8. Click the beginning of line 2 and press Enter to move the return pov statement to the third line. On the blank second line, type var pov_tract = Intersects($feature, pov_layer).
  9. On the third line, edit the return statement to return pov_tract and click Test.

    Note:

    To see more information about any of the functions, you can search within the Functions tab, and click the information button.

    The result shows a single record that a farmers market (represented by $feature) intersects with. The type here is still listed as FeatureSet, because the Intersects function allows for multiple results. You know that these tracts are not overlapping, and that a farmers market can intersect with only one tract. You can ensure that you'll always get only one result by using the First function in combination with the Intersects function.

  10. On the second line, put parentheses around the Intersects($feature, pov_layer) statement and add the First function before the opening parentheses.
    The updated line now reads:

    var pov_tract = First(Intersects($feature, pov))

    This will return the first tract that the farmers market intersects with, and then stop computing, which will save a split second of processing time. It also forces the type to be Feature instead of  FeatureSet.

  11. Move the return statement to the fourth line. On the blank third line, type pov_rate = pov_tract.

    Using dot notation, you'll call the field (B17020_calc_pctPovE) from within the tract that was the result of line 2.

  12. On the Globals tab, click the arrow next to ACS Poverty Status Variables. For Field: Percent of Population whose income in the past 12 months is below poverty level, click B17020_calc_pctPovE.

    The variable is added to the third line of the Expression pane, which now reads:

    var pov_rate = pov_tract.B17020_calc_pctPovE

  13. On the fourth line, change the return variable to return pov_rate and click Test.

    Test the pov_rate variable.

    The final expression will look like the expression below.

    var pov = FeatureSetById($map, /* ACS Poverty Status Variables - Boundaries - Tract */ "178ff59f6e2-layer-10")
    var pov_tract = First(Intersects($feature, pov))
    var pov_rate = pov_tract.B17020_calc_pctPovE
    return pov_rate

    Note:
    If you paste this expression into your Arcade editor, make sure to change the FeatureSetByID to match the layer on your map. This identifier is unique to the layer on your map.

  14. In the Arcade editor, click OK.
  15. In the Pop-up expressions pane, click the back arrow. In the Pop-ups pane, add a new Text element.
  16. In the Text editor, type {expression and click Poverty rate in the tract where the market is located {expression/expr1}.
  17. After the expression, press the spacebar. Type or paste the text % of people in this tract had income below the Federal Poverty Level.
  18. In the text box, click OK.

    Pop-up including the configured percentage of people in the tract below the poverty level.

    The pop-up now shows how many people below the poverty level live in each tract.

  19. Save the map.

Add race and ethnicity data to the pop-up

Next, you'll add race and ethnicity data for the tracts the farmers markets are in. Using similar logic as the Intersects expression above, you'll create eight expressions to show the racial breakdown of the population in each tract. You'll show this information in the pop-up as a bar chart.

The expressions will show the percentage of the population in the following groups based on the ACS data:

  • Hispanic and Latino
  • White alone, not Hispanic or Latino
  • Black or African American alone, not Hispanic or Latino
  • Asian alone, not Hispanic or Latino
  • American Indian and Alaska Native alone, not Hispanic or Latino
  • Native Hawaiian and Other Pacific Islander alone, not Hispanic or Latino
  • Some other race alone, not Hispanic or Latino
  • Two or more races, not Hispanic or Latino
  1. In the Pop-ups pane, click Manage expressions and click Add expression.
  2. Title the new expression Percent Hispanic/Latino and click Save.

    Since this expression will be modeled off the Poverty rate in the tract where the market is located expression, you'll add it to this expression and modify it instead of writing a new expression from scratch.

  3. Click the Existing tab.

    Existing functions tab.

  4. On the Existing tab, click Poverty rate in the tract where the market is located.

    The function is added to the Expression pane. Now you'll edit it to show the percentage of Hispanic population in the tract.

  5. Replace the first line with var race_layer =.
  6. Click the Globals tab. Click the arrow next to $map. For Layer: ACS Race and Hispanic Origin Variables – Boundaries – Tract, click FeatureSetById.

    Set the initial variable equal to the ACS Race and Hispanic origin layer.

  7. On the second line, rename the variable race_tract and change the second argument of the Intersects statement to race_layer.
  8. On the third line, rename the variable race_rate. Set the variable equal to race_tract and type a period.
  9. Delete the existing field. On the Globals tab, click the arrow next to ACS Race and Hispanic Origin Variables.
  10. For Field: Percent of Population that is Hispanic or Latino, click B03002_calc_pctHispLatE.

    The variable is added to the third line of the Expression pane, which now reads var pov_rate = pov_tract.B03002_calc_pctHispLatE

  11. On the fourth line, change the return variable to return race_rate and click Test.

    The expression should look like the following:

    var race_layer = FeatureSetById($map, /* ACS Race and Hispanic Origin Variables - Boundaries - Tract */ "17900992c4c-layer-14")
    var race_tract = First(Intersects($feature, race_layer))
    var race_rate = race_tract.B03002_calc_pctHispLatE
    return race_rate

    Expression showing the percentage of people of Hispanic origin in the same tract as the selected farmers market.

  12. Click OK.

    The expression is added to the Pop-up expressions pane.

  13. Add new expressions and modify the existing Percent Hispanic expression for the following groups:

    Expression title

    Field alias

    Field name

    Percent White alone

    White alone, not Hispanic or Latino

    B03002_calc_pctNHWhiteE

    Percent Black alone

    Black or African American alone, not Hispanic or Latino

    B03002_calc_pctBlackE

    Percent Asian alone

    Asian alone, not Hispanic or Latino

    B03002_calc_pctAsianE

    Percent American Indian/Alaska Native alone

    American Indian and Alaska Native alone, not Hispanic or Latino

    B03002_calc_pctAIANE

    Percent Native Hawaiian/Other Pacific Islander alone

    Native Hawaiian and Other Pacific Islander alone, not Hispanic or Latino

    B03002_calc_pctNHOPIE

    Percent other race alone

    Some other race alone, not Hispanic or Latino

    B03002_calc_pctOtherE

    Percent two or more races

    Two or more races, not Hispanic or Latino

    B03002_calc_pct2OrMoreE

    Tip:

    Use the return statement in line 3 to change the attribute field used from the Race and Hispanic Origin layer. Use the Existing tab to modify previously saved expressions.

    Now that you've brought the data into the farmers market layer, you'll use a chart to compare the racial and ethnic breakdown of the tracts.

  14. In the Pop-up expressions pane, click back.
  15. Click Add content and choose Chart.

    Add a chart element to the pop-up.

    The Configure chart window appears.

  16. Click Select fields.

    Select the fields to show in the bar chart.

  17. In the Select fields window, choose all eight of the Percent expressions you created and click Done.
  18. In the Select fields pane, click Done. In the Configure chart pane, click Done.

    Bar chart in the pop-up.

    The bar chart is added to the example pop-up. Pointing to each bar shows the field it represents and the percentage. You'll add a title and information for your viewer to use it.

  19. In the Pop-ups pane, under Media, for Title type Racial and Ethnic Composition of this census tract. For Description, type Point to a bar for more information.

    Title and description in the Media group.

    The title and description are updated in the pop-up as well.

Stores near markets

The final Arcade expression you'll create will list retail stores within a .75-mile radius that accept SNAP. The distance of .75 miles roughly represents walkability from the market. Like the previous expressions, you'll use the Intersects function, but this time you'll need to add it to a for loop. The for loop will make sure the expression repeats to count each store location.

  1. In the Pop-ups pane, click Manage expressions and click Add expression.
  2. Title the new expression Count of SNAP retailers within a .75 mile radius and click Save.

    You'll use the approach you've used with the Poverty and Race and Hispanic Origin layer to create a variable called retail_layer on line 1.

  3. On the first line, type var retail_layer =.
  4. Click the Globals tab. Click the arrow next to $map. For SNAP Store Locations, click FeatureSetById.

    var retail_layer = FeatureSetById($map, /* SNAP Store Locations */ "178f065ba89-layer-82")

  5. Create the radius variable that will be a .75 mile ring around each farmers market using the Buffer function.

    var radius = Buffer($feature,.75,"miles")

    In the same way you combined the First and Intersects function earlier, now you will combine the Count and Intersects function to get the count of SNAP retail locations that intersect your .75 mile buffer.

  6. On line 3, set the retail_count variable equal to Count(Intersects(retail_layer, radius)).

    Line 3 reads var retail_count = Count(Intersects(retail_layer, radius)).

  7. Return the count and click Test.
    var retail_layer = FeatureSetById($map, /* SNAP Store Locations */ "178f065ba89-layer-82")
    var radius = Buffer($feature,.75,"miles")
    var retail_count = Count(Intersects(retail_layer,radius))
    return retail_count

    Retail count expression

  8. Click OK to save the expression.
  9. Add another expression, title it List of SNAP retailers within a .75 mile radius, and click Save.
  10. Click the Existing tab and choose Count of SNAP retailers within a .75 mile radius.
  11. On line 3, change the variable name to nearby_stores and remove the Count function.

    var nearby_stores = (Intersects(retail_layer,radius))

  12. Remove the return statement on line 4.
  13. On line 5, create a variable called retail_list as a blank string variable by assigning it to be equal to empty quotes.

    var retail_list = ''

    This will be the start of your list of stores.

  14. On line 6, create a for loop calling var k in the nearby_stores variable and open a curly bracket.

    for (var k in nearby_stores){

    }

    This creates a counter variable that will iterate through all the records in nearby_stores. You may have noticed that when you typed the opening brace, a corresponding closing brace appeared on line 8. This prompts you to type into line 7 what will be done with each of these records in nearby_stores. You'll add the blank list by saying "retail_list += ", which means that information from each additional record will be added to the end of the list.

  15. On line 7, use dot notation to pull the Store_Name field from the SNAP Store Locations layer. Use the NewLine text formatting so that each store appears on a different line.
    for (var k in nearby_stores){
    retail_list += k.Store_Name + TextFormatting.NewLine
    }
  16. Return the retail_list variable and test the function.
    var retail_layer = FeatureSetById($map, /* SNAP Store Locations */ "178f065ba89-layer-82")
    var radius = Buffer($feature,.75,"miles")
    var nearby_stores = (Intersects(retail_layer,radius))
    var retail_list = ''
    for (var k in nearby_stores){
    retail_list += k.Store_Name + TextFormatting.NewLine
    }
    return retail_list

    Function returning a list of the stores within a .75 mile radius of each market

  17. Click OK.

    Note:

    The Contain function works in addition to the Intersects function in line 3 in this case. For a full list of Arcade functions, see the Arcade Function Index.

  18. In the Pop-ups pane, click the back arrow. Add a new text element and add the two new expressions.
  19. Type or paste the following, adding your expression identifiers if necessary:

    There are {expression/expr10} stores that accept SNAP within 0.75 miles of this market. They are:

    {expression/expr11}

  20. Click OK.

    The pop-ups now include the count and names of stores close to each market. The pop-ups contain all the information that will help the co-op make decisions from the app. Before you save the app, you'll turn off the two contextual layers so that viewers will be able to control them from the app.

  21. In the Layers pane, turn off the two ACS layers.
  22. Save the map.

    The pop-up currently contains a lot of information, but in your app, it will appear in a side pane rather than on top of the map. (Don't worry about scrolling through it for now.)  Change the order and size of information so that key information is presented more prominently than supporting information.

Configure the web app to share

You're finally ready to build the app. The most important data for people to see on the app is the farmers markets and pop-ups. You also want to be able to see the contextual layers you've added. The app template you'll choose will allow you to show these features.

  1. On the Contents toolbar, click Share map. In the Share window, choose Everyone (public) and click Save.

    Share the map with everyone.

  2. On the Contents toolbar, click Create app and choose Instant Apps.

    Create an app using one of the Instant Apps templates.

    A new tab opens with the different Instant App templates. Each app template is meant to create a focused experience. These templates allow you to place a map into a template that creates a polished, interactive experience for your map's audience.

    You are interested in showcasing your map alongside a legend, the pop-up, and some basic information. The Minimalist template allows the map to have the most amount of screen space and presents the supporting information such as the legend and pop-up in a side pane.

  3. In the Instant Apps gallery, on the Minimalist card, click Choose.

    Choose the minimalist app to display your map.

    The Create App – Minimalist window appears.

  4. For title, type Inclusive Farmers Markets – Viewing App and click Configure App.

    This is the title that will appear in your ArcGIS Online content. This version of app setup is the Express version. It walks you through the quickest version of the setup. For full configuration options, you can click Full Setup on the setup pane toolbar.

  5. If necessary, close the introductory pop-up.
  6. In the Express Setup pane, click Step 1 - Map. Ensure that the web map in the app is your farmers markets map.
  7. Click Next.

    The Step 2 – About pane appears.

  8. Change the app title to Current Status.

    The top of the app changes to reflect the new title. Next, you can choose which information panels will show in the app. To give information about what the app shows and how to use it, you'll make the Details panel the initial start.

  9. For Select which panel to open at start, choose Details. Turn on the Layer list panel and Pop-up panel.

    Configuration settings for the Step 2 - About panel.

    When someone launches your app, they'll see the Details panel. While this panel is blank for now, you'll add instructions for users to explore the pop-ups and turn layers on and off. Including the Layer list panel will allow them to show and hide various layers depending on the data they're interested in. This will allow the two ACS layers to be viewed separately.

  10. Click Next.
  11. In the Step 3 – Interactivity pane, turn off Search.

    Because the map is already focused on Washington, DC, you don't want viewers navigating away from your area of interest.

  12. Click Next.

    On the fourth pane, you can choose where on the app screen the widgets show up. Currently, they're aligned next to each other on the left side of the app.

  13. Leave the Step 4 - Theme & Layout settings as is.
  14. At the bottom of the pane, click Publish and click Confirm.

    Confirm that you want to publish the configured app.

    A success message confirms that your app has been published. Before sharing the app, remember that you need to add the information that the Details panel will show. The Details panel pulls text out of the map's description, so you'll go to the maps' item details page.

  15. On the top ribbon next to the app title, click the menu button and choose Content.

    Navigate to the Content tab.

    The Content tab appears. Both your map and app appear in the Content tab, along with any other content owned by your ArcGIS account.

  16. Click the Farmers Market food access map item.

    Click the map item.

    The map's item details page appears. Anything you add to the Description section will show up in the app's Details panel, so you'll add information about navigating the app.

  17. For Description, click Edit, type or paste the following, and click Save.

    This app shows the location of farmers markets and other stores in the Washington, D.C. area where food assistance is accepted.

    Click the diamonds on the map to see information about each farmers market, including the types of food assistance it accepts and the demographics of the area it serves. For more reference, turn on the Legend and Layers panels to view contextual data on the map.

    Add a description to the item details page.

    Now that the description is added to the app, you're ready to share it for analysis.

  18. Browse back to the Content page. For the Inclusive Farmers Markets – Viewing app item, click Update sharing level.

    Change the sharing settings of your app to match the map.

    The Share window appears.

  19. In the Share window, choose Everyone (public) and click Save.
  20. In the My Content pane, for the Inclusive Farmers Markets – Viewing app item, click the more options button and choose View Application.

    The initial screen of the final app, showing the farmers markets map and Details panel.

    The app opens in a new tab.

  21. Test the app by clicking various farmers markets and reading the pop-ups, and turning on and off the ACS layers.

You are now ready to share this app to present at a farmers market co-op meeting. Using the app, consider making a few recommendations.

If there were two or three farmers markets you could recommend to start accepting SNAP and WIC benefits that currently do not, which two or three would you recommend? Do you think it would be worth highlighting that the Stanton & Turner Open Air Farmers Market (around Douglass Dwellings) is a farmers market in an area with a higher percentage of Black or African American residents and higher percentage of people living below the poverty level that does not currently accept WIC or SNAP? Providing an example recommendation can more clearly demonstrate how one can use the information in the app to make an informed decision or recommendation.

There's no one right answer, but answers should take into consideration poverty rate, racial and ethnic composition, the count and type of stores (full-service grocery stores such as Safeway and Giant as opposed to convenience stores such as 7-Eleven and drug stores such as CVS), the quality of nearby SNAP retailers, and possibly the farmers markets' hours of operation.