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
})
);
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.
Follow this guide to learn all about markers including how to add custom images, how to define your data source, and different approaches and methods to adding markers:
A detailed guide to adding markers to any Mapbox app.
Markers
is the term for Web while the equivalent concept is referred to as
Annotations
in our mobile guides.
Want to dive right in? Explore 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.