Search features by coordinates using the geocoding control

Activate the enableReverse option during geocoding control initialization to support coordinate-based searches.

Setting this option to "always" lets you locate features using names, addresses, and coordinate pairs. For example typing 41.874836, -87.628261 in the search box will display items that match those coordinates, addresses, regions, states, etc.

Geocoding (forward geocoding and reverse geocoding) is a technique for place identification - either by name or coordinates. See the Geocoding page for more details.

^{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.LIGHT,
  geolocate: true
});

//set geocoding control search by coodinates (reverse geocoding)
const gc = new GeocodingControl({
  enableReverse: "always",
});

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 reverse geocoding</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 reverse geocoding</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.LIGHT,
      geolocate: true
    });

    //set geocoding control search by coodinates (reverse geocoding)
    const gc = new maptilerGeocoder.GeocodingControl({
      enableReverse: "always",
    });

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

Search features by coordinates using the geocoding control

main.js

index.html

style.css

Learn more

Reverse geocoding

Customize API request (geocoding control)

Geocoding API

Geocoding search results to specified country(ies)

Search features by coordinates using the geocoding control

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Learn more

Related examples

Reverse geocoding

Customize API request (geocoding control)

Geocoding API

Geocoding search results to specified country(ies)