---
title: "Geocoding limit results by a drawn area | Geocoding | JavaScript maps SDK"
description: "Limit geocoding search results to a drawn polygon bounding box."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Geocoding limit results by a drawn area
To ensure that search results are limited to the specific area drawn on the map, utilize the geocode control’s `bbox` (bounding box) feature. By drawing a polygon on the map, you can filter the search results to only include data within the bounds of the polygon. For a comprehensive list of geocoding control options, refer to the [Geocoding control’s reference documentation](https://docs.maptiler.com/sdk-js/modules/geocoding/api/api-reference/types/MaptilerGeocoderOptions/).
In this example, we use the [mapbox-gl-draw-rectangle-restrict-area](https://github.com/dqunbp/mapbox-gl-draw-rectangle-restrict-area) plugin to draw rectangles on the map.
Click outside the rectangle when you draw the final vertex to complete the polygon.
### NPM module setup
```bash
npm install --save @maptiler/sdk @maptiler/geocoding-control @mapbox/mapbox-gl-draw
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { GeocodingControl } from '@maptiler/geocoding-control/maptilersdk';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import DrawRectangle from "https://docs.maptiler.com/sdk-js/examples/geocoding-filter-draw-bbox/draw-rectangle-restrict-area.js";
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const bbox = [-0.499878,51.268789,0.304871,51.710863];
const map = new Map({
container: 'map', // container id
style: MapStyle.STREETS.LIGHT,
bounds: bbox,
fitBoundsOptions: {
padding: {top: 25, bottom:25, left: 25, right: 25}
}
});
const draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
},
modes: Object.assign(MapboxDraw.modes, {
draw_rectangle: DrawRectangle,
}),
});
map.addControl(draw, 'top-right');
map.on('draw.create', updateFilterArea);
map.on('draw.delete', deleteFilterArea);
map.on('draw.update', updateFilterArea);
//set geocoding control filter search results to the Paris area
const gc = new GeocodingControl({
bbox: bbox
});
map.addControl(gc, 'top-left');
function updateFilterArea(e) {
const data = draw.getAll();
const drawBbox = turf.bbox(data);
gc.setOptions({bbox: drawBbox});
}
function deleteFilterArea(e) {
gc.setOptions({bbox: null});
}
//initial load London area polygon.
map.on('load', function() {
const feature = turf.bboxPolygon(bbox);
draw.add(feature);
});
map.on('draw.modechange', function (e) {
if (e.mode === "draw_polygon") {
draw.deleteAll();
draw.changeMode("draw_rectangle");
}
});
```
#### index.html
```html
MapTiler Geocoding limit results by a drawn area
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.maplibregl-ctrl-top-right .mapboxgl-ctrl {
float: right;
margin: 10px 10px 0 0;
}
.mapboxgl-ctrl {
clear: both;
pointer-events: auto;
transform: translate(0);
}
.mapboxgl-ctrl-group {
width: fit-content;
}
.mapboxgl-ctrl-group button {
background-color: transparent;
border: 0;
box-sizing: border-box;
cursor: pointer;
display: block;
outline: none;
overflow: hidden;
padding: 0;
}
```
### Basic JavaScript setup
```html
MapTiler Geocoding limit results by a drawn area
```
## Learn more
Check the [MapTiler Geocoding control API reference](https://docs.maptiler.com/sdk-js/modules/geocoding/api/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](https://github.com/maptiler/maptiler-geocoding-control). 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](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/react/)) or **Svelte** ([Geocoding Svelte component](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/svelte/)) applications. Additionally, you have the option to use the [VanillaJS version](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/vanilla-js/) 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](https://docs.maptiler.com/leaflet/examples/geocoding-control)), **OpenLayers** ([OpenLayers Geocoding control](https://docs.maptiler.com/openlayers/examples/geocoding-control/)), or **MapLibre GL JS** ([MapLibre GL JS Geocoding control](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/maplibre-gl-js/)).
## Related examples
### [Geocoding API](https://docs.maptiler.com/sdk-js/examples/geocoding/)
Tutorials
Search for places using the MapTiler Geocoding API.
### [Geocoding limit results by area](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-bbox/)
Examples
Limit geocoding search results to a specific bounding box area.
### [Geocoding search results by proximity to a specific point](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-proximity/)
Examples
Rank geocoding search results higher based on proximity.
### [Geocoding search results to specified country(ies)](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-country/)
Examples
Limit geocoding control search results to specific countries.