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 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.
- Sign in to your ArcGIS organizational account.
If you don't have an organizational account, you can sign up for an ArcGIS free trial.
- 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 lesson uses Map Viewer Classic.
- If necessary, on the ribbon, click Open in Map Viewer Classic.
Map Viewer Classic opens.
- On the ribbon, click Add, and choose Search for Layers.
The search pane appears. You'll search for and add the city's three real-time layers involving snowplow and streets
- In the search pane, click the My Content drop-down arrow and choose ArcGIS Online.
- 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.
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.
- For the Vehicles (Latest) layer, click the Add button. Zoom in closer to the features around Salt Lake City, 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.
- In the Search pane, change the search string to Vehicles (Past) owner:Learn_ArcGIS and press Enter.
- From the search results, for Vehicles (Past), click the Add button.
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.
- In the Search pane, search for and add the Street Plowed Status layer owned by Learn_ArcGIS.
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.
- 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.
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.
- On the ribbon, click Basemap, and choose Dark Gray Canvas.
The Streets Plowed Status layer now appears more clearly on the map.
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.
- In the Contents pane, point to the Street Plowed Status layer and click the More Options button.
A menu appears with additional settings for the layer.
- Point to Refresh Interval, check the box, and type 0.5 in the text box.
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.
- 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.
- 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.
- Drag the Vehicles (Past) layer between the Vehicles (Latest) and Street Plowed Status layers.
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.
- In the Contents pane, point to Vehicles (Latest), and click Change Style.
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.
- Under Select a drawing style, for Types (Unique symbols), click 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.
- Click the blue triangle symbol for pickup trucks.
A window appears, displaying options to change the symbol. The options include a list of default symbols. The current list category is shapes.
- Click the Shapes drop-down menu and choose Arrows.
- Scroll through the list of arrow symbols and click the white triangular arrow pointing upward inside a light blue circle.
- Change the Symbol Size to 20 px.
- 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.
- In the Change Style pane, click the orange triangle symbol for snowplows.
- Scroll through the list of arrow symbols and click the white triangular arrow pointing upward inside a dark orange circle.
- Change the Symbol Size to 20, and click OK.
Both symbols for pickup and snow plows are 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.
- In the Change Style pane, check the Rotate symbols (degrees) check box.
Options for symbol rotation appear.
- Click the drop-down menu and choose heading. Confirm that Geographic is chosen.
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.
- At the bottom of the pane, click OK, and click Done.
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.
- In the Contents pane, point to the Vehicles (Latest) layer. Click More Options, and choose 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.
- In the Label Features pane, click the current label text color and choose white.
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.
- For Alignment, choose the bottom center alignment.
- At the bottom of the pane, click OK.
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.
- 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.
- 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.
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.
- Click Apply Filter to execute the expression.
The data on the map is filtered.
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.
- On the ribbon, click Save, and choose Save As.
- In the Save map window, enter the following:
- 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.
- 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 lesson, 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.
- If necessary, sign in to your ArcGIS Online account.
- On the ribbon, click Home, and choose Content.
- On the ribbon, click the App Launcher, and choose Dashboards.
The ArcGIS Dashboards home page appears, where you can create, edit, and view dashboards.
- Click Create dashboard.
The Create new dashboard pane appears.
- 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.
- 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:
- Serial Chart
- Pie Chart
- On the side panel, click the Layout button.
The Layout panel appears.
- In the Layout panel, in the Body tab, click Add element, and choose Map.
The Select a map pane appears and lists the web maps that are available to your ArcGIS account.
- 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.
The Snowplows in a Utah City Map window appears and contains properties for configuring your map.
- On the Settings tab, click the toggle buttons to enable the following options:
- Default extent and bookmarks
- Layer visibility
- Basemap switcher
These capabilities will allow users to navigate the map effectively, as well as select features of interest and gain more information through pop-ups.
- Click Done. In the map, click a truck to open a pop-up containing attributes about the feature.
The dashboard appears with the map elements you just configured.
Because you enabled pop-ups in your dashboard, the functionality to click a feature to access attributes is automatically available.
- On your own, explore the layout and click other features to view their attributes..
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 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.
- In the Layout panel, click Add element and choose List.
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.
- In the Select a layer pane, choose Vehicles (Latest).
The List configuration pane changes to display data options for the Vehicle (Latest) layer.
Your list may be slightly different from the images shown in the lesson, 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.
- In the Data options pane, for Sort by, click Add field, choose vehiclename
- Click the sort icon and verify that Sort ascending is selected.
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.
- On the side pane, click the List tab. The vehiclename field is already added to the text box.
- Place your cursor after vehiclename and press Enter. Click the field drop-down arrow and add the speed field to a separate line.
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.
- 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.
- Click the General tab, and in the General options pane, for Title and Description, enter the following:
- For Title, click Edit, 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.
After making these changes, the title will be placed at the top of the list and the description at the bottom.
- Click Done.
The list element is added to the dashboard. You can drag the list and dock it anywhere.
- 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.
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.
- In the Layout panel, click Add element and choose Serial Chart.
- In the Select a layer pane, select Vehicles (Latest).
- If necessary, on the side panel, click the Data tab.
- 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.
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.
- Click the Category axis tab, and for Title, type Vehicle.
The title of the horizontal axis updates to Vehicle.
- Click the Value axis tab, and for Title, type Speed.
The title of the vertical axis updates to Speed.
- Click the Series tab, scroll down to the Bar colors option, and click the existing color patch.
- Replace the existing hex code with #00c5ff.
- Click the General tab, and in the General options pane, change the following parameters:
- For Title, click Edit, and type Vehicle Speed. Center align the title text.
- Above the text box, click Normal, and choose Heading 2.
- Click Done.
- Drag the bar chart element and dock it under the list element. If necessary, resize the elements so that all information is displayed clearly.
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.
- In the Layout panel, click Add element, and choose Pie chart.
- 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.
- If necessary, click the Data tab. 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.
Your values may be different as the data is dynamic.
- Click the Chart tab.
- In the Chart options pane, set the following:
- In the Labels section, for Visibility, click Hide.
- In the Legend section, for Visibility, click Percentage.
- Click the Slices tab. In the Slices pane, click Apply colors, and choose your own colors or accept the default color settings.
- Click the General tab. For Title, click Edit, 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
- Click the Actions tab.
- In the Actions pane, under When selection changes, click Filter. In the drop-down list, for Street Plowed Status use the toggle to enable it.
- Click Done.
- 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.
- 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.
- In the Layout panel, click Add element, and choose List.
- 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.
- If necessary, click the Data tab. 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.
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.
- Click the List tab.
- In the List options pane, click the field drop-down arrow (StreetName should already be in the list). On the line below StreetName, add the PlowedStatus field.
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.
- Click the Actions tab.
- In the Actions pane, click Zoom. In the drop-down for Snowplows in a Utah City, use the toggle to enable it.
- Click the General tab.
- In the General options pane, change the following parameters:
- For Title, click Edit, and type Streets Plowed Status (Street Name).
- Choose Heading 2 for the formatting style.
- Click Done.
- Dock the list element under the pie chart element and adjust the sizes of each element to minimize empty space.
Spend a few minutes exploring your newly configured operation dashboard. Then, add a header to it.
- In the Layout panel, click the Header tab and click Add header.
The header defaults to the title of the map.
- 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.
- In the dashboards toolbar, click the Save button and choose Save.
- Click the icon beside the dashboard title. From the list choose 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.
- On the Overview tab of the Snowplows in a Utah City item details page, click Share.
- In the Share pane, select the check boxes next for Everyone (Public), and click Save.
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 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.
- 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.
- On the ribbon, click Save, and choose Save As.
- 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.
- On the ribbon, click Add, and choose Add Layer from Web.
The Add Layer from Web window appears.
- For URL, copy and paste the following URL:
- 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.
- 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.
- In the Contents pane, point to the SandyVehicles layer, click the More Options button, and choose Rename.
- 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.
- 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.
- In the Change Style pane, click Symbols.
A window appears with symbol options.
- 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.
- Change the Symbol Size to 20 px, and click OK.
The new symbol is added to the map.
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.
- 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.
- Under, This layer streams updated feature observations, check Draw previous 5 observations, and change the number of observations to 10.
After a few seconds, the symbols update and are followed by a trail of blue circles.
The blue circle symbol is the default symbol. You'll change it to be more visually similar to the purple arrow symbol.
- In the Change Style pane, under the previous observations check box, for Symbol, click the blue circle symbol.
A window appears with symbol options.
- If necessary, choose the Arrows symbol category. Scroll through the list of symbols until you find a purple, triangular arrow pointing upward.
- 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.
Now, you'll connect the breadcrumb symbols of previous observations with a white line to increase visual clarity.
- In the Change Style pane, check Connect observations.
The default symbol for connecting observations is a black line. You will change this symbol so that it shows up on the dark basemap.
- Under Connect observations, for Symbol, click the black line. In the list of colors, click the white color patch, and click OK.
- At the bottom of the Change Style pane, click OK.
- Zoom in until you can clearly see the line that connects observations.
- When you're finished checking the line, navigate back to the full extent of the data.
- 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.
- On the ribbon, click Share.
Your intention is for the public to use the web app, so you'll share it appropriately.
- In the Share window, check Everyone (public).
Anyone can now access your web map as long as they have the URL.
- At the bottom of the Share window, click Create a web app.
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.
- Click the 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.
- For Title, type Snow Removal Operations Web App.
- For Summary, type Web application for viewing the current status of snow removal operations in a city in Utah.
- 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.
- In the left pane of Web AppBuilder, on the Theme tab, choose 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.
- For Style, choose the 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.
- Click the 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.
- 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.
- In the list of widgets, click the add widget button.
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.
- In the Choose Widget window,
click the Stream widget to add it, and click OK.
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.
- Leave the default settings unchanged, and click OK.
The widget is added to the controller.
- Near the bottom of the page, on the controller, click the Stream widget.
The Stream window appears on the map.
Users can change the number of breadcrumb observations that follow each vehicle or stop streaming entirely. Optionally experiment with any of the streaming controls.
- 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 lesson Oso Mudslide - Before and After.
- 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.
- 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.
- When you're finished exploring, close the app to return to Web AppBuilder.
Now, you'll review the app's metadata.
- 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.
- 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.
- 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.