Skip to main content

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.

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 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 JSiOSAndroid

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:

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.

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:

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.

Was this page helpful?