Create a real-time web map

The first step to creating your real-time apps is to make a web map with the necessary real-time data. The city's public works department already collects real-time data on its snowplow fleet using automatic vehicle location (AVL) devices. These devices are installed on each snowplow and transmit GPS coordinates from the vehicle to a receiver at the city office. You'll add this data to a web map and symbolize and label it appropriately to clearly communicate important information to users.

Add real-time data

The local government's real-time feature layers are updated periodically by ArcGIS GeoEvent Server, which connects real-time data streams (such as those transmitted by the AVL devices in each snowplow) to feature services hosted on ArcGIS Online and ArcGIS Enterprise. You'll add each of the three real-time feature layers to a new web map.


This tutorial won't go into detail about how to create real-time feature services using GeoEvent Server. You can learn more with the tutorials provided in the ArcGIS GeoEvent Server Gallery.

  1. Sign in to your ArcGIS organizational account.

    If you don't have an organizational account, see options for software access.

  2. On the ribbon, click Map.

    Depending on your organizational and user settings, you may have opened 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 tutorial uses Map Viewer Classic.

  3. If necessary, on the ribbon, click Open in Map Viewer Classic.

    Map Viewer Classic opens.

  4. On the ribbon, click Add, and choose Search for Layers.

    Search for Layers option

    The search pane appears. You'll search for and add the city's three real-time layers involving snowplow and streets

  5. In the search pane, click the My Content drop-down arrow and choose ArcGIS Online.
  6. In the Search for layers text box, type Vehicles (Latest). Then type owner:Learn_ArcGIS in the search box, to limit your search to layers owned by the Learn ArcGIS administrator account. Press Enter to initiate the search.

    Search results for Vehicles (Latest) layer

    The search returns the Vehicles (Latest) layer. This layer contains point features that will display the latest recorded location of each snowplow. When the snowplows change locations, their AVL devices transmit their GPS coordinates to GeoEvent Server. Once the layer is configured appropriately, it will automatically update with the newest coordinates.

  7. For the first of the two the Vehicles (Latest) layers, click the Add button. Zoom in closer to the features around Salt Lake City, Utah.

    Add Vehicles (Latest) layer

    The vehicles are represented by colored triangles. Orange triangles represent snowplows, and blue triangles represent pickup trucks with plows attached. Each of the five vehicles has a corresponding symbol on the map. Currently, the locations of the symbols do not update in real time, because you haven't changed the settings to enable the layer to do so. First, you'll add the remaining layers to the map. Then you'll update the refresh interval for the layers.

  8. In the Search pane, change the search string to Vehicles (Past) owner:Learn_ArcGIS and press Enter.
  9. From the search results, for Vehicles (Past), for the second result, click the Add button.

    Add Vehicles (Past) layer

    The vehicles are represented by colored circles. As before, orange represents snowplows, and blue represents pickup trucks. As with the other layer, this layer is not yet enabled to update in real time. Additionally, the large number of circles obscures the triangles that represent the most recent location of each vehicle. Later in this tutorial, you'll change the symbology of one of the layers to make each more distinct. Before then, you have one more layer to add.

  10. In the Search pane, search for and add the second Street Plowed Status layer owned by Learn_ArcGIS.

    Street Plowed Status layer

    This layer contains features that represent major streets in the area. Each street is symbolized based on whether it has been plowed (green), has not been plowed (red), or is in progress of being plowed (yellow). Although the features look like lines, they are actually polygons. To detect whether a snowplow has entered or exited a particular street section, the original street centerline data was buffered with a chosen distance. That way, even if a snowplow isn't located on the exact center of each street, it'll still register as having been on the street. The buffers were added to GeoEvent Server as geofences, or geometric boundaries that trigger a response if something enters their area. In this case, streets are marked as either plowed, not plowed, or in progress, depending on whether snowplows have crossed or are currently crossing the geofences.

  11. In the Search pane, click the Back button. If necessary, click Content to display the layers you just added to the map

    The Contents pane displays the layers you added to the map.

    Layers in Contents

    The Street Plowed Status layer doesn't show up well on the current basemap, so you'll change the basemap to one with a darker color scheme.

  12. On the ribbon, click Basemap, and choose Dark Gray Canvas.

    Dark Gray Canvas basemap

    The Streets Plowed Status layer now appears more clearly on the map.

    Streets on Dark Gray Canvas basemap

    Your layers have been added, but the temporal component of each layer is inactive. Although these layers were specifically prepared using GeoEvent Server to contain live data streams based on each snowplow's AVL device, the data will not update on the map until you set a refresh interval. A refresh interval is a period of time during which a layer refreshes on the map. When the layer refreshes, it takes the most recent data from the real-time data streams connected to it via GeoEvent Server. Until a refresh interval is set, a layer will only display the data that was current at the moment the layer was added to the map.

  13. In the Contents pane, point to the Street Plowed Status layer and click the More Options button.

    More Options button

    A menu appears with additional settings for the layer.

  14. Point to Refresh Interval, check the box, and type 0.5 in the text box.

    Refresh Interval of .5 seconds

    The minimum refresh interval for this layer is 0.5 minutes, which equates to 30 seconds. The layers on your map will refresh every 30 seconds with the latest data from the AVL devices.

  15. Follow the same process to set Refresh Interval to 0.5 minutes for the Vehicles (Past) and Vehicles (Latest) layers.

    All three layers now refresh on the same timer. You'll reorganize the order of the layers so the most recent location of the vehicles appears on top of the other content in the map.

  16. In the Contents pane, point to the Vehicles (Latest) layer, point to the reorder layers icon, and drag the layer above the Street Plowed Status layer.

    Reorder layers

  17. Drag the Vehicles (Past) layer between the Vehicles (Latest) and Street Plowed Status layers.

    Layer order

