> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/llms.txt) # 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](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/), or get started with [iOS](https://docs.mapbox.com/ios/search/guides/install/) and [Android](https://docs.mapbox.com/android/search/guides/get-started/). **Web** ```javascript // Example from: https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/ map.addControl( new MapboxGeocoder({ accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', mapboxgl: mapboxgl }) ); ``` **iOS** ```swift // 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) { } } ``` **Android** ```java // 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 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 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](https://docs.mapbox.com/api/search/) products including the Search Box API and the Geocoding API. [ ![](https://docs.mapbox.com/help/assets/ideal-img/how-mapbox-works--configure-interactions--search-api-playground.c6fe796.480.png) Test the Search Box API, experiment with query parameters, and view the results. ](https://docs.mapbox.com/playground/search-box/) [ ![](https://docs.mapbox.com/help/assets/ideal-img/how-mapbox-works--configure-interactions--geocoding-playground.1a730c4.480.png) Use this Developer API Sandbox to test forward and reverse geocoding queries, experiment with query parameters, and view the results. ](https://docs.mapbox.com/playground/geocoding/) ## Create markers and popups ### Markers and annotations [Markers](https://docs.mapbox.com/help/help/glossary/marker/) are one of the most popular ways to highlight and visualize locations or data on a map on web. ![Markers on a standard style map](https://docs.mapbox.com/help/assets/ideal-img/how-mapbox-works--configure-interactions--markers-mobile.de80041.480.png) Mobile devices do *not* contain markers. You can mimic the same functionality on [iOS](https://docs.mapbox.com/ios/maps/guides/markers-and-annotations/) and [Android](https://docs.mapbox.com/android/maps/guides/annotations/) 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 JSiOSAndroid
### Show information dynamically with popups Once you have data showing up on your map, you can use a [Popup](https://docs.mapbox.com/mapbox-gl-js/api/markers/#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. > **Related content (tutorial): [Display a popup on hover](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/)** > > When a user hovers over a custom marker, show a Popup containing more information. > **Related content (tutorial): [Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/)** > > When a user clicks a circle, show a Popup containing more information. #### 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: > **Related content (guide): [Android User Interaction Guide](https://docs.mapbox.com/android/maps/guides/user-interaction/)** > > Learn how user interaction works in the Mapbox Maps SDK for Android. > **Related content (guide): [iOS User Interaction Guide](https://docs.mapbox.com/ios/maps/guides/user-interaction/)** > > Learn how user interaction works in the Mapbox Maps SDK for iOS. ## 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](https://docs.mapbox.com/mapbox-gl-js/api/markers/#fullscreencontrol) right out of the box including a scale element and on-screen zoom and tilt controls. > **Related content (tutorial): [Display zoom and rotation controls](https://docs.mapbox.com/mapbox-gl-js/example/navigation/)** > > Add zoom and rotation controls to the map. > **Related content (tutorial): [Display map scale](https://docs.mapbox.com/mapbox-gl-js/example/navigation-scale/)** > > Add a scale to the map. ## Use camera movement and animations Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/how-mapbox-works--configure-interactions--camera-demo-compressed-c01330fbad2aa7335e9418a4e8a83565.mp4). 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](https://docs.mapbox.com/mapbox-gl-js/example/free-camera-point/) - [Fly to a location after search: Use a custom camera animation with a geocoder](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder-with-flyto/) Mapbox's mobile SDKs also give you the ability to display the user's location: - [Android: Display the user's location](https://docs.mapbox.com/android/maps/examples/location-tracking/) - [iOS: Display the user's location](https://docs.mapbox.com/ios/maps/examples/tracking-mode/) ## Dynamically cluster data Are you working with [GeoJSON](https://docs.mapbox.com/help/glossary/geojson/) [point](https://docs.mapbox.com/help/glossary/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. [ ![](https://docs.mapbox.com/help/assets/ideal-img/how-mapbox-works--configure-interactions--simple-clusters.5224184.480.png) Example: Create and style clusters Use Mapbox GL JS' built-in functions to visualize points as clusters. ](https://docs.mapbox.com/mapbox-gl-js/example/cluster/) [ ![](https://docs.mapbox.com/help/assets/ideal-img/how-mapbox-works--add-markers--cluster-html.6178e63.480.jpg) Example: Display HTML clusters with custom properties An example of a circle layer combined with HTML markers. ](https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/)