Display real-time traffic | Android Plugins | Android Docs

Not compatible with the Maps SDK v10

This plugin is not compatible with the Maps SDK v10 or higher. Learn more in the Maps SDK for Android documentation.

This example uses the Traffic plugin to display real-time traffic data on top of the map.

You must install the plugin before running the application.

Note

This example is a part of the Mapbox Android Demo app. You can find the values for all referenced resources in the res directory. For example, see res/values/activity_strings.xml for R.string.* references used in this example.

activity_traffic_plugin

github View on GitHub

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:mapbox="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"
        mapbox:layout_constraintBottom_toBottomOf="parent"
        mapbox:layout_constraintLeft_toLeftOf="parent"
        mapbox:layout_constraintRight_toRightOf="parent"
        mapbox:layout_constraintTop_toTopOf="parent"
        mapbox:mapbox_cameraTargetLat="1.352506"
        mapbox:mapbox_cameraTargetLng="103.842874"
        mapbox:mapbox_cameraZoom="9.579712" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/traffic_toggle_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_directions_car_white_24dp"
        mapbox:fabSize="normal"
        mapbox:layout_constraintBottom_toBottomOf="parent"
        mapbox:layout_constraintRight_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

TrafficPluginActivity.java

github View on GitHub

package com.mapbox.mapboxandroiddemo.examples.plugins;

import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.view.View;

import com.mapbox.mapboxandroiddemo.R;
import com.mapbox.mapboxsdk.Mapbox;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
import com.mapbox.mapboxsdk.maps.Style;
import com.mapbox.mapboxsdk.plugins.traffic.TrafficPlugin;

/**
 * Toggle the Mapbox Traffic plugin to display real-time traffic data on top
 * of your map (not all regions supported at the moment).
 */
public class TrafficPluginActivity extends AppCompatActivity {

  private MapView mapView;
  private MapboxMap map;
  private TrafficPlugin trafficPlugin;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Mapbox access token is configured here. This needs to be called either in your application
    // object or in the same activity which contains the mapview.
    Mapbox.getInstance(this, getString(R.string.access_token));

    // This contains the MapView in XML and needs to be called after the access token is configured.
    setContentView(R.layout.activity_traffic_plugin);

    mapView = findViewById(R.id.mapView);
    mapView.onCreate(savedInstanceState);
    mapView.getMapAsync(new OnMapReadyCallback() {
      @Override
      public void onMapReady(final MapboxMap mapboxMap) {
        map = mapboxMap;
        mapboxMap.setStyle(Style.DARK, new Style.OnStyleLoaded() {
          @Override
          public void onStyleLoaded(@NonNull Style style) {
            trafficPlugin = new TrafficPlugin(mapView, mapboxMap, style);

            // Enable the traffic view by default
            trafficPlugin.setVisibility(true);

            findViewById(R.id.traffic_toggle_fab).setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View view) {
                if (map != null) {
                  trafficPlugin.setVisibility(!trafficPlugin.isVisible());
                }
              }
            });
          }
        });
      }
    });
  }

  @Override
  public void onResume() {
    super.onResume();
    mapView.onResume();
  }

  @Override
  protected void onStart() {
    super.onStart();
    mapView.onStart();
  }

  @Override
  protected void onStop() {
    super.onStop();
    mapView.onStop();
  }

  @Override
  public void onPause() {
    super.onPause();
    mapView.onPause();
  }

  @Override
  public void onLowMemory() {
    super.onLowMemory();
    mapView.onLowMemory();
  }

  @Override
  protected void onDestroy() {
    super.onDestroy();
    mapView.onDestroy();
  }

  @Override
  protected void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    mapView.onSaveInstanceState(outState);
  }
}

Was this example helpful?