- MapboxGeocoder
- Parameters
- Examples
- addTo
- clear
- query
- setInput
- setProximity
- getProximity
- setRenderFunction
- getRenderFunction
- setLanguage
- getLanguage
- getZoom
- setZoom
- getFlyTo
- setFlyTo
- getPlaceholder
- setPlaceholder
- getBbox
- setBbox
- getCountries
- setCountries
- getTypes
- setTypes
- getMinLength
- setMinLength
- getLimit
- setLimit
- getFilter
- setFilter
- setOrigin
- getOrigin
- on
- off
A geocoder component using the Mapbox Geocoding API
optionsObjectoptions.accessTokenString Required.options.originString Use to set a custom API origin. (optional, defaulthttps://api.mapbox.com)options.mapboxglObject? A mapbox-gl instance to use when creating Markers. Required ifoptions.markeristrue.options.zoomNumber On geocoded result what zoom level should the map animate to when abboxisn't found in the response. If abboxis found the map will fit to thebbox. (optional, default16)options.flyTo(Boolean | Object) Iffalse, animating the map to a selected result is disabled. Iftrue, animating the map will use the default animation parameters. If an object, it will be passed asoptionsto the mapflyToorfitBoundsmethod providing control over the animation of the transition. (optional, defaulttrue)options.placeholderString Override the default placeholder attribute value. (optional, defaultSearch)options.proximityObject? a proximity argument: this is a geographical point given as an object withlatitudeandlongitudeproperties. Search results closer to this point will be given higher priority.options.trackProximityBoolean Iftrue, the geocoder proximity will automatically update based on the map view. (optional, defaulttrue)options.collapsedBoolean Iftrue, the geocoder control will collapse until hovered or in focus. (optional, defaultfalse)options.clearAndBlurOnEscBoolean Iftrue, the geocoder control will clear it's contents and blur when user presses the escape key. (optional, defaultfalse)options.clearOnBlurBoolean Iftrue, the geocoder control will clear its value when the input blurs. (optional, defaultfalse)options.bboxArray? a bounding box argument: this is a bounding box given as an array in the format[minX, minY, maxX, maxY]. Search results will be limited to the bounding box.options.countriesstring? a comma separated list of country codes to limit results to specified country or countries.options.typesstring? a comma seperated list of types that filter results to match those specified. See https://docs.mapbox.com/api/search/#data-types for available types. If reverseGeocode is enabled, you should specify one type. If you configure more than one type, the first type will be used.options.minLengthNumber Minimum number of characters to enter before results are shown. (optional, default2)options.limitNumber Maximum number of results to show. (optional, default5)options.languagestring? Specify the language to use for response text and query result weighting. Options are IETF language tags comprised of a mandatory ISO 639-1 language code and optionally one or more IETF subtags for country or script. More than one value can also be specified, separated by commas. Defaults to the browser's language settings.options.filterFunction? A function which accepts a Feature in the Carmen GeoJSON format to filter out results from the Geocoding API response before they are included in the suggestions list. Returntrueto keep the item,falseotherwise.options.localGeocoderFunction? A function accepting the query string which performs local geocoding to supplement results from the Mapbox Geocoding API. Expected to return an Array of GeoJSON Features in the Carmen GeoJSON format.options.reverseMode(distance | score) Set the factors that are used to sort nearby results. (optional, defaultdistance)options.reverseGeocodeboolean Iftrue, enable reverse geocoding mode. In reverse geocoding, search input is expected to be coordinates in the formlat, lon, with suggestions being the reverse geocodes. (optional, defaultfalse)options.enableEventLoggingBoolean Allow Mapbox to collect anonymous usage statistics from the plugin. (optional, defaulttrue)options.marker(Boolean | Object) Iftrue, a Marker will be added to the map at the location of the user-selected result using a default set of Marker options. If the value is an object, the marker will be constructed using these options. Iffalse, no marker will be added to the map. Requires thatoptions.mapboxglalso be set. (optional, defaulttrue)options.renderFunction? A function that specifies how the results should be rendered in the dropdown menu. This function should accepts a single Carmen GeoJSON object as input and return a string. Any HTML in the returned string will be rendered.options.getItemValueFunction? A function that specifies how the selected result should be rendered in the search bar. This function should accept a single Carmen GeoJSON object as input and return a string. HTML tags in the output string will not be rendered. Defaults to(item) => item.place_name.options.modeString A string specifying the geocoding endpoint to query. Options aremapbox.placesandmapbox.places-permanent. Themapbox.places-permanentmode requires an enterprise license for permanent geocodes. (optional, defaultmapbox.places)options.localGeocoderOnlyBoolean Iftrue, indicates that thelocalGeocoderresults should be the only ones returned to the user. Iffalse, indicates that thelocalGeocoderresults should be combined with those from the Mapbox API with thelocalGeocoderresults ranked higher. (optional, defaultfalse)
var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
map.addControl(geocoder);Returns MapboxGeocoder this
Add the geocoder to a container. The container can be either a mapboxgl.Map or a reference to an HTML class or id.
If the container is a mapboxgl.Map, this function will behave identically to Map.addControl(geocoder).
If the container is an HTML id or class, the geocoder will be appended to that element.
This function will throw an error if the container is not either a map or a class/id reference.
It will also throw an error if the referenced HTML element cannot be found in the document.body.
For example, if the HTML body contains the element <div id='geocoder-container'></div>, the following script will append the geocoder to #geocoder-container:
var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
geocoder.addTo('#geocoder-container');container(String | mapboxgl.Map) A reference to the container to which to add the geocoder
Clear and then focus the input.
evEvent? the event that triggered the clear, if available
Set & query the input
searchInputstring location name or other search input
Returns MapboxGeocoder this
Set input
searchInputstring location name or other search input
Returns MapboxGeocoder this
Set proximity
proximityObject The newoptions.proximityvalue. This is a geographical point given as an object withlatitudeandlongitudeproperties.
Returns MapboxGeocoder this
Get proximity
Returns Object The geocoder proximity
Set the render function used in the results dropdown
fnFunction The function to use as a render function. This function accepts a single Carmen GeoJSON object as input and returns a string.
Returns MapboxGeocoder this
Get the function used to render the results dropdown
Returns Function the render function
Get the language to use in UI elements and when making search requests
Look first at the explicitly set options otherwise use the browser's language settings
languageString Specify the language to use for response text and query result weighting. Options are IETF language tags comprised of a mandatory ISO 639-1 language code and optionally one or more IETF subtags for country or script. More than one value can also be specified, separated by commas.
Returns MapboxGeocoder this
Get the language to use in UI elements and when making search requests
Returns String The language(s) used by the plugin, if any
Get the zoom level the map will move to when there is no bounding box on the selected result
Returns Number the map zoom
Set the zoom level
zoomNumber The zoom level that the map should animate to when abboxisn't found in the response. If abboxis found the map will fit to thebbox.
Returns MapboxGeocoder this
Get the parameters used to fly to the selected response, if any
Returns (Boolean | Object) The flyTo option
Set the flyTo options
flyTo(Boolean | Object) If false, animating the map to a selected result is disabled. If true, animating the map will use the default animation parameters. If an object, it will be passed asoptionsto the mapflyToorfitBoundsmethod providing control over the animation of the transition.
Get the value of the placeholder string
Returns String The input element's placeholder value
Set the value of the input element's placeholder
placeholderString the text to use as the input element's placeholder
Returns MapboxGeocoder this
Get the bounding box used by the plugin
Returns Array<Number> the bounding box, if any
Set the bounding box to limit search results to
Returns MapboxGeocoder this
Get a list of the countries to limit search results to
Returns String a comma separated list of countries to limit to, if any
Set the countries to limit search results to
countriesString a comma separated list of countries to limit to
Returns MapboxGeocoder this
Get a list of the types to limit search results to
Returns String a comma separated list of types to limit to
Set the types to limit search results to
typescountriesString a comma separated list of types to limit to
Returns MapboxGeocoder this
Get the minimum number of characters typed to trigger results used in the plugin
Returns Number The minimum length in characters before a search is triggered
Set the minimum number of characters typed to trigger results used by the plugin
minLengthNumber the minimum length in characters
Returns MapboxGeocoder this
Get the limit value for the number of results to display used by the plugin
Returns Number The limit value for the number of results to display used by the plugin
Set the limit value for the number of results to display used by the plugin
limitNumber the number of search results to return
Returns MapboxGeocoder
Get the filter function used by the plugin
Returns Function the filter function
Set the filter function used by the plugin.
filterFunction A function which accepts a Feature in the Carmen GeoJSON format to filter out results from the Geocoding API response before they are included in the suggestions list. Returntrueto keep the item,falseotherwise.
Returns MapboxGeocoder this
Set the geocoding endpoint used by the plugin.
originFunction A function which accepts an HTTPS URL to specify the endpoint to query results from.
Returns MapboxGeocoder this
Get the geocoding endpoint the plugin is currently set to
Returns Function the endpoint URL
Subscribe to events that happen within the plugin.
typeString name of event. Available events and the data passed into their respective event objects are:- clearEmitted when the input is cleared- loading
{ query } Emitted when the geocoder is looking up a query - results
{ results } Fired when the geocoder returns a response - result
{ result } Fired when input is set - error
{ error } Error as string
- loading
fnFunction function that's called when the event is emitted.
Returns MapboxGeocoder this;
Remove an event
Returns MapboxGeocoder this