Symbolize and label the data

You've added the real-time data layers, but the default symbology makes the current locations of snowplows difficult to see on the map. You'll change the layer symbology and label each snowplow and truck so they appear more clearly.

  1. In the Contents pane, point to Vehicles (Latest), and click Change Style.

    Change Style button

    The Change Style pane appears. The layer is already symbolized based on the vehicletype attribute, which indicates whether a vehicle is a snowplow or a pickup truck. You don't want to change the attribute being shown, but you do want to refine the symbol options.

  2. Under Select a drawing style, for Types (Unique symbols), click Options.

    Drawing style options

    The pane displays symbology options. Two symbols are displayed: one for pickup trucks and one for snowplows. You'll maintain the blue and orange color scheme to keep the symbology consistent with the other vehicles layer, but you'll alter each symbol slightly so the current locations of the vehicles stand out.

  3. Click the blue triangle symbol for pickup trucks.

    Pickup symbol

    A window appears, displaying options to change the symbol. The options include a list of default symbols. The current list category is shapes.

  4. Click the Shapes drop-down menu and choose Arrows.

    Arrows category

  5. Scroll through the list of arrow symbols and click the white triangular arrow pointing upward inside a light blue circle.

    Blue arrow symbol

  6. Change the Symbol Size to 20 px.

    Symbol Size of 20

  7. Click OK.

    The new symbol is automatically applied to the map.

    Pickup symbol updated

    The new symbol uses a slightly different blue that makes it distinct from the symbol for the past locations of pickup trucks. Next, you'll make a similar change to the symbol for snowplows.

  8. In the Change Style pane, click the orange triangle symbol for snowplows.
  9. Scroll through the list of arrow symbols and click the white triangular arrow pointing upward inside a dark orange circle.

    Orange arrow symbol

  10. Change the Symbol Size to 20, and click OK.

    Both symbols for pickup and snow plows are updated.

    Point symbols updated

    Rather than have the arrows always point upward, you'll orient the symbols so that they point in the direction the vehicles are heading. Users will be better able to follow the route of each vehicle based on the symbology.

  11. In the Change Style pane, check the Rotate symbols (degrees) check box.

    Rotate symbols

    Options for symbol rotation appear.

  12. Click the drop-down menu and choose heading. Confirm that Geographic is chosen.

    Options for rotation

    Geographic means that rotation will occur clockwise from 0, and the symbol will rotate in a clockwise direction from its current orientation. As a result, the arrows will point in the direction the vehicles are heading.

  13. At the bottom of the pane, click OK, and click Done.

    Symbols rotated in map

    The new symbols appear more clearly on the map and provide more information for the user. However, they can still stand out more and be more informative. You'll label the vehicles so city officials can determine at a glance where a specific vehicle is located on the map.

  14. In the Contents pane, point to the Vehicles (Latest) layer. Click More Options, and choose Create Labels.

    Create Labels

    The Label Features pane appears, and default labels are added to the vehicles. The vehicles are labeled by their number (Truck 1, Truck 2, and so on), which will help city officials identify each truck in their fleet on the map. However, the default labels use plain black text, which doesn't show up well on the dark basemap.

  15. In the Label Features pane, click the current label text color and choose white.

    White label text color

    The white text color appears more clearly on the map. However, the default label alignment places labels in the upper right corner of the symbol. When trucks are close to one another, it can become confusing as to which label corresponds to which symbol.

  16. For Alignment, choose the bottom center alignment.


  17. At the bottom of the pane, click OK.

    White labels

    The completed labels more clearly indicate which truck or snowplow corresponds to each symbol. (If two labels overlap, they may not appear on the map.) Next, you'll save your map.

