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.

In this example, we use the 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 install --save @maptiler/sdk @maptiler/geocoding-control @mapbox/mapbox-gl-draw

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>MapTiler Geocoding limit results by a drawn area</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%;
}

.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;
}

<!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 limit results by a drawn area</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>
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
  <script
    src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.2/mapbox-gl-draw.js'></script>
  <link rel='stylesheet'
    href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.2/mapbox-gl-draw.css'
    type='text/css' />
  <style>
    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;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script type="module">
    import DrawRectangle from "https://docs.maptiler.com/sdk-js/examples/geocoding-filter-draw-bbox/draw-rectangle-restrict-area.js";

    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

    const bbox = [-0.499878, 51.268789, 0.304871, 51.710863];

    const map = new maptilersdk.Map({
      container: 'map', // container id
      style: maptilersdk.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 maptilerGeocoder.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");
      }
    });
  </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).