Configure interactions
Turn your maps into powerful interactive experiences.
Make your map interactive
Mapbox has many options available to turn your maps into powerful interactive experiences across all platforms. Here are some of the most popular ways to add interactivity to maps with Mapbox.
Add search
Need to interactively search for locations in your product? Or convert addresses into geographic coordinates? Try adding search or geocoding into your app.
To add search follow along with GL JS, or get started with iOS and Android.
// Example from: https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
})
);
// Example from: https://docs.mapbox.com/ios/search/guides/install/
import UIKit
import MapboxSearch
import MapboxSearchUI
class ViewController: UIViewController {
let searchController = MapboxSearchController()
override func viewDidLoad() {
super.viewDidLoad()
searchController.delegate = self
let panelController = MapboxPanelController(rootViewController: searchController)
addChild(panelController)
}
}
extension ViewController: SearchControllerDelegate {
func searchResultSelected(_ searchResult: SearchResult) { }
func categorySearchResultsReceived(results: [SearchResult]) { }
func userFavoriteSelected(_ userFavorite: FavoriteRecord) { }
}
// Example from: https://docs.mapbox.com/android/search/examples/search/
package com.mapbox.search.sample.api;
import android.os.Bundle;
import android.util.Log;
import androidx.annotation.Nullable;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import com.mapbox.search.ResponseInfo;
import com.mapbox.search.SearchEngine;
import com.mapbox.search.SearchEngineSettings;
import com.mapbox.search.SearchOptions;
import com.mapbox.search.SearchSelectionCallback;
import com.mapbox.search.common.AsyncOperationTask;
import com.mapbox.search.result.SearchResult;
import com.mapbox.search.result.SearchSuggestion;
import com.mapbox.search.sample.R;
import java.util.List;
public class ForwardGeocodingJavaExampleActivity extends AppCompatActivity {
private SearchEngine searchEngine;
private AsyncOperationTask searchRequestTask;
private final SearchSelectionCallback searchCallback = new SearchSelectionCallback() {
@Override
public void onSuggestions(@NonNull List<SearchSuggestion> suggestions, @NonNull ResponseInfo responseInfo) {
if (suggestions.isEmpty()) {
Log.i("SearchApiExample", "No suggestions found");
} else {
Log.i("SearchApiExample", "Search suggestions: " + suggestions + "
Selecting first...");
searchRequestTask = searchEngine.select(suggestions.get(0), this);
}
}
@Override
public void onResult(@NonNull SearchSuggestion suggestion, @NonNull SearchResult result, @NonNull ResponseInfo info) {
Log.i("SearchApiExample", "Search result: " + result);
}
@Override
public void onResults(@NonNull SearchSuggestion suggestion, @NonNull List<SearchResult> results, @NonNull ResponseInfo responseInfo) {
Log.i("SearchApiExample", "Category search results: " + results);
}
@Override
public void onError(@NonNull Exception e) {
Log.i("SearchApiExample", "Search error: ", e);
}
};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
searchEngine = SearchEngine.createSearchEngineWithBuiltInDataProviders(
new SearchEngineSettings(getString(R.string.mapbox_access_token))
);
final SearchOptions options = new SearchOptions.Builder()
.limit(5)
.build();
searchRequestTask = searchEngine.search("Paris Eiffel Tower", options, searchCallback);
}
@Override
protected void onDestroy() {
searchRequestTask.cancel();
super.onDestroy();
}
}
Learn more about our Search products including the Search Box API and the Geocoding API.
Create markers and popups
Markers and annotations
Markers are one of the most popular ways to highlight and visualize locations or data on a map on web.
Mobile devices do not contain markers. You can mimic the same functionality on iOS and Android in two different ways, either with a symbol layer if you want to mimic a default marker or a point annotation if you want to use more complex features.
If you want to learn more, start by exploring one of these tutorials.
| Mapbox GL JS | iOS | Android |
|---|---|---|
Show information dynamically with popups
Once you have data showing up on your map, you can use a Popup to show relevant and contextual information when needed.
Popups in GL JS
On web you can explore different types of interactions, maybe you want a popup on hover or on click.
User Interaction Guides for Mobile
For mobile, it’s important to pair the different types of content with the right gestures - we’ve put together guides on user interaction for both Android and iOS:
Learn how user interaction works in the Mapbox Maps SDK for Android.
UI Controls in GL JS
It's important to consider how your users will interact with your map. Mapbox provides some commonly used map UI controls right out of the box including a scale element and on-screen zoom and tilt controls.
Add zoom and rotation controls to the map.
Add a scale to the map.
Use camera movement and animations
Create stunning cinematic effects or smoothly transition map viewers from one place to another using the map camera. Start with GL JS by following one of these tutorials:
- Animate the camera around a point with 3D terrain
- Fly to a location after search: Use a custom camera animation with a geocoder
Mapbox’s mobile SDKs also give you the ability to display the user's location:
Dynamically cluster data
Are you working with GeoJSON point data? Sometimes there is too much data to show cleanly when zoomed out of the map, this is where clustering comes in. Clustering can intelligently group data points so that they are revealed intentionally as a user zooms into and out of the map.