Geocoding search results closer to specific point

To enhance search results, the geocoding control prioritizes locations that are closer to a specific geographical point. By utilizing the proximity options in the control constructor, results near the provided point are ranked higher.

In the given example, we aim to prioritize results that are near Times Square in New York (e.g., “Park Avenue”). We are using a define a geographical point by its latitude and longitude [lng, lat], for this you must use the fixed option.

proximity: [
  {
    type: "fixed",
    coordinates: [lng, lat],
  },
]

You can also use the map center coordinates instead of a specific coordinate. For example:

proximity: [
  {
    "type":"map-center",
    "minZoom":12
  }
]

For a complete list of geocoding control options, refer to the Geocoding control’s reference documentation.

Learn more

Discover the process of integrating the geocoding control feature into your React (Geocoding React component) or Svelte (Geocoding Svelte component) applications. Additionally, you have the option to use the VanillaJS version to customize it for any of your applications.

Are you currently using a different map library? No worries! Learn how to incorporate the geocoding control functionality with Leaflet (Leaflet Geocoding control), OpenLayers (OpenLayers Geocoding control), or MapLibre GL JS (MapLibre GL JS Geocoding control).

Related examples

Geocoding limit results by area

Example

Limit the search results of the geocoding control to the specific area (bounding box).

Geocoding search for POIs near the user's location

Example

Geocoding control search results filter by type and given higher priority for the results near the user's location.

Geocoding search results to specified country(ies)

Example

Geocoding control limit search results to specified country(ies).

Geocoding API

Example

This tutorial shows how to search places using the MapTiler Geocoding API.