Places
The Places Plugin for Android lets users search for a destination, explore what's nearby, or find their favorite restaurants, coffee shops, or stores. Built on top of the Mapbox Geocoding API, the plugin offers UI components that you can integrated inside your app with a few lines of code.
Search options
Mapbox provides two options for adding location search into your Android application:
- Java SDK: The Java SDK includes a Java wrapper for building Mapbox Geocoding API requests. Use the API response in your Java or Android project. Read more in the Java SDK documentation.
- Places Plugin for Android: This plugin is a wrapper around the Mapbox Java SDK's Geocoding API that also provides a search UI. View the Places Plugin example and place picker example.
Each option provides a different set of features:
Feature | Java SDK | Places Plugin |
---|---|---|
Foward geocoding | ||
Reverse geocoding | ||
Access to raw Geocoding API response | ||
Drop-in search bar UI | ||
Built-in dropdown list of search results | ||
Place picker | ||
View results in a separate activity or fragment |
Install the Places Plugin
To start developing an application using the Places Plugin, you'll need to add the appropriate dependencies inside your build.gradle
file. This dependency includes the Maps SDK for Android and the Mapbox Java SDK's Geocoding API. You can find all dependencies given below on MavenCentral.
Add the dependency
-
Open Android Studio.
-
Open up your application's
build.gradle
. -
Make sure that your project's
minSdkVersion
is API 14 or higher. -
Under dependencies, add a new build rule for the latest
mapbox-android-plugin-places-v9
.repositories {
mavenCentral()
}
dependencies {
implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-places-v9:0.12.0'
} -
Declare Java 8 support in the
android { }
block of the application'sbuild.gradle
fileandroid {
// Configure only for each module that uses Java 8
// language features (either in its source code or
// through dependencies).
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
// For Kotlin projects
kotlinOptions {
jvmTarget = "1.8"
}
} -
Click the
Sync Project with Gradle Files
link near in the upper right hand corner of Android Studio.
Add Autocomplete
The Autocomplete UI component offers users the ability to search addresses or places and receive information including the latitude and longitude, phone number, categories, and plenty of other information. As the user types, place predictions display at once to the user along with any searched places.
There are two ways to use the Autocomplete service:
- Launch as an activity for result
- Display as a fragment
Launch as an activity for result
If a separate search activity makes sense in your application, you can use the PlaceAutocomplete
class to build your intent and then launch the included search activity using startActivityForResult
. Using this intent builder, you pass in the required access token along with a placeOptions
object.
Intent intent = new PlaceAutocomplete.IntentBuilder()
.accessToken(MAPBOX_ACCESS_TOKEN)
.placeOptions(placeOptions)
.build(this);
startActivityForResult(intent, REQUEST_CODE_AUTOCOMPLETE);
val intent = PlaceAutocomplete.IntentBuilder()
.accessToken(MAPBOX_ACCESS_TOKEN)
.placeOptions(placeOptions)
.build(this)
startActivityForResult(intent, REQUEST_CODE_AUTOCOMPLETE)
When the user finishes selecting a place inside the autocomplete activity, finish()
will be called. To receive the CarmenFeature
which describes the place the user selected, override the onActivityResult
method, check that the request and result codes are correct, and use the PlaceAutocomplete
static method getPlace
passing in the intent.
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (resultCode == Activity.RESULT_OK && requestCode == REQUEST_CODE_AUTOCOMPLETE) {
CarmenFeature feature = PlaceAutocomplete.getPlace(data);
Toast.makeText(this, feature.text(), Toast.LENGTH_LONG).show();
}
}
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent) {
super.onActivityResult(requestCode, resultCode, data)
if (resultCode == Activity.RESULT_OK && requestCode == REQUEST_CODE_AUTOCOMPLETE) {
val feature = PlaceAutocomplete.getPlace(data)
Toast.makeText(this, feature.text(), Toast.LENGTH_LONG).show()
}
}
Display as a fragment
If you need more control over the UI and would like to place the Autocomplete component inside an activity container, you can use the provided PlaceAutocompleteFragment
to include the search UI. This class extends the Support Library Fragment implementation, which means the SupportFragmentManager
should be used. In the code snippet provided below, it checks to make sure no more than one autocompleteFragment
instance is always being used. If there isn't an instance of autocompleteFragment
, it creates a new one and adds it to the container. If there is, it displays the autocompleteFragment
to the user using the TAG
.
PlaceAutocompleteFragment autocompleteFragment;
if (savedInstanceState == null) {
autocompleteFragment = PlaceAutocompleteFragment.newInstance("<access_token>");
final FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.add(R.id.fragment_container, autocompleteFragment,TAG);
transaction.commit();
} else {
autocompleteFragment = (PlaceAutocompleteFragment)
getSupportFragmentManager().findFragmentByTag(TAG);
}
val autocompleteFragment: PlaceAutocompleteFragment
if (savedInstanceState == null) {
autocompleteFragment = PlaceAutocompleteFragment.newInstance("<access_token>")
val transaction = supportFragmentManager.beginTransaction()
transaction.add(R.id.fragment_container, autocompleteFragment, TAG)
transaction.commit()
} else {
autocompleteFragment = supportFragmentManager.findFragmentByTag(TAG) as PlaceAutocompleteFragment
}
To listen for when the user selects a place or cancels out of the autocompleteFragment
, you can set a PlaceSelectionListener
on the fragment and the callback will be invoked when the event occurs.
autocompleteFragment.setOnPlaceSelectedListener(new PlaceSelectionListener() {
@Override
public void onPlaceSelected(CarmenFeature carmenFeature) {
Toast.makeText(AutocompleteFragmentActivity.this,
carmenFeature.text(), Toast.LENGTH_LONG).show();
finish();
}
@Override
public void onCancel() {
finish();
}
});
autocompleteFragment.setOnPlaceSelectedListener(object : PlaceSelectionListener {
override fun onPlaceSelected(carmenFeature: CarmenFeature) {
Toast.makeText(this@AutocompleteFragmentActivity,
carmenFeature.text(), Toast.LENGTH_LONG).show()
finish()
}
override fun onCancel() {
finish()
}
})
Customize Autocomplete results
Create a PlaceOptions
object to customize the Autocomplete search results and the UI component.
Once your PlaceOptions
object's created you'll need to pass it in either by using the PlaceAutocompleteFragment.newInstance(<access token>, placeOptions);
if you are using the fragment or new PlaceAutocomplete.IntentBuilder().placeOptions(placeOptions)
otherwise.
Customize search results
You can narrow the search results based on the following parameters:
API | Description |
---|---|
proximity | Bias local results based on a provided GeoJSON Point. This oftentimes increases accuracy in the returned results. |
limit | Limit the number of results returned. The default is 10. |
bbox | Limit results to a bounding box. |
geocodingTypes | Optional, use to filter the results returned inside the suggestions. |
country | Limit results to one or more countries. |
injectedPlaces | Optionally inject Carmen Features into the suggestion view so users can access points of interest quickly without typing a single character. Typical places include, the users home, work, or favorite POI. |
Customize the UI component
There are two modes to further change the Autocomplete component UI to fit your app better:
- Full screen mode: will place all the search history, results, and injected places into a view which has a width equal to the app width.
- Card view mode: the place search history, results, and injected places in an Android Support Library CardView.
API | Description |
---|---|
backgroundColor | Set the autocomplete's layout background color. |
toolbarColor | The autocomplete's layout toolbar color. This only applies if the mode is full screen. |