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 class, 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.

Class

MapboxSearchBox

MapboxSearchBox is a class that lets you search for places, addresses, and landmarks using the Mapbox Search Box API.

Instantiating it produces a DOM element you can append anywhere in your document. You can also pass it to a Mapbox GL JS map via map.addControl() to zoom to selected results; MapboxSearchBox implements the IControl interface.

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

new MapboxSearchBox()

Example

// Example using a Mapbox GL JS Map
const map = new mapboxgl.Map({
  accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
  container: 'map',
  center: [-74.5, 40],
  zoom: 9
});

const searchBox = new MapboxSearchBox();
searchBox.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
map.addControl(searchBox);
// Example using as a standalone search
const searchBox = new MapboxSearchBox();
searchBox.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
searchBox.options = {
   language: 'fr',
}

// append to the DOM - (adjust as necessary for your document)
document.querySelector('div').appendChild(searchBox);

Instance Members

Map settings

Methods

Map binding

Events

Was this section on MapboxSearchBox helpful?

Options and Type Definitions

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?