Customize API request from geocoding control

Use the adjustUrl option when initializing the geocoding control to modify the geocoding URL prior to fetching. This options supersedes the deprecated adjustUrlQuery option. Thanks to this capability you can have full control over how the search control behaves.

In this example, we will use the option to customize the URL specifically for coordinate-based searches (reverse geocoding) to display only results of the address type and limit the output to 3 entries. For other search types, it returns all kinds of elements. For instance, entering 41.394442, 2.156936 in the search box, it will return a list of 3 addresses.

^{Click on the map or type a coordinate in the search box to search for addresses}


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,
  geolocate: true
});

//set geocoding control enable reverse and adjustUrl for reverse geocoding
const gc = new GeocodingControl({
  enableReverse: "always",
  adjustUrl(url) {
    // for reverse geocoding use only address type
    if (/\/\d+\.?\d*%2C\d+.?\d*.json$/.test(url.pathname)) {
      url.searchParams.set("types", "address");
      url.searchParams.set("limit", "3");
    }
  },
});

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 adjustUrl</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 adjustUrl</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,
      geolocate: true
    });

    //set geocoding control enable reverse and adjustUrl for reverse geocoding
    const gc = new maptilerGeocoder.GeocodingControl({
      enableReverse: "always",
      adjustUrl(url) {
        // for reverse geocoding use only address type
        if (/\/\d+\.?\d*%2C\d+.?\d*.json$/.test(url.pathname)) {
          url.searchParams.set("types", "address");
          url.searchParams.set("limit", "3");
        }
      },
    });

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

Customize API request from geocoding control

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

Reverse geocoding uses the user’s location

Customize API request from geocoding control

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

Reverse geocoding uses the user’s location