Filter past locations of snowplows

It's useful to know where each snowplow has been, but currently far too many past locations are tracked, making it difficult to tell which snowplow was where and when it was there. You'll take advantage of time-based filtering to display only past vehicle locations that happened within the past two minutes. Applying this filter will streamline the amount of visual information for your users.

  1. For the Vehicles (Past) layer, click the Filter button.

    Filter button

    The Filter window appears. You'll use this window to create a query for the Vehicles (Past) layer to display only features that have a time attribute within the last two minutes.

  2. In the Filter: Vehicles (Past) pane, build the following expression:
    • For Field, select time.
    • For operator, select in the last.
    • For Value, specify 2 minutes.

    Apply snowplow filter

    The expression will apply a filter on all types of vehicles (both snowplows and pickups) that have been updated within the last two minutes, relative to the current time.

  3. Click Apply Filter to set the expression.

    The data on the map is filtered.

    Filtered map

    Now each snowplow is trailed by a breadcrumb path of past locations. The filter allows users to better understand where each snowplow has been and the streets that have been plowed recently.

  4. On the ribbon, click Save, and choose Save As.

    Save button

  5. In the Save map window, enter the following:
    • For Title, type Snowplows in a Utah City and add your name or initials.
    • For Tags, type Snowplows, Roads, Utah
    • For Summary, type This map shows the real-time location of snowplows in a city in Utah.
    Save Map
  6. Click Save Map.

Your map is now complete. It shows the location of snowplows and the status of roads throughout the city. The data layers update in real time at an interval of 30 seconds, and the features are symbolized to clearly communicate important information to the user.

Create a dashboard

Previously, you created a web map using real-time layers showing the current location of snowplows throughout the city. The map also indicated whether roads were plowed. While the map contains vital data for both citizens and government officials, city officials require a dashboard that can be used for internal purposes to monitor snow removal operations. The dashboard must provide the following information:

  • A list that updates in real time with vehicle names, speeds, and the last time their location was updated
  • A bar chart that updates in real time with vehicle speeds
  • A pie chart that updates in real time with proportions of street plowed status
  • A list that shows street names and plowed status

This information will help local officials organize the routes of snowplows and monitor snow removal operations throughout the city. You'll create a type of dashboard using ArcGIS Dashboards. Dashboards are fully configurable and can include elements that display maps, lists, and charts. In this tutorial, you'll install the free ArcGIS Dashboards and use it to combine your web map with the information the city officials require.

Add your map to an operation dashboard

First, you'll choose a map for your dashboard to use.

  1. If necessary, sign in to your ArcGIS Online account.
  2. On the ribbon, click Home, and choose Content.
  3. On the ribbon, click the App Launcher, and choose Dashboards.

    Dashboards app

    The ArcGIS Dashboards home page appears, where you can create, edit, and view dashboards.

  4. Click Create dashboard.

    The Create new dashboard pane appears.

  5. In the Create new dashboard pane, enter the following:
    • For Title, type Snowplows in a Utah City.
    • For Tags, type Learn.
    • For Summary, type The location of snowplows and the status of roads in a city in Utah.
    • For Folder, select a location to store your dashboard.

    Create a new dashboard

  6. Click Create Dashboard to generate your new dashboard app.

    Now that you've created your dashboard, you can add elements. In the next steps, you'll add the following elements:

    • Map
    • List
    • Serial Chart
    • Pie Chart
  7. On the side panel, click the Add element button.

    Add element button on the side panel

    The Layout panel appears.

  8. In dashboard, choose Map.

    Add a map to the dashboard.

    The Select a map pane appears and lists the web maps that are available to your ArcGIS account.

  9. Browse to the Snowplows in a Utah City web map. Click Select to add the map as an element to your dashboard.

    The web map's content will serve as the data source for the other elements.

    Select a map to add to dashboard

    The Snowplows in a Utah City Map window appears and contains properties for configuring your map.

  10. On the Settings tab, click the toggle buttons to enable the following options:
    • Initial view and bookmarks
    • Layer visibility
    • Basemap switcher
    • Search

    Configure map settings

    These capabilities will allow users to navigate the map effectively, as well as select features of interest.

  11. Click the Layer actions tab.

    Notice that pop-ups are automatically enabled. Pop-ups provide valuable information when a user clicks a feature on the map and are another way to make your dashboard interactive and informative.

  12. Click Done.

    The dashboard appears with the map elements you just configured.

  13. On the map, click a truck to open a pop-up containing attributes about the feature.

    Configured map element with pop-up

    Because pop-ups are enabled in your dashboard, the functionality to click a feature to access attributes is automatically available.

  14. On your own, explore the layout and click other features to view their attributes.
  15. Close the pop-up.

Add elements

You've configured your map element and taken advantage of some of the real-time functionality of Dashboards to make your map communicate information even more clearly. As mentioned at the beginning of this tutorial, the city authorities want to have easy access to some additional information about the snowplows. In particular, they're interested in a list of information about each vehicle, as well as charts they can use to compare information between vehicles or streets. They also want a list of street names with plowed status. To provide this information, you'll configure three elements and arrange them on your map.

  1. On the side panel, click Add element.

    Next, you'll choose where to add this element. You can add elements to any side of the dashboard or stack them on top of any existing elements. Your next element will be added to the left side of the dashboard.

  2. On the side toolbar, click the Add element button. On the side of the dashboard, click the plus sign and choose List.

    Add a list element

    Now, you'll configure the list to display the speed of each of the five vehicles in the fleet. This information will be used to monitor the vehicles that are currently plowing and how fast they are traveling.

  3. In the Select a layer pane, choose Vehicles (Latest).

    Select list layer

    The List configuration pane changes to display data options for the Vehicle (Latest) layer.

    Set list element data properties


    Your list may be slightly different from the images shown in the tutorial, as this feature layer is dynamic and updates frequently.

    By default, vehicles are listed in order by their ObjectID, a field that internally organizes features in a layer. You'll change this to list the trucks in order by their vehicle name.

  4. In the Data options pane, for Sort by, click Add field, choose vehiclename.

    Sort by vehiclename field

  5. Click the sort icon and verify that Sort ascending is selected.

    Sort the list ascending

    The preview on the right side of the window indicates that the vehicles are now listed in order by their name. Next, you'll add the speed of each vehicle to the list. As with the time field you used to create the filter, the AVL devices also record vehicle speed for each snowplow. The speed information is also included in the layer.

  6. On the side pane, click the List tab. The vehiclename field is already added to the text box.

    Add vehiclename field.

  7. Place your cursor after {field/vehiclename} and press Enter. Click the Insert drop-down arrow and add the speed field.

    Add list fields

    The list preview now includes the speed of each vehicle in miles per hour and is displayed to the right of the list options pane.

    Additional fields listed

  8. Click the Actions tab. Under When selection changes, click the Zoom drop-down arrow, and use the toggle button to enable zoom. This will result in map zooming to the selected truck.

    Add action

  9. Click the General tab, and in the General options pane, for Title and Description, enter the following:
    • For Title, click the Edit button and type Vehicles in the text pane.
    • Use the formatting options to center the title and make it bold.
    • For Description, click Edit, and type Speed in miles per hour in the text pane.

    General options settings

    After making these changes, the title will be placed at the top of the list and the description at the bottom.

  10. Click Done.

    The list element is added to the dashboard. You can drag the list and dock it anywhere.

    List and map on the operation dashboard

  11. Point to the list's Options button and choose Drag item. Drag the list element and dock it to the right of the map element. Adjust the width of the list element so it doesn't take up any more space than necessary.

    Move and configure list element


    To adjust the size of an element, point to the edge of the element and drag it to the desired size.

    Having the vehicles speeds visible is good, but you can make the information clearer by adding a bar chart that shows the speeds relative to one another.

  12. On the side panel, click Add element. Under the list element, click Add element here. Choose Serial Chart.

    Add a Serial chart.

  13. In the Select a layer pane, select Vehicles (Latest).
  14. In the Data options pane, change the following parameters:
    • For Categories from, click Features.
    • For Category field, choose vehiclename.
    • For Series, click Add series, and choose speed.
    • For Sort by, click Add field, choose vehiclename, and verify that Sort ascending is selected.


    If you have a blank value in your data, you can remove the null information from the chart using the vehiclename is not empty filter option.

    Chart element

    The preview shows a bar chart with five bars, one for each vehicle. However, the axis labels do not indicate the values that the bars represent.

  15. Click the Category axis tab, and for Title, type Vehicle.

    The title of the horizontal axis updates to Vehicle.

  16. Click the Value axis tab, and for Title, type Speed.

    The title of the vertical axis updates to Speed.

  17. Click the Series tab, scroll down to the Bar colors option, and click the existing color patch.
  18. Replace the existing hex code with 00c5ff.

    Change the color code.

  19. Click the General tab, and in the General options pane, change the following parameters:
    • For Title, click the Edit button, and type Vehicle Speed. Center align the title text.
    • Above the text box, click Paragraph, and choose Heading 2.

    Change the heading style.

  20. Click Done.

    The chart appears under the list element.

  21. Resize the elements so that all information is displayed clearly.

    Map, chart, and list

    Next, you'll add an element that shows the status of streets as a pie chart. This element will allow city authorities to see at a glance the proportion of streets that have been plowed compared to those that haven't been plowed. It'll function as a progress meter for the plowing operation.

  22. On the side panel, click Add element. Under the serial chart, click Add element here. Choose Pie chart.
  23. In the Select a layer pane, choose Street Plowed Status.

    To display a percentage of streets plowed, you'll display the count of features for each plow status.

  24. In the Data options pane, change the following parameters:

    • For Categories from, ensure that Grouped values is selected.
    • For Category field, choose PlowedStatus.

    The preview updates and shows a pie chart with two or three sections (it possible that there are no In Progress streets). You'll update the chart's appearance to add a legend and change the color scheme.

    Pie chart settings


    Your values may be different as the data is dynamic.

  25. Click the Chart tab.
  26. In the Chart options pane, set the following:
    • Expand the Labels section. For Visibility, click Hide.
    • Expand the Legend section. For Visibility, click Percentage.

    Pie chart labels and legend settings

  27. Click the Slices tab. In the Slices pane, click Apply colors, and choose your own colors or accept the default color settings.
  28. Click the General tab. For Title, click the Edit button, and type Streets Plowed Status (Percent).

    Now you'll enable the pie chart with feature actions so users can view streets of a certain status using the chart

  29. Click the Actions tab.
  30. In the Actions pane, under When selection changes, expand Filter. In the drop-down list, for Street Plowed Status use the toggle to enable it.
  31. Click Done.
  32. Resize the pie chart, list, and bar chart elements to display all information clearly.

    Operations dashboard with pie chart

  33. To use the feature actions you enabled, click one of the pie chart segments and note how the map layer filters the streets based on your selection.

    The pie chart element contains a lot of empty space. You'll use that space to contain the final element that you create. This element will be another list element that displays the names of streets and their plowed status.

  34. On the side panel, click Add element and add a List element.
  35. In the Select a layer pane, choose Street Plowed Status.

    You want the list to display the plowed status of streets, so you'll change the lists settings appropriately. You'll also increase the maximum number of items that can be displayed in the list to display many streets at once.

  36. In the Data options pane, change the following parameters:

    • For Maximum features displayed, set the value to 50.
    • For Sort by, click Add field, choose PlowedStatus, and verify that Sort ascending is selected.

    The preview updates with a list of streets, each with a symbol indicating the plowed status.

    Set list options

    To make the list more clear, you'll add a description to each list item that states the plowed status explicitly. You added a similar description to the list of truck speeds earlier.

  37. Click the List tab.
  38. In the List options pane, click after {field/StreetName} and press Enter. On the line below {field/StreetName}, add the PlowedStatus field.

    Snowplow status list fields

    As with your pie chart, you'll enable certain feature actions for the list so users can use it to navigate or highlight specific streets of interest.

  39. Click the Actions tab.
  40. In the Actions pane, expand Zoom. Toggle the Snowplows in a Utah City map to enable it.
  41. Click the General tab.
  42. In the General options pane, for title, click Edit. Type Streets Plowed Status (Street Name).
  43. Click Done.
  44. Resize the elements to minimize empty space.

    Dashboard with plowed status list

    Spend a few minutes exploring your newly configured operation dashboard. Then, add a header to it.

  45. On the side panel, click the Add element button. Click the plus sign at the top of the map and choose Header.
    Add header

    The header defaults to the title of the map.

  46. Click Done.

Save and share your dashboard

Your dashboard is now configured with the necessary elements. Next, you'll save your dashboard and share it with the appropriate people.

  1. In the dashboards toolbar, click the Save button and choose Save.
    Save the dashboard
  2. Click the icon beside the dashboard title. From the list choose Dashboard item details

    Update dashboard item details

    You can either share your dashboard with members of your organization or with everyone. Because this operation view is meant for use by city authorities and not the public, you'll only share it with your organization.

  3. On the Overview tab of the Snowplows in a Utah City item details page, click Share.

    Share the dashboard with your organization.

  4. In the Share window, choose Organization, and click Save.

    When you share the dashboard, any associated maps and datasets will need to be shared in the same way. You can access the shared dashboard through both the ArcGIS Dashboards application or via an ArcGIS Online account.

You've used your web map to create a dashboard that city officials can use to efficiently track and manage their snow plow operations. In particular, you added lists and charts showing streets and vehicles.

Create a web app

Previously, you created a dashboard tailored for city officials to help them make decisions about their snowplow operations during weather events. Next, you'll create a web app that is designed for use by citizens in the community. During a snowstorm, it's imperative that citizens be well informed to maintain safety and keep transit moving as efficiently as possible. Citizens living in the city don't need to access the real-time dashboard information, such as progress charts and lists of vehicles, included in your dashboard. However, it's important to inform citizens of the current status so they know when their street and connecting streets have been plowed. You'll create a web app using ArcGIS Web AppBuilder that provides citizens access to the most up-to-date information on the plow progress.

Update the web map with streaming data

Before you create your web app, you'll update your web map with a different type of real-time GIS service called a stream service. Stream services are created and published in GeoEvent Server. Unlike the layers you've used so far, stream services do not require you to set a refresh interval; new event data is streamed to client applications immediately. By using a stream service for the vehicle locations, your web map will contain the most current information without relying on the 6-second refresh interval.

  1. If necessary, sign in to your ArcGIS organizational account and open your Snowplows in a Utah City web map.

    The current map is being used by your dashboard, and any changes you make will be reflected in it. To prevent your dashboard from changing, you'll save a copy of your map.

  2. On the ribbon, click Save, and choose Save As.
  3. In the Save Map window, change the name of the map to Snowplows in a Utah City (Stream Service). Leave the other parameters unchanged and click Save Map.

    The map is saved with a new title. The changes that you make to this map will not be reflected in your dashboard. Next, you'll add the stream service. Stream services are not hosted on ArcGIS Online, so you can't search for one among other ArcGIS Online layers. Instead, you'll use the service's URL, which points to the service hosted on the city's GIS server.

  4. On the ribbon, click Add, and choose Add Layer from Web.

    Add Layer from Web

    The Add Layer from Web window appears.

  5. For URL, copy and paste the following URL:

    URL for service

  6. Click Add Layer.

    A new layer, called SandyVehicles, is added to the map. The new layer may be difficult to see with all the other data currently on the map, so you'll turn off some of the other layers.

  7. In the Contents pane, turn off the Vehicles (Latest) and Vehicles (Past) layers.


    Your points may be different.

    The layer represents the most recent location of snowplows in the city. Because the layer is a stream service, it updates automatically whenever new geographic data is added to the server, rather than refreshing on a fixed interval of 30 seconds. Now, you'll rename the stream layer so that its name matches the other layers.

  8. In the Contents pane, point to the SandyVehicles layer, click the More Options button, and choose Rename.


  9. Change the layer name to Vehicles (Stream), and click OK.

    You have made a copy of the web map and added a service layer that represents the most recent locations of snowplows to the map

Symbolize the stream layer

Next, you'll change the default symbology for the stream service to make it similar to the Vehicles (Latest) layer. You'll also change the service's symbol to show breadcrumbs of where each vehicle was in the recent past.

  1. In the Contents pane, point to Vehicles (Stream), and click Change Style.

    The real-time layers you used previously were symbolized to show snowplows and pickup trucks with different symbols. The stream service can only be symbolized with a single symbol, but you can make that symbol visually similar to those in the other vehicles layers.

  2. In the Change Style pane, click Symbols.


    A window appears with symbol options.

  3. On the Shape tab, if necessary, change the symbol category to Arrows. Scroll through the list of arrow symbols until you locate the triangular, upward-pointing arrow in a purple circle.

    Purple arrow symbol

  4. Change the Symbol Size to 20 px, and click OK.

    The new symbol is added to the map.

    Symbol for vehicles

  5. In the Change Style pane, check the Rotate symbols (degrees) check box. In the drop-down menu, choose heading, and confirm that Geographic is chosen.

    Now, you'll have the symbol include additional symbols for the past 10 locations of each vehicle. This will cause each symbol to be followed by a trail of the last known locations of each vehicle, similar to your dashboard. While in the dashboard, you achieved this effect using a filter; in your web map, you'll achieve it through the layer's symbology.

  6. Under, This layer streams updated feature observations, check Draw previous 5 observations, and change the number of observations to 10.

    Draw previous observations

    After a few seconds, the symbols update and are followed by a trail of blue circles.

    Previous observations of vehicles

    The blue circle symbol is the default symbol. You'll change it to be more visually similar to the purple arrow symbol.

  7. In the Change Style pane, under the previous observations check box, for Symbol, click the blue circle symbol.

    Symbol of previous observations

    A window appears with symbol options.

  8. If necessary, choose the Arrows symbol category. Scroll through the list of symbols until you find a purple, triangular arrow pointing upward.

    Purple arrow for previous observations

  9. Change the Symbol Size to 12, and click OK.

    The blue circle symbols change to purple arrows. The arrows also rotate in the direction the vehicle is heading.

    Previous observations

    Now, you'll connect the breadcrumb symbols of previous observations with a white line to increase visual clarity.

  10. In the Change Style pane, check Connect observations, for Symbol, click the black line. In the list of colors, click the white color patch, and click OK.
  11. At the bottom of the Change Style pane, click OK.
  12. Zoom in until you can clearly see the line that connects observations.

    Final vehicles symbol

  13. When you're finished checking the line, navigate back to the full extent of the data.
  14. On the ribbon, click Save.

Create the web app

Now that you've updated your web map to include a stream service that displays real-time data quickly, you'll create a web app using Web AppBuilder. Web apps present web maps with user interfaces tailored to the specific purpose of the map. They also allow you to add descriptive information or links to your organization. Web AppBuilder, in particular, provides a full range of customizable options when creating a web app, as opposed to the default web app templates that are available through ArcGIS Online. The first step to create a web app is to share your map.

  1. On the ribbon, click Share.

    Share button

    Your intention is for the public to use the web app, so you'll share it appropriately.

  2. In the Share window, check Everyone (public).

    Anyone can now access your web map as long as they have the URL.

  3. Click Create a web app.

    Create a web app button

    The Create a New Web App window appears. This window contains a list of configurable app templates, each tailored to a specific purpose. You'll instead create a custom web app using Web AppBuilder.

  4. Click the Web AppBuilder tab.

    Web AppBuilder tab

    The tab provides options for the web app's title, tags, and other information. Some of the parameters are filled in using information from the web map, but you'll change the title and add an informative summary.

  5. For Title, type Snow Removal Operations Web App.
  6. For Summary, type Web application for viewing the current status of snow removal operations in a city in Utah.
  7. Ensure that Share this app in the same way as the map is checked, and click Get started.

    Web AppBuilder starts.

Configure the web app

Web AppBuilder currently contains your web map, a default title, and some default map functionality. Next, you'll configure aspects of the web app's appearance and functionality. In particular, you'll add a widget to the web app that provides increased control over streaming services.

  1. In the left pane of Web AppBuilder, on the Theme tab, choose Dart Theme.

    Dart theme

    This theme places the web app's title and many of its controls in a gray bar, called a controller, at the bottom of the map. It simplifies some of the functionality and puts emphasis on the map. However, the gray controller isn't visually distinct from the dark basemap, so you'll change its color.

  2. For Style, choose the purple color scheme.

    Purple color scheme

    This color scheme matches the purple vehicle symbols on your map. It causes the controller's information and tools to stand out, while also emphasizing the most important real-time data. Next, you'll change some of the other aspects of your web app. The left pane has four tabs: Theme, Map, Widget, and Attribute. The Map tab allows you to choose the map you want to use in your app and change its default extent. You've already chosen the map, so you don't need to use this tab. The Attribute tab allows you to change the app's title, as well as some other information. You already gave the app a title, so you won't use this tab either.

  3. Click the Widget tab.

    Widget tab

    When you created your dashboard, you added multiple widgets to it. These widgets were lists and charts that contained more information about the operations. You can also add widgets to a web app that you create using Web AppBuilder. These widgets help the user perform a wide variety of mapping tasks, such as navigation and measurement. You'll add a widget that allows users to interact with the stream layer in the app.

  4. On the Widget tab, click Set the widgets in this controller.

    The controller currently has three widgets: a legend, a list of layers, and a zoom slider. These widgets appear as buttons below the title on the controller.


    To remove a widget, point to it in the left pane and click the delete button.

  5. In the list of widgets, click the add widget button.

    Button to add widgets

    The Choose Widget window appears. This window contains all of the types of widgets you can include in the controller. There are over 50 widgets that you can configure.

  6. In the Choose Widget window, click the Stream widget to add it, and click OK.

    Stream widget

    The Configure Stream window appears. There are several options for the Stream widget, most of which are enabled by default. These options give users the ability to stop and start streaming, remove previous observations, and draw previous observations. These default settings give users enhanced control over the stream service and allow them to focus on key information.

  7. Leave the default settings unchanged, and click OK.

    The widget is added to the controller.

  8. Near the bottom of the page, on the controller, click the Stream widget.

    Stream widget on controller

    The Stream window appears on the map.

    Stream layer controls

    Users can change the number of breadcrumb observations that follow each vehicle or stop streaming entirely. Optionally experiment with any of the streaming controls.

  9. When you're finished, close the window.

    You can add more widgets to the web app, but the focus of your app is its real-time streaming capabilities, so you won't add anything else.


    If you want to learn more about Web AppBuilder and some of the available widgets, try the Learn ArcGIS tutorial Oso Mudslide - Before and After.

  10. At the bottom of the left pane, click Save. After the app is saved, click Launch to open it.

    The finished app opens in a new browser tab or window.

    Final web app

  11. Explore the finished app.

    Try using the preview function to check your app, and remember that the app can be viewed on a mobile device as well as a tablet.

  12. When you're finished exploring, close the app to return to Web AppBuilder.

    Now, you'll review the app's metadata.

  13. At the top of Web AppBuilder, click the title of your app.

    The app's item details page appears. This page contains the name, description, and use constraints of the app, as well as other information. You can also add a thumbnail. It's best practice to complete as much metadata as possible, especially for an app that will be used by the public. The city officials will likely want to edit the metadata to include links and references to the city's website. They may also add an image of the city seal or banner as the thumbnail to clearly indicate that the app is official. For the purposes of this tutorial, however, you can edit the metadata as you like.

  14. Give the app a thumbnail and description.

    Your app is already shared with the public, so anyone with the URL can view it. To spread the word, the city officials can copy the URL, send it out over the city's official social media pages, and make the app available on the city's website.

  15. Scroll to the bottom of the item details. Under URL, copy the app's URL and share it with whoever you like. You can also share the URL via social media to increase its reach and accessibility.

In this tutorial, you created maps and apps for both city officials and citizens that can be used to monitor the status of snow removal operations throughout the city. First, you created a web map containing real-time data layers. Next, you used that web map to create a dashboard that enables city officials to track snowplows and street status. Lastly, you made a web app that consolidates the most important information in a relatively simple user interface so citizens can receive the latest information on which streets have been plowed. These maps and apps will help keep the citizens safe and provide real-time information to decision makers.

You can find more tutorials in the tutorial gallery.