Geocoding limit results by area (bounding box)

Restrict the search results of the geocoding control to the specific area (bounding box). Use the bbox options in the control constructor to filter the results specifically within this defined area. The Bounding box is represented as an array, following the format [minX, minY, maxX, maxY]. For a comprehensive list of geocoding control options, refer to the Geocoding control’s reference documentation. To illustrate, let’s consider an example where we limit the search results to the Paris area.


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 bbox = [2.040051,48.736055,2.641553,49.017847];

const map = new Map({
  container: 'map', // container id
  style: MapStyle.STREETS,
  bounds: bbox
});

//set geocoding control filter search results to the Paris area
const gc = new GeocodingControl({
  bbox: bbox
});

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 bbox</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 bbox</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 bbox = [2.040051, 48.736055, 2.641553, 49.017847];

    const map = new maptilersdk.Map({
      container: 'map', // container id
      style: maptilersdk.MapStyle.STREETS,
      bounds: bbox
    });

    //set geocoding control filter search results to the Paris area
    const gc = new maptilerGeocoder.GeocodingControl({
      bbox: bbox
    });

    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).

Geocoding limit results by area (bounding box)

main.js

index.html

style.css

Learn more

Geocoding API

Geocoding limit results by a drawn area

Geocoding search results by proximity to a specific point

Geocoding search results to specified country(ies)

Geocoding limit results by area (bounding box)

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Learn more

Related examples

Geocoding API

Geocoding limit results by a drawn area

Geocoding search results by proximity to a specific point

Geocoding search results to specified country(ies)