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.


npm install --save @maptiler/sdk @maptiler/geocoding-control

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { GeocodingControl } from '@maptiler/geocoding-control/maptilersdk';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
  container: 'map', // container id
  style: MapStyle.STREETS.DARK,
  center: [-73.986644,40.756140], // starting position [lng, lat]
  zoom: 14, // starting zoom
});
//set geocoding control prioritize results near Time Square in New York
const gc = new GeocodingControl({
  proximity: [
    {
      type: "fixed",
      coordinates: [-73.986644, 40.75614],
    },
  ]
});
map.addControl(gc, 'top-left');

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>MapTiler Geocoding control filter by proximity</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MapTiler Geocoding control filter by proximity</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <script
    src="https://cdn.maptiler.com/maptiler-geocoding-control/v3.0.0/maptilersdk.umd.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map', // container id
      style: maptilersdk.MapStyle.STREETS.DARK,
      center: [-73.986644, 40.756140], // starting position [lng, lat]
      zoom: 14, // starting zoom
    });
    //set geocoding control prioritize results near Time Square in New York
    const gc = new maptilerGeocoder.GeocodingControl({
      proximity: [
        {
          type: "fixed",
          coordinates: [-73.986644, 40.75614],
        },
      ]
    });
    map.addControl(gc, 'top-left');
  </script>
</body>

</html>

Learn more

Check the MapTiler Geocoding control API reference for all search options. For example specifying the language of the results, etc.

Do you want to see how the geocoder component is made? Check the MapTiler Geocoding control repository. You can also use it as inspiration to create your component.

Discover the process of integrating the geocoding control feature into your React (Geocoding React component repository) 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).