Objective

Contents
- 1 Introduction
- 2 Create a New project
- 3 Create a New Access Token
- 4 Add Token in Android Project
- 5 Add MapBox SDK as Dependency
- 6 Add Internet Permission
- 7 Create Layout
- 8 Initialize MapView object
- 9 Add Custom Style
- 10 Set Location
- 11 Enable Rotation of Map view
- 12 Set Location
- 13 Handle MapView on Activity Lifecycle method
- 14 Final code
Introduction
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
Create a new Project in Android Studio, goto File ⇒ New ⇒ New Projects.
Create a New Access Token
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.
Add Token in Android Project
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>
Add MapBox SDK as Dependency
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 } ...... }
Add Internet Permission
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" />
Create Layout
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"/>
Initialize MapView object
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); } }
Add Custom Style
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);
Set Location
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();
Enable Rotation of Map view
We will enable rotation of Map view by calling moveCamera() method.
// enable rotation mapView.moveCamera(CameraUpdateFactory .newCameraPosition(cameraPosition));
Set Location
To create MapView user interface in Android application, we need to call onCreate() method of MapView object.
mapView.onCreate(savedInstanceState);
Handle MapView on Activity Lifecycle method
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(); }
Final code
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(); } }
