Skip to main content

Search Box

Search Box provides a rich UI for single-box location search, allowing your users to search for addresses and points of interest by place name, address, or category.

This page includes reference documentation for the MapboxSearchBox element, a part of the Mapbox Search JS Web framework.

For installation instructions and a helpful introduction to using Search Box in your website or app, see our Web Search Box Quickstart Guide.

HTML Custom Element

MapboxSearchBox

MapboxSearchBox, also available as the element <mapbox-search-box>, is an element that lets you search for places, addresses, and landmarks using the Mapbox Search Box API.

It can control a Mapbox GL JS map to zoom to the selected result.

Additionally, MapboxSearchBox implements the IControl interface.

To use this element, you must have a Mapbox access token.

new MapboxSearchBox()

Example

const search = new MapboxSearchBox();
search.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
map.addControl(search);
<mapbox-search-box
  access-token="YOUR_MAPBOX_ACCESS_TOKEN"
  proximity="0,0"
>
</mapbox-search-box>

Instance Members

Map settings

Methods

Map binding

Events

Was this section on MapboxSearchBox helpful?

MapboxSearchBoxComponentOptions

Options to configure component-specific Search behavior

Type

Object

Properties

NameDescription

allowReverse

boolean
Allow the user to query a coordinate string (e.g. "lng,lat") to get a reverse search result.

customSearch

function (text: string): Promise<Array<SearchBoxSuggestion>>
A function accepting the query string which performs supplemental search results on top of those from the Mapbox Search Box API. Expected to return a Promise which resolves to an array of suggestions as described in the Mapbox Search Box API . Additionally, each suggestion must include a _geometry property matching the "geometry" object format specified in the retrieved Feature format.

flipCoordinates

boolean
If true, the coordinates in the query string are expected to be (lat,lng) instead of (lng,lat).

flyTo

(mapboxgl.FlyToOptions | boolean)
If false , animating the map to a selected result is disabled. If true (default), animating the map will use the default animation parameters. If an object, it will be passed as options to the map flyTo method.
Was this section on MapboxSearchBoxComponentOptions helpful?
Was this page helpful?