Android Mapbox SDK Tutorial to implement a Map

Objective

Download Source Code

MapBox is a open source map service provider. MapBox provides vector map library for Android. Vector Map is a collection of geographic information system. It provides street level map and also provides shape of building, lines of park or garden and more details. Using MapBox, we can load a map, place a pin on it, and also change the map style. Mapbox provides some features like zooming and rotating on small screens.

In this tutorial, we will explain how to integrate MapBox SDK with our Android application. To add map in application, we need to create an account on MapBox Studio and create a new token for every app that uses MapBox services such as maps and directions and its API. We will track usage and minimize disruption  with the help of a token.

Create a new Project in Android Studio, goto File ⇒ New ⇒ New Projects.

To integrate Mapbox SDK with our Android application, we need to create a new token. To create a new token, follow these steps:

• Login to MapBox Studio and click on Account tab to open your account page.

   
  

  
   
• Click on the API access tokens tab in MapBox dashboard.

   
  

  
   
• You will see a default token is already generated. You can use this access token to integrate application with MapBox but if you want to set custom scopes then we need to create a new token. Every access token has permission to make certain types of request to MapBox API. These permissions are termed as scopes.

   
  

  
   
• When we create a token, we have an option to set public and private scopes. So, click on Create a new token button to create a new token. This will open a form with various scope options. Fill token name in the input field and set scopes and finally click on Generate button to create a new token.
   
  
   
• If you added secret scope, then copy token before refreshing the page or logging out of MapBox Studio because you will not able to see API access token again.
   
  
   

To integrate android application with MapBox Studio, we need to use MapBox token. So, add token in string.xml file of the /res/values directory of Android project.

<string name="accessToken">sk.eY3UifQ.hX2MliNRGJ3Byxxxxxxxxxxx</string>

To use MapBox API, we need to add MapBox SDK in our project. So, open your build.gradle(app module) file and add MapBox SDK as dependencies.

dependencies {
  .....
    compile ('com.mapbox.mapboxsdk:mapbox-android-sdk:[email protected]'){
        transitive=true
    }
  ......
}

Our Android application will use MapBox API to display map of a given location. So, it needs to request Internet permission from the user. Add the following code to set Internet permission:

<uses-permission android:name="android.permission.INTERNET" />

To add the MapView as a layout element, we need to use com.mapbox.mapboxsdk.views.MapView tag in the activity.xml file.

<com.mapbox.mapboxsdk.views.MapView
    android:id="@+id/mapview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    mapbox:access_token="@string/accessToken"/>

To add Map view in Android application, we need to initialize the MapView object in MainActivity.java file.

public class MainActivity extends AppCompatActivity {

    MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /** Initialze a mapView  */
        mapView = (MapView) findViewById(R.id.mapview);
    }
}

MapView class provides different styles that can be set as map style. It provides four professional styles:

• Mapbox Streets: Roads are one of the most important features of this style. This feature is useful while driving and walking to see destination by road.
• Emerald: This style is used for transportation and outdoor terrain.
• Satellite and Satellite Streets: It provides up to date map via satellite.
• Light and Dark: Using this style is used to display map without any color.

In this example, we are using Mapbox Streets by calling calling MapView.setStyleUrl() method.

// set MapBox streets style.
mapView.setStyleUrl(Style.MAPBOX_STREETS);

We will display a location on the map. So, we need to use CameraPosition.Builder() object, to set location’s latitude and longitude. To set location, we need to call target() method and pass the LatLng object with latitude and longitude. We can add zoom feature by calling zoom() method.

CameraPosition cameraPosition = new CameraPosition.Builder()
        .target(new LatLng(41.885, -87.679)) // Sets the center of the map to Chicago
        .zoom(11)                            // enable zoom feature
        .build();

We will enable rotation of Map view by calling moveCamera() method.

// enable rotation
mapView.moveCamera(CameraUpdateFactory
                .newCameraPosition(cameraPosition));

To create MapView user interface in Android application, we need to call onCreate() method of MapView object.

mapView.onCreate(savedInstanceState);

We need to handle map events on resume, start, pause, stop and destroy that might affect our app.

    /**
     * Called when the system is about to start resuming a previous activity.
     */
    @Override
    public void onPause()  {
        super.onPause();
        mapView.onPause();
    }

    /**
     * Called when the activity will start interacting with the use
     */
    @Override
    public void onResume() {
        super.onResume();
        mapView.onResume();
    }

    /**
     * The final call you receive before your activity is destroyed.
     */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }

Run your app and you will able to see map on the screen of Android Application. Here is final code:

public class MainActivity extends AppCompatActivity {

    MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Create a mapView and give it some properties.
        mapView = (MapView) findViewById(R.id.mapview);

        // set MapBox streets style.
        mapView.setStyleUrl(Style.MAPBOX_STREETS);

        CameraPosition cameraPosition = new CameraPosition.Builder()
                .target(new LatLng(41.885, -87.679)) // Sets the center of the map to Chicago
                .zoom(11)                            // Sets the zoom
                .build();

        mapView.moveCamera(CameraUpdateFactory
                .newCameraPosition(cameraPosition));

        mapView.onCreate(savedInstanceState);
    }

    /**
     * Called when the activity is becoming visible to the user.
     */
    @Override
    protected void onStart() {
        super.onStart();
        mapView.onStart();
    }

    /**
     * Called when the activity is no longer visible to the user, because another activity has been resumed
     */
    @Override
    protected void onStop() {
        super.onStop();
        mapView.onStop();
    }

    /**
     * Called when the system is about to start resuming a previous activity.
     */
    @Override
    public void onPause()  {
        super.onPause();
        mapView.onPause();
    }

    /**
     * Called when the activity will start interacting with the use
     */
    @Override
    public void onResume() {
        super.onResume();
        mapView.onResume();
    }

    /**
     * The final call you receive before your activity is destroyed.
     */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }

}

Download Source Code