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.

Note:

This lesson 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.
    Note:

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

  2. At the top of your organization home page, click Map.

    Map on ribbon

    A new map opens. The map extent for a new map is set to the default extent of your organization. Next, you'll search for and add the city's three real-time layers involving snowplows and streets.

    Note:

    If you're in a new ArcGIS Online session, clicking Map opens a new map. Otherwise, it opens the last map you were using. If an existing map opens, click New Map in the upper right corner of the page and choose Create New Map.

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

    Add button and Search for Layers option

    The Search for Layers pane appears.

  4. In the Search pane, click the My Content drop-down arrow and choose ArcGIS Online.
  5. In the Search for layers dialog 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.

    Add 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.

  6. For the Vehicles (Latest) layer, click the + Add button.

    Vehicles (Latest) layer

    Note:

    Depending on your browser window, you may need to zoom out to see all the vehicles located in the White city area of Utah.

    The vehicles are represented by colored triangles. Orange triangles represent snowplows, and blue triangles represent pickup trucks with plows attached. Each of the nine 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.

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

    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 lesson, you'll change the symbology of one of the layers to make each more distinct. Before then, you have one more layer to add.

  9. In the Search pane, search for and add the 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.

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

    The Contents pane appears. It lists all three layers currently on the map. The Streets 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.

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

    Dark Gray Canvas basemap

    The Streets Plowed Status layer 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.

  12. 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.

  13. Point to Refresh Interval and change the interval to 0.1 minutes.

    Refresh interval

    The minimum refresh interval is 0.1 minutes, which equates to 6 seconds. The layers on your map will refresh every 6 seconds with the latest data from the AVL devices.

  14. Follow the same process to set Refresh Interval to 0.1 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.

  15. 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

  16. 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.
  7. Click OK.

    The new symbol is automatically applied to the map. 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 px and click OK.

    Both symbols have been changed. 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. Then, click Done.

    Symbolized vehicles

    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 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.

    Alignment

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

    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.

    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: Vehicle(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 execute 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. Save your map using the following information:
    • For Title, type Snowplows in a Utah City
    • For Tags, type Snowplows, Roads, Utah
    • For Summary, type This map shows the real-time location of snowplows in a city in Utah.

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 6 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 Operations Dashboard for ArcGIS. Dashboards are fully configurable and can include elements that display maps, lists, and charts. In this lesson, you'll install the free Operations Dashboard for ArcGIS 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. Sign in to your ArcGIS Online account.
  2. Click Content, click the App Launcher, and choose Operations Dashboard.
    Select the Operations Dashboard app.

    The Operations Dashboard home page appears, where you can create, edit, and view dashboards.

  3. Click Create Dashboard.

    The Create new dashboard pane appears.

  4. In the Create new dashboard pane, do 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

  5. 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
  6. In the Snowplows in a Utah City setup pane, click the Add button to access the elements drop-down list. From the list, 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.

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

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

    Select a map to add to dashboard

    The Configure Map window appears.

  8. On the Settings tab, click the toggle buttons to enable the following options:
    • Pop-ups
    • Default Extent and Bookmarks
    • Layer Visibility
    • Basemap Switcher
    • Search

    Configure map elements

    These capabilities will allow users to navigate the map effectively, as well as select features of interest and gain more information through pop-ups.

  9. Click Done

    The dashboard appears with the map elements you just configured.

    Configured map element with pop-up

    On your own, explore the layout and click a truck to view a pop-up displaying the vehicle's properties.

Add elements

You've configured your map element and taken advantage of some of the real-time functionality of Operations Dashboard to make your map communicate information even more clearly. As mentioned at the beginning of this lesson, 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 ribbon, click the Add button and choose List.

    Add a list element

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

  2. In the Select a layer pane, choose Vehicle(Latest).

    Select list layer

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

    Set list element data properties

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

  3. In the Data Options pane, for Sort By, click +Sort, choose vehiclename, and click Ascending.

    Sort the list

    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.

  4. Click the List tab, click the field drop-down arrow, and choose the vehiclename field.
  5. Repeat step 4 to add the speed field to a separate line.

    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

  6. Click the Actions tab, click the Add Action drop-down arrow, and choose Follow Feature. This will result in the display of a breadcrumb trail as the vehicle moves along the roads on the map.

    Add action

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

    General options settings

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

  8. 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

  9. 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

    Note:

    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.

  10. Click the Add button and choose Serial Chart.
  11. In the Select a layer pane, select Vehicles(Latest).
  12. Click the Data tab.
  13. In the Data Options pane, change the following parameters:
    • For Categories From, click Features.
    • For Category Field, choose vehiclename.
    • For Series 1 Field, choose speed.
    • For Sort By, choose vehiclename, and click Ascending.
    Note:

    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 nine bars, one for each vehicle. However, the axis labels do not indicate the values that the bars represent.

  14. Click the Category Axis tab, and for Title, type Vehicle.
  15. Click the Value Axis tab, and for Title, type Speed.
  16. Click the Series tab, scroll down to the Bar Colors option, and change the color to blue with the Hex code #00c5ff.
  17. Click the General tab, and in the General Options pane, change the following parameters:
    • In the Title text box, type Vehicle Speed. Center align the title text.
    • Above the text box, click Normal, and choose Heading 2.
  18. Click Done.
  19. Drag the bar chart element and dock it under the list element. If necessary, 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.

  20. Click the Add button and choose Pie Chart.
  21. In the Select a layer pane, for Data Source, choose Street Plowed Status.

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

  22. Click the Data tab.
  23. 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

  24. Click the Chart tab.
  25. In the Chart Options pane, do the following:
    • For Labels Visibility, click Hide.
    • For Legend Visibility, click Percentage.

    Pie chart labels and legend settings

  26. Click the Slices tab, click Apply Colors, and choose your own colors or accept the default color settings.
  27. Click the General tab, and for Title, 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

  28. Click the Actions tab.
  29. In the Actions pane, change the following parameters:
    • In the Actions pane, click Add Target and choose Streets Plowed Status.
    • For Filter, choose Add Target.
    • Choose the Streets Plowed Status layer as the target of the action.
  30. Click Done.
  31. Drag the pie chart element and dock it on the right side of the dashboard. If necessary, resize the list and bar chart elements to display all information clearly.

    Operations Dashboard with pie chart

  32. 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.

  33. On the ribbon, click the Add button and choose List.
  34. 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.

  35. Click the Data tab.
  36. In the Data Options pane, change the following parameters:
    • For Maximum Features Displayed, set the value to 50.
    • For Sort By, choose PlowedStatus, and click Ascending.

    The preview updates with a list of streets, each with a symbol indicating the plowed status. 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 the field drop-down arrow, and choose the StreetName and PlowedStatus fields. Add the fields on separate lines.

    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, change the following parameters:
    • Click the Add Action drop-down arrow and choose Zoom.
    • In the Zoom action, click Add Target, and choose the Snowplows in a Utah City map as the target.
  41. Click the General tab.
  42. In the General Options pane, change the following parameters:
    • For Title, type Streets Plowed Status (Street Name).
    • Choose Heading 2 for the formatting style.
  43. Click Done.
  44. Dock the list element under the pie chart element and adjust the sizes of each element 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. From the Add menu, choose 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. On the ribbon, click Save.
  2. Click Home, and click 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 pane, select the check boxes next to your organization's name and everyone, and click OK.

    When you share the dashboard, any associated maps will need to be shared in the same way. You can access the shared dashboard through both the Operations Dashboard for ArcGIS 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 Web AppBuilder for ArcGIS 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: https://realtimegis2016.esri.com:6443/arcgis/rest/services/SandyVehicles/StreamServer.

    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.

    Vehicles

    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 6 seconds. Now, you'll rename the stream layer so that its name matches the other layers.

  8. Point to the SandyVehicles layer, click the More Options button, and choose Rename.

    Rename

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

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, similar to the filter you created in your dashboard.

  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.

    Symbols

    A window appears with symbol options.

  3. On the Shape tab, 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

    When you created your web map in the first lesson, you changed the symbols of the vehicles so that the arrows pointed in the direction the vehicle was heading. You may have noticed that your dashboard did not retain this element of the symbology, and all of the vehicle symbols in the dashboard pointed upward only. However, the web app that you create will be able to display symbol rotation, so you'll add it to your stream layer's symbol.

  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. 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, 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 px and click OK.

    The blue circle symbols change to purple arrows. The arrows also rotate in the direction the vehicle is heading. 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.

    The default symbol for connecting observations is a white line. You can change this symbol, but it shows up well on the map and doesn't need to be changed.

  11. At the bottom of the 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. Save your map.

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. At the bottom of the Share window, 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. Change Title to 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.

    Tip:

    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 more than 52 widgets you can configure.

  6. Click the Stream widget to choose it. Then, 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. 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.

    Note:

    If you want to learn more about Web AppBuilder and some of the available widgets, try the Learn ArcGIS lesson 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 lesson, 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 lesson, 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 lessons in the Learn ArcGIS Lesson Gallery.