|
| 1 | +--- |
| 2 | +title: Show traffic data on android map | Microsoft Azure Maps |
| 3 | +description: In this article you'll learn, how to display traffic data on a map using the Microsoft Azure Maps Android SDK. |
| 4 | +author: farah-alyasari |
| 5 | +ms.author: v-faalya |
| 6 | +ms.date: 02/27/2020 |
| 7 | +ms.topic: conceptual |
| 8 | +ms.service: azure-maps |
| 9 | +services: azure-maps |
| 10 | +manager: philmea |
| 11 | +--- |
| 12 | + |
| 13 | +# Show traffic data on the map using Azure Maps Android SDK |
| 14 | + |
| 15 | +Flow data and incidents data are the two types of traffic data that can be displayed on the map. This guide shows you how to display both of these traffic data. Incidents data consists of point and line-based data for things such as constructions, road closures, and accidents. Flow data shows metrics about the flow of traffic on the road. |
| 16 | + |
| 17 | +## Prerequisites |
| 18 | + |
| 19 | +Before you can show traffic on the map, you need to install [Azure Maps Android SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-android-map-control-library) and load a map. |
| 20 | + |
| 21 | +## Incidents traffic data |
| 22 | + |
| 23 | +You'll need to import the following libraries to call `setTraffic` and `incidents`: |
| 24 | + |
| 25 | +```java |
| 26 | +import static com.microsoft.com.azure.maps.mapcontrol.options.TrafficOptions.incidents; |
| 27 | +``` |
| 28 | + |
| 29 | + The following code snippet shows you how to display traffic data on the map. We pass a boolean value to the `incidents` method, and pass that to the `setTraffic` method. |
| 30 | + |
| 31 | +```java |
| 32 | +protected void onCreate(Bundle savedInstanceState) { |
| 33 | + super.onCreate(savedInstanceState); |
| 34 | + mapControl.getMapAsync(map - > { |
| 35 | + map.setTraffic(incidents(true)); |
| 36 | +} |
| 37 | +} |
| 38 | +``` |
| 39 | + |
| 40 | +## Flow traffic data |
| 41 | + |
| 42 | +You'll first need to import the following libraries to call `setTraffic` and `flow`: |
| 43 | +
|
| 44 | +```java |
| 45 | +import com.microsoft.azure.maps.mapcontrol.options.TrafficFlow; |
| 46 | +import static com.microsoft.azure.maps.mapcontrol.options.TrafficOptions.flow; |
| 47 | +``` |
| 48 | +
|
| 49 | +Use the following code snippet to set traffic flow data. Similar to the code in the previous section, we pass the return value of the `flow` method to the `setTraffic` method. There are four values that can be passed to `flow`, and each value would trigger `flow` to return the respective value. The return value of `flow` will then be passed as the argument to `setTraffic`. See the table below for these four values: |
| 50 | +
|
| 51 | +| | | |
| 52 | +| :-- | :-- | |
| 53 | +| TrafficFlow.NONE | Doesn't display traffic data on the map | |
| 54 | +| TrafficFlow.RELATIVE | Shows traffic data that's relative to the free-flow speed of the road | |
| 55 | +| TrafficFlow.RELATIVE_DELAY | Displays areas that are slower than the average expected delay | |
| 56 | +| TrafficFlow.ABSOLUTE | Shows the absolute speed of all vehicles on the road | |
| 57 | +
|
| 58 | +```java |
| 59 | +protected void onCreate(Bundle savedInstanceState) { |
| 60 | + super.onCreate(savedInstanceState); |
| 61 | + mapControl.getMapAsync(map -> |
| 62 | + map.setTraffic(flow(TrafficFlow.RELATIVE))); |
| 63 | +} |
| 64 | +``` |
| 65 | +
|
| 66 | +## Show incident traffic data by clicking a feature |
| 67 | +
|
| 68 | +To obtain the incidents for a specific feature, you can use the code below. When a feature is clicked, the code logic checks for incidents and builds a message about the incident. A message shows up at the bottom of the screen with the details. |
| 69 | +
|
| 70 | +1. First, you need to edit **res > layout > activity_main.xml**, so that it looks like the one below. You may replace the `mapcontrol_centerLat`, `mapcontrol_centerLng`, and `mapcontrol_zoom` with your desired values. Recall, the zoom level is a value between 0 and 22. At zoom level 0, the entire world fits on a single tile. |
| 71 | +
|
| 72 | + ```XML |
| 73 | + <?xml version="1.0" encoding="utf-8"?> |
| 74 | + <FrameLayout |
| 75 | + xmlns:android="http://schemas.android.com/apk/res/android" |
| 76 | + xmlns:app="http://schemas.android.com/apk/res-auto" |
| 77 | + android:layout_width="match_parent" |
| 78 | + android:layout_height="match_parent" |
| 79 | + > |
| 80 | + |
| 81 | + <com.microsoft.azure.maps.mapcontrol.MapControl |
| 82 | + android:id="@+id/mapcontrol" |
| 83 | + android:layout_width="match_parent" |
| 84 | + android:layout_height="match_parent" |
| 85 | + app:mapcontrol_centerLat="47.6050" |
| 86 | + app:mapcontrol_centerLng="-122.3344" |
| 87 | + app:mapcontrol_zoom="12" |
| 88 | + /> |
| 89 | +
|
| 90 | + </FrameLayout> |
| 91 | + ``` |
| 92 | +
|
| 93 | +2. Add the following code to your **MainActivity.java** file. The package is included by default, so make sure you keep your package at the top. |
| 94 | +
|
| 95 | + ```java |
| 96 | + package <yourpackagename>; |
| 97 | + import androidx.appcompat.app.AppCompatActivity; |
| 98 | +
|
| 99 | + import android.os.Bundle; |
| 100 | + import android.widget.Toast; |
| 101 | +
|
| 102 | + import com.microsoft.azure.maps.mapcontrol.AzureMaps; |
| 103 | + import com.microsoft.azure.maps.mapcontrol.MapControl; |
| 104 | + import com.mapbox.geojson.Feature; |
| 105 | + import com.microsoft.azure.maps.mapcontrol.events.OnFeatureClick; |
| 106 | +
|
| 107 | + import com.microsoft.azure.maps.mapcontrol.options.TrafficFlow; |
| 108 | + import static com.microsoft.azure.maps.mapcontrol.options.TrafficOptions.flow; |
| 109 | + import static com.microsoft.azure.maps.mapcontrol.options.TrafficOptions.incidents; |
| 110 | +
|
| 111 | + public class MainActivity extends AppCompatActivity { |
| 112 | +
|
| 113 | + static { |
| 114 | + AzureMaps.setSubscriptionKey("Your Azure Maps Subscription Key"); |
| 115 | + } |
| 116 | +
|
| 117 | + MapControl mapControl; |
| 118 | +
|
| 119 | + @Override |
| 120 | + protected void onCreate(Bundle savedInstanceState) { |
| 121 | + super.onCreate(savedInstanceState); |
| 122 | + setContentView(R.layout.activity_main); |
| 123 | +
|
| 124 | + mapControl = findViewById(R.id.mapcontrol); |
| 125 | +
|
| 126 | + mapControl.onCreate(savedInstanceState); |
| 127 | +
|
| 128 | + //Wait until the map resources are ready. |
| 129 | + mapControl.getMapAsync(map -> { |
| 130 | +
|
| 131 | + map.setTraffic(flow(TrafficFlow.RELATIVE)); |
| 132 | + map.setTraffic(incidents(true)); |
| 133 | +
|
| 134 | + map.events.add((OnFeatureClick) (features) -> { |
| 135 | +
|
| 136 | + if (features != null && features.size() > 0) { |
| 137 | + Feature incident = features.get(0); |
| 138 | + if (incident.properties() != null) { |
| 139 | +
|
| 140 | +
|
| 141 | + StringBuilder sb = new StringBuilder(); |
| 142 | + String incidentType = incident.getStringProperty("incidentType"); |
| 143 | + if (incidentType != null) { |
| 144 | + sb.append(incidentType); |
| 145 | + } |
| 146 | + if (sb.length() > 0) sb.append("\n"); |
| 147 | + if ("Road Closed".equals(incidentType)) { |
| 148 | + sb.append(incident.getStringProperty("from")); |
| 149 | + } else { |
| 150 | + String description = incident.getStringProperty("description"); |
| 151 | + if (description != null) { |
| 152 | + for (String word : description.split(" ")) { |
| 153 | + if (word.length() > 0) { |
| 154 | + sb.append(word.substring(0, 1).toUpperCase()); |
| 155 | + if (word.length() > 1) { |
| 156 | + sb.append(word.substring(1)); |
| 157 | + } |
| 158 | + sb.append(" "); |
| 159 | + } |
| 160 | + } |
| 161 | + } |
| 162 | + } |
| 163 | + String message = sb.toString(); |
| 164 | +
|
| 165 | + if (message.length() > 0) { |
| 166 | + Toast.makeText(this,message,Toast.LENGTH_LONG).show(); |
| 167 | + } |
| 168 | + } |
| 169 | + } |
| 170 | + }); |
| 171 | + }); |
| 172 | + } |
| 173 | +
|
| 174 | + @Override |
| 175 | + public void onResume() { |
| 176 | + super.onResume(); |
| 177 | + mapControl.onResume(); |
| 178 | + } |
| 179 | +
|
| 180 | + @Override |
| 181 | + protected void onStart(){ |
| 182 | + super.onStart(); |
| 183 | + mapControl.onStart(); |
| 184 | + } |
| 185 | +
|
| 186 | + @Override |
| 187 | + public void onPause() { |
| 188 | + super.onPause(); |
| 189 | + mapControl.onPause(); |
| 190 | + } |
| 191 | +
|
| 192 | + @Override |
| 193 | + public void onStop() { |
| 194 | + super.onStop(); |
| 195 | + mapControl.onStop(); |
| 196 | + } |
| 197 | +
|
| 198 | + @Override |
| 199 | + public void onLowMemory() { |
| 200 | + super.onLowMemory(); |
| 201 | + mapControl.onLowMemory(); |
| 202 | + } |
| 203 | +
|
| 204 | + @Override |
| 205 | + protected void onDestroy() { |
| 206 | + super.onDestroy(); |
| 207 | + mapControl.onDestroy(); |
| 208 | + } |
| 209 | +
|
| 210 | + @Override |
| 211 | + protected void onSaveInstanceState(Bundle outState) { |
| 212 | + super.onSaveInstanceState(outState); |
| 213 | + mapControl.onSaveInstanceState(outState); |
| 214 | + } |
| 215 | + } |
| 216 | + ``` |
| 217 | +
|
| 218 | +3. Once you incorporate the above code in your application, you'll be able to click on a feature and see the details of the traffic incidents. Depending on the latitude, longitude, and the zoom level values that you used in your **activity_main.xml** file, you'll see results similar to the following image: |
| 219 | +
|
| 220 | + <center> |
| 221 | +
|
| 222 | +  |
| 223 | +
|
| 224 | + </center> |
| 225 | +
|
| 226 | +## Next steps |
| 227 | +
|
| 228 | +View the following guides to learn how to add more data to your map: |
| 229 | +
|
| 230 | +> [!div class="nextstepaction"] |
| 231 | +> [Add a symbol layer](how-to-add-symbol-to-android-map.md) |
| 232 | +
|
| 233 | +> [!div class="nextstepaction"] |
| 234 | +> [Add a tile layer](how-to-add-tile-layer-android-map.md) |
| 235 | +
|
| 236 | +> [!div class="nextstepaction"] |
| 237 | +> [Add shapes to android map](how-to-add-shapes-to-android-map.md) |
| 238 | +
|
| 239 | +> [!div class="nextstepaction"] |
| 240 | +> [Display feature information](display-feature-information-android.md) |
0 commit comments