Mapbox has released a faster and easier way to build custom, interactive, engaging maps. The new system significantly lowers the code required to set up interactions with POIs, labels and buildings, reducing development effort, and making the codebase more readable and less prone to bugs. It also introduces the brand new ability to build interactions with basemap features in Mapbox Standard. This new system for building interactions is already helping Polarsteps deliver personalized itineraries and travel plans.

Example: Polarsteps delivers more than just tourist sites on a map

Polarsteps has built interactions into the icons for popular attractions in their travel planning and tracking app.

“Planning a trip involves so much more than just a map,” says Clare Jones, CEO of Polarsteps. “Planning itself has many different stages - from the initial itinerary build where the map is the star to the later stages when seeing more information (like spots to visit, reviews from other users, etc.) is crucial. Travel planners on Polarsteps interact with our map in so many different ways, and the new simplified method for interactions has helped us give them more of what they need. Personalised itineraries and travel plans are a big part of great UX for our adventurers, and map interactivity helps us provide that.”

Basemap interactions now available in Mapbox Standard

In earlier versions of the Mapbox SDKs, interacting with basemap features in the Mapbox Standard 3D style was not possible. Now it is. While it’s encouraged to build interactions with labels and POIs, this feature becomes particularly powerful and unique when building interactions for the 3D buildings in Standard. Delivery drivers could see their drop-off building highlighted in the navigation app as they approach, ensuring they reach the right location. Retail loyalty members could see a retail location highlighted alongside personalized offers when they are near the building.

Example: Enhance the real estate search experience

Use interactions to highlight selected buildings and icons upon click or hover, and serve a pop-up with more listing information. Instead of clicking on tiles listed in a sidebar, homebuyers can more quickly and effectively browse listings directly on the map in their desired area and then click through to the listing information page.

A new approach saves time and resources

The previous approach to map interactions was a two-step process, requiring handling a user gesture such as a click, tap, or mouse hover, then passing the screen coordinates of the gesture into a query function to check whether features exist in that location.

mapView.gestures.onMapTap.observe {
  [weak self] context in
    let options = RenderedQueryOptions(layerIds: [ /** list layers here */ ], filter: nil)
  mapView.mapboxMap.queryRenderedFeatures(with: context.point, options) {
    switch result {
      case.success(let features):
		print("feature: \(features.first?.queriedFeature.feature.identifier) tapped at: \(context.point)")
      case.failure(let error):
        // handle error.
    }
  }
}.store(in: &cancelables)

With the new Interactions API, a single call to addInteraction() specifies the type of gesture, the map  layer to check for features, and a handler function to process the feature data and run follow-on code after the interaction.

mapboxMap.addInteraction(TapInteraction(.layer("custom-layer")) { feature, context in
  print("feature: \(feature.id) tapped at: \(context.point)")
  return true
})

When multiple interactions exist for overlapping features, the top-most feature handles the interaction first, and can be configured to stop propagation to lower features.  

Style interactions and feature states in Mapbox Studio

Mapbox Studio now includes tools to configure map interactions for individual layers as well as featuresets from imported styles. Developers can use Mapbox studio’s styling GUI to design alternate styles to be triggered by interactions such as hover, click, or double click.  Once the design for each state meets their needs, they can generate and export iOS, Android and web code snippets to add the interactions to their app.

Start building with the new interactions API

The simplified method for building map interactions is generally available in Mapbox GL JS v.3.11 and Mobile Maps SDKs v.11.11. Documentation and examples for getting started with iOS, Android and Web are on the Mapbox Docs site. To sign-up for a Mapbox account and start using the SDKs, click